@wordpress/edit-site 4.9.0 → 4.10.0

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

@@ -8,16 +8,138 @@ import { get } from 'lodash';
  */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { blockMeta, post } from '@wordpress/icons';
 
-export const usePostTypes = () => {
+/**
+ * @typedef IHasNameAndId
+ * @property {string|number} id   The entity's id.
+ * @property {string}        name The entity's name.
+ */
+
+/**
+ * Helper util to map records to add a `name` prop from a
+ * provided path, in order to handle all entities in the same
+ * fashion(implementing`IHasNameAndId` interface).
+ *
+ * @param {Object[]} entities The array of entities.
+ * @param {string}   path     The path to map a `name` property from the entity.
+ * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ */
+export const mapToIHasNameAndId = ( entities, path ) => {
+	return ( entities || [] ).map( ( entity ) => ( {
+		...entity,
+		name: decodeEntities( get( entity, path ) ),
+	} ) );
+};
+
+/**
+ * @typedef {Object} EntitiesInfo
+ * @property {boolean}  hasEntities         If an entity has available records(posts, terms, etc..).
+ * @property {number[]} existingEntitiesIds An array of the existing entities ids.
+ */
+
+/**
+ * @typedef {Object} EntityConfig
+ * @property {string}   entityName     The entity's name.
+ * @property {Function} getOrderBy     Getter for an entity's `orderBy` query parameter, given the object
+ *                                     {search} as argument.
+ * @property {Function} getIcon        Getter function for returning an entity's icon for the menu item.
+ * @property {Function} getTitle       Getter function for returning an entity's title for the menu item.
+ * @property {Function} getDescription Getter function for returning an entity's description for the menu item.
+ * @property {string}   recordNamePath The path to an entity's properties to use as a `name`. If not provided
+ *                                     is assumed that `name` property exists.
+ * @property {string}   templatePrefix The template prefix to create new templates and check against existing
+ *                                     templates. For example custom post types need a `single-` prefix to all
+ *                                     templates(`single-post-hello`), whereas `pages` don't (`page-hello`).
+ * @property {string}   templateSlug   If this property is provided, it is going to be used for the creation of
+ *                                     new templates and the check against existing templates in the place
+ *                                     of the actual entity's `slug`. An example is `Tag` templates where the
+ *                                     the Tag's taxonomy slug is `post_tag`, but template hierarchy is based
+ *                                     on `tag` alias.
+ */
+
+const taxonomyBaseConfig = {
+	entityName: 'taxonomy',
+	getOrderBy: ( { search } ) => ( search ? 'name' : 'count' ),
+	getIcon: () => blockMeta,
+	getTitle: ( labels ) =>
+		sprintf(
+			// translators: %s: Name of the taxonomy e.g: "Cagegory".
+			__( 'Single taxonomy: %s' ),
+			labels.singular_name
+		),
+	getDescription: ( labels ) =>
+		sprintf(
+			// translators: %s: Name of the taxonomy e.g: "Product Categories".
+			__( 'Displays a single taxonomy: %s.' ),
+			labels.singular_name
+		),
+};
+const postTypeBaseConfig = {
+	entityName: 'postType',
+	getOrderBy: ( { search } ) => ( search ? 'relevance' : 'modified' ),
+	recordNamePath: 'title.rendered',
+	// `icon` is the `menu_icon` property of a post type. We
+	// only handle `dashicons` for now, even if the `menu_icon`
+	// also supports urls and svg as values.
+	getIcon: ( _icon ) =>
+		_icon?.startsWith( 'dashicons-' ) ? _icon.slice( 10 ) : post,
+	getTitle: ( labels ) =>
+		sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Single item: %s' ),
+			labels.singular_name
+		),
+	getDescription: ( labels ) =>
+		sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Displays a single item: %s.' ),
+			labels.singular_name
+		),
+};
+export const entitiesConfig = {
+	postType: {
+		...postTypeBaseConfig,
+		templatePrefix: 'single-',
+	},
+	page: { ...postTypeBaseConfig },
+	taxonomy: {
+		...taxonomyBaseConfig,
+		templatePrefix: 'taxonomy-',
+	},
+	category: { ...taxonomyBaseConfig },
+	tag: { ...taxonomyBaseConfig, templateSlug: 'tag' },
+};
+
+export const useExistingTemplates = () => {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+			} ),
+		[]
+	);
+};
+
+export const useDefaultTemplateTypes = () => {
+	return useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplateTypes(),
+		[]
+	);
+};
+
+const usePublicPostTypes = () => {
 	const postTypes = useSelect(
 		( select ) => select( coreStore ).getPostTypes( { per_page: -1 } ),
 		[]
 	);
 	return useMemo( () => {
-		const excludedPostTypes = [ 'attachment', 'page' ];
+		const excludedPostTypes = [ 'attachment' ];
 		return postTypes?.filter(
 			( { viewable, slug } ) =>
 				viewable && ! excludedPostTypes.includes( slug )
@@ -25,32 +147,97 @@ export const usePostTypes = () => {
 	}, [ postTypes ] );
 };
 
+// `page` post type is a special case in the template hierarchy,
+// so we exclude it from the list of post types and we handle it
+// separately.
+export const usePostTypes = () => {
+	const postTypes = usePublicPostTypes();
+	return useMemo( () => {
+		return postTypes?.filter( ( { slug } ) => slug !== 'page' );
+	}, [ postTypes ] );
+};
+export const usePostTypePage = () => {
+	const postTypes = usePublicPostTypes();
+	return useMemo( () => {
+		return postTypes?.filter( ( { slug } ) => slug === 'page' );
+	}, [ postTypes ] );
+};
+
+const usePublicTaxonomies = () => {
+	const taxonomies = useSelect(
+		( select ) => select( coreStore ).getTaxonomies( { per_page: -1 } ),
+		[]
+	);
+	return useMemo( () => {
+		return taxonomies?.filter(
+			( { visibility } ) => visibility?.publicly_queryable
+		);
+	}, [ taxonomies ] );
+};
+
 /**
- * @typedef {Object} PostTypeEntitiesInfo
- * @property {boolean}  hasEntities   If a postType has available entities.
- * @property {number[]} existingPosts An array of the existing entities ids.
+ * `category` and `post_tag` are handled specifically in template
+ * hierarchy so we need to differentiate them and return the rest,
+ * e.g. `category-$slug` and `taxonomy-$taxonomy-$term`.
  */
+export const useTaxonomies = () => {
+	const taxonomies = usePublicTaxonomies();
+	const specialTaxonomies = [ 'category', 'post_tag' ];
+	return useMemo(
+		() =>
+			taxonomies?.filter(
+				( { slug } ) => ! specialTaxonomies.includes( slug )
+			),
+		[ taxonomies ]
+	);
+};
+
+export const useTaxonomyCategory = () => {
+	const taxonomies = usePublicTaxonomies();
+	return useMemo(
+		() => taxonomies?.filter( ( { slug } ) => slug === 'category' ),
+		[ taxonomies ]
+	);
+};
+export const useTaxonomyTag = () => {
+	const taxonomies = usePublicTaxonomies();
+	return useMemo(
+		() => taxonomies?.filter( ( { slug } ) => slug === 'post_tag' ),
+		[ taxonomies ]
+	);
+};
 
 /**
- * Helper hook that returns information about a post type having
- * posts that we can create a specific template for.
+ * Helper hook that returns information about an entity having
+ * records that we can create a specific template for.
  *
- * First we need to find the existing posts with an associated template,
- * to query afterwards for any remaing post, by excluding them.
+ * For example we can search for `terms` in `taxonomy` entity or
+ * `posts` in `postType` entity.
  *
- * @param {string[]} existingTemplates The existing templates.
- * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.
+ * First we need to find the existing records with an associated template,
+ * to query afterwards for any remaing record, by excluding them.
+ *
+ * @param {string[]}     existingTemplates The existing templates.
+ * @param {Object[]}     entities          The array of entities we need to get extra information.
+ * @param {EntityConfig} entityConfig      The entity config.
+ * @return {Record<string,EntitiesInfo>} An object with the `entities.slug` as `keys` and EntitiesInfo as values.
  */
-export const usePostTypesEntitiesInfo = ( existingTemplates ) => {
-	const postTypes = usePostTypes();
+const useEntitiesInfo = (
+	existingTemplates,
+	entities,
+	{ entityName, templatePrefix, templateSlug }
+) => {
 	const slugsToExcludePerEntity = useMemo( () => {
-		return postTypes?.reduce( ( accumulator, _postType ) => {
+		return entities?.reduce( ( accumulator, entity ) => {
+			let _prefix = `${ templateSlug || entity.slug }-`;
+			if ( templatePrefix ) {
+				_prefix = templatePrefix + _prefix;
+			}
 			const slugsWithTemplates = ( existingTemplates || [] ).reduce(
 				( _accumulator, existingTemplate ) => {
-					const prefix = `single-${ _postType.slug }-`;
-					if ( existingTemplate.slug.startsWith( prefix ) ) {
+					if ( existingTemplate.slug.startsWith( _prefix ) ) {
 						_accumulator.push(
-							existingTemplate.slug.substring( prefix.length )
+							existingTemplate.slug.substring( _prefix.length )
 						);
 					}
 					return _accumulator;
@@ -58,68 +245,125 @@ export const usePostTypesEntitiesInfo = ( existingTemplates ) => {
 				[]
 			);
 			if ( slugsWithTemplates.length ) {
-				accumulator[ _postType.slug ] = slugsWithTemplates;
+				accumulator[ entity.slug ] = slugsWithTemplates;
 			}
 			return accumulator;
 		}, {} );
-	}, [ postTypes, existingTemplates ] );
-	const postsToExcludePerEntity = useSelect(
+	}, [ entities, existingTemplates ] );
+	const recordsToExcludePerEntity = useSelect(
 		( select ) => {
 			if ( ! slugsToExcludePerEntity ) {
 				return;
 			}
-			const postsToExclude = Object.entries(
-				slugsToExcludePerEntity
-			).reduce( ( accumulator, [ slug, slugsWithTemplates ] ) => {
-				const postsWithTemplates = select( coreStore ).getEntityRecords(
-					'postType',
-					slug,
-					{
+			return Object.entries( slugsToExcludePerEntity ).reduce(
+				( accumulator, [ slug, slugsWithTemplates ] ) => {
+					const postsWithTemplates = select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
 						_fields: 'id',
 						context: 'view',
 						slug: slugsWithTemplates,
+					} );
+					if ( postsWithTemplates?.length ) {
+						accumulator[ slug ] = postsWithTemplates;
 					}
-				);
-				if ( postsWithTemplates?.length ) {
-					accumulator[ slug ] = postsWithTemplates;
-				}
-				return accumulator;
-			}, {} );
-			return postsToExclude;
+					return accumulator;
+				},
+				{}
+			);
 		},
 		[ slugsToExcludePerEntity ]
 	);
 	const entitiesInfo = useSelect(
 		( select ) => {
-			return postTypes?.reduce( ( accumulator, { slug } ) => {
-				const existingPosts =
-					postsToExcludePerEntity?.[ slug ]?.map(
+			return entities?.reduce( ( accumulator, { slug } ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
 						( { id } ) => id
 					) || [];
 				accumulator[ slug ] = {
 					hasEntities: !! select( coreStore ).getEntityRecords(
-						'postType',
+						entityName,
 						slug,
 						{
 							per_page: 1,
 							_fields: 'id',
 							context: 'view',
-							exclude: existingPosts,
+							exclude: existingEntitiesIds,
 						}
 					)?.length,
-					existingPosts,
+					existingEntitiesIds,
 				};
 				return accumulator;
 			}, {} );
 		},
-		[ postTypes, postsToExcludePerEntity ]
+		[ entities, recordsToExcludePerEntity ]
 	);
 	return entitiesInfo;
 };
 
-export const mapToIHasNameAndId = ( entities, path ) => {
-	return ( entities || [] ).map( ( entity ) => ( {
-		...entity,
-		name: decodeEntities( get( entity, path ) ),
-	} ) );
+export const useExtraTemplates = (
+	entities,
+	entityConfig,
+	onClickMenuItem
+) => {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const entitiesInfo = useEntitiesInfo(
+		existingTemplates,
+		entities,
+		entityConfig
+	);
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
+	const extraTemplates = ( entities || [] ).reduce(
+		( accumulator, entity ) => {
+			const { slug, labels, icon } = entity;
+			const slugForGeneralTemplate = entityConfig.templateSlug || slug;
+			// We need to check if the general template is part of the
+			// defaultTemplateTypes. If it is, just use that info and
+			// augment it with the specific template functionality.
+			const defaultTemplateType = defaultTemplateTypes?.find(
+				( { slug: _slug } ) => _slug === slugForGeneralTemplate
+			);
+			const generalTemplateSlug =
+				defaultTemplateType?.slug ||
+				`${ entityConfig.templatePrefix }${ slug }`;
+			const hasGeneralTemplate =
+				existingTemplateSlugs?.includes( generalTemplateSlug );
+			const menuItem = defaultTemplateType
+				? { ...defaultTemplateType }
+				: {
+						slug: generalTemplateSlug,
+						title: entityConfig.getTitle( labels ),
+						description: entityConfig.getDescription( labels ),
+						icon: entityConfig.getIcon?.( icon ),
+				  };
+			const hasEntities = entitiesInfo?.[ slug ]?.hasEntities;
+			// We have a different template creation flow only if they have entities.
+			if ( hasEntities ) {
+				menuItem.onClick = ( template ) => {
+					onClickMenuItem( {
+						type: entityConfig.entityName,
+						slug,
+						config: entityConfig,
+						labels,
+						hasGeneralTemplate,
+						template,
+						postsToExclude:
+							entitiesInfo[ slug ].existingEntitiesIds,
+					} );
+				};
+			}
+			// 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;
+		},
+		[]
+	);
+	return extraTemplates;
 };

package/src/components/code-editor/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { parse } from '@wordpress/blocks';
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
 import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -32,10 +32,20 @@ export default function CodeEditor() {
 		'postType',
 		templateType
 	);
-	const content =
-		contentStructure instanceof Function
-			? contentStructure( { blocks } )
-			: contentStructure;
+
+	// Replicates the logic found in getEditedPostContent().
+	let content;
+	if ( contentStructure instanceof Function ) {
+		content = contentStructure( { blocks } );
+	} else if ( blocks ) {
+		// If we have parsed blocks already, they should be our source of truth.
+		// Parsing applies block deprecations and legacy block conversions that
+		// unparsed content will not have.
+		content = __unstableSerializeAndClean( blocks );
+	} else {
+		content = contentStructure;
+	}
+
 	const { switchEditorMode } = useDispatch( editSiteStore );
 	return (
 		<div className="edit-site-code-editor">

package/src/components/editor/index.js

@@ -47,6 +47,17 @@ import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
+	/* translators: accessibility text for the editor top bar landmark region. */
+	header: __( 'Editor top bar' ),
+	/* translators: accessibility text for the editor content landmark region. */
+	body: __( 'Editor content' ),
+	/* translators: accessibility text for the editor settings landmark region. */
+	sidebar: __( 'Editor settings' ),
+	/* translators: accessibility text for the editor publish landmark region. */
+	actions: __( 'Editor publish' ),
+	/* translators: accessibility text for the editor footer landmark region. */
+	footer: __( 'Editor footer' ),
+	/* translators: accessibility text for the navigation sidebar landmark region. */
 	drawer: __( 'Navigation Sidebar' ),
 };
 

package/src/components/error-boundary/index.js

@@ -3,6 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { doAction } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -20,6 +21,10 @@ export default class ErrorBoundary extends Component {
 		};
 	}
 
+	componentDidCatch( error ) {
+		doAction( 'editor.ErrorBoundary.errorLogged', error );
+	}
+
 	static getDerivedStateFromError( error ) {
 		return { error };
 	}

package/src/components/global-styles/dimensions-panel.js

@@ -43,13 +43,8 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-	// Do not show the gap control panel for block-level global styles
-	// as they do not work on the frontend.
-	// See: https://github.com/WordPress/gutenberg/pull/39845.
-	// We can revert this condition when they're working again.
-	return !! name
-		? false
-		: settings && supports.includes( '--wp--style--block-gap' );
+
+	return settings && supports.includes( 'blockGap' );
 }
 
 function filterValuesBySides( values, sides ) {

package/src/components/global-styles/global-styles-provider.js

@@ -1,14 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	mergeWith,
-	pickBy,
-	isEmpty,
-	isObject,
-	identity,
-	mapValues,
-} from 'lodash';
+import { mergeWith, pickBy, isEmpty, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,6 +15,8 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { GlobalStylesContext } from './context';
 
+const identity = ( x ) => x;
+
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
 	// in which case we want the new array of values
@@ -36,7 +31,11 @@ export function mergeBaseAndUserConfigs( base, user ) {
 }
 
 const cleanEmptyObject = ( object ) => {
-	if ( ! isObject( object ) || Array.isArray( object ) ) {
+	if (
+		object === null ||
+		typeof object !== 'object' ||
+		Array.isArray( object )
+	) {
 		return object;
 	}
 	const cleanedNestedObjects = pickBy(

package/src/components/global-styles/hooks.js

@@ -182,6 +182,21 @@ export function getSupportedGlobalStylesPanels( name ) {
 	}
 
 	const supportKeys = [];
+
+	// Check for blockGap support.
+	// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
+	// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	if (
+		blockType?.supports?.spacing?.blockGap &&
+		blockType?.supports?.spacing?.__experimentalSkipSerialization !==
+			true &&
+		! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+			( spacingType ) => spacingType === 'blockGap'
+		)
+	) {
+		supportKeys.push( 'blockGap' );
+	}
+
 	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
 		if ( ! STYLE_PROPERTY[ styleName ].support ) {
 			return;

package/src/components/global-styles/screen-color-palette.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { TabPanel } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -16,8 +12,6 @@ import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
-	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-
 	return (
 		<>
 			<ScreenHeader
@@ -26,27 +20,31 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<ToggleGroupControl
-				className="edit-site-screen-color-palette-toggle"
-				value={ currentTab }
-				onChange={ setCurrentTab }
-				label={ __( 'Select palette type' ) }
-				hideLabelFromVision
-				isBlock
+			<TabPanel
+				tabs={ [
+					{
+						name: 'solid',
+						title: 'Solid color',
+						value: 'solid',
+					},
+					{
+						name: 'gradient',
+						title: 'Gradient',
+						value: 'gradient',
+					},
+				] }
 			>
-				<ToggleGroupControlOption
-					value="solid"
-					label={ __( 'Solid' ) }
-				/>
-				<ToggleGroupControlOption
-					value="gradient"
-					label={ __( 'Gradient' ) }
-				/>
-			</ToggleGroupControl>
-			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
-			{ currentTab === 'gradient' && (
-				<GradientPalettePanel name={ name } />
-			) }
+				{ ( tab ) => (
+					<>
+						{ tab.value === 'solid' && (
+							<ColorPalettePanel name={ name } />
+						) }
+						{ tab.value === 'gradient' && (
+							<GradientPalettePanel name={ name } />
+						) }
+					</>
+				) }
+			</TabPanel>
 		</>
 	);
 }

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

@@ -82,6 +82,7 @@ function LinkColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useStyle( 'elements.link.color.text', name );
+	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -93,9 +94,14 @@ function LinkColorItem( { name, parentMenu } ) {
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
-				</ColorIndicatorWrapper>
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ colorHover } />
+					</ColorIndicatorWrapper>
+				</ZStack>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>