@wordpress/edit-site 6.35.2-next.dc3f6d3c1.0 → 6.36.1-next.6deb34194.0

package/src/components/block-editor/use-site-editor-settings.js

@@ -19,21 +19,17 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
-	const previousLocation = usePrevious( location );
+	const previousCanvas = usePrevious( location.query.canvas );
 	const history = useHistory();
 	const goBack = useMemo( () => {
 		const isFocusMode =
 			location.query.focusMode ||
 			( location?.params?.postId &&
 				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
-		const didComeFromEditorCanvas =
-			previousLocation?.query.canvas === 'edit';
+		const didComeFromEditorCanvas = previousCanvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;
-		// `previousLocation` changes when the component updates for any reason, not
-		// just when location changes. Until this is fixed we can't add it to deps. See
-		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
-	}, [ location, history ] );
+	}, [ location, history, previousCanvas ] );
 	return goBack;
 }
 

package/src/components/page-templates/fields.js

@@ -100,15 +100,19 @@ export const previewField = {
 export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',
-	render: function RenderDescription( { item } ) {
-		const defaultTemplateTypes = useAllDefaultTemplateTypes();
-		const defaultTemplateType = defaultTemplateTypes.find(
-			( type ) => type.slug === item.slug
-		);
-		return item.description
-			? decodeEntities( item.description )
-			: defaultTemplateType?.description;
-	},
+	render: window?.__experimentalTemplateActivate
+		? function RenderDescription( { item } ) {
+				const defaultTemplateTypes = useAllDefaultTemplateTypes();
+				const defaultTemplateType = defaultTemplateTypes.find(
+					( type ) => type.slug === item.slug
+				);
+				return item.description
+					? decodeEntities( item.description )
+					: defaultTemplateType?.description;
+		  }
+		: ( { item } ) => {
+				return item.description && decodeEntities( item.description );
+		  },
 	enableSorting: false,
 	enableGlobalSearch: true,
 };

package/src/components/page-templates/index-legacy.js

@@ -0,0 +1,166 @@
+/**
+ * WordPress dependencies
+ */
+import { Page } from '@wordpress/admin-ui';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useCallback } from '@wordpress/element';
+import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
+import { useEvent } from '@wordpress/compose';
+import { useView } from '@wordpress/views';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AddNewTemplate from '../add-new-template-legacy';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
+import { authorField, descriptionField, previewField } from './fields';
+import { defaultLayouts, getDefaultView } from './view-utils';
+
+const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
+
+export default function PageTemplates() {
+	const { path, query } = useLocation();
+	const { activeView = 'active', postId } = query;
+	const [ selection, setSelection ] = useState( [ postId ] );
+
+	const defaultView = useMemo( () => {
+		return getDefaultView( activeView );
+	}, [ activeView ] );
+	const { view, updateView, isModified, resetToDefault } = useView( {
+		kind: 'postType',
+		name: TEMPLATE_POST_TYPE,
+		slug: activeView,
+		defaultView,
+		queryParams: {
+			page: query.pageNumber,
+			search: query.search,
+		},
+		onChangeQueryParams: ( newQueryParams ) => {
+			history.navigate(
+				addQueryArgs( path, {
+					...query,
+					pageNumber: newQueryParams.page,
+					search: newQueryParams.search || undefined,
+				} )
+			);
+		},
+	} );
+
+	const { records, isResolving: isLoadingData } =
+		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+	const history = useHistory();
+	const onChangeSelection = useCallback(
+		( items ) => {
+			setSelection( items );
+			if ( view?.type === 'list' ) {
+				history.navigate(
+					addQueryArgs( path, {
+						postId: items.length === 1 ? items[ 0 ] : undefined,
+					} )
+				);
+			}
+		},
+		[ history, path, view?.type ]
+	);
+
+	const authors = useMemo( () => {
+		if ( ! records ) {
+			return [];
+		}
+		const authorsSet = new Set();
+		records.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ records ] );
+
+	const fields = useMemo(
+		() => [
+			previewField,
+			templateTitleField,
+			descriptionField,
+			{
+				...authorField,
+				elements: authors,
+			},
+		],
+		[ authors ]
+	);
+
+	const { data, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( records, view, fields );
+	}, [ records, view, fields ] );
+
+	const postTypeActions = usePostActions( {
+		postType: TEMPLATE_POST_TYPE,
+		context: 'list',
+	} );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
+	);
+
+	const onChangeView = useEvent( ( newView ) => {
+		if ( newView.type !== view.type ) {
+			// Retrigger the routing areas resolution.
+			history.invalidate();
+		}
+		updateView( newView );
+	} );
+
+	return (
+		<Page
+			className="edit-site-page-templates"
+			title={ __( 'Templates' ) }
+			actions={
+				<>
+					{ isModified && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ () => {
+								resetToDefault();
+								history.invalidate();
+							} }
+						>
+							{ __( 'Reset view' ) }
+						</Button>
+					) }
+					<AddNewTemplate />
+				</>
+			}
+		>
+			<DataViews
+				key={ activeView }
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ data }
+				isLoading={ isLoadingData }
+				view={ view }
+				onChangeView={ onChangeView }
+				onChangeSelection={ onChangeSelection }
+				isItemClickable={ () => true }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				} }
+				selection={ selection }
+				defaultLayouts={ defaultLayouts }
+			/>
+		</Page>
+	);
+}

