@wordpress/edit-site 4.7.0 → 4.10.0

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

@@ -0,0 +1,369 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+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';
+
+/**
+ * @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' ];
+		return postTypes?.filter(
+			( { viewable, slug } ) =>
+				viewable && ! excludedPostTypes.includes( slug )
+		);
+	}, [ 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 ] );
+};
+
+/**
+ * `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 an entity having
+ * records that we can create a specific template for.
+ *
+ * For example we can search for `terms` in `taxonomy` entity or
+ * `posts` in `postType` entity.
+ *
+ * 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.
+ */
+const useEntitiesInfo = (
+	existingTemplates,
+	entities,
+	{ entityName, templatePrefix, templateSlug }
+) => {
+	const slugsToExcludePerEntity = useMemo( () => {
+		return entities?.reduce( ( accumulator, entity ) => {
+			let _prefix = `${ templateSlug || entity.slug }-`;
+			if ( templatePrefix ) {
+				_prefix = templatePrefix + _prefix;
+			}
+			const slugsWithTemplates = ( existingTemplates || [] ).reduce(
+				( _accumulator, existingTemplate ) => {
+					if ( existingTemplate.slug.startsWith( _prefix ) ) {
+						_accumulator.push(
+							existingTemplate.slug.substring( _prefix.length )
+						);
+					}
+					return _accumulator;
+				},
+				[]
+			);
+			if ( slugsWithTemplates.length ) {
+				accumulator[ entity.slug ] = slugsWithTemplates;
+			}
+			return accumulator;
+		}, {} );
+	}, [ entities, existingTemplates ] );
+	const recordsToExcludePerEntity = useSelect(
+		( select ) => {
+			if ( ! slugsToExcludePerEntity ) {
+				return;
+			}
+			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;
+					}
+					return accumulator;
+				},
+				{}
+			);
+		},
+		[ slugsToExcludePerEntity ]
+	);
+	const entitiesInfo = useSelect(
+		( select ) => {
+			return entities?.reduce( ( accumulator, { slug } ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: !! select( coreStore ).getEntityRecords(
+						entityName,
+						slug,
+						{
+							per_page: 1,
+							_fields: 'id',
+							context: 'view',
+							exclude: existingEntitiesIds,
+						}
+					)?.length,
+					existingEntitiesIds,
+				};
+				return accumulator;
+			}, {} );
+		},
+		[ entities, recordsToExcludePerEntity ]
+	);
+	return entitiesInfo;
+};
+
+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/block-editor/block-inspector-button.js

@@ -30,9 +30,8 @@ export default function BlockInspectorButton( { onClick = () => {} } ) {
 		} ),
 		[]
 	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	const label = isBlockInspectorOpen
 		? __( 'Hide more settings' )

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

@@ -51,12 +51,8 @@ const LAYOUT = {
 export default function BlockEditor( { setIsInserterOpen } ) {
 	const { storedSettings, templateType, templateId, page } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				getEditedPostType,
-				getEditedPostId,
-				getPage,
-			} = select( editSiteStore );
+			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
+				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
@@ -78,9 +74,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
 		( select ) => ( {
 			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories: select(
-				coreStore
-			).getBlockPatternCategories(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
 		} ),
 		[]
 	);

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/edit-template-part-menu-button/index.js

@@ -34,9 +34,8 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
-			const block = select( blockEditorStore ).getBlock(
-				selectedClientId
-			);
+			const block =
+				select( blockEditorStore ).getBlock( selectedClientId );
 
 			if ( block && isTemplatePart( block ) ) {
 				const { theme, slug } = block.attributes;

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' ),
 };
 
@@ -119,10 +130,8 @@ function Editor( { onError } ) {
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [
-		isEntitiesSavedStatesOpen,
-		setIsEntitiesSavedStatesOpen,
-	] = useState( false );
+	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
+		useState( false );
 	const openEntitiesSavedStates = useCallback(
 		() => setIsEntitiesSavedStatesOpen( true ),
 		[]
@@ -217,7 +226,8 @@ function Editor( { onError } ) {
 										<InterfaceSkeleton
 											labels={ {
 												...interfaceLabels,
-												secondarySidebar: secondarySidebarLabel,
+												secondarySidebar:
+													secondarySidebarLabel,
 											} }
 											className={
 												showIconLabels &&

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/context-menu.js

@@ -27,6 +27,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
+					aria-label={ __( 'Typography styles' ) }
 				>
 					{ __( 'Typography' ) }
 				</NavigationButtonAsItem>
@@ -35,6 +36,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
+					aria-label={ __( 'Colors styles' ) }
 				>
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
@@ -43,6 +45,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
+					aria-label={ __( 'Layout styles' ) }
 				>
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>

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(
@@ -48,9 +47,8 @@ const cleanEmptyObject = ( object ) => {
 
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId = select(
-			coreStore
-		).__experimentalGetCurrentGlobalStylesId();
+		const _globalStylesId =
+			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 		const record = _globalStylesId
 			? select( coreStore ).getEditedEntityRecord(
 					'root',
@@ -108,11 +106,8 @@ function useGlobalStylesBaseConfig() {
 }
 
 function useGlobalStylesContext() {
-	const [
-		isUserConfigReady,
-		userConfig,
-		setUserConfig,
-	] = useGlobalStylesUserConfig();
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {

package/src/components/global-styles/gradients-palette-panel.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,8 @@ import { __ } from '@wordpress/i18n';
 import { useSetting } from './hooks';
 import Subtitle from './subtitle';
 
+const noop = () => {};
+
 export default function GradientPalettePanel( { name } ) {
 	const [ themeGradients, setThemeGradients ] = useSetting(
 		'color.gradients.theme',

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

@@ -27,9 +27,10 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback( () => setUserConfig( () => EMPTY_CONFIG ), [
-			setUserConfig,
-		] ),
+		useCallback(
+			() => setUserConfig( () => EMPTY_CONFIG ),
+			[ setUserConfig ]
+		),
 	];
 };
 
@@ -158,6 +159,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -180,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/palette.js

@@ -58,7 +58,10 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem path={ screenPath }>
+				<NavigationButtonAsItem
+					path={ screenPath }
+					aria-label={ __( 'Color palettes' ) }
+				>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'