@wordpress/edit-site 6.10.0 → 6.12.0

package/src/components/app/index.js

@@ -18,10 +18,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import useLayoutAreas from '../layout/router';
+import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
+import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
@@ -29,10 +29,10 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis );
 function AppLayout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
-	useEditModeCommands();
 	useCommonCommands();
 	useSetCommandContext();
-	const route = useLayoutAreas();
+	useRegisterSiteEditorRoutes();
+	const route = useActiveRoute();
 
 	return <Layout route={ route } />;
 }

package/src/components/block-editor/use-editor-iframe-props.js

@@ -6,37 +6,37 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 
-export default function useEditorIframeProps() {
-	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-		return {
-			canvasMode: getCanvasMode(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
-		};
+export default function useEditorIframeProps() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = params;
+	const currentPostIsTrashed = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+			'trash'
+		);
 	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
-		if ( canvasMode === 'edit' ) {
+		if ( canvas === 'edit' ) {
 			setIsFocused( false );
 		}
-	}, [ canvasMode ] );
+	}, [ canvas ] );
 
 	// In view mode, make the canvas iframe be perceived and behave as a button
 	// to switch to edit mode, with a meaningful label and no title attribute.
@@ -55,12 +55,15 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				setCanvasMode( 'edit' );
+				history.push( { ...params, canvas: 'edit' }, undefined, {
+					transition: 'canvas-mode-edit-transition',
+				} );
 			}
 		},
-		onClick: () => {
-			setCanvasMode( 'edit' );
-		},
+		onClick: () =>
+			history.push( { ...params, canvas: 'edit' }, undefined, {
+				transition: 'canvas-mode-edit-transition',
+			} ),
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {
 				event.preventDefault();
@@ -72,8 +75,8 @@ export default function useEditorIframeProps() {
 
 	return {
 		className: clsx( 'edit-site-visual-editor__editor-canvas', {
-			'is-focused': isFocused && canvasMode === 'view',
+			'is-focused': isFocused && canvas === 'view',
 		} ),
-		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+		...( canvas === 'view' ? viewModeIframeProps : {} ),
 	};
 }

package/src/components/block-editor/use-site-editor-settings.js

@@ -29,31 +29,33 @@ function useNavigateToPreviousEntityRecord() {
 			previousLocation?.params.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;
-		// Disable reason: previousLocation changes when the component updates for any reason, not
+		// `previousLocation` changes when the component updates for any reason, not
 		// just when location changes. Until this is fixed we can't add it to deps. See
 		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ location, history ] );
 	return goBack;
 }
 
 export function useSpecificEditorSettings() {
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { canvasMode, settings, shouldUseTemplateAsDefaultRenderingMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext, getCanvasMode, getSettings } = unlock(
+	const { settings, shouldUseTemplateAsDefaultRenderingMode } = useSelect(
+		( select ) => {
+			const { getEditedPostContext, getSettings } = unlock(
 				select( editSiteStore )
 			);
 			const _context = getEditedPostContext();
 			return {
-				canvasMode: getCanvasMode(),
 				settings: getSettings(),
 				// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
 				// @see https://github.com/WordPress/gutenberg/pull/62304/
 				shouldUseTemplateAsDefaultRenderingMode:
 					_context?.postId && _context?.postType !== 'post',
 			};
-		}, [] );
+		},
+		[]
+	);
 	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
@@ -65,15 +67,15 @@ export function useSpecificEditorSettings() {
 
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
-			focusMode: canvasMode !== 'view',
+			focusMode: canvas !== 'view',
 			defaultRenderingMode,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
-			__unstableIsPreviewMode: canvasMode === 'view',
+			isPreviewMode: canvas === 'view',
 		};
 	}, [
 		settings,
-		canvasMode,
+		canvas,
 		defaultRenderingMode,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,

package/src/components/editor/index.js

@@ -23,6 +23,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -47,6 +48,8 @@ import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
+import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -79,13 +82,14 @@ const siteIconVariants = {
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const isLoading = useIsSiteEditorLoading();
+	useAdaptEditorToCanvas( canvas );
 	const {
 		editedPostType,
 		editedPostId,
 		contextPostType,
 		contextPostId,
-		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
 		showIconLabels,
@@ -96,7 +100,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const {
 			getEditorCanvasContainerView,
 			getEditedPostContext,
-			getCanvasMode,
 			isPage,
 			getEditedPostType,
 			getEditedPostId,
@@ -113,7 +116,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			editedPostId: getEditedPostId(),
 			contextPostType: _context?.postId ? _context.postType : undefined,
 			contextPostId: _context?.postId ? _context.postId : undefined,
-			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
@@ -124,12 +126,15 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	useEditorTitle();
+	const postWithTemplate = !! contextPostId;
+	useEditorTitle(
+		postWithTemplate ? contextPostType : editedPostType,
+		postWithTemplate ? contextPostId : editedPostId
+	);
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-	const isEditMode = canvasMode === 'edit';
-	const postWithTemplate = !! contextPostId;
+	const isEditMode = canvas === 'edit';
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'
@@ -143,16 +148,16 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 				css:
-					canvasMode === 'view'
+					canvas === 'view'
 						? `body{min-height: 100vh; ${
 								currentPostIsTrashed ? '' : 'cursor: pointer;'
 						  }}`
 						: undefined,
 			},
 		],
-		[ settings.styles, canvasMode, currentPostIsTrashed ]
+		[ settings.styles, canvas, currentPostIsTrashed ]
 	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -175,7 +180,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 								: newItem.title?.rendered;
 						createSuccessNotice(
 							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
+								// translators: %s: Title of the created post or template, e.g: "Hello world".
 								__( '"%s" successfully created.' ),
 								decodeEntities( _title )
 							),
@@ -213,11 +218,19 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 
 	return (
 		<>
-			<GlobalStylesRenderer />
+			<GlobalStylesRenderer
+				disableRootPadding={ editedPostType !== TEMPLATE_POST_TYPE }
+			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
-			{ isEditMode && <WelcomeGuide /> }
+			{ isEditMode && (
+				<WelcomeGuide
+					postType={
+						postWithTemplate ? contextPostType : editedPostType
+					}
+				/>
+			) }
 			{ isReady && (
 				<Editor
 					postType={
@@ -260,17 +273,37 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 											showTooltip
 											tooltipPosition="middle right"
 											onClick={ () => {
-												setCanvasMode( 'view' );
+												resetZoomLevel();
+
 												// TODO: this is a temporary solution to navigate to the posts list if we are
 												// come here through `posts list` and are in focus mode editing a template, template part etc..
 												if (
 													isPostsList &&
 													params?.focusMode
 												) {
-													history.push( {
-														page: 'gutenberg-posts-dashboard',
-														postType: 'post',
-													} );
+													history.push(
+														{
+															page: 'gutenberg-posts-dashboard',
+															postType: 'post',
+														},
+														undefined,
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
+												} else {
+													history.push(
+														{
+															...params,
+															canvas: undefined,
+														},
+														undefined,
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
 												}
 											} }
 										>

package/src/components/editor/use-adapt-editor-to-canvas.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
+import { useLayoutEffect } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export function useAdaptEditorToCanvas( canvas ) {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const {
+		setDeviceType,
+		closePublishSidebar,
+		setIsListViewOpened,
+		setIsInserterOpened,
+	} = useDispatch( editorStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const registry = useRegistry();
+	useLayoutEffect( () => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
+		registry.batch( () => {
+			clearSelectedBlock();
+			setDeviceType( 'Desktop' );
+			closePublishSidebar();
+			setIsInserterOpened( false );
+
+			// Check if the block list view should be open by default.
+			// If `distractionFree` mode is enabled, the block list view should not be open.
+			// This behavior is disabled for small viewports.
+			if (
+				isMediumOrBigger &&
+				canvas === 'edit' &&
+				getPreference( 'core', 'showListViewByDefault' ) &&
+				! getPreference( 'core', 'distractionFree' )
+			) {
+				setIsListViewOpened( true );
+			} else {
+				setIsListViewOpened( false );
+			}
+		} );
+	}, [
+		canvas,
+		registry,
+		clearSelectedBlock,
+		setDeviceType,
+		closePublishSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		getPreference,
+	] );
+}

package/src/components/editor/use-editor-title.js

@@ -1,35 +1,59 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
+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';
 
 /**
  * Internal dependencies
  */
-import useEditedEntityRecord from '../use-edited-entity-record';
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-function useEditorTitle() {
-	const {
-		record: editedPost,
-		getTitle,
-		isLoaded: hasLoadedPost,
-	} = useEditedEntityRecord();
-	let title;
-	if ( hasLoadedPost ) {
-		title = sprintf(
-			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
-			__( '%1$s ‹ %2$s' ),
-			getTitle(),
-			POST_TYPE_LABELS[ editedPost.type ] ??
+function useEditorTitle( postType, postId ) {
+	const { title, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			const _isLoaded = hasFinishedResolution( 'getEditedEntityRecord', [
+				'postType',
+				postType,
+				postId,
+			] );
+			const templateInfo = getTemplateInfo( _record );
+
+			return {
+				title: templateInfo.title,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	let editorTitle;
+	if ( isLoaded ) {
+		editorTitle = sprintf(
+			// translators: A breadcrumb trail for the Admin document title. 1: title of template being edited, 2: type of template (Template or Template Part).
+			_x( '%1$s ‹ %2$s', 'breadcrumb trail' ),
+			decodeEntities( title ),
+			POST_TYPE_LABELS[ postType ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
 		);
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URLQueryController> from double-announcing.
-	useTitle( hasLoadedPost && title );
+	useTitle( isLoaded && editorTitle );
 }
 
 export default useEditorTitle;

package/src/components/editor-canvas-container/style.scss

@@ -1,6 +1,5 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
-	background-color: $gray-300;
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {

package/src/components/global-styles/font-sizes/font-size.js

@@ -27,7 +27,7 @@ import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';
 import RenameFontSizeDialog from './rename-font-size-dialog';
 import SizeControl from '../size-control';
 
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontSize() {
@@ -166,7 +166,7 @@ function FontSize() {
 								marginBottom={ 0 }
 								paddingX={ 4 }
 							>
-								<DropdownMenuV2
+								<Menu
 									trigger={
 										<Button
 											size="small"
@@ -175,21 +175,17 @@ function FontSize() {
 										/>
 									}
 								>
-									<DropdownMenuV2.Item
-										onClick={ toggleRenameDialog }
-									>
-										<DropdownMenuV2.ItemLabel>
+									<Menu.Item onClick={ toggleRenameDialog }>
+										<Menu.ItemLabel>
 											{ __( 'Rename' ) }
-										</DropdownMenuV2.ItemLabel>
-									</DropdownMenuV2.Item>
-									<DropdownMenuV2.Item
-										onClick={ toggleDeleteConfirm }
-									>
-										<DropdownMenuV2.ItemLabel>
+										</Menu.ItemLabel>
+									</Menu.Item>
+									<Menu.Item onClick={ toggleDeleteConfirm }>
+										<Menu.ItemLabel>
 											{ __( 'Delete' ) }
-										</DropdownMenuV2.ItemLabel>
-									</DropdownMenuV2.Item>
-								</DropdownMenuV2>
+										</Menu.ItemLabel>
+									</Menu.Item>
+								</Menu>
 							</Spacer>
 						</FlexItem>
 					) }

package/src/components/global-styles/font-sizes/font-sizes-count.js

@@ -23,10 +23,7 @@ function FontSizes() {
 				<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>
 			</HStack>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem
-					path="/typography/font-sizes"
-					aria-label={ __( 'Edit font size presets' ) }
-				>
+				<NavigationButtonAsItem path="/typography/font-sizes">
 					<HStack direction="row">
 						<FlexItem>{ __( 'Font size presets' ) }</FlexItem>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />

package/src/components/global-styles/font-sizes/font-sizes.js

@@ -27,7 +27,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import Subtitle from '../subtitle';
 import { NavigationButtonAsItem } from '../navigation-button';
@@ -81,7 +81,7 @@ function FontSizeGroup( {
 							/>
 						) }
 						{ !! handleResetFontSizes && (
-							<DropdownMenuV2
+							<Menu
 								trigger={
 									<Button
 										size="small"
@@ -92,16 +92,14 @@ function FontSizeGroup( {
 									/>
 								}
 							>
-								<DropdownMenuV2.Item
-									onClick={ toggleResetDialog }
-								>
-									<DropdownMenuV2.ItemLabel>
+								<Menu.Item onClick={ toggleResetDialog }>
+									<Menu.ItemLabel>
 										{ origin === 'custom'
 											? __( 'Remove font size presets' )
 											: __( 'Reset font size presets' ) }
-									</DropdownMenuV2.ItemLabel>
-								</DropdownMenuV2.Item>
-							</DropdownMenuV2>
+									</Menu.ItemLabel>
+								</Menu.Item>
+							</Menu>
 						) }
 					</FlexItem>
 				</HStack>

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

@@ -54,32 +54,35 @@ function Palette( { name } ) {
 	const screenPath = ! name
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
-	const paletteButtonText =
-		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem
-					path={ screenPath }
-					aria-label={ paletteButtonText }
-				>
+				<NavigationButtonAsItem path={ screenPath }>
 					<HStack direction="row">
-						{ colors.length <= 0 && (
+						{ colors.length > 0 ? (
+							<>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color }, index ) => (
+											<ColorIndicatorWrapper
+												key={ `${ color }-${ index }` }
+											>
+												<ColorIndicator
+													colorValue={ color }
+												/>
+											</ColorIndicatorWrapper>
+										) ) }
+								</ZStack>
+								<FlexItem isBlock>
+									{ __( 'Edit palette' ) }
+								</FlexItem>
+							</>
+						) : (
 							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
 						) }
-						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors
-								.slice( 0, 5 )
-								.map( ( { color }, index ) => (
-									<ColorIndicatorWrapper
-										key={ `${ color }-${ index }` }
-									>
-										<ColorIndicator colorValue={ color } />
-									</ColorIndicatorWrapper>
-								) ) }
-						</ZStack>
 						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>

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

@@ -48,17 +48,12 @@ function RootMenu() {
 					<NavigationButtonAsItem
 						icon={ typography }
 						path="/typography"
-						aria-label={ __( 'Typography styles' ) }
 					>
 						{ __( 'Typography' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasColorPanel && (
-					<NavigationButtonAsItem
-						icon={ color }
-						path="/colors"
-						aria-label={ __( 'Colors styles' ) }
-					>
+					<NavigationButtonAsItem icon={ color } path="/colors">
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
@@ -72,20 +67,12 @@ function RootMenu() {
 					</NavigationButtonAsItem>
 				) }
 				{ hasShadowPanel && (
-					<NavigationButtonAsItem
-						icon={ shadowIcon }
-						path="/shadows"
-						aria-label={ __( 'Shadow styles' ) }
-					>
+					<NavigationButtonAsItem icon={ shadowIcon } path="/shadows">
 						{ __( 'Shadows' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasLayoutPanel && (
-					<NavigationButtonAsItem
-						icon={ layout }
-						path="/layout"
-						aria-label={ __( 'Layout styles' ) }
-					>
+					<NavigationButtonAsItem icon={ layout } path="/layout">
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }