@wordpress/edit-site 5.3.2 → 5.4.0

package/src/components/editor/index.js

@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -17,7 +17,7 @@ import {
 	store as interfaceStore,
 } from '@wordpress/interface';
 import { EditorNotices, EditorSnackbars } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -29,12 +29,14 @@ import KeyboardShortcuts from '../keyboard-shortcuts';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
+import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
+import useEditedEntityRecord from '../use-edited-entity-record';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -49,11 +51,15 @@ const interfaceLabels = {
 
 export default function Editor() {
 	const {
-		editedPostId,
-		editedPostType,
-		editedPost,
+		record: editedPost,
+		getTitle,
+		isLoaded: hasLoadedPost,
+	} = useEditedEntityRecord();
+
+	const { id: editedPostId, type: editedPostType } = editedPost;
+
+	const {
 		context,
-		hasLoadedPost,
 		editorMode,
 		canvasMode,
 		blockEditorMode,
@@ -63,36 +69,19 @@ export default function Editor() {
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
-			getEditedPostType,
-			getEditedPostId,
 			getEditedPostContext,
 			getEditorMode,
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
 		} = unlock( select( editSiteStore ) );
-		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
 		return {
-			editedPostId: postId,
-			editedPostType: postType,
-			editedPost: postId
-				? getEntityRecord( 'postType', postType, postId )
-				: null,
 			context: getEditedPostContext(),
-			hasLoadedPost: postId
-				? hasFinishedResolution( 'getEntityRecord', [
-						'postType',
-						postType,
-						postId,
-				  ] )
-				: false,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
 			blockEditorMode: __unstableGetEditorMode(),
@@ -134,15 +123,28 @@ export default function Editor() {
 					} ),
 			],
 		} ),
-		[ context ]
+		[ context, setEditedPostContext ]
 	);
