@wordpress/edit-site 6.30.1-next.a730c9c8c.0 → 6.31.1-next.f56bd8138.0

package/src/components/editor/use-resolve-edited-entity.js

@@ -25,13 +25,12 @@ const postTypesWithoutParentTemplate = [
 	TEMPLATE_PART_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 	PATTERN_TYPES.user,
+	'wp_registered_template',
 ];
 
 const authorizedPostTypes = [ 'page', 'post' ];
 
-export function useResolveEditedEntity() {
-	const { name, params = {}, query } = useLocation();
-	const { postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
+function getPostType( name, postId ) {
 	let postType;
 	if ( name === 'navigation-item' ) {
 		postType = NAVIGATION_POST_TYPE;
@@ -39,19 +38,48 @@ export function useResolveEditedEntity() {
 		postType = PATTERN_TYPES.user;
 	} else if ( name === 'template-part-item' ) {
 		postType = TEMPLATE_PART_POST_TYPE;
-	} else if ( name === 'template-item' || name === 'templates' ) {
+	} else if ( name === 'templates' ) {
+		postType = /^\d+$/.test( postId )
+			? TEMPLATE_POST_TYPE
+			: 'wp_registered_template';
+	} else if ( name === 'template-item' ) {
 		postType = TEMPLATE_POST_TYPE;
+	} else if ( name === 'static-template-item' ) {
+		postType = 'wp_registered_template';
 	} else if ( name === 'page-item' || name === 'pages' ) {
 		postType = 'page';
 	} else if ( name === 'post-item' || name === 'posts' ) {
 		postType = 'post';
 	}
 
+	return postType;
+}
+
+export function useResolveEditedEntity() {
+	const { name, params = {}, query } = useLocation();
+	const { postId: _postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
+	const _postType = getPostType( name, _postId ) ?? query?.postType;
+
 	const homePage = useSelect( ( select ) => {
 		const { getHomePage } = unlock( select( coreDataStore ) );
 		return getHomePage();
 	}, [] );
 
+	const [ postType, postId ] = useSelect(
+		( select ) => {
+			if ( _postType !== 'wp_registered_template' ) {
+				return [ _postType, _postId ];
+			}
+			return [
+				TEMPLATE_POST_TYPE,
+				unlock( select( coreDataStore ) ).getTemplateAutoDraftId(
+					_postId
+				),
+			];
+		},
+		[ _postType, _postId ]
+	);
+
 	/**
 	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
 	 * in order to match the frontend as closely as possible in the site editor.
@@ -98,6 +126,18 @@ export function useResolveEditedEntity() {
 		[ homePage, postId, postType ]
 	);
 
+	const editableResolvedTemplateId = useSelect(
+		( select ) => {
+			if ( typeof resolvedTemplateId !== 'string' ) {
+				return resolvedTemplateId;
+			}
+			return unlock( select( coreDataStore ) ).getTemplateAutoDraftId(
+				resolvedTemplateId
+			);
+		},
+		[ resolvedTemplateId ]
+	);
+
 	const context = useMemo( () => {
 		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 			return {};
@@ -121,9 +161,9 @@ export function useResolveEditedEntity() {
 
 	if ( !! homePage ) {
 		return {
-			isReady: resolvedTemplateId !== undefined,
+			isReady: editableResolvedTemplateId !== undefined,
 			postType: TEMPLATE_POST_TYPE,
-			postId: resolvedTemplateId,
+			postId: editableResolvedTemplateId,
 			context,
 		};
 	}
@@ -141,7 +181,14 @@ export function useSyncDeprecatedEntityIntoState( {
 
 	useEffect( () => {
 		if ( isReady ) {
-			setEditedEntity( postType, postId, context );
+			// setEditedEntity expects a string (because the postId used to be
+			// the template slug, even for edited templates). Now the postId can
+			// be a number (either because it's an auto-draft or edited
+			// template). Passing a number could break plugins doing things like
+			// `id.includes`. It would be way more complex to keep passing the
+			// template slug, while also being incorrect, so the easiest
+			// solution is to cast the postId to a string.
+			setEditedEntity( postType, String( postId ), context );
 		}
 	}, [ isReady, postType, postId, context, setEditedEntity ] );
 }

package/src/components/global-styles/screen-css.js

@@ -18,9 +18,6 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 );
 
 function ScreenCSS() {
-	const description = __(
-		'Add your own CSS to customize the appearance and layout of your site.'
-	);
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -35,10 +32,12 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'CSS' ) }
+				title={ __( 'Additional CSS' ) }
 				description={
 					<>
-						{ description }
+						{ __(
+							'You can add custom CSS to further customize the appearance and layout of your site.'
+						) }
 						<br />
 						<ExternalLink
 							href={ __(

package/src/components/global-styles/screen-root.js

@@ -26,24 +26,10 @@ import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
 
 function ScreenRoot() {
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
+	const hasVariations = useSelect( ( select ) => {
+		const { __experimentalGetCurrentThemeGlobalStylesVariations } =
+			select( coreStore );
+		return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
 	}, [] );
 
 	return (
@@ -92,7 +78,7 @@ function ScreenRoot() {
 					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
-					marginBottom={ 4 }
+					marginBottom={ 2 }
 				>
 					{ __(
 						'Customize the appearance of specific blocks for the whole site.'
@@ -109,38 +95,6 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }

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

@@ -6,7 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	Icon,
+	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -16,15 +20,40 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
+import { privateApis as corePrivateApis } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { useAddedBy } from './hooks';
+import { useDefaultTemplateTypes } from '../add-new-template/utils';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { Badge } = unlock( componentsPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
+
+function useAllDefaultTemplateTypes() {
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const { records: staticRecords } = useEntityRecordsWithPermissions(
+		'postType',
+		'wp_registered_template',
+		{ per_page: -1 }
+	);
+	return [
+		...defaultTemplateTypes,
+		...staticRecords
+			?.filter( ( record ) => ! record.is_custom )
+			.map( ( record ) => {
+				return {
+					slug: record.slug,
+					title: record.title.rendered,
+					description: record.description,
+				};
+			} ),
+	];
+}
 
 function PreviewField( { item } ) {
 	const settings = usePatternSettings();
@@ -68,8 +97,14 @@ export const previewField = {
 export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',
-	render: ( { item } ) => {
-		return item.description && decodeEntities( item.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;
 	},
 	enableSorting: false,
 	enableGlobalSearch: true,
@@ -107,6 +142,37 @@ function AuthorField( { item } ) {
 export const authorField = {
 	label: __( 'Author' ),
 	id: 'author',
-	getValue: ( { item } ) => item.author_text,
+	getValue: ( { item } ) => item.author_text ?? item.author,
 	render: AuthorField,
 };
+
+export const activeField = {
+	label: __( 'Status' ),
+	id: 'active',
+	getValue: ( { item } ) => item._isActive,
+	render: function Render( { item } ) {
+		const isActive = item._isActive;
+		return (
+			<Badge intent={ isActive ? 'success' : 'default' }>
+				{ isActive ? __( 'Active' ) : __( 'Inactive' ) }
+			</Badge>
+		);
+	},
+};
+
+export const slugField = {
+	label: __( 'Template Type' ),
+	id: 'slug',
+	getValue: ( { item } ) => item.slug,
+	render: function Render( { item } ) {
+		const defaultTemplateTypes = useAllDefaultTemplateTypes();
+		const defaultTemplateType = defaultTemplateTypes.find(
+			( type ) => type.slug === item.slug
+		);
+		return (
+			defaultTemplateType?.title ||
+			// translators: %s is the slug of a custom template.
+			__( 'Custom' )
+		);
+	},
+};

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

@@ -89,7 +89,7 @@ export function useAddedBy( postType, postId ) {
 						type: 'user',
 						icon: authorIcon,
 						imageUrl: user?.avatar_urls?.[ 48 ],
-						text: authorText,
+						text: authorText ?? user?.name,
 						isCustomized: false,
 					};
 				}

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 }