@wordpress/edit-site 6.30.1-next.836ecdcae.0 → 6.31.0

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

@@ -3,11 +3,16 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import {
+	privateApis as corePrivateApis,
+	store as coreStore,
+} 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 { useSelect } from '@wordpress/data';
+import { useEvent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,16 +27,22 @@ import {
 	LAYOUT_LIST,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import { useEditPostAction } from '../dataviews-actions';
-import { authorField, descriptionField, previewField } from './fields';
-import { useEvent } from '@wordpress/compose';
+import {
+	useEditPostAction,
+	useSetActiveTemplateAction,
+} from '../dataviews-actions';
+import {
+	authorField,
+	descriptionField,
+	previewField,
+	activeField,
+	slugField,
+} from './fields';
 
 const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
-const EMPTY_ARRAY = [];
-
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		showMedia: false,
@@ -56,31 +67,29 @@ const DEFAULT_VIEW = {
 	titleField: 'title',
 	descriptionField: 'description',
 	mediaField: 'preview',
-	fields: [ 'author' ],
+	fields: [ 'author', 'active', 'slug' ],
 	filters: [],
 	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function PageTemplates() {
 	const { path, query } = useLocation();
-	const { activeView = 'all', layout, postId } = query;
+	const { activeView = 'active', layout, postId } = query;
 	const [ selection, setSelection ] = useState( [ postId ] );
-
 	const defaultView = useMemo( () => {
 		const usedType = layout ?? DEFAULT_VIEW.type;
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			filters:
-				activeView !== 'all'
-					? [
-							{
-								field: 'author',
-								operator: 'isAny',
-								value: [ activeView ],
-							},
-					  ]
-					: [],
+			filters: ! [ 'active', 'user' ].includes( activeView )
+				? [
+						{
+							field: 'author',
+							operator: 'isAny',
+							value: [ activeView ],
+						},
+				  ]
+				: [],
 			...defaultLayouts[ usedType ],
 		};
 	}, [ layout, activeView ] );
@@ -98,23 +107,116 @@ export default function PageTemplates() {
 	useEffect( () => {
 		setView( ( currentView ) => ( {
 			...currentView,
-			filters:
-				activeView !== 'all'
-					? [
-							{
-								field: 'author',
-								operator: OPERATOR_IS_ANY,
-								value: [ activeView ],
-							},
-					  ]
-					: [],
+			filters: ! [ 'active', 'user' ].includes( activeView )
+				? [
+						{
+							field: 'author',
+							operator: OPERATOR_IS_ANY,
+							value: [ activeView ],
+						},
+				  ]
+				: [],
 		} ) );
 	}, [ setView, activeView ] );
 
-	const { records, isResolving: isLoadingData } =
+	const activeTemplatesOption = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', 'site' )
+				?.active_templates
+	);
+	// Todo: this will have to be better so that we're not fetching all the
+	// records all the time. Active templates query will need to move server
+	// side.
+	const { records: userRecords, isResolving: isLoadingUserRecords } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 		} );
+	const { records: staticRecords, isResolving: isLoadingStaticData } =
+		useEntityRecordsWithPermissions( 'postType', 'wp_registered_template', {
+			per_page: -1,
+		} );
+
+	const activeTemplates = useMemo( () => {
+		const _active = [ ...staticRecords ].filter(
+			( record ) => ! record.is_custom
+		);
+		if ( activeTemplatesOption ) {
+			for ( const activeSlug in activeTemplatesOption ) {
+				const activeId = activeTemplatesOption[ activeSlug ];
+				if ( activeId === false ) {
+					// Remove the template from the array.
+					const index = _active.findIndex(
+						( template ) => template.slug === activeSlug
+					);
+					if ( index !== -1 ) {
+						_active.splice( index, 1 );
+					}
+				} else {
+					// Replace the template in the array.
+					const template = userRecords.find(
+						( { id } ) => id === activeId
+					);
+					if ( template ) {
+						const index = _active.findIndex(
+							( { slug } ) => slug === template.slug
+						);
+						if ( index !== -1 ) {
+							_active[ index ] = template;
+						} else {
+							_active.push( template );
+						}
+					}
+				}
+			}
+		}
+		return _active;
+	}, [ userRecords, staticRecords, activeTemplatesOption ] );
+
+	let _records;
+	let isLoadingData;
+	if ( activeView === 'active' ) {
+		_records = activeTemplates;
+		isLoadingData = isLoadingUserRecords || isLoadingStaticData;
+	} else if ( activeView === 'user' ) {
+		_records = userRecords;
+		isLoadingData = isLoadingUserRecords;
+	} else {
+		_records = staticRecords;
+		isLoadingData = isLoadingStaticData;
+	}
+
+	const records = useMemo( () => {
+		return _records.map( ( record ) => ( {
+			...record,
+			_isActive:
+				typeof record.id === 'string'
+					? activeTemplatesOption[ record.slug ] === record.id ||
+					  activeTemplatesOption[ record.slug ] === undefined
+					: Object.values( activeTemplatesOption ).includes(
+							record.id
+					  ),
+		} ) );
+	}, [ _records, activeTemplatesOption ] );
+
+	const users = useSelect(
+		( select ) => {
+			const { getUser } = select( coreStore );
+			return records.reduce( ( acc, record ) => {
+				if ( record.author_text ) {
+					if ( ! acc[ record.author_text ] ) {
+						acc[ record.author_text ] = record.author_text;
+					}
+				} else if ( record.author ) {
+					if ( ! acc[ record.author ] ) {
+						acc[ record.author ] = getUser( record.author );
+					}
+				}
+				return acc;
+			}, {} );
+		},
+		[ records ]
+	);
+
 	const history = useHistory();
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -130,32 +232,27 @@ export default function PageTemplates() {
 		[ history, path, view?.type ]
 	);
 
-	const authors = useMemo( () => {
-		if ( ! records ) {
-			return EMPTY_ARRAY;
-		}
-		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(
-		() => [
+	const fields = useMemo( () => {
+		const _fields = [
 			previewField,
 			templateTitleField,
 			descriptionField,
-			{
-				...authorField,
-				elements: authors,
-			},
-		],
-		[ authors ]
-	);
+			activeField,
+			slugField,
+		];
+		const elements = [];
+		for ( const author in users ) {
+			elements.push( {
+				value: users[ author ]?.id ?? author,
+				label: users[ author ]?.name ?? author,
+			} );
+		}
+		_fields.push( {
+			...authorField,
+			elements,
+		} );
+		return _fields;
+	}, [ users ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );
@@ -166,9 +263,13 @@ export default function PageTemplates() {
 		context: 'list',
 	} );
 	const editAction = useEditPostAction();
+	const setActiveTemplateAction = useSetActiveTemplateAction();
 	const actions = useMemo(
-		() => [ editAction, ...postTypeActions ],
-		[ postTypeActions, editAction ]
+		() =>
+			activeView === 'user'
+				? [ setActiveTemplateAction, editAction, ...postTypeActions ]
+				: [ setActiveTemplateAction, ...postTypeActions ],
+		[ postTypeActions, setActiveTemplateAction, editAction, activeView ]
 	);
 
 	const onChangeView = useEvent( ( newView ) => {
@@ -199,8 +300,10 @@ export default function PageTemplates() {
 				onChangeView={ onChangeView }
 				onChangeSelection={ onChangeSelection }
 				isItemClickable={ () => true }
-				onClickItem={ ( { id } ) => {
-					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				onClickItem={ ( item ) => {
+					history.navigate(
+						`/${ item.type }/${ item.id }?canvas=edit`
+					);
 				} }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }

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

@@ -200,7 +200,6 @@ function getItemLevel( item ) {
 
 export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
-	const defaultViews = useDefaultViews( { postType } );
 	const history = useHistory();
 	const location = useLocation();
 	const {
@@ -266,7 +265,7 @@ export default function PostList( { postType } ) {
 			search: view.search,
 			...filters,
 		};
-	}, [ view, activeView, defaultViews ] );
+	}, [ view ] );
 	const {
 		records,
 		isResolving: isLoadingData,

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

@@ -14,7 +14,6 @@ import { addQueryArgs } from '@wordpress/url';
 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 );
@@ -37,11 +36,15 @@ function TemplateDataviewItem( { template, isActive } ) {
 
 export default function DataviewsTemplatesSidebarContent() {
 	const {
-		query: { activeView = 'all' },
+		query: { activeView = 'active' },
 	} = useLocation();
-	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-		per_page: -1,
-	} );
+	const { records } = useEntityRecords(
+		'postType',
+		'wp_registered_template',
+		{
+			per_page: -1,
+		}
+	);
 	const firstItemPerAuthorText = useMemo( () => {
 		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
 			const author = template.author_text;
@@ -61,9 +64,16 @@ export default function DataviewsTemplatesSidebarContent() {
 			<SidebarNavigationItem
 				to="/template"
 				icon={ layout }
-				aria-current={ activeView === 'all' }
+				aria-current={ activeView === 'active' }
+			>
+				{ __( 'Active templates' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				to={ addQueryArgs( '/template', { activeView: 'user' } ) }
+				icon={ layout }
+				aria-current={ activeView === 'user' }
 			>
-				{ __( 'All templates' ) }
+				{ __( 'Custom templates' ) }
 			</SidebarNavigationItem>
 			{ firstItemPerAuthorText.map( ( template ) => {
 				return (

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

@@ -17,7 +17,7 @@ import { patternsRoute } from './patterns';
 import { patternItemRoute } from './pattern-item';
 import { templatePartItemRoute } from './template-part-item';
 import { templatesRoute } from './templates';
-import { templateItemRoute } from './template-item';
+import { templateItemRoute, staticTemplateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
 import { stylebookRoute } from './stylebook';
@@ -27,6 +27,7 @@ const routes = [
 	pageItemRoute,
 	pagesRoute,
 	templateItemRoute,
+	staticTemplateItemRoute,
 	templatesRoute,
 	templatePartItemRoute,
 	patternItemRoute,

package/src/components/site-editor-routes/template-item.js

@@ -5,33 +5,41 @@ import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 
+const areas = {
+	sidebar( { siteData } ) {
+		const isBlockTheme = siteData.currentTheme?.is_block_theme;
+		return isBlockTheme ? (
+			<SidebarNavigationScreenTemplatesBrowse backPath="/" />
+		) : (
+			<SidebarNavigationScreenUnsupported />
+		);
+	},
+	mobile( { siteData } ) {
+		const isBlockTheme = siteData.currentTheme?.is_block_theme;
+		return isBlockTheme ? (
+			<Editor />
+		) : (
+			<SidebarNavigationScreenUnsupported />
+		);
+	},
+	preview( { siteData } ) {
+		const isBlockTheme = siteData.currentTheme?.is_block_theme;
+		return isBlockTheme ? (
+			<Editor />
+		) : (
+			<SidebarNavigationScreenUnsupported />
+		);
+	},
+};
+
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
-	areas: {
-		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
-				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
-			) : (
-				<SidebarNavigationScreenUnsupported />
-			);
-		},
-		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
-				<Editor />
-			) : (
-				<SidebarNavigationScreenUnsupported />
-			);
-		},
-		preview( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
-				<Editor />
-			) : (
-				<SidebarNavigationScreenUnsupported />
-			);
-		},
-	},
+	areas,
+};
+
+export const staticTemplateItemRoute = {
+	name: 'static-template-item',
+	path: '/wp_registered_template/*postId',
+	areas,
 };

package/src/hooks/commands/use-common-commands.js

@@ -4,16 +4,8 @@
 import { useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
-import {
-	rotateLeft,
-	rotateRight,
-	backup,
-	help,
-	styles,
-	external,
-	brush,
-} from '@wordpress/icons';
-import { useCommandLoader, useCommand } from '@wordpress/commands';
+import { rotateLeft, rotateRight, help, backup } from '@wordpress/icons';
+import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -28,45 +20,6 @@ import { store as editSiteStore } from '../../store';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-const getGlobalStylesOpenStylesCommands = () =>
-	function useGlobalStylesOpenStylesCommands() {
-		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
-		const { params } = useLocation();
-		const { canvas = 'view' } = params;
-		const history = useHistory();
-		const isBlockBasedTheme = useSelect( ( select ) => {
-			return select( coreStore ).getCurrentTheme().is_block_theme;
-		}, [] );
-
-		const commands = useMemo( () => {
-			if ( ! isBlockBasedTheme ) {
-				return [];
-			}
-
-			return [
-				{
-					name: 'core/edit-site/open-styles',
-					label: __( 'Open styles' ),
-					callback: ( { close } ) => {
-						close();
-						if ( canvas !== 'edit' ) {
-							history.navigate( '/styles?canvas=edit', {
-								transition: 'canvas-mode-edit-transition',
-							} );
-						}
-						openGeneralSidebar( 'edit-site/global-styles' );
-					},
-					icon: styles,
-				},
-			];
-		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme ] );
-
-		return {
-			isLoading: false,
-			commands,
-		};
-	};
-
 const getGlobalStylesToggleWelcomeGuideCommands = () =>
 	function useGlobalStylesToggleWelcomeGuideCommands() {
 		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
@@ -141,63 +94,6 @@ const getGlobalStylesResetCommands = () =>
 		};
 	};
 
-const getGlobalStylesOpenCssCommands = () =>
-	function useGlobalStylesOpenCssCommands() {
-		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-			useDispatch( editSiteStore )
-		);
-		const { params } = useLocation();
-		const { canvas = 'view' } = params;
-		const history = useHistory();
-		const { canEditCSS } = useSelect( ( select ) => {
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-
-			return {
-				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-			};
-		}, [] );
-
-		const commands = useMemo( () => {
-			if ( ! canEditCSS ) {
-				return [];
-			}
-
-			return [
-				{
-					name: 'core/edit-site/open-styles-css',
-					label: __( 'Customize CSS' ),
-					icon: brush,
-					callback: ( { close } ) => {
-						close();
-						if ( canvas !== 'edit' ) {
-							history.navigate( '/styles?canvas=edit', {
-								transition: 'canvas-mode-edit-transition',
-							} );
-						}
-						openGeneralSidebar( 'edit-site/global-styles' );
-						setEditorCanvasContainerView( 'global-styles-css' );
-					},
-				},
-			];
-		}, [
-			history,
-			openGeneralSidebar,
-			setEditorCanvasContainerView,
-			canEditCSS,
-			canvas,
-		] );
-		return {
-			isLoading: false,
-			commands,
-		};
-	};
-
 const getGlobalStylesOpenRevisionsCommands = () =>
 	function useGlobalStylesOpenRevisionsCommands() {
 		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
@@ -213,6 +109,7 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 			const globalStyles = globalStylesId
 				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
 				: undefined;
+
 			return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
 		}, [] );
 
@@ -223,8 +120,8 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 
 			return [
 				{
-					name: 'core/edit-site/open-global-styles-revisions',
-					label: __( 'Style revisions' ),
+					name: 'core/edit-site/open-styles-revisions',
+					label: __( 'Open style revisions' ),
 					icon: backup,
 					callback: ( { close } ) => {
 						close();
@@ -241,10 +138,10 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 				},
 			];
 		}, [
-			hasRevisions,
 			history,
 			openGeneralSidebar,
 			setEditorCanvasContainerView,
+			hasRevisions,
 			canvas,
 		] );
 
@@ -255,27 +152,6 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 	};
 
 export function useCommonCommands() {
-	const homeUrl = useSelect( ( select ) => {
-		// Site index.
-		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-			?.home;
-	}, [] );
-
-	useCommand( {
-		name: 'core/edit-site/view-site',
-		label: __( 'View site' ),
-		callback: ( { close } ) => {
-			close();
-			window.open( homeUrl, '_blank' );
-		},
-		icon: external,
-	} );
-
-	useCommandLoader( {
-		name: 'core/edit-site/open-styles',
-		hook: getGlobalStylesOpenStylesCommands(),
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/toggle-styles-welcome-guide',
 		hook: getGlobalStylesToggleWelcomeGuideCommands(),
@@ -286,11 +162,6 @@ export function useCommonCommands() {
 		hook: getGlobalStylesResetCommands(),
 	} );
 
-	useCommandLoader( {
-		name: 'core/edit-site/open-styles-css',
-		hook: getGlobalStylesOpenCssCommands(),
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/open-styles-revisions',
 		hook: getGlobalStylesOpenRevisionsCommands(),