@wordpress/edit-site 6.33.5 → 6.33.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.33.5",
+	"version": "6.33.6",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,26 +38,26 @@
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
 		"@wordpress/a11y": "^4.33.1",
-		"@wordpress/admin-ui": "^1.1.1",
+		"@wordpress/admin-ui": "^1.1.2",
 		"@wordpress/api-fetch": "^7.33.1",
 		"@wordpress/base-styles": "^6.9.1",
 		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.3",
-		"@wordpress/block-library": "^9.33.4",
+		"@wordpress/block-editor": "^15.6.4",
+		"@wordpress/block-library": "^9.33.5",
 		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.1",
-		"@wordpress/components": "^30.6.1",
+		"@wordpress/commands": "^1.33.2",
+		"@wordpress/components": "^30.6.2",
 		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.3",
+		"@wordpress/core-data": "^7.33.4",
 		"@wordpress/data": "^10.33.1",
-		"@wordpress/dataviews": "^10.1.2",
+		"@wordpress/dataviews": "^10.1.3",
 		"@wordpress/date": "^5.33.1",
 		"@wordpress/deprecated": "^4.33.1",
 		"@wordpress/dom": "^4.33.1",
-		"@wordpress/editor": "^14.33.5",
+		"@wordpress/editor": "^14.33.6",
 		"@wordpress/element": "^6.33.1",
 		"@wordpress/escape-html": "^3.33.1",
-		"@wordpress/fields": "^0.25.5",
+		"@wordpress/fields": "^0.25.6",
 		"@wordpress/hooks": "^4.33.1",
 		"@wordpress/html-entities": "^4.33.1",
 		"@wordpress/i18n": "^6.6.1",
@@ -66,18 +66,18 @@
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/media-utils": "^5.33.1",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.3",
-		"@wordpress/plugins": "^7.33.1",
-		"@wordpress/preferences": "^4.33.1",
+		"@wordpress/patterns": "^2.33.4",
+		"@wordpress/plugins": "^7.33.2",
+		"@wordpress/preferences": "^4.33.2",
 		"@wordpress/primitives": "^4.33.1",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.3",
+		"@wordpress/reusable-blocks": "^5.33.4",
 		"@wordpress/router": "^1.33.1",
 		"@wordpress/style-engine": "^2.33.1",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/viewport": "^6.33.1",
-		"@wordpress/views": "^1.0.3",
-		"@wordpress/widgets": "^4.33.3",
+		"@wordpress/views": "^1.0.4",
+		"@wordpress/widgets": "^4.33.4",
 		"@wordpress/wordcount": "^4.33.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
@@ -93,5 +93,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b54bd3285e50e409580bdfa2c47bc81f0000a0c9"
+	"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
 }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -173,7 +173,9 @@ function AddCustomTemplateModalContent( {
 	onBack,
 	containerRef,
 } ) {
-	const [ showSearchEntities, setShowSearchEntities ] = useState();
+	const [ showSearchEntities, setShowSearchEntities ] = useState(
+		entityForSuggestions.hasGeneralTemplate
+	);
 
 	// Focus on the first focusable element when the modal opens.
 	// We handle focus management in the parent modal, just need to focus on the first focusable element.

package/src/components/add-new-template/index.js

@@ -53,6 +53,7 @@ import { TEMPLATE_POST_TYPE } from '../../utils/constants';
  */
 import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import {
+	useExistingTemplates,
 	useDefaultTemplateTypes,
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
@@ -211,9 +212,7 @@ function NewTemplateModal( { onClose } ) {
 					status: 'publish',
 					title,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
-					meta: {
-						is_wp_suggestion: isWPSuggestion,
-					},
+					is_wp_suggestion: isWPSuggestion,
 				},
 				{ throwOnError: true }
 			);
@@ -389,9 +388,15 @@ function NewTemplate() {
 }
 
 function useMissingTemplates( setEntityForSuggestions, onClick ) {
+	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
 	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
-		( template ) => DEFAULT_TEMPLATE_SLUGS.includes( template.slug )
+		( template ) =>
+			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
+			! existingTemplateSlugs.includes( template.slug )
 	);
 	const onClickMenuItem = ( _entityForSuggestions ) => {
 		onClick?.();

package/src/components/add-new-template/utils.js

@@ -204,6 +204,7 @@ export function usePostTypeArchiveMenuItems() {
 
 export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
+	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
 	// We need to keep track of naming conflicts. If a conflict
 	// occurs, we need to add slug.
@@ -243,6 +244,9 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 		[ publicPostTypes ]
 	);
 	const postTypesInfo = useEntitiesInfo( 'postType', templatePrefixes );
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
 	const menuItems = ( publicPostTypes || [] ).reduce(
 		( accumulator, postType ) => {
 			const { slug, labels, icon } = postType;
@@ -253,6 +257,8 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			const defaultTemplateType = defaultTemplateTypes?.find(
 				( { slug: _slug } ) => _slug === generalTemplateSlug
 			);
+			const hasGeneralTemplate =
+				existingTemplateSlugs?.includes( generalTemplateSlug );
 			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
 			let menuItemTitle =
 				labels.template_name ||
@@ -333,12 +339,14 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 							},
 						},
 						labels,
+						hasGeneralTemplate,
 						template,
 					} );
 				};
 			}
