@wordpress/edit-site 4.3.10 → 4.6.0

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

@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -24,28 +24,28 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	return (
 		<ItemGroup>
 			{ hasTypographyPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
 				>
 					{ __( 'Typography' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasColorPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
 				>
 					{ __( 'Colors' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasLayoutPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
 				>
 					{ __( 'Layout' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 		</ItemGroup>
 	);

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

@@ -7,30 +7,33 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { NavigationBackButton } from './navigation-button';
-
 function ScreenHeader( { title, description } ) {
 	return (
-		<VStack spacing={ 2 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						size="small"
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
 				</Spacer>
-			</HStack>
+			</View>
 			{ description && (
 				<p className="edit-site-global-styles-header__description">
 					{ description }

package/src/components/global-styles/navigation-button.js

@@ -28,12 +28,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( props ) {
+function NavigationButtonAsItem( props ) {
 	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( props ) {
+function NavigationBackButtonAsItem( props ) {
 	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
-export { NavigationButton, NavigationBackButton };
+export { NavigationButtonAsItem, NavigationBackButtonAsItem };

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

@@ -16,7 +16,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { useSetting } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 
@@ -58,7 +58,7 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButton path={ screenPath }>
+				<NavigationButtonAsItem path={ screenPath }>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'
@@ -73,7 +73,7 @@ function Palette( { name } ) {
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			</ItemGroup>
 		</VStack>
 	);

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

@@ -22,7 +22,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -61,12 +61,12 @@ function BlockMenuItem( { block } ) {
 	}
 
 	return (
-		<NavigationButton path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

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

@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
@@ -33,7 +33,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
@@ -42,7 +42,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -56,14 +56,14 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -77,14 +77,14 @@ function LinkColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

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

@@ -3,8 +3,8 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
@@ -21,7 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 
@@ -37,48 +37,58 @@ function ScreenRoot() {
 	return (
 		<Card size="small">
 			<CardBody>
-				<VStack spacing={ 2 }>
+				<VStack spacing={ 4 }>
 					<Card>
 						<CardMedia>
 							<StylesPreview />
 						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
-						<NavigationButton path="/variations">
-							<HStack justify="space-between">
-								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
-								<IconWithCurrentColor
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigationButton>
+						<ItemGroup>
+							<NavigationButtonAsItem path="/variations">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Browse styles' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
 					) }
+					<ContextMenu />
 				</VStack>
 			</CardBody>
 
-			<CardBody>
-				<ContextMenu />
-			</CardBody>
-
 			<CardDivider />
 
 			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					/*
+					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
+					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 */
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Customize the appearance of specific blocks for the whole site.'
+					) }
+				</Spacer>
 				<ItemGroup>
-					<Item>
-						{ __(
-							'Customize the appearance of specific blocks for the whole site.'
-						) }
-					</Item>
-					<NavigationButton path="/blocks">
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
 								icon={ isRTL() ? chevronLeft : chevronRight }
 							/>
 						</HStack>
-					</NavigationButton>
+					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
 		</Card>

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

@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -44,7 +44,7 @@ function Item( { name, parentMenu, element, label } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/typography/' + element }>
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -62,7 +62,7 @@ function Item( { name, parentMenu, element, label } ) {
 				</FlexItem>
 				<FlexItem>{ label }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

package/src/components/global-styles/test/use-global-styles-output.js

@@ -379,6 +379,7 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
 					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );

package/src/components/global-styles/use-global-styles-output.js

@@ -26,15 +26,12 @@ import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { GlobalStylesContext } from './context';
+import { useSetting } from './hooks';
 
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
@@ -223,11 +220,8 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
+	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
@@ -363,7 +357,7 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors ) => {
+export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
@@ -402,6 +396,26 @@ export const toStyles = ( tree, blockSelectors ) => {
 		ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
 	} );
 
+	/* Add alignment / layout styles */
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+	if ( hasBlockGapSupport ) {
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+	}
+
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
 		if ( ROOT_BLOCK_SELECTOR === selector ) {
 			// Do not add extra specificity for top-level classes.
@@ -448,6 +462,8 @@ export function useGlobalStylesOutput() {
 	const [ settings, setSettings ] = useState( {} );
 	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const [ blockGap ] = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
 
 	useEffect( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
@@ -459,7 +475,11 @@ export function useGlobalStylesOutput() {
 			mergedConfig,
 			blockSelectors
 		);
-		const globalStyles = toStyles( mergedConfig, blockSelectors );
+		const globalStyles = toStyles(
+			mergedConfig,
+			blockSelectors,
+			hasBlockGapSupport
+		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
 			{
@@ -475,5 +495,5 @@ export function useGlobalStylesOutput() {
 		setSvgFilters( filters );
 	}, [ mergedConfig ] );
 
-	return [ stylesheets, settings, svgFilters ];
+	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }

package/src/components/header/document-actions/style.scss

@@ -66,7 +66,7 @@
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content > div {
+.edit-site-document-actions__info-dropdown > .components-popover__content {
 	padding: 0;
 	min-width: 240px;
 }

package/src/components/header/style.scss

@@ -104,8 +104,9 @@ body.is-navigation-sidebar-open {
 	margin: 0 -6px 0;
 }
 
+
 /**
- * Buttons in the Toolbar
+ * Buttons on the right side
  */
 
 .edit-site-header__actions {
@@ -113,36 +114,23 @@ body.is-navigation-sidebar-open {
 	align-items: center;
 	padding-right: $grid-unit-05;
 
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
+	@include break-small () {
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	// Adjust button paddings to scale better to mobile.
-	.editor-post-saved-state,
-	.components-button.components-button {
-		margin-right: $grid-unit-05;
-
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
-	}
+	gap: $grid-unit-05;
 
-	.editor-post-saved-state,
-	.components-button.is-tertiary {
-		padding: 0 #{$grid-unit-15 * 0.5};
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 
-	.edit-site-more-menu .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
-	}
+	// Pinned items.
+	.interface-pinned-items {
+		display: none;
 
-	@include break-small() {
-		padding-right: $grid-unit-20;
+		@include break-medium() {
+			display: inline-flex;
+		}
 	}
 }
 
@@ -192,11 +180,8 @@ body.is-navigation-sidebar-open {
 	.edit-site-save-button__button {
 		padding-left: 6px;
 		padding-right: 6px;
-		margin-right: $grid-unit-05;
-	}
-	.block-editor-post-preview__button-toggle {
-		margin-right: $grid-unit-05;
 	}
+
 	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
 	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {

package/src/components/list/style.scss

@@ -95,6 +95,7 @@
 		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
 			width: calc(40% - 18px);
+			word-break: break-word;
 		}
 
 		// Actions.

package/src/components/list/table.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,

package/src/components/navigation-sidebar/navigation-panel/constants.js

@@ -31,7 +31,7 @@ export const TEMPLATES_SECONDARY = [
 	'date',
 	'tag',
 	'attachment',
-	'single-post',
+	'single',
 	'front-page',
 ];
 
@@ -45,7 +45,7 @@ export const TEMPLATES_GENERAL = [ 'page-home' ];
 export const TEMPLATES_POSTS_PREFIXES = [
 	'post-',
 	'author-',
-	'single-post-',
+	'single-',
 	'tag-',
 ];
 

package/src/components/preferences-modal/index.js

@@ -39,7 +39,14 @@ export default function EditSitePreferencesModal( {
 					<EnableFeature
 						featureName="showIconLabels"
 						label={ __( 'Show button text labels' ) }
-						help={ __( 'Show text instead of icons on buttons' ) }
+						help={ __( 'Show text instead of icons on buttons.' ) }
+					/>
+					<EnableFeature
+						featureName="showListViewByDefault"
+						help={ __(
+							'Opens the block list view sidebar by default.'
+						) }
+						label={ __( 'Always open list view' ) }
 					/>
 				</PreferencesModalSection>
 			),

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

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -36,8 +37,8 @@ export default function useTitle( title ) {
 			const formattedTitle = sprintf(
 				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
 				__( '%1$s ‹ %2$s — WordPress' ),
-				title,
-				siteTitle
+				decodeEntities( title ),
+				decodeEntities( siteTitle )
 			);
 
 			document.title = formattedTitle;

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -59,11 +59,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView
-					showNestedBlocks
-					__experimentalFeatures
-					__experimentalPersistentListViewFeatures
-				/>
+				<ListView />
 			</div>
 		</div>
 	);

package/src/components/sidebar/index.js

@@ -46,6 +46,7 @@ export function SidebarComplementaryAreaFills() {
 		[]
 	);
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
 	useEffect( () => {
 		if ( ! isEditorSidebarOpened ) return;
 		if ( hasBlockSelection ) {
@@ -54,6 +55,7 @@ export function SidebarComplementaryAreaFills() {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
 	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;

package/src/components/sidebar/navigation-menu-sidebar/index.js

@@ -16,7 +16,7 @@ export default function NavigationMenuSidebar() {
 		<DefaultSidebar
 			className="edit-site-navigation-menu-sidebar"
 			identifier="edit-site/navigation-menu"
-			title={ __( 'Navigation Menus' ) }
+			title={ __( 'Navigation' ) }
 			icon={ navigation }
 			closeLabel={ __( 'Close navigation menu sidebar' ) }
 			panelClassName="edit-site-navigation-menu-sidebar__panel"
@@ -24,6 +24,9 @@ export default function NavigationMenuSidebar() {
 				<Flex>
 					<FlexBlock>
 						<strong>{ __( 'Navigation Menus' ) }</strong>
+						<span className="edit-site-navigation-sidebar__beta">
+							{ __( 'Beta' ) }
+						</span>
 					</FlexBlock>
 				</Flex>
 			}