@wordpress/edit-site 6.35.2-next.dc3f6d3c1.0 → 6.36.0

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';
 
@@ -123,6 +125,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

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';