-			// We don't need to add the menu item if there are no entities.
-			if ( hasEntities ) {
+			// We don't need to add the menu item if there are no
+			// entities and the general template exists.
+			if ( ! hasGeneralTemplate || hasEntities ) {
 				accumulator.push( menuItem );
 			}
 			return accumulator;
@@ -571,11 +579,7 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 							suggestion.slug
 						);
 						return {
-							title: sprintf(
-								// translators: %s: Name of the author e.g: "Admin".
-								__( 'Author: %s' ),
-								suggestion.name
-							),
+							title: templateSlug,
 							slug: templateSlug,
 							templatePrefix: 'author',
 						};
@@ -597,6 +601,91 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 	}
 }
 
+/**
+ * Helper hook that filters all the existing templates by the given
+ * object with the entity's slug as key and the template prefix as value.
+ *
+ * Example:
+ * `existingTemplates` is: [ { slug: 'tag-apple' }, { slug: 'page-about' }, { slug: 'tag' } ]
+ * `templatePrefixes` is: { post_tag: 'tag' }
+ * It will return: { post_tag: ['apple'] }
+ *
+ * Note: We append the `-` to the given template prefix in this function for our checks.
+ *
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @return {Record<string,string[]>} An object with the entity's slug as key and an array with the existing template slugs as value.
+ */
+const useExistingTemplateSlugs = ( templatePrefixes ) => {
+	const existingTemplates = useExistingTemplates();
+	const existingSlugs = useMemo( () => {
+		return Object.entries( templatePrefixes || {} ).reduce(
+			( accumulator, [ slug, prefix ] ) => {
+				const slugsWithTemplates = ( existingTemplates || [] ).reduce(
+					( _accumulator, existingTemplate ) => {
+						const _prefix = `${ prefix }-`;
+						if ( existingTemplate.slug.startsWith( _prefix ) ) {
+							_accumulator.push(
+								existingTemplate.slug.substring(
+									_prefix.length
+								)
+							);
+						}
+						return _accumulator;
+					},
+					[]
+				);
+				if ( slugsWithTemplates.length ) {
+					accumulator[ slug ] = slugsWithTemplates;
+				}
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, existingTemplates ] );
+	return existingSlugs;
+};
+
+/**
+ * Helper hook that finds the existing records with an associated template,
+ * as they need to be excluded from the template suggestions.
+ *
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
+ */
+const useTemplatesToExclude = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
+	const slugsToExcludePerEntity =
+		useExistingTemplateSlugs( templatePrefixes );
+	const recordsToExcludePerEntity = useSelect(
+		( select ) => {
+			return Object.entries( slugsToExcludePerEntity || {} ).reduce(
+				( accumulator, [ slug, slugsWithTemplates ] ) => {
+					const entitiesWithTemplates = select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						_fields: 'id',
+						context: 'view',
+						slug: slugsWithTemplates,
+						...additionalQueryParameters[ slug ],
+					} );
+					if ( entitiesWithTemplates?.length ) {
+						accumulator[ slug ] = entitiesWithTemplates;
+					}
+					return accumulator;
+				},
+				{}
+			);
+		},
+		[ slugsToExcludePerEntity ]
+	);
+	return recordsToExcludePerEntity;
+};
+
 /**
  * Helper hook that returns information about an entity having
  * records that we can create a specific template for.
@@ -617,16 +706,26 @@ const useEntitiesInfo = (
 	templatePrefixes,
 	additionalQueryParameters = EMPTY_OBJECT
 ) => {
+	const recordsToExcludePerEntity = useTemplatesToExclude(
+		entityName,
+		templatePrefixes,
+		additionalQueryParameters
+	);
 	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
+					const existingEntitiesIds =
+						recordsToExcludePerEntity?.[ slug ]?.map(
+							( { id } ) => id
+						) || [];
 					accumulator[ slug ] = !! select(
 						coreStore
 					).getEntityRecords( entityName, slug, {
 						per_page: 1,
 						_fields: 'id',
 						context: 'view',
+						exclude: existingEntitiesIds,
 						...additionalQueryParameters[ slug ],
 					} )?.length;
 					return accumulator;
@@ -634,18 +733,28 @@ const useEntitiesInfo = (
 				{}
 			);
 		},
-		[ templatePrefixes, entityName, additionalQueryParameters ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
 	const entitiesInfo = useMemo( () => {
 		return Object.keys( templatePrefixes || {} ).reduce(
 			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
 				accumulator[ slug ] = {
 					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
 				};
 				return accumulator;
 			},
 			{}
 		);
-	}, [ templatePrefixes, entitiesHasRecords ] );
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };

package/src/components/dataviews-actions/index.js

@@ -5,8 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -16,65 +14,6 @@ import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export const useSetActiveTemplateAction = () => {
-	const activeTheme = useSelect( ( select ) =>
-		select( coreStore ).getCurrentTheme()
-	);
-	const { getEntityRecord } = useSelect( coreStore );
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	return useMemo(
-		() => ( {
-			id: 'set-active-template',
-			label( items ) {
-				return items.some( ( item ) => item._isActive )
-					? __( 'Deactivate' )
-					: __( 'Activate' );
-			},
-			isPrimary: true,
-			icon: pencil,
-			isEligible( item ) {
-				if ( item.theme !== activeTheme.stylesheet ) {
-					return false;
-				}
-
-				// If it's not a created template but a registered template,
-				// only allow activating (so when it's inactive).
-				if ( typeof item.id !== 'number' ) {
-					return item._isActive === false;
-				}
-
-				return true;
-			},
-			async callback( items ) {
-				const deactivate = items.some( ( item ) => item._isActive );
-				// current active templates
-				const activeTemplates = {
-					...( ( await getEntityRecord( 'root', 'site' )
-						.active_templates ) ?? {} ),
-				};
-				for ( const item of items ) {
-					if ( deactivate ) {
-						delete activeTemplates[ item.slug ];
-					} else {
-						activeTemplates[ item.slug ] = item.id;
-					}
-				}
-				await editEntityRecord( 'root', 'site', undefined, {
-					active_templates: activeTemplates,
-				} );
-				await saveEditedEntityRecord( 'root', 'site' );
-			},
-		} ),
-		[
-			editEntityRecord,
-			saveEditedEntityRecord,
-			getEntityRecord,
-			activeTheme,
-		]
-	);
-};
-
 export const useEditPostAction = () => {
 	const history = useHistory();
 	return useMemo(

package/src/components/editor/index.js

@@ -110,7 +110,6 @@ function getNavigationPath( location, postType ) {
 			'template-part-item',
 			'page-item',
 			'template-item',
-			'static-template-item',
 			'post-item',
 		].includes( name )
 	) {

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

@@ -29,7 +29,9 @@ const postTypesWithoutParentTemplate = [
 
 const authorizedPostTypes = [ 'page', 'post' ];
 
-function getPostType( name ) {
+export function useResolveEditedEntity() {
+	const { name, params = {}, query } = useLocation();
+	const { postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
 	let postType;
 	if ( name === 'navigation-item' ) {
 		postType = NAVIGATION_POST_TYPE;
@@ -37,9 +39,7 @@ function getPostType( name ) {
 		postType = PATTERN_TYPES.user;
 	} else if ( name === 'template-part-item' ) {
 		postType = TEMPLATE_PART_POST_TYPE;
-	} else if ( name === 'templates' ) {
-		postType = TEMPLATE_POST_TYPE;
-	} else if ( name === 'template-item' ) {
+	} else if ( name === 'template-item' || name === 'templates' ) {
 		postType = TEMPLATE_POST_TYPE;
 	} else if ( name === 'page-item' || name === 'pages' ) {
 		postType = 'page';
@@ -47,14 +47,6 @@ function getPostType( name ) {
 		postType = 'post';
 	}
 
-	return postType;
-}
-
-export function useResolveEditedEntity() {
-	const { name, params = {}, query } = useLocation();
-	const { 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();
@@ -149,14 +141,7 @@ export function useSyncDeprecatedEntityIntoState( {
 
 	useEffect( () => {
 		if ( isReady ) {
-			// 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 );
+			setEditedEntity( postType, postId, context );
 		}
 	}, [ isReady, postType, postId, context, setEditedEntity ] );
 }

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

@@ -6,12 +6,8 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	__experimentalHStack as HStack,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
@@ -20,43 +16,15 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import {
-	privateApis as corePrivateApis,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { useSelect } from '@wordpress/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(
-		'root',
-		'registeredTemplate'
-	);
-	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();
@@ -100,14 +68,8 @@ 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: ( { item } ) => {
+		return item.description && decodeEntities( item.description );
 	},
 	enableSorting: false,
 	enableGlobalSearch: true,
@@ -145,58 +107,6 @@ function AuthorField( { item } ) {
 export const authorField = {
 	label: __( 'Author' ),
 	id: 'author',
-	getValue: ( { item } ) => item.author_text ?? item.author,
+	getValue: ( { item } ) => item.author_text,
 	render: AuthorField,
 };
-
-export const activeField = {
-	label: __( 'Status' ),
-	id: 'active',
-	type: 'boolean',
-	getValue: ( { item } ) => item._isActive,
-	render: function Render( { item } ) {
-		const activeLabel = item._isCustom
-			? _x( 'Active when used', 'template' )
-			: _x( 'Active', 'template' );
-		const activeIntent = item._isCustom ? 'info' : 'success';
-		const isActive = item._isActive;
-		return (
-			<Badge intent={ isActive ? activeIntent : 'default' }>
-				{ isActive ? activeLabel : _x( 'Inactive', 'template' ) }
-			</Badge>
-		);
-	},
-};
-
-export const useThemeField = () => {
-	const activeTheme = useSelect( ( select ) =>
-		select( coreStore ).getCurrentTheme()
-	);
-	return useMemo(
-		() => ( {
-			label: __( 'Compatible Theme' ),
-			id: 'theme',
-			getValue: ( { item } ) => item.theme,
-			render: function Render( { item } ) {
-				if ( item.theme === activeTheme.stylesheet ) {
-					return <Badge intent="success">{ item.theme }</Badge>;
-				}
-				return <Badge intent="error">{ item.theme }</Badge>;
-			},
-		} ),
-		[ activeTheme ]
-	);
-};
-
-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 || _x( 'Custom', 'template type' );
-	},
-};

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 ?? user?.name,
+						text: authorText,
 						isCustomized: false,
 					};
 				}