From c4fdeb1bbae02f56701fb199e44a20efb90d2df2 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 3 Mar 2023 12:25:04 +0000
Subject: [PATCH] Navigation Sidebar: Change the logic about which navigation
 gets selected for the sidebar (#48689)

* Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar

* Move the navigation sidebar appender into the actions area of the sidebar

* Further simplification

* Fixed allowed blocks and update appender label

* Fix inserter issue

* Delay the rendering of the navigation menus

* Remove useless code

* update comment

---------

Co-authored-by: Riad Benguella <benguella@gmail.com>
---
 .../src/components/inserter/index.js          |  19 +-
 .../components/off-canvas-editor/branch.js    |   4 +-
 .../src/components/off-canvas-editor/index.js |   3 +
 .../components/navigation-inspector/index.js  | 223 ------------------
 .../navigation-inspector/navigation-menu.js   |  66 ------
 .../navigation-inspector/style.scss           |  46 ----
 .../src/components/sidebar-button/style.scss  |   3 +-
 .../sidebar-navigation-item/style.scss        |  20 --
 .../index.js                                  | 125 +++++++++-
 .../loader.js                                 |   9 +
 .../navigation-menu-content.js                |  56 +++++
 .../style.scss                                |  59 ++++-
 packages/edit-site/src/style.scss             |   1 -
 13 files changed, 256 insertions(+), 378 deletions(-)
 delete mode 100644 packages/edit-site/src/components/navigation-inspector/index.js
 delete mode 100644 packages/edit-site/src/components/navigation-inspector/navigation-menu.js
 delete mode 100644 packages/edit-site/src/components/navigation-inspector/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index d1613fc1f9d40f..99355b7027136f 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -31,21 +31,26 @@ const defaultRenderToggle = ( {
 	toggleProps = {},
 	prioritizePatterns,
 } ) => {
-	let label;
-	if ( hasSingleBlockType ) {
+	const {
+		as: Wrapper = Button,
+		label: labelProp,
+		onClick,
+		...rest
+	} = toggleProps;
+
+	let label = labelProp;
+	if ( ! label && hasSingleBlockType ) {
 		label = sprintf(
 			// translators: %s: the name of the block when there is only one
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( prioritizePatterns ) {
+	} else if ( ! label && prioritizePatterns ) {
 		label = __( 'Add pattern' );
-	} else {
+	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
 
-	const { onClick, ...rest } = toggleProps;
-
 	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
@@ -57,7 +62,7 @@ const defaultRenderToggle = ( {
 	}
 
 	return (
-		<Button
+		<Wrapper
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js
index 7652b204898ad9..ba7bf126cdb1a9 100644
--- a/packages/block-editor/src/components/off-canvas-editor/branch.js
+++ b/packages/block-editor/src/components/off-canvas-editor/branch.js
@@ -97,6 +97,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -117,7 +118,7 @@ function ListViewBranch( props ) {
 	}
 
 	// Only show the appender at the first level.
-	const showAppender = level === 1;
+	const showAppender = showAppenderProp && level === 1;
 
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
@@ -205,6 +206,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								showAppender={ showAppenderProp }
 							/>
 						) }
 					</AsyncModeProvider>
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 4066aba9f1f9c5..9ffd30d7ce742f 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -62,6 +62,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
  * @param {string}  props.description     Optional accessible description for the tree grid component.
  * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {string}  props.showAppender    Flag to show or hide the block appender.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
@@ -70,6 +71,7 @@ function OffCanvasEditor(
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
+		showAppender = true,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
@@ -234,6 +236,7 @@ function OffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							showAppender={ showAppender }
 						/>
 						<TreeGridRow
 							level={ 1 }
diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js
deleted file mode 100644
index e109878f65466c..00000000000000
--- a/packages/edit-site/src/components/navigation-inspector/index.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import {
-	store as blockEditorStore,
-	BlockEditorProvider,
-} from '@wordpress/block-editor';
-import { speak } from '@wordpress/a11y';
-import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import NavigationMenu from './navigation-menu';
-
-const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
-
-export default function NavigationInspector( { onSelect } ) {
-	const {
-		selectedNavigationBlockId,
-		clientIdToRef,
-		navigationMenus,
-		isResolvingNavigationMenus,
-		hasResolvedNavigationMenus,
-		firstNavigationBlockId,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetActiveBlockIdByBlockNames,
-			__experimentalGetGlobalBlocksByName,
-			getBlock,
-		} = select( blockEditorStore );
-
-		const { getEntityRecords, hasFinishedResolution, isResolving } =
-			select( coreStore );
-
-		const navigationMenusQuery = [
-			'postType',
-			'wp_navigation',
-			NAVIGATION_MENUS_QUERY[ 0 ],
-		];
-
-		// Get the active Navigation block (if present).
-		const selectedNavId =
-			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
-
-		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds =
-			__experimentalGetGlobalBlocksByName( 'core/navigation' );
-		const idToRef = {};
-		navBlockIds.forEach( ( id ) => {
-			idToRef[ id ] = getBlock( id )?.attributes?.ref;
-		} );
-		return {
-			selectedNavigationBlockId: selectedNavId,
-			firstNavigationBlockId: navBlockIds?.[ 0 ],
-			clientIdToRef: idToRef,
-			navigationMenus: getEntityRecords( ...navigationMenusQuery ),
-			isResolvingNavigationMenus: isResolving(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-			hasResolvedNavigationMenus: hasFinishedResolution(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-		};
-	}, [] );
-
-	const navMenuListId = useInstanceId(
-		NavigationMenu,
-		'edit-site-navigation-inspector-menu'
-	);
-
-	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
-	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
-
-	// Default Navigation Menu is either:
-	// - the Navigation Menu referenced by the first Nav block within the template.
-	// - the first of the available Navigation Menus (`wp_navigation`) posts.
-	const defaultNavigationMenuId =
-		firstNavRefInTemplate || firstNavigationMenuRef;
-
-	// The Navigation Menu manually selected by the user within the Nav inspector.
-	const [ currentMenuId, setCurrentMenuId ] = useState(
-		firstNavRefInTemplate
-	);
-
-	// If a Nav block is selected within the canvas then set the
-	// Navigation Menu referenced by it's `ref` attribute  to be
-	// active within the Navigation sidebar.
-	useEffect( () => {
-		if ( selectedNavigationBlockId ) {
-			setCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] );
-		}
-	}, [ selectedNavigationBlockId ] );
-
-	let options = [];
-	if ( navigationMenus ) {
-		options = navigationMenus.map( ( { id, title } ) => ( {
-			value: id,
-			label: title.rendered,
-		} ) );
-	}
-
-	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_navigation',
-		{ id: currentMenuId || defaultNavigationMenuId }
-	);
-
-	const { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect(
-		( select ) => {
-			const { isResolving, hasFinishedResolution } = select( coreStore );
-			return {
-				isLoadingInnerBlocks: isResolving( 'getEntityRecord', [
-					'postType',
-					'wp_navigation',
-					currentMenuId || defaultNavigationMenuId,
-				] ),
-				hasLoadedInnerBlocks: hasFinishedResolution(
-					'getEntityRecord',
-					[
-						'postType',
-						'wp_navigation',
-						currentMenuId || defaultNavigationMenuId,
-					]
-				),
-			};
-		},
-		[ currentMenuId, defaultNavigationMenuId ]
-	);
-
-	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
-
-	const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
-
-	const hasNavigationMenus = !! navigationMenus?.length;
-
-	// Entity block editor will return entities that are not currently published.
-	// Guard by only allowing their usage if there are published Nav Menus.
-	const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
-
-	const hasInnerBlocks = !! publishedInnerBlocks?.length;
-
-	useEffect( () => {
-		if ( isResolvingNavigationMenus ) {
-			speak( 'Loading Navigation sidebar menus.' );
-		}
-
-		if ( hasResolvedNavigationMenus ) {
-			speak( 'Navigation sidebar menus have loaded.' );
-		}
-	}, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] );
-
-	useEffect( () => {
-		if ( isLoadingInnerBlocks ) {
-			speak( 'Loading Navigation sidebar selected menu items.' );
-		}
-
-		if ( hasLoadedInnerBlocks ) {
-			speak( 'Navigation sidebar selected menu items have loaded.' );
-		}
-	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
-
-	return (
-		<div className="edit-site-navigation-inspector">
-			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'There are no Navigation Menus.' ) }
-				</p>
-			) }
-
-			{ ! hasResolvedNavigationMenus && (
-				<div className="edit-site-navigation-inspector__placeholder" />
-			) }
-			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
-				<SelectControl
-					__nextHasNoMarginBottom
-					className="edit-site-navigation-inspector__select-menu"
-					aria-controls={
-						// aria-controls should only apply when referenced element is in DOM
-						hasLoadedInnerBlocks ? navMenuListId : undefined
-					}
-					value={ currentMenuId || defaultNavigationMenuId }
-					options={ options }
-					onChange={ ( newMenuId ) =>
-						setCurrentMenuId( Number( newMenuId ) )
-					}
-				/>
-			) }
-			{ isLoading && (
-				<>
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-				</>
-			) }
-			{ hasInnerBlocks && ! isLoading && (
-				<BlockEditorProvider
-					value={ publishedInnerBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				>
-					<NavigationMenu
-						innerBlocks={ publishedInnerBlocks }
-						onSelect={ onSelect }
-					/>
-				</BlockEditorProvider>
-			) }
-
-			{ ! hasInnerBlocks && ! isLoading && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'Navigation Menu is empty.' ) }
-				</p>
-			) }
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
deleted file mode 100644
index 44acc24da62cf9..00000000000000
--- a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const ALLOWED_BLOCKS = {
-	'core/navigation': [
-		'core/navigation-link',
-		'core/search',
-		'core/social-links',
-		'core/page-list',
-		'core/spacer',
-		'core/home-link',
-		'core/site-title',
-		'core/site-logo',
-		'core/navigation-submenu',
-	],
-	'core/social-links': [ 'core/social-link' ],
-	'core/navigation-submenu': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-	'core/navigation-link': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-};
-
-export default function NavigationMenu( { innerBlocks, onSelect } ) {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
-
-	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
-	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
-	useEffect( () => {
-		updateBlockListSettings( '', {
-			allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],
-		} );
-		innerBlocks.forEach( ( block ) => {
-			if ( ALLOWED_BLOCKS[ block.name ] ) {
-				updateBlockListSettings( block.clientId, {
-					allowedBlocks: ALLOWED_BLOCKS[ block.name ],
-				} );
-			}
-		} );
-	}, [ updateBlockListSettings, innerBlocks ] );
-
-	return (
-		<OffCanvasEditor
-			blocks={ innerBlocks }
-			onSelect={ onSelect }
-			LeafMoreMenu={ LeafMoreMenu }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/navigation-inspector/style.scss b/packages/edit-site/src/components/navigation-inspector/style.scss
deleted file mode 100644
index 5d13cde8304cfb..00000000000000
--- a/packages/edit-site/src/components/navigation-inspector/style.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-.edit-site-navigation-inspector {
-	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
-		white-space: normal;
-	}
-
-	.block-editor-list-view-block__title {
-		margin-top: 3px;
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: 0;
-	}
-
-	.edit-site-navigation-inspector__select-menu {
-		margin-bottom: $grid-unit-10;
-	}
-}
-
-.edit-site-navigation-inspector__placeholder {
-	padding: $grid-unit-10;
-	margin: $grid-unit-10;
-	background-color: $gray-100;
-	animation: loadingpulse 1s linear infinite;
-	animation-delay: 0.5s; // avoid animating for fast network responses
-
-	&.is-child {
-		margin-left: $grid-unit-30;
-		width: 50%;
-	}
-}
-
-.edit-site-navigation-inspector__empty-msg {
-	padding: 0 $grid-unit-10;
-}
diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
index a13677ffed8de2..8388aae266e3ed 100644
--- a/packages/edit-site/src/components/sidebar-button/style.scss
+++ b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -17,7 +17,8 @@
 	&:hover,
 	&:focus-visible,
 	&:focus,
-	&:not([aria-disabled="true"]):active {
+	&:not([aria-disabled="true"]):active,
+	&[aria-expanded="true"] {
 		color: $white;
 	}
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 0670e0a2f9b6c7..3de1b6e5f9633b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -15,26 +15,6 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
-	color: $gray-600;
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		color: $white;
-	}
-}
-
-.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf {
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		background: $gray-800;
-	}
-	.block-editor-list-view-block__menu {
-		margin-left: -$grid-unit-10;
-	}
-}
-
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
 	cursor: grab;
 	width: calc(100% - #{ $border-width-focus });
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index ea5970ae4ee5bd..2d92b20d9dc81b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -2,17 +2,86 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { BlockEditorProvider, Inserter } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import NavigationInspector from '../navigation-inspector';
 import { useHistory } from '../routes';
+import NavigationMenuContent from './navigation-menu-content';
+import SidebarButton from '../sidebar-button';
+import { NavigationMenuLoader } from './loader';
+
+const noop = () => {};
+const NAVIGATION_MENUS_QUERY = { per_page: -1, status: 'publish' };
+
+function SidebarNavigationScreenWrapper( { children, actions } ) {
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Navigation' ) }
+			actions={ actions }
+			content={
+				<>
+					<p className="edit-site-sidebar-navigation-screen-navigation-menus__description">
+						{ __(
+							'Browse your site, edit pages, and manage your primary navigation menu.'
+						) }
+					</p>
+					{ children }
+				</>
+			}
+		/>
+	);
+}
 
 export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
+	const { navigationMenus, hasResolvedNavigationMenus } = useSelect(
+		( select ) => {
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
+
+			const navigationMenusQuery = [
+				'postType',
+				'wp_navigation',
+				NAVIGATION_MENUS_QUERY,
+			];
+			return {
+				navigationMenus: getEntityRecords( ...navigationMenusQuery ),
+				hasResolvedNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					navigationMenusQuery
+				),
+			};
+		},
+		[]
+	);
+
+	// Sort navigation menus by date.
+	const orderedNavigationMenus = useMemo(
+		() =>
+			navigationMenus?.sort( ( menuA, menuB ) => {
+				const menuADate = new Date( menuA.date );
+				const menuBDate = new Date( menuB.date );
+				return menuADate.getTime() > menuBDate.getTime();
+			} ),
+		[ navigationMenus ]
+	);
+	const firstNavigationMenu = orderedNavigationMenus?.[ 0 ]?.id;
+	const blocks = useMemo( () => {
+		return [
+			createBlock( 'core/navigation', { ref: firstNavigationMenu } ),
+		];
+	}, [ firstNavigationMenu ] );
+
+	const isLoading = ! hasResolvedNavigationMenus;
+	const hasNavigationMenus = !! navigationMenus?.length;
+
 	const onSelect = useCallback(
 		( selectedBlock ) => {
 			const { attributes } = selectedBlock;
@@ -30,14 +99,52 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		},
 		[ history ]
 	);
+
+	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				{ __( 'There are no Navigation Menus.' ) }
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! hasResolvedNavigationMenus || isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper>
+				<NavigationMenuLoader />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Navigation' ) }
-			content={
-				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
-					<NavigationInspector onSelect={ onSelect } />
+		<BlockEditorProvider
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<SidebarNavigationScreenWrapper
+				actions={
+					<Inserter
+						rootClientId={ blocks[ 0 ].clientId }
+						position="bottom right"
+						isAppender
+						selectBlockOnInsert={ false }
+						shouldDirectInsert={ false }
+						__experimentalIsQuick
+						toggleProps={ {
+							as: SidebarButton,
+							label: __( 'Add menu item' ),
+						} }
+					/>
+				}
+			>
+				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+					<NavigationMenuContent
+						rootClientId={ blocks[ 0 ].clientId }
+						onSelect={ onSelect }
+					/>
 				</div>
-			}
-		/>
+			</SidebarNavigationScreenWrapper>
+		</BlockEditorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js
new file mode 100644
index 00000000000000..b4aaf976111a7f
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js
@@ -0,0 +1,9 @@
+export function NavigationMenuLoader() {
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
new file mode 100644
index 00000000000000..00cbf3b021f877
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	BlockList,
+	BlockTools,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { NavigationMenuLoader } from './loader';
+
+export default function NavigationMenuContent( { rootClientId, onSelect } ) {
+	const { clientIdsTree, isLoading } = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree, areInnerBlocksControlled } =
+				select( blockEditorStore );
+			return {
+				clientIdsTree: __unstableGetClientIdsTree( rootClientId ),
+
+				// This is a small hack to wait for the navigation block
+				// to actually load its inner blocks.
+				isLoading: ! areInnerBlocksControlled( rootClientId ),
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+
+	// The hidden block is needed because it makes block edit side effects trigger.
+	// For example a navigation page list load its items has an effect on edit to load its items.
+	return (
+		<>
+			{ isLoading && <NavigationMenuLoader /> }
+			{ ! isLoading && (
+				<OffCanvasEditor
+					blocks={ clientIdsTree }
+					onSelect={ onSelect }
+					LeafMoreMenu={ LeafMoreMenu }
+					showAppender={ false }
+				/>
+			) }
+			<div style={ { display: 'none' } }>
+				<BlockTools>
+					<BlockList />
+				</BlockTools>
+			</div>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 81196bac163aec..859a7326edfa8a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -1,12 +1,63 @@
-.edit-site-sidebar-navigation-screen-navigation-menus {
-	.block-editor-list-view-block__menu-edit,
-	.edit-site-navigation-inspector__select-menu {
-		display: none;
+.edit-site-sidebar-navigation-screen-navigation-menus__description {
+	margin-top: 0;
+	margin-bottom: $grid-unit-40;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
+	padding: $grid-unit-10;
+	margin: $grid-unit-10;
+	background-color: $gray-100;
+	animation: loadingpulse 1s linear infinite;
+	animation-delay: 0.5s; // avoid animating for fast network responses
+}
+
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
 	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			background: $gray-800;
+		}
+		.block-editor-list-view-block__menu {
+			margin-left: -$grid-unit-10;
+		}
 	}
+
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		white-space: normal;
+	}
+
+	.block-editor-list-view-block__title {
+		margin-top: 3px;
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: 0;
+	}
+
+	.components-button {
+		color: $gray-600;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $white;
+		}
+	}
 }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 8985f797f354b0..cd8acec2efcce7 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -8,7 +8,6 @@
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
-@import "./components/navigation-inspector/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
 @import "./components/sidebar-edit-mode/template-card/style.scss";