package/src/components/post-list/index.js

@@ -24,6 +24,8 @@ import { useView } from '@wordpress/views';
 import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
 	LAYOUT_LIST,
 } from '../../utils/constants';
 
@@ -31,6 +33,7 @@ import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { defaultLayouts, getDefaultView } from './view-utils';
+import useNotesCount from './use-notes-count';
 
 const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -123,6 +126,17 @@ export default function PostList( { postType } ) {
 			) {
 				filters.author_exclude = filter.value;
 			}
+			if ( filter.field === 'date' ) {
+				// Skip if no value is set yet
+				if ( ! filter.value ) {
+					return;
+				}
+				if ( filter.operator === OPERATOR_BEFORE ) {
+					filters.before = filter.value;
+				} else if ( filter.operator === OPERATOR_AFTER ) {
+					filters.after = filter.value;
+				}
+			}
 		} );
 
 		// We want to provide a different default item for the status filter
@@ -149,18 +163,34 @@ export default function PostList( { postType } ) {
 		totalPages,
 	} = useEntityRecordsWithPermissions( 'postType', postType, queryArgs );
 
+	const postIds = useMemo(
+		() => records?.map( ( record ) => record.id ) ?? [],
+		[ records ]
+	);
+	const { notesCount, isLoading: isLoadingNotesCount } =
+		useNotesCount( postIds );
+
 	// The REST API sort the authors by ID, but we want to sort them by name.
 	const data = useMemo( () => {
+		let processedRecords = records;
+
 		if ( view?.sort?.field === 'author' ) {
-			return filterSortAndPaginate(
+			processedRecords = filterSortAndPaginate(
 				records,
 				{ sort: { ...view.sort } },
 				fields
 			).data;
 		}
 
-		return records;
-	}, [ records, fields, view?.sort ] );
+		if ( processedRecords ) {
+			return processedRecords.map( ( record ) => ( {
+				...record,
+				notesCount: notesCount[ record.id ] ?? 0,
+			} ) );
+		}
+
+		return processedRecords;
+	}, [ records, fields, view?.sort, notesCount ] );
 
 	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
