@wordpress/edit-site 4.19.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.19.0",
+	"version": "5.1.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,47 +27,49 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.22.0",
-		"@wordpress/api-fetch": "^6.19.0",
-		"@wordpress/block-editor": "^10.5.0",
-		"@wordpress/block-library": "^7.19.0",
-		"@wordpress/blocks": "^11.21.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/core-data": "^5.5.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/deprecated": "^3.22.0",
-		"@wordpress/editor": "^12.21.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/hooks": "^3.22.0",
-		"@wordpress/html-entities": "^3.22.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
-		"@wordpress/interface": "^4.21.0",
-		"@wordpress/keyboard-shortcuts": "^3.20.0",
-		"@wordpress/keycodes": "^3.22.0",
-		"@wordpress/media-utils": "^4.13.0",
-		"@wordpress/notices": "^3.22.0",
-		"@wordpress/plugins": "^4.20.0",
-		"@wordpress/preferences": "^2.14.0",
-		"@wordpress/reusable-blocks": "^3.20.0",
-		"@wordpress/style-engine": "^1.5.0",
-		"@wordpress/url": "^3.23.0",
-		"@wordpress/viewport": "^4.20.0",
+		"@wordpress/a11y": "^3.24.0",
+		"@wordpress/api-fetch": "^6.21.0",
+		"@wordpress/block-editor": "^11.1.0",
+		"@wordpress/block-library": "^8.1.0",
+		"@wordpress/blocks": "^12.1.0",
+		"@wordpress/components": "^23.1.0",
+		"@wordpress/compose": "^6.1.0",
+		"@wordpress/core-data": "^6.1.0",
+		"@wordpress/data": "^8.1.0",
+		"@wordpress/deprecated": "^3.24.0",
+		"@wordpress/editor": "^13.1.0",
+		"@wordpress/element": "^5.1.0",
+		"@wordpress/hooks": "^3.24.0",
+		"@wordpress/html-entities": "^3.24.0",
+		"@wordpress/i18n": "^4.24.0",
+		"@wordpress/icons": "^9.15.0",
+		"@wordpress/interface": "^5.1.0",
+		"@wordpress/keyboard-shortcuts": "^4.1.0",
+		"@wordpress/keycodes": "^3.24.0",
+		"@wordpress/media-utils": "^4.15.0",
+		"@wordpress/notices": "^3.24.0",
+		"@wordpress/plugins": "^5.1.0",
+		"@wordpress/preferences": "^3.1.0",
+		"@wordpress/reusable-blocks": "^4.1.0",
+		"@wordpress/style-engine": "^1.7.0",
+		"@wordpress/url": "^3.25.0",
+		"@wordpress/viewport": "^5.1.0",
+		"@wordpress/widgets": "^3.1.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
+		"fast-deep-equal": "^3.1.3",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -131,6 +131,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		<>
 			{ showSearchControl && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					onChange={ setSearch }
 					value={ search }
 					label={ labels.search_items }

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

@@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import NewTemplate from './new-template';
 import NewTemplatePart from './new-template-part';
 
-export default function AddNewTemplate( { templateType = 'wp_template' } ) {
+export default function AddNewTemplate( {
+	templateType = 'wp_template',
+	...props
+} ) {
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
@@ -21,9 +24,9 @@ export default function AddNewTemplate( { templateType = 'wp_template' } ) {
 	}
 
 	if ( templateType === 'wp_template' ) {
-		return <NewTemplate postType={ postType } />;
+		return <NewTemplate { ...props } postType={ postType } />;
 	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart postType={ postType } />;
+		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;

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

@@ -12,18 +12,25 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { useHistory } from '../routes';
+import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
-export default function NewTemplatePart( { postType } ) {
+export default function NewTemplatePart( {
+	postType,
+	showIcon = true,
+	toggleProps,
+} ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -54,6 +61,9 @@ export default function NewTemplatePart( { postType } ) {
 
 			setIsModalOpen( false );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template part editor.
 			history.push( {
 				postId: templatePart.id,
@@ -78,12 +88,14 @@ export default function NewTemplatePart( { postType } ) {
 	return (
 		<>
 			<Button
-				variant="primary"
+				{ ...toggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
+				icon={ showIcon ? plus : null }
+				label={ postType.labels.add_new }
 			>
-				{ postType.labels.add_new }
+				{ showIcon ? null : postType.labels.add_new }
 			</Button>
 			{ isModalOpen && (
 				<CreateTemplatePartModal

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

@@ -21,6 +21,7 @@ import {
 	media,
 	notFound,
 	page,
+	plus,
 	post,
 	postAuthor,
 	postDate,
@@ -79,7 +80,11 @@ const TEMPLATE_ICONS = {
 	attachment: media,
 };
 
-export default function NewTemplate( { postType } ) {
+export default function NewTemplate( {
+	postType,
+	toggleProps,
+	showIcon = true,
+} ) {
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
 	const [
@@ -93,7 +98,8 @@ export default function NewTemplate( { postType } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = useDispatch( editSiteStore );
+	const { setTemplate, __unstableSetCanvasMode } =
+		useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -133,6 +139,9 @@ export default function NewTemplate( { postType } ) {
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
@@ -173,15 +182,13 @@ export default function NewTemplate( { postType } ) {
 		<>
 			<DropdownMenu
 				className="edit-site-new-template-dropdown"
-				icon={ null }
-				text={ postType.labels.add_new }
+				icon={ showIcon ? plus : null }
+				text={ showIcon ? null : postType.labels.add_new }
 				label={ postType.labels.add_new_item }
 				popoverProps={ {
 					noArrow: false,
 				} }
-				toggleProps={ {
-					variant: 'primary',
-				} }
+				toggleProps={ toggleProps }
 			>
 				{ () => (
 					<>

package/src/components/add-new-template/style.scss

@@ -1,8 +1,4 @@
 .edit-site-new-template-dropdown {
-	.components-dropdown-menu__toggle {
-		padding: 6px 12px;
-	}
-
 	.edit-site-new-template-dropdown__popover {
 		@include break-small() {
 			min-width: 300px;

package/src/components/app/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, Popover } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,12 +13,9 @@ import { PluginArea } from '@wordpress/plugins';
  * Internal dependencies
  */
 import { Routes } from '../routes';
-import Editor from '../editor';
-import List from '../list';
-import NavigationSidebar from '../navigation-sidebar';
-import getIsListPage from '../../utils/get-is-list-page';
+import Layout from '../layout';
 
-export default function EditSiteApp( { reboot, homeTemplate } ) {
+export default function App( { reboot } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -33,43 +31,16 @@ export default function EditSiteApp( { reboot, homeTemplate } ) {
 	}
 
 	return (
-		<SlotFillProvider>
-			<UnsavedChangesWarning />
+		<ShortcutProvider style={ { height: '100%' } }>
+			<SlotFillProvider>
+				<Popover.Slot />
+				<UnsavedChangesWarning />
 
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
-
-					// The existence of a 'front-page' supersedes every other setting.
-					const homeTemplateType =
-						params.postId?.includes( 'front-page' ) ||
-						params.postId === homeTemplate?.postId
-							? 'site-editor'
-							: undefined;
-
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							<PluginArea onError={ onPluginAreaError } />
-							{ /* Keep the instance of the sidebar to ensure focus will not be lost
-							 * when navigating to other pages. */ }
-							<NavigationSidebar
-								// Open the navigation sidebar by default when in the list page.
-								isDefaultOpen={ !! isListPage }
-								activeTemplateType={
-									isListPage
-										? params.postType
-										: homeTemplateType
-								}
-							/>
-						</>
-					);
-				} }
-			</Routes>
-		</SlotFillProvider>
+				<Routes>
+					<Layout onError={ reboot } />
+					<PluginArea onError={ onPluginAreaError } />
+				</Routes>
+			</SlotFillProvider>
+		</ShortcutProvider>
 	);
 }

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

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseResizeCanvas as useResizeCanvas,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+	const { deviceType, isZoomOutMode } = useSelect(
+		( select ) => ( {
+			deviceType:
+				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
+		} ),
+		[]
+	);
+	const deviceStyles = useResizeCanvas( deviceType );
+	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	return (
+		<Iframe
+			scale={ ( isZoomOutMode && 0.45 ) || undefined }
+			frameSize={ isZoomOutMode ? 100 : undefined }
+			style={ enableResizing ? {} : deviceStyles }
+			head={
+				<>
+					<EditorStyles styles={ settings.styles } />
+					<style>{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; }
+							body { position: relative; }`
+					}</style>
+					{ enableResizing && (
+						<style>
+							{
+								// Some themes will have `min-height: 100vh` for the root container,
+								// which isn't a requirement in auto resize mode.
+								`.is-root-container { min-height: 0 !important; }`
+							}
+						</style>
+					) }
+				</>
+			}
+			assets={ settings.__unstableResolvedAssets }
+			ref={ mouseMoveTypingRef }
+			name="editor-canvas"
+			className="edit-site-visual-editor__editor-canvas"
+			{ ...props }
+		>
+			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+			{ settings.svgFilters }
+			{ children }
+		</Iframe>
+	);
+}
+
+export default EditorCanvas;

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

@@ -8,7 +8,11 @@ import classnames from 'classnames';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityBlockEditor,
+	__experimentalFetchMedia as fetchMedia,
+	store as coreStore,
+} from '@wordpress/core-data';
 import {
 	BlockList,
 	BlockEditorProvider,
@@ -22,12 +26,15 @@ import {
 	store as blockEditorStore,
 	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
-import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { listView } from '@wordpress/icons';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -39,6 +46,8 @@ import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
+import EditorCanvas from './editor-canvas';
+import StyleBook from '../style-book';
 
 const LAYOUT = {
 	type: 'default',
@@ -46,29 +55,16 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const {
-		storedSettings,
-		templateType,
-		templateId,
-		page,
-		isNavigationSidebarOpen,
-	} = useSelect(
+	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
+			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
 				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
-				templateId: getEditedPostId(),
-				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
+				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
 		[ setIsInserterOpen ]
@@ -131,6 +127,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 		return {
 			...restStoredSettings,
+			__unstableFetchMedia: fetchMedia,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 		};
@@ -141,44 +138,48 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const toggleNavigationSidebar = useCallback( () => {
-		const toggleComplementaryArea = isNavigationSidebarOpen
-			? disableComplementaryArea
-			: enableComplementaryArea;
-		toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
-	}, [ isNavigationSidebarOpen ] );
+
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
 	const hasBlocks = blocks.length !== 0;
+	const enableResizing =
+		isTemplatePart &&
+		canvasMode !== 'view' &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport;
+	const isViewMode = canvasMode === 'view';
+	const showBlockAppender =
+		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
+
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
 			<ToolbarButton
 				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () =>
+					enableComplementaryArea(
+						'core/edit-site',
+						'edit-site/block-inspector'
+					)
 				}
-				onClick={ toggleNavigationSidebar }
 				icon={ listView }
-				isActive={ isNavigationSidebarOpen }
 			/>
 		</ToolbarGroup>
 	);
 
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavMenuSidebarToggle = Fragment;
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( isOffCanvasNavigationEditorEnabled ) {
 		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
 	}
 
@@ -196,64 +197,76 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					( fillProps ) => (
 						<NavigateToLink
 							{ ...fillProps }
-							activePage={ page }
 							onActivePageChange={ setPage }
 						/>
 					),
-					[ page ]
+					[]
 				) }
 			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<BlockTools
-				className={ classnames( 'edit-site-visual-editor', {
-					'is-focus-mode': isTemplatePart,
-				} ) }
-				__unstableContentRef={ contentRef }
-				onClick={ ( event ) => {
-					// Clear selected block when clicking on the gray background.
-					if ( event.target === event.currentTarget ) {
-						clearSelectedBlock();
-					}
-				} }
-			>
-				<BlockEditorKeyboardShortcuts.Register />
-				<BackButton />
-				<ResizableEditor
-					// Reinitialize the editor and reset the states when the template changes.
-					key={ templateId }
-					enableResizing={
-						isTemplatePart &&
-						// Disable resizing in mobile viewport.
-						! isMobileViewport
-					}
-					settings={ settings }
-					contentRef={ mergedRefs }
-				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={
-							isTemplatePart && hasBlocks ? false : undefined
-						}
-					/>
-				</ResizableEditor>
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
+			{ /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ }
+			<StyleBook.Slot>
+				{ ( [ styleBook ] ) =>
+					styleBook ? (
+						<div className="edit-site-visual-editor is-focus-mode">
+							<ResizableEditor enableResizing>
+								{ styleBook }
+							</ResizableEditor>
+						</div>
+					) : (
+						<BlockTools
+							className={ classnames( 'edit-site-visual-editor', {
+								'is-focus-mode': isTemplatePart || !! styleBook,
+								'is-view-mode': isViewMode,
+							} ) }
+							__unstableContentRef={ contentRef }
+							onClick={ ( event ) => {
+								// Clear selected block when clicking on the gray background.
+								if ( event.target === event.currentTarget ) {
+									clearSelectedBlock();
+								}
+							} }
+						>
+							<BlockEditorKeyboardShortcuts.Register />
+							<BackButton />
+							<ResizableEditor
+								enableResizing={ enableResizing }
+								height={ sizes.height }
+							>
+								<EditorCanvas
+									enableResizing={ enableResizing }
+									settings={ settings }
+									contentRef={ mergedRefs }
+									readonly={ canvasMode === 'view' }
+								>
+									{ resizeObserver }
+									<BlockList
+										className="edit-site-block-editor__block-list wp-site-blocks"
+										__experimentalLayout={ LAYOUT }
+										renderAppender={ showBlockAppender }
+									/>
+								</EditorCanvas>
+							</ResizableEditor>
+							<__unstableBlockSettingsMenuFirstItem>
+								{ ( { onClose } ) => (
+									<BlockInspectorButton onClick={ onClose } />
+								) }
+							</__unstableBlockSettingsMenuFirstItem>
+							<__unstableBlockToolbarLastItem>
+								<__unstableBlockNameContext.Consumer>
+									{ ( blockName ) =>
+										blockName === 'core/navigation' && (
+											<MaybeNavMenuSidebarToggle />
+										)
+									}
+								</__unstableBlockNameContext.Consumer>
+							</__unstableBlockToolbarLastItem>
+						</BlockTools>
+					)
+				}
+			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>
 	);