@wordpress/edit-site 6.9.0 → 6.11.0

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,7 @@ 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';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -79,13 +81,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 +99,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const {
 			getEditorCanvasContainerView,
 			getEditedPostContext,
-			getCanvasMode,
 			isPage,
 			getEditedPostType,
 			getEditedPostId,
@@ -113,7 +115,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' ),
@@ -128,7 +129,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-	const isEditMode = canvasMode === 'edit';
+	const isEditMode = canvas === 'edit';
 	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
@@ -143,16 +144,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 +176,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 )
 							),
@@ -230,7 +231,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						'show-icon-labels': showIconLabels,
 					} ) }
 					styles={ styles }
-					enableRegionNavigation={ false }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
@@ -261,17 +261,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,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -19,8 +19,8 @@ function useEditorTitle() {
 	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' ),
+			// 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' ),
 			getTitle(),
 			POST_TYPE_LABELS[ editedPost.type ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]

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

@@ -6,9 +6,11 @@ import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -25,6 +27,19 @@ import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
+/**
+ * Maps the fonts with the source, if available.
+ *
+ * @param {Array}  fonts  The fonts to map.
+ * @param {string} source The source of the fonts.
+ * @return {Array} The mapped fonts.
+ */
+function mapFontsWithSource( fonts, source ) {
+	return fonts
+		? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )
+		: [];
+}
+
 function FontFamilies() {
 	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
 		useContext( FontLibraryContext );
@@ -34,18 +49,12 @@ function FontFamilies() {
 		undefined,
 		'base'
 	);
-	const themeFonts = fontFamilies?.theme
-		? fontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const customFonts = fontFamilies?.custom
-		? fontFamilies.custom
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
-
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+	const hasFonts = 0 < activeFonts.length;
 	const hasInstalledFonts =
 		hasFonts ||
 		baseFontFamilies?.theme?.length > 0 ||
@@ -60,12 +69,20 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 4 }>
-				{ [ ...themeFonts, ...customFonts ].length > 0 && (
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
+				{ activeFonts.length > 0 && (
 					<>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
-							{ themeFonts.map( ( font ) => (
+							{ activeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
@@ -75,31 +92,30 @@ function FontFamilies() {
 					</>
 				) }
 				{ ! hasFonts && (
-					<VStack>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<>
 						<Text as="p">
 							{ hasInstalledFonts
 								? __( 'No fonts activated.' )
 								: __( 'No fonts installed.' ) }
 						</Text>
-					</VStack>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () => {
+								setModalTabOpen(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage fonts' )
+								: __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
-				<Button
-					className="edit-site-global-styles-font-families__manage-fonts"
-					variant="secondary"
-					__next40pxDefaultSize
-					onClick={ () => {
-						setModalTabOpen(
-							hasInstalledFonts
-								? 'installed-fonts'
-								: 'upload-fonts'
-						);
-					} }
-				>
-					{ hasInstalledFonts
-						? __( 'Manage fonts' )
-						: __( 'Add fonts' ) }
-				</Button>
 			</VStack>
 		</>
 	);

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() {
@@ -36,7 +36,7 @@ function FontSize() {
 
 	const {
 		params: { origin, slug },
-		goTo,
+		goBack,
 	} = useNavigator();
 
 	const [ fontSizes, setFontSizes ] = useGlobalSetting(
@@ -53,10 +53,10 @@ function FontSize() {
 
 	// Navigate to the font sizes list if the font size is not available.
 	useEffect( () => {
-		if ( ! fontSize ) {
-			goTo( '/typography/font-sizes/', { isBack: true } );
+		if ( !! slug && ! fontSize ) {
+			goBack();
 		}
-	}, [ fontSize, goTo ] );
+	}, [ slug, fontSize, goBack ] );
 
 	if ( ! origin || ! slug || ! fontSize ) {
 		return null;
@@ -158,7 +158,6 @@ function FontSize() {
 							__( 'Manage the font size %s.' ),
 							fontSize.name
 						) }
-						onBack={ () => goTo( '/typography/font-sizes/' ) }
 					/>
 					{ origin === 'custom' && (
 						<FlexItem>
@@ -167,7 +166,7 @@ function FontSize() {
 								marginBottom={ 0 }
 								paddingX={ 4 }
 							>
-								<DropdownMenuV2
+								<Menu
 									trigger={
 										<Button
 											size="small"
@@ -176,28 +175,28 @@ 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>
 					) }
 				</HStack>
 
 				<View>
-					<Spacer paddingX={ 4 }>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
 						<VStack spacing={ 4 }>
 							<FlexItem>
 								<FontSizePreview fontSize={ fontSize } />

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>
 				) }

package/src/components/global-styles/screen-block-list.js

@@ -86,16 +86,9 @@ function BlockMenuItem( { block } ) {
 		return null;
 	}
 
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-		__( '%s block styles' ),
-		block.title
-	);
-
 	return (
 		<NavigationButtonAsItem
 			path={ '/blocks/' + encodeURIComponent( block.name ) }
-			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
@@ -174,7 +167,7 @@ function ScreenBlockList() {
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }
-				label={ __( 'Search for blocks' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 			<MemoizedBlockList filterValue={ deferredFilterValue } />

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

@@ -33,6 +33,7 @@ function ScreenCSS() {
 				description={
 					<>
 						{ description }
+						<br />
 						<ExternalLink
 							href={ __(
 								'https://developer.wordpress.org/advanced-administration/wordpress/css/'