@@ -261,7 +291,7 @@ export default function PostList( { postType } ) {
 				fields={ fields }
 				actions={ actions }
 				data={ data || EMPTY_ARRAY }
-				isLoading={ isLoadingData }
+				isLoading={ isLoadingData || isLoadingNotesCount }
 				view={ view }
 				onChangeView={ onChangeView }
 				selection={ selection }

package/src/components/post-list/use-notes-count.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Hook to fetch notes counts for a list of post IDs.
+ *
+ * Notes are stored as comments with type 'note'.
+ * This hook fetches all notes for the given posts and returns
+ * a map of post ID to notes count.
+ *
+ * @param {number[]} postIds - Array of post IDs to fetch notes for.
+ * @return {{ notesCount: Object, isResolving: boolean }} Object with notesCount map and loading state.
+ */
+export default function useNotesCount( postIds ) {
+	const { records: notes, isResolving } = useEntityRecords(
+		'root',
+		'comment',
+		{
+			post: postIds,
+			type: 'note',
+			status: 'all',
+			per_page: -1,
+			_fields: 'id,post',
+		},
+		{
+			enabled: postIds?.length > 0,
+		}
+	);
+
+	const notesCount = useMemo( () => {
+		if ( ! notes || notes.length === 0 ) {
+			return {};
+		}
+
+		const counts = {};
+		notes.forEach( ( note ) => {
+			const postId = note.post;
+			counts[ postId ] = ( counts[ postId ] || 0 ) + 1;
+		} );
+
+		return counts;
+	}, [ notes ] );
+
+	return { notesCount, isResolving };
+}

package/src/components/sidebar-global-styles/style.scss

@@ -15,14 +15,6 @@
 		overflow-y: auto;
 		padding-left: 0;
 		padding-right: 0;
-
-		.global-styles-ui-sidebar__navigator-screen {
-			padding-top: $grid-unit-15;
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-			padding-bottom: $grid-unit-15;
-			outline: none;
-		}
 	}
 	.edit-site-sidebar-button {
 		color: $gray-900;

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -29,6 +29,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 		footer: {},
 		sidebar: {},
 		uncategorized: {},
+		overlay: {},
 	};
 
 	templatePartAreas.forEach(

package/src/components/sidebar-navigation-screen-templates-browse/content-legacy.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useAddedBy } from '../page-templates/hooks';
+import { layout } from '@wordpress/icons';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const EMPTY_ARRAY = [];
+
+function TemplateDataviewItem( { template, isActive } ) {
+	const { text, icon } = useAddedBy( template.type, template.id );
+
+	return (
+		<SidebarNavigationItem
+			to={ addQueryArgs( '/template', { activeView: text } ) }
+			icon={ icon }
+			aria-current={ isActive }
+		>
+			{ text }
+		</SidebarNavigationItem>
+	);
+}
+
+export default function DataviewsTemplatesSidebarContent() {
+	const {
+		query: { activeView = 'all' },
+	} = useLocation();
+	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+		per_page: -1,
+	} );
+	const firstItemPerAuthorText = useMemo( () => {
+		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
+			const author = template.author_text;
+			if ( author && ! acc[ author ] ) {
+				acc[ author ] = template;
+			}
+			return acc;
+		}, {} );
+		return (
+			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
+			EMPTY_ARRAY
+		);
+	}, [ records ] );
+
+	return (
+		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
+			<SidebarNavigationItem
+				to="/template"
+				icon={ layout }
+				aria-current={ activeView === 'all' }
+			>
+				{ __( 'All templates' ) }
+			</SidebarNavigationItem>
+			{ firstItemPerAuthorText.map( ( template ) => {
+				return (
+					<TemplateDataviewItem
+						key={ template.author_text }
+						template={ template }
+						isActive={ activeView === template.author_text }
+					/>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import DataviewsTemplatesSidebarContent from './content';
+import DataviewsTemplatesSidebarContentLegacy from './content-legacy';
 
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	return (
@@ -17,7 +18,13 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }
 			backPath={ backPath }
-			content={ <DataviewsTemplatesSidebarContent /> }
+			content={
+				window?.__experimentalTemplateActivate ? (
+					<DataviewsTemplatesSidebarContent />
+				) : (
+					<DataviewsTemplatesSidebarContentLegacy />
+				)
+			}
 		/>
 	);
 }

package/src/components/site-editor-routes/templates.js

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import PageTemplates from '../page-templates';
+import PageTemplatesLegacy from '../page-templates/index-legacy';
 import { getDefaultView } from '../page-templates/view-utils';
 
 async function isTemplateListView( query ) {
@@ -37,7 +38,16 @@ export const templatesRoute = {
 		},
 		content( { siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? <PageTemplates /> : undefined;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
+			// Use the new template activation system if experiment is enabled,
+			// otherwise use the legacy simple template list.
+			return window?.__experimentalTemplateActivate ? (
+				<PageTemplates />
+			) : (
+				<PageTemplatesLegacy />
+			);
 		},
 		async preview( { query, siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
@@ -49,10 +59,19 @@ export const templatesRoute = {
 		},
 		mobile( { siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isBlockTheme ) {
+				return <SidebarNavigationScreenUnsupported />;
+			}
+			// Check if the template activation experiment is enabled.
+			const isTemplateActivateEnabled =
+				typeof window !== 'undefined' &&
+				window.__experimentalTemplateActivate;
+			// Use the new template activation system if experiment is enabled,
+			// otherwise use the legacy simple template list.
+			return isTemplateActivateEnabled ? (
 				<PageTemplates />
 			) : (
-				<SidebarNavigationScreenUnsupported />
+				<PageTemplatesLegacy />
 			);
 		},
 	},

package/src/components/site-hub/index.js

@@ -134,7 +134,7 @@ export const SiteHubMobile = memo(
 			const currentTheme = getCurrentTheme();
 			const settings = getSettings();
 			const supportsEditorStyles =
-				currentTheme.theme_supports[ 'editor-styles' ];
+				currentTheme?.theme_supports[ 'editor-styles' ];
 			// This is a temp solution until the has_theme_json value is available for the current theme.
 			const hasThemeJson = settings.supportsLayout;
 

package/src/utils/constants.js

@@ -55,3 +55,5 @@ export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';
 export const OPERATOR_IS_ANY = 'isAny';
 export const OPERATOR_IS_NONE = 'isNone';
+export const OPERATOR_BEFORE = 'before';
+export const OPERATOR_AFTER = 'after';