@wordpress/edit-site 7.3.2-next.v.202608281122.0 → 7.4.0

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

@@ -197,6 +197,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.
@@ -236,6 +237,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;
@@ -246,6 +250,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 ||
@@ -326,12 +332,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;
@@ -564,11 +572,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',
 						};
@@ -590,6 +594,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.
@@ -610,10 +699,19 @@ 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
+						) || [];
 					const records = select( coreStore ).getEntityRecords(
 						entityName,
 						slug,
@@ -621,6 +719,7 @@ const useEntitiesInfo = (
 							per_page: 1,
 							_fields: 'id',
 							context: 'view',
+							exclude: existingEntitiesIds,
 							...additionalQueryParameters[ slug ],
 						}
 					);
@@ -631,18 +730,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

@@ -2,73 +2,12 @@ import { __ } from '@wordpress/i18n';
 import { pencil, drawerRight } 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';
 import { addQueryArgs } from '@wordpress/url';
 import { PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, 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/layout/index.jsx

@@ -41,7 +41,8 @@ const { useLocation } = unlock( routerPrivateApis );
 const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
-const CONTENT_COLOR = { background: '#ffffff' };
+// Reset to the default background color.
+const CONTENT_COLOR = { background: '#fcfcfc' };
 
 function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
@@ -321,7 +322,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 					} }
 				>
 					<ThemeProvider color={ themeColors }>
-						<Layout { ...props } />
+						<ErrorBoundary>
+							<Layout { ...props } />
+						</ErrorBoundary>
 					</ThemeProvider>
 				</ThemeProvider>
 			</Tooltip.Provider>

package/src/components/more-menu/welcome-guide-menu-item.jsx

@@ -1,14 +1,19 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { unlock } from '../../lock-unlock';
+
+const { MoreMenuItem } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideMenuItem() {
 	const { toggle } = useDispatch( preferencesStore );
 
 	return (
-		<MenuItem onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }>
+		<MoreMenuItem
+			onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
+		>
 			{ __( 'Welcome Guide' ) }
-		</MenuItem>
+		</MoreMenuItem>
 	);
 }

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

@@ -1,52 +1,16 @@
-import clsx from 'clsx';
-import {
-	Icon as WCIcon,
-	__experimentalHStack as HStack,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { BlockPreview } from '@wordpress/block-editor';
 import {
 	EditorProvider,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import {
-	privateApis as corePrivateApis,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-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 { Badge: WCBadge } = unlock( componentsPrivateApis );
-const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 const { useStyle } = unlock( editorPrivateApis );
 
-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();
 	const backgroundColor = useStyle( 'color.background' ) ?? 'white';
@@ -85,111 +49,3 @@ export const previewField = {
 	render: PreviewField,
 	enableSorting: false,
 };
-
-export const descriptionField = {
-	label: __( 'Description' ),
-	id: '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,
-};
-
-function AuthorField( { item } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ imageUrl && (
-				<div
-					className={ clsx( 'fields-controls__author-avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="fields-controls__author-icon">
-					<WCIcon icon={ icon } />
-				</div>
-			) }
-			<span className="fields-controls__author-name">{ text }</span>
-		</HStack>
-	);
-}
-
-export const authorField = {
-	label: __( 'Author' ),
-	id: 'author',
-	getValue: ( { item } ) => item.author_text ?? item.author,
-	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 (
-			<WCBadge intent={ isActive ? activeIntent : 'default' }>
-				{ isActive ? activeLabel : _x( 'Inactive', 'template' ) }
-			</WCBadge>
-		);
-	},
-};
-
-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 <WCBadge intent="success">{ item.theme }</WCBadge>;
-				}
-				return <WCBadge intent="error">{ item.theme }</WCBadge>;
-			},
-		} ),
-		[ 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' );
-	},
-};