-	const isReady = editedPostType !== undefined && editedPostId !== undefined;
+
+	let title;
+	if ( hasLoadedPost ) {
+		const type =
+			editedPostType === 'wp_template'
+				? __( 'Template' )
+				: __( 'Template Part' );
+		title = sprintf(
+			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s ‹ Editor' ),
+			getTitle(),
+			type
+		);
+	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
-	useTitle( isReady && __( 'Editor (beta)' ) );
+	useTitle( hasLoadedPost && title );
 
-	if ( ! isReady ) {
+	if ( ! hasLoadedPost ) {
 		return <CanvasSpinner />;
 	}
 
@@ -159,6 +161,7 @@ export default function Editor() {
 					<GlobalStylesProvider>
 						<BlockContextProvider value={ blockContext }>
 							<SidebarComplementaryAreaFills />
+							{ isEditMode && <StartTemplateOptions /> }
 							<InterfaceSkeleton
 								enableRegionNavigation={ false }
 								className={

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

@@ -3,7 +3,7 @@
  */
 import {
 	__experimentalBorderRadiusControl as BorderRadiusControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	__experimentalBorderBoxControl as BorderBoxControl,
@@ -18,10 +18,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../experiments';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export function useHasBorderPanel( name ) {
 	const controls = [
@@ -35,7 +35,7 @@ export function useHasBorderPanel( name ) {
 }
 
 function useHasBorderColorControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.color', name )[ 0 ] &&
 		supports.includes( 'borderColor' )
@@ -43,7 +43,7 @@ function useHasBorderColorControl( name ) {
 }
 
 function useHasBorderRadiusControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.radius', name )[ 0 ] &&
 		supports.includes( 'borderRadius' )
@@ -51,7 +51,7 @@ function useHasBorderRadiusControl( name ) {
 }
 
 function useHasBorderStyleControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.style', name )[ 0 ] &&
 		supports.includes( 'borderStyle' )
@@ -59,7 +59,7 @@ function useHasBorderStyleControl( name ) {
 }
 
 function useHasBorderWidthControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.width', name )[ 0 ] &&
 		supports.includes( 'borderWidth' )

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

@@ -6,14 +6,14 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting } = unlock( blockEditorExperiments );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 export default function ColorPalettePanel( { name } ) {
 	const [ themeColors, setThemeColors ] = useGlobalSetting(
@@ -55,6 +55,7 @@ export default function ColorPalettePanel( { name } ) {
 					colors={ themeColors }
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -66,12 +67,14 @@ export default function ColorPalettePanel( { name } ) {
 						colors={ defaultColors }
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelHeadingLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelHeadingLevel={ 3 }
 				emptyMessage={ __(
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }

package/src/components/global-styles/color-utils.js

@@ -1,11 +1,10 @@
 /**
  * Internal dependencies
  */
-
-import { getSupportedGlobalStylesPanels } from './hooks';
+import { useSupportedStyles } from './hooks';
 
 export function useHasColorPanel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		supports.includes( 'color' ) ||
 		supports.includes( 'backgroundColor' ) ||

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

@@ -21,6 +21,8 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,15 +30,28 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 import { useHasShadowControl } from './shadow-panel';
+import { unlock } from '../../private-apis';
+import { useSupportedStyles } from './hooks';
+
+const {
+	useHasTypographyPanel,
+	useGlobalSetting,
+	overrideSettingsWithSupports,
+} = unlock( blockEditorPrivateApis );
 
 function ContextMenu( { name, parentMenu = '' } ) {
-	const hasTypographyPanel = useHasTypographyPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const supports = useSupportedStyles( name );
+	const settings = useMemo(
+		() => overrideSettingsWithSupports( rawSettings, supports ),
+		[ rawSettings, supports ]
+	);
+	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasEffectsPanel = useHasShadowControl( name );

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

@@ -12,7 +12,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 	transformStyles,
 } from '@wordpress/block-editor';
 import { info } from '@wordpress/icons';
@@ -20,10 +20,10 @@ import { info } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 import Subtitle from './subtitle';
 
-const { useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 function CustomCSSControl( { blockName } ) {
 	// If blockName is defined, we are customizing CSS at the block level:
 	// styles.blocks.blockName.css
@@ -101,7 +101,7 @@ function CustomCSSControl( { blockName } ) {
 				</Panel>
 			) }
 			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+				<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>
 				<TextareaControl
 					__nextHasNoMarginBottom
 					value={

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

@@ -20,17 +20,17 @@ import {
 	__experimentalUseCustomSides as useCustomSides,
 	HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
-import { unlock } from '../../experiments';
+import { useSupportedStyles } from './hooks';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -53,42 +53,42 @@ export function useHasDimensionsPanel( name ) {
 }
 
 function useHasContentSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'layout.contentSize', name );
 
 	return settings && supports.includes( 'contentSize' );
 }
 
 function useHasWideSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'layout.wideSize', name );
 
 	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.padding', name );
 
 	return settings && supports.includes( 'padding' );
 }
 
 function useHasMargin( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.margin', name );
 
 	return settings && supports.includes( 'margin' );
 }
 
 function useHasGap( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.blockGap', name );
 
 	return settings && supports.includes( 'blockGap' );
 }
 
 function useHasMinHeight( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'dimensions.minHeight', name );
 
 	return settings && supports.includes( 'minHeight' );
@@ -413,7 +413,11 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 	};
 
 	return (
-		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+		<ToolsPanel
+			label={ __( 'Dimensions' ) }
+			resetAll={ resetAll }
+			headingLevel={ 3 }
+		>
 			{ ( showContentSizeControl || showWideSizeControl ) && (
 				<span className="span-columns">
 					{ __( 'Set the width of the main content area.' ) }

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

@@ -9,15 +9,15 @@ import { mergeWith, isEmpty, mapValues } from 'lodash';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorExperiments );
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,

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

@@ -8,15 +8,15 @@ import {
 	DuotonePicker,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalSetting } = unlock( blockEditorExperiments );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 const noop = () => {};
 
@@ -75,6 +75,7 @@ export default function GradientPalettePanel( { name } ) {
 					gradients={ themeGradients }
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -86,12 +87,14 @@ export default function GradientPalettePanel( { name } ) {
 						gradients={ defaultGradients }
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				gradients={ customGradients }
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelLevel={ 3 }
 				emptyMessage={ __(
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
@@ -99,7 +102,7 @@ export default function GradientPalettePanel( { name } ) {
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
-					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }

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

@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,7 +18,7 @@ function ScreenHeader( { title, description } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorBackButton
+						<NavigatorToParentButton
 							style={
 								// TODO: This style override is also used in ToolsPanelHeader.
 								// It should be supported out-of-the-box by Button.
@@ -29,7 +29,13 @@ function ScreenHeader( { title, description } ) {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<Spacer>
-							<Heading level={ 5 }>{ title }</Heading>
+							<Heading
+								className="edit-site-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
 						</Spacer>
 					</HStack>
 				</Spacer>

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
@@ -10,107 +9,20 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { _x } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import {
-	getBlockType,
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-} from '@wordpress/blocks';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
+import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorExperiments );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'padding',
-	'contentSize',
-	'wideSize',
-	'blockGap',
-];
-
-export function getSupportedGlobalStylesPanels( name ) {
-	if ( ! name ) {
-		return ROOT_BLOCK_SUPPORTS;
-	}
-
-	const blockType = getBlockType( name );
-
-	if ( ! blockType ) {
-		return [];
-	}
-
-	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' );
-	}
-
-	// check for shadow support
-	if ( blockType?.supports?.shadow ) {
-		supportKeys.push( 'shadow' );
-	}
-
-	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
-		if ( ! STYLE_PROPERTY[ styleName ].support ) {
-			return;
-		}
-
-		// Opting out means that, for certain support keys like background color,
-		// blocks have to explicitly set the support value false. If the key is
-		// unset, we still enable it.
-		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
-			if (
-				STYLE_PROPERTY[ styleName ].support[ 0 ] in
-					blockType.supports &&
-				get(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support
-				) !== false
-			) {
-				return supportKeys.push( styleName );
-			}
-		}
-
-		if (
-			get(
-				blockType.supports,
-				STYLE_PROPERTY[ styleName ].support,
-				false
-			)
-		) {
-			return supportKeys.push( styleName );
-		}
-	} );
-
-	return supportKeys;
-}
-
 export function useColorsPerOrigin( name ) {
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
@@ -240,3 +152,18 @@ export function useColorRandomizer( name ) {
 		? [ randomizeColors ]
 		: [];
 }
+
+export function useSupportedStyles( name, element ) {
+	const { supportedPanels } = useSelect(
+		( select ) => {
+			return {
+				supportedPanels: unlock(
+					select( blocksStore )
+				).getSupportedStyles( name, element ),
+			};
+		},
+		[ name, element ]
+	);
+
+	return supportedPanels;
+}

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

@@ -3,7 +3,7 @@
  */
 import {
 	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -33,7 +33,9 @@ function NavigationButtonAsItem( props ) {
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
+	return (
+		<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />
+	);
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };