From 53f11deadac0c23c63251c9369293f14e7deb837 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 9 Sep 2020 15:04:46 +1000
Subject: [PATCH 01/34] Navigation: Implement redesign of Navigation Editor

---
 .../components/src/select-control/index.js    |   2 +
 .../components/delete-menu-button/index.js    |  29 ---
 .../components/delete-menu-button/style.scss  |   7 -
 .../src/components/editor/index.js            |  14 ++
 .../src/components/editor/list-view.js        |  32 ++++
 .../src/components/editor/style.scss          |  43 +++++
 .../src/components/editor/visual-view.js      |  38 ++++
 .../src/components/header/index.js            |  41 +++++
 .../src/components/header/manage-locations.js |  48 +++++
 .../src/components/header/style.scss          |  25 +++
 .../components/header/use-menu-locations.js   |  68 +++++++
 .../auto-add-pages-panel.js                   |  37 ++++
 .../inspector-additions/delete-menu-panel.js  |  30 ++++
 .../components/inspector-additions/index.js   |  28 +++
 .../components/inspector-additions/style.scss |  20 +++
 .../src/components/layout/index.js            | 118 ++++++++-----
 .../shortcuts.js                              |   0
 .../src/components/layout/style.scss          |   7 +-
 .../layout/use-menu-notifications.js          |  42 +++++
 .../use-navigation-block-editor.js            |   3 +-
 .../layout/use-navigation-editor.js           |  58 ++++++
 .../components/menu-locations-editor/index.js | 107 -----------
 .../use-menu-locations.js                     | 120 -------------
 .../menus-editor/create-menu-area.js          | 135 --------------
 .../src/components/menus-editor/index.js      | 167 ------------------
 .../src/components/menus-editor/style.scss    |  56 ------
 .../navigation-editor/block-editor-area.js    | 163 -----------------
 .../components/navigation-editor/helpers.js   |   4 -
 .../src/components/navigation-editor/index.js |  81 ---------
 .../navigation-structure-area.js              |  54 ------
 .../components/navigation-editor/style.scss   | 130 --------------
 .../src/components/toolbar/add-menu-form.js   | 107 +++++++++++
 .../toolbar/block-inspector-dropdown.js       |  27 +++
 .../src/components/toolbar/index.js           |  64 +++++++
 .../src/components/toolbar/save-button.js     |  26 +++
 .../src/components/toolbar/style.scss         |  64 +++++++
 packages/edit-navigation/src/style.scss       |   9 +-
 37 files changed, 896 insertions(+), 1108 deletions(-)
 delete mode 100644 packages/edit-navigation/src/components/delete-menu-button/index.js
 delete mode 100644 packages/edit-navigation/src/components/delete-menu-button/style.scss
 create mode 100644 packages/edit-navigation/src/components/editor/index.js
 create mode 100644 packages/edit-navigation/src/components/editor/list-view.js
 create mode 100644 packages/edit-navigation/src/components/editor/style.scss
 create mode 100644 packages/edit-navigation/src/components/editor/visual-view.js
 create mode 100644 packages/edit-navigation/src/components/header/index.js
 create mode 100644 packages/edit-navigation/src/components/header/manage-locations.js
 create mode 100644 packages/edit-navigation/src/components/header/style.scss
 create mode 100644 packages/edit-navigation/src/components/header/use-menu-locations.js
 create mode 100644 packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
 create mode 100644 packages/edit-navigation/src/components/inspector-additions/delete-menu-panel.js
 create mode 100644 packages/edit-navigation/src/components/inspector-additions/index.js
 create mode 100644 packages/edit-navigation/src/components/inspector-additions/style.scss
 rename packages/edit-navigation/src/components/{navigation-editor => layout}/shortcuts.js (100%)
 create mode 100644 packages/edit-navigation/src/components/layout/use-menu-notifications.js
 rename packages/edit-navigation/src/components/{navigation-editor => layout}/use-navigation-block-editor.js (97%)
 create mode 100644 packages/edit-navigation/src/components/layout/use-navigation-editor.js
 delete mode 100644 packages/edit-navigation/src/components/menu-locations-editor/index.js
 delete mode 100644 packages/edit-navigation/src/components/menu-locations-editor/use-menu-locations.js
 delete mode 100644 packages/edit-navigation/src/components/menus-editor/create-menu-area.js
 delete mode 100644 packages/edit-navigation/src/components/menus-editor/index.js
 delete mode 100644 packages/edit-navigation/src/components/menus-editor/style.scss
 delete mode 100644 packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
 delete mode 100644 packages/edit-navigation/src/components/navigation-editor/helpers.js
 delete mode 100644 packages/edit-navigation/src/components/navigation-editor/index.js
 delete mode 100644 packages/edit-navigation/src/components/navigation-editor/navigation-structure-area.js
 delete mode 100644 packages/edit-navigation/src/components/navigation-editor/style.scss
 create mode 100644 packages/edit-navigation/src/components/toolbar/add-menu-form.js
 create mode 100644 packages/edit-navigation/src/components/toolbar/block-inspector-dropdown.js
 create mode 100644 packages/edit-navigation/src/components/toolbar/index.js
 create mode 100644 packages/edit-navigation/src/components/toolbar/save-button.js
 create mode 100644 packages/edit-navigation/src/components/toolbar/style.scss

diff --git a/packages/components/src/select-control/index.js b/packages/components/src/select-control/index.js
index 369cc079f7f84..55c507753eda4 100644
--- a/packages/components/src/select-control/index.js
+++ b/packages/components/src/select-control/index.js
@@ -41,6 +41,7 @@ function SelectControl(
 		options = [],
 		size = 'default',
 		value: valueProp,
+		labelPosition,
 		...props
 	},
 	ref
@@ -100,6 +101,7 @@ function SelectControl(
 						<Icon icon={ chevronDown } size={ 18 } />
 					</DownArrowWrapper>
 				}
+				labelPosition={ labelPosition }
 			>
 				<Select
 					{ ...props }
diff --git a/packages/edit-navigation/src/components/delete-menu-button/index.js b/packages/edit-navigation/src/components/delete-menu-button/index.js
deleted file mode 100644
index 9cf1799ebfaf7..0000000000000
--- a/packages/edit-navigation/src/components/delete-menu-button/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function DeleteMenuButton( { onDelete } ) {
-	const askToDelete = async () => {
-		if (
-			// eslint-disable-next-line no-alert
-			window.confirm(
-				__( 'Are you sure you want to delete this navigation?' )
-			)
-		) {
-			onDelete();
-		}
-	};
-
-	return (
-		<Button
-			className="menu-editor-button__delete"
-			isPrimary
-			onClick={ askToDelete }
-			isLink
-		>
-			{ __( 'Delete navigation' ) }
-		</Button>
-	);
-}
diff --git a/packages/edit-navigation/src/components/delete-menu-button/style.scss b/packages/edit-navigation/src/components/delete-menu-button/style.scss
deleted file mode 100644
index 5e314b1a727fc..0000000000000
--- a/packages/edit-navigation/src/components/delete-menu-button/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.components-button.is-link.menu-editor-button__delete {
-	color: $alert-red;
-	&:hover {
-		background: transparent;
-		color: $alert-red;
-	}
-}
diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js
new file mode 100644
index 0000000000000..e28e65622226e
--- /dev/null
+++ b/packages/edit-navigation/src/components/editor/index.js
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import ListView from './list-view';
+import VisualView from './visual-view';
+
+export default function Editor( { isPending, blocks } ) {
+	return (
+		<div className="edit-navigation-editor">
+			<ListView isPending={ isPending } blocks={ blocks } />
+			<VisualView isPending={ isPending } />
+		</div>
+	);
+}
diff --git a/packages/edit-navigation/src/components/editor/list-view.js b/packages/edit-navigation/src/components/editor/list-view.js
new file mode 100644
index 0000000000000..a220785236ab8
--- /dev/null
+++ b/packages/edit-navigation/src/components/editor/list-view.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
+import { __experimentalBlockNavigationTree } from '@wordpress/block-editor';
+
+export default function ListView( { isPending, blocks } ) {
+	const [ selectedBlockId, setSelectedBlockId ] = useState(
+		blocks[ 0 ]?.clientId
+	);
+
+	return (
+		<div className="edit-navigation-editor__list-view">
+			{ isPending ? (
+				<Spinner />
+			) : (
+				<__experimentalBlockNavigationTree
+					blocks={ blocks }
+					selectedBlockClientId={ selectedBlockId }
+					selectBlock={ ( id ) => {
+						setSelectedBlockId( id );
+					} }
+					__experimentalFeatures
+					showNestedBlocks
+					showAppender
+					showBlockMovers
+				/>
+			) }
+		</div>
+	);
+}
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
new file mode 100644
index 0000000000000..3dccf9503e5d7
--- /dev/null
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -0,0 +1,43 @@
+.edit-navigation-editor {
+	margin-top: $grid-unit-20;
+
+	@include break-medium() {
+		align-items: flex-start;
+		display: flex;
+	}
+}
+
+.edit-navigation-editor__list-view,
+.edit-navigation-editor__visual-view {
+	background: $white;
+	border-radius: 3px;
+	border: $border-width solid $gray-200;
+}
+
+.edit-navigation-editor__list-view {
+	padding: $grid-unit-10;
+
+	@include break-medium() {
+		width: 300px;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 100px auto;
+	}
+}
+
+.edit-navigation-editor__visual-view {
+	margin-top: $grid-unit-20;
+
+	@include break-medium() {
+		flex-grow: 1;
+		margin-left: $grid-unit-20;
+		margin-top: 0;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 10px auto;
+	}
+}
diff --git a/packages/edit-navigation/src/components/editor/visual-view.js b/packages/edit-navigation/src/components/editor/visual-view.js
new file mode 100644
index 0000000000000..683d19711c634
--- /dev/null
+++ b/packages/edit-navigation/src/components/editor/visual-view.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { WritingFlow, ObserveTyping, BlockList } from '@wordpress/block-editor';
+import { Spinner } from '@wordpress/components';
+
+export default function VisualView( { isPending } ) {
+	const rootClientId = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlocks()[ 0 ]?.clientId
+	);
+
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+
+	// Select the root Navigation block when it becomes available.
+	useEffect( () => {
+		if ( rootClientId ) {
+			selectBlock( rootClientId );
+		}
+	}, [ rootClientId ] );
+
+	return (
+		<div className="edit-navigation-editor__visual-view">
+			{ isPending ? (
+				<Spinner />
+			) : (
+				<div className="editor-styles-wrapper">
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</div>
+			) }
+		</div>
+	);
+}
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
new file mode 100644
index 0000000000000..aef834d47b05d
--- /dev/null
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Dropdown } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ManageLocations from './manage-locations';
+
+export default function Header( { onBeginAddingMenu } ) {
+	return (
+		<div className="edit-navigation-header">
+			<h1>{ __( 'Navigation' ) }</h1>
+
+			<Button
+				className="edit-navigation-header__add-new-button"
+				isSecondary
+				onClick={ onBeginAddingMenu }
+			>
+				{ __( 'Add new' ) }
+			</Button>
+
+			<Dropdown
+				contentClassName="edit-navigation-header__manage-locations"
+				position="bottom center"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						isLink
+						aria-expanded={ isOpen }
+						onClick={ onToggle }
+					>
+						{ __( 'Manage locations' ) }
+					</Button>
+				) }
+				renderContent={ () => <ManageLocations /> }
+			/>
+		</div>
+	);
+}
diff --git a/packages/edit-navigation/src/components/header/manage-locations.js b/packages/edit-navigation/src/components/header/manage-locations.js
new file mode 100644
index 0000000000000..c883617196fa4
--- /dev/null
+++ b/packages/edit-navigation/src/components/header/manage-locations.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Spinner, SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useMenuLocations from './use-menu-locations';
+
+export default function ManageLocations() {
+	const menus = useSelect( ( select ) => select( 'core' ).getMenus() );
+
+	const [ menuLocations, assignMenuToLocation ] = useMenuLocations();
+
+	if ( ! menus || ! menuLocations ) {
+		return <Spinner />;
+	}
+
+	if ( ! menus.length ) {
+		return <p>{ __( 'There are no available menus.' ) }</p>;
+	}
+
+	if ( ! menuLocations.length ) {
+		return <p>{ __( 'There are no available menu locations.' ) }</p>;
+	}
+
+	return menuLocations.map( ( menuLocation ) => (
+		<SelectControl
+			key={ menuLocation.name }
+			label={ menuLocation.description }
+			labelPosition="top"
+			value={ menuLocation.menu }
+			options={ [
+				{ value: 0, label: __( '— Select navigation —' ) },
+				...menus.map( ( menu ) => ( {
+					value: menu.id,
+					label: menu.name,
+				} ) ),
+			] }
+			onChange={ ( menuId ) => {
+				assignMenuToLocation( menuLocation.name, Number( menuId ) );
+			} }
+		/>
+	) );
+}
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
new file mode 100644
index 0000000000000..89503f8ef3c6e
--- /dev/null
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -0,0 +1,25 @@
+.edit-navigation-header {
+	align-items: center;
+	display: flex;
+	margin-top: $grid-unit-10;
+}
+
+.edit-navigation-header__add-new-button {
+	margin: 0 $grid-unit-20;
+}
+
+.edit-navigation-header__manage-locations {
+	text-align: center;
+
+	.components-popover__content > div {
+		padding: $grid-unit-20;
+	}
+
+	.components-base-control {
+		margin-bottom: $grid-unit-20;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
diff --git a/packages/edit-navigation/src/components/header/use-menu-locations.js b/packages/edit-navigation/src/components/header/use-menu-locations.js
new file mode 100644
index 0000000000000..89895035d5cc2
--- /dev/null
+++ b/packages/edit-navigation/src/components/header/use-menu-locations.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { useDispatch } from '@wordpress/data';
+
+export default function useMenuLocations() {
+	const [ menuLocationsByName, setMenuLocationsByName ] = useState( null );
+
+	useEffect( () => {
+		const fetchMenuLocationsByName = async () => {
+			const newMenuLocationsByName = await apiFetch( {
+				method: 'GET',
+				path: '/__experimental/menu-locations',
+			} );
+			setMenuLocationsByName( newMenuLocationsByName );
+		};
+		fetchMenuLocationsByName();
+	}, [] );
+
+	const { saveMenu } = useDispatch( 'core' );
+
+	const assignMenuToLocation = async ( locationName, newMenuId ) => {
+		const oldMenuId = menuLocationsByName[ locationName ].menu;
+
+		const newMenuLocationsByName = {
+			...menuLocationsByName,
+			[ locationName ]: {
+				...menuLocationsByName[ locationName ],
+				menu: newMenuId,
+			},
+		};
+
+		setMenuLocationsByName( newMenuLocationsByName );
+
+		const promises = [];
+
+		if ( oldMenuId ) {
+			promises.push(
+				saveMenu( {
+					id: oldMenuId,
+					locations: Object.values( newMenuLocationsByName )
+						.filter( ( { menu } ) => menu === oldMenuId )
+						.map( ( { name } ) => name ),
+				} )
+			);
+		}
+
+		if ( newMenuId ) {
+			promises.push(
+				saveMenu( {
+					id: newMenuId,
+					locations: Object.values( newMenuLocationsByName )
+						.filter( ( { menu } ) => menu === newMenuId )
+						.map( ( { name } ) => name ),
+				} )
+			);
+		}
+
+		await Promise.all( promises );
+	};
+
+	return [
+		menuLocationsByName ? Object.values( menuLocationsByName ) : null,
+		assignMenuToLocation,
+	];
+}
diff --git a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
new file mode 100644
index 0000000000000..0eccce950ce41
--- /dev/null
+++ b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { PanelBody, CheckboxControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function AutoAddPagesPanel( { menuId } ) {
+	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ) );
+
+	const [ autoAddPages, setAutoAddPages ] = useState( null );
+
+	useEffect( () => {
+		if ( autoAddPages === null && menu ) {
+			setAutoAddPages( menu.auto_add );
+		}
+	}, [ autoAddPages, menu ] );
+
+	const { saveMenu } = useDispatch( 'core' );
+
+	return (
+		<PanelBody className="edit-navigation-inspector-additions__auto-add-pages-panel">
+			<CheckboxControl
+				label={ __( 'Automatically add new top-level pages' ) }
+				checked={ autoAddPages ?? false }
+				onChange={ ( newAutoAddPages ) => {
+					setAutoAddPages( newAutoAddPages );
+					saveMenu( {
+						...menu,
+						auto_add: newAutoAddPages,
+					} );
+				} }
+			/>
+		</PanelBody>
+	);
+}
diff --git a/packages/edit-navigation/src/components/inspector-additions/delete-menu-panel.js b/packages/edit-navigation/src/components/inspector-additions/delete-menu-panel.js
new file mode 100644
index 0000000000000..c112840b621e2
--- /dev/null
+++ b/packages/edit-navigation/src/components/inspector-additions/delete-menu-panel.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function DeleteMenuPanel( { onDeleteMenu } ) {
+	return (
+		<PanelBody className="edit-navigation-inspector-additions__delete-menu-panel">
+			<Button
+				isLink
+				isDestructive
+				onClick={ () => {
+					if (
+						// eslint-disable-next-line no-alert
+						window.confirm(
+							__(
+								'Are you sure you want to delete this navigation?'
+							)
+						)
+					) {
+						onDeleteMenu();
+					}
+				} }
+			>
+				{ __( 'Delete menu' ) }
+			</Button>
+		</PanelBody>
+	);
+}
diff --git a/packages/edit-navigation/src/components/inspector-additions/index.js b/packages/edit-navigation/src/components/inspector-additions/index.js
new file mode 100644
index 0000000000000..0d95d069e2015
--- /dev/null
+++ b/packages/edit-navigation/src/components/inspector-additions/index.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { InspectorControls } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import AutoAddPagesPanel from './auto-add-pages-panel';
+import DeleteMenuPanel from './delete-menu-panel';
+
+export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
+	const selectedBlock = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSelectedBlock()
+	);
+
+	if ( selectedBlock?.name !== 'core/navigation' ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls>
+			<AutoAddPagesPanel menuId={ menuId } />
+			<DeleteMenuPanel onDeleteMenu={ onDeleteMenu } />
+		</InspectorControls>
+	);
+}
diff --git a/packages/edit-navigation/src/components/inspector-additions/style.scss b/packages/edit-navigation/src/components/inspector-additions/style.scss
new file mode 100644
index 0000000000000..8d22118a3273b
--- /dev/null
+++ b/packages/edit-navigation/src/components/inspector-additions/style.scss
@@ -0,0 +1,20 @@
+// Set the block inspector to use flexbox so that we can change the order of
+// panels within it.
+// TODO: Is there a way to do this natively using InspectorControls?
+.block-editor-block-inspector {
+	display: flex;
+	flex-direction: column;
+
+	.block-editor-block-card {
+		order: -2;
+	}
+}
+
+.edit-navigation-inspector-additions__auto-add-pages-panel {
+	order: -1;
+}
+
+.edit-navigation-inspector-additions__delete-menu-panel {
+	text-align: center;
+	order: 1;
+}
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index 780afd26e22eb..51d88f37067e8 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -6,59 +6,89 @@ import {
 	FocusReturnProvider,
 	Popover,
 	SlotFillProvider,
-	TabPanel,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import {
+	BlockEditorKeyboardShortcuts,
+	BlockEditorProvider,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import Notices from '../notices';
-import MenusEditor from '../menus-editor';
-import MenuLocationsEditor from '../menu-locations-editor';
+import useNavigationEditor from './use-navigation-editor';
+import useNavigationBlockEditor from './use-navigation-block-editor';
+import useMenuNotifications from './use-menu-notifications';
 import ErrorBoundary from '../error-boundary';
+import NavigationEditorShortcuts from './shortcuts';
+import Header from '../header';
+import Notices from '../notices';
+import Toolbar from '../toolbar';
+import Editor from '../editor';
+import InspectorAdditions from '../inspector-additions';
 
 export default function Layout( { blockEditorSettings } ) {
+	const {
+		menus,
+		selectedMenuId,
+		navigationPost,
+		isAddingMenu,
+		selectMenu,
+		beginAddingMenu,
+		cancelAddingMenu,
+		deleteMenu,
+	} = useNavigationEditor();
+
+	const [ blocks, onInput, onChange ] = useNavigationBlockEditor(
+		navigationPost
+	);
+
+	useMenuNotifications( selectedMenuId );
+
 	return (
-		<>
-			<ErrorBoundary>
-				<SlotFillProvider>
-					<DropZoneProvider>
-						<FocusReturnProvider>
-							<Notices />
-							<TabPanel
-								className="edit-navigation-layout__tab-panel"
-								tabs={ [
-									{
-										name: 'menus',
-										title: __( 'Edit Navigation' ),
-									},
-									{
-										name: 'menu-locations',
-										title: __( 'Manage Locations' ),
-									},
-								] }
+		<ErrorBoundary>
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<FocusReturnProvider>
+						<BlockEditorKeyboardShortcuts.Register />
+						<NavigationEditorShortcuts.Register />
+
+						<Notices />
+
+						<div className="edit-navigation-layout">
+							<Header onBeginAddingMenu={ beginAddingMenu } />
+
+							<BlockEditorProvider
+								value={ blocks }
+								onInput={ onInput }
+								onChange={ onChange }
+								settings={ {
+									...blockEditorSettings,
+									templateLock: 'all',
+									hasFixedToolbar: true,
+								} }
 							>
-								{ ( tab ) => (
-									<ErrorBoundary>
-										{ tab.name === 'menus' && (
-											<MenusEditor
-												blockEditorSettings={
-													blockEditorSettings
-												}
-											/>
-										) }
-										{ tab.name === 'menu-locations' && (
-											<MenuLocationsEditor />
-										) }
-									</ErrorBoundary>
-								) }
-							</TabPanel>
-							<Popover.Slot />
-						</FocusReturnProvider>
-					</DropZoneProvider>
-				</SlotFillProvider>
-			</ErrorBoundary>
-		</>
+								<Toolbar
+									menus={ menus }
+									selectedMenuId={ selectedMenuId }
+									isAddingMenu={ isAddingMenu }
+									onSelectMenu={ selectMenu }
+									onCancelAddingMenu={ cancelAddingMenu }
+								/>
+								<Editor
+									isPending={ ! navigationPost }
+									blocks={ blocks }
+								/>
+								<InspectorAdditions
+									menuId={ selectedMenuId }
+									onDeleteMenu={ deleteMenu }
+								/>
+							</BlockEditorProvider>
+						</div>
+
+						<Popover.Slot />
+					</FocusReturnProvider>
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</ErrorBoundary>
 	);
 }
diff --git a/packages/edit-navigation/src/components/navigation-editor/shortcuts.js b/packages/edit-navigation/src/components/layout/shortcuts.js
similarity index 100%
rename from packages/edit-navigation/src/components/navigation-editor/shortcuts.js
rename to packages/edit-navigation/src/components/layout/shortcuts.js
diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
index b533f3cd3b20a..1a6bdbf01ea17 100644
--- a/packages/edit-navigation/src/components/layout/style.scss
+++ b/packages/edit-navigation/src/components/layout/style.scss
@@ -1,12 +1,7 @@
-.edit-navigation-layout__tab-panel {
-	// Matches the padding-left applied by default to the `#wpcontent` element.
+.edit-navigation-layout {
 	margin-right: 10px;
 
 	@include break-medium {
 		margin-right: 20px;
 	}
-
-	.components-tab-panel__tabs {
-		margin-bottom: 10px;
-	}
 }
diff --git a/packages/edit-navigation/src/components/layout/use-menu-notifications.js b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
new file mode 100644
index 0000000000000..b011b6fa19e3e
--- /dev/null
+++ b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/i18n';
+
+export default function useMenuNotifications( menuId ) {
+	const { lastSaveError, lastDeleteError } = useSelect( ( select ) => ( {
+		lastSaveError: select( 'core' ).getLastEntitySaveError(
+			'root',
+			'menu'
+		),
+		lastDeleteError: select( 'core' ).getLastEntityDeleteError(
+			'root',
+			'menu',
+			menuId
+		),
+	} ) );
+
+	const { createErrorNotice } = useDispatch( 'core/notices' );
+
+	const processError = ( error ) => {
+		const document = new window.DOMParser().parseFromString(
+			error.message,
+			'text/html'
+		);
+		const errorText = document.body.textContent || '';
+		createErrorNotice( errorText, { id: 'edit-navigation-error' } );
+	};
+
+	useEffect( () => {
+		if ( lastSaveError ) {
+			processError( lastSaveError );
+		}
+	}, [ lastSaveError ] );
+
+	useEffect( () => {
+		if ( lastDeleteError ) {
+			processError( lastDeleteError );
+		}
+	}, [ lastDeleteError ] );
+}
diff --git a/packages/edit-navigation/src/components/navigation-editor/use-navigation-block-editor.js b/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
similarity index 97%
rename from packages/edit-navigation/src/components/navigation-editor/use-navigation-block-editor.js
rename to packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
index 57968c10b78d4..d2d5034878ff6 100644
--- a/packages/edit-navigation/src/components/navigation-editor/use-navigation-block-editor.js
+++ b/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
@@ -16,8 +16,9 @@ export default function useNavigationBlockEditor( post ) {
 	const [ blocks, onInput, _onChange ] = useEntityBlockEditor(
 		KIND,
 		POST_TYPE,
-		{ id: post.id }
+		{ id: post?.id }
 	);
+
 	const onChange = useCallback(
 		async ( updatedBlocks ) => {
 			await _onChange( updatedBlocks );
diff --git a/packages/edit-navigation/src/components/layout/use-navigation-editor.js b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
new file mode 100644
index 0000000000000..a15ad104a52e6
--- /dev/null
+++ b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+
+export default function useNavigationEditor() {
+	const menus = useSelect( ( select ) =>
+		select( 'core' ).getMenus( { per_page: -1 } )
+	);
+
+	const [ selectedMenuId, setSelectedMenuId ] = useState( null );
+
+	useEffect( () => {
+		if ( ! selectedMenuId && menus?.length ) {
+			setSelectedMenuId( menus[ 0 ].id );
+		}
+	}, [ selectedMenuId, menus ] );
+
+	const navigationPost = useSelect( ( select ) =>
+		select( 'core/edit-navigation' ).getNavigationPostForMenu(
+			selectedMenuId
+		)
+	);
+
+	const [ isAddingMenu, setIsAddingMenu ] = useState( false );
+
+	const selectMenu = ( menuId ) => {
+		setSelectedMenuId( menuId );
+		setIsAddingMenu( false );
+	};
+
+	const beginAddingMenu = () => setIsAddingMenu( true );
+
+	const cancelAddingMenu = () => setIsAddingMenu( false );
+
+	const { deleteMenu: _deleteMenu } = useDispatch( 'core' );
+
+	const deleteMenu = async () => {
+		const didDeleteMenu = await _deleteMenu( selectedMenuId, {
+			force: true,
+		} );
+		if ( didDeleteMenu ) {
+			setSelectedMenuId( null );
+		}
+	};
+
+	return {
+		menus,
+		selectedMenuId,
+		navigationPost,
+		isAddingMenu,
+		selectMenu,
+		beginAddingMenu,
+		cancelAddingMenu,
+		deleteMenu,
+	};
+}
diff --git a/packages/edit-navigation/src/components/menu-locations-editor/index.js b/packages/edit-navigation/src/components/menu-locations-editor/index.js
deleted file mode 100644
index 356bc6a8ee440..0000000000000
--- a/packages/edit-navigation/src/components/menu-locations-editor/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	SelectControl,
-	Button,
-	Card,
-	CardHeader,
-	CardBody,
-	Spinner,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import useMenuLocations from './use-menu-locations';
-
-export default function MenuLocationsEditor() {
-	const menus = useSelect( ( select ) => select( 'core' ).getMenus() );
-
-	const [
-		menuLocations,
-		saveMenuLocations,
-		assignMenuToLocation,
-	] = useMenuLocations();
-
-	if ( ! menus || ! menuLocations ) {
-		return <Spinner />;
-	}
-
-	const menuSelectControlOptions = [
-		{ value: 0, label: __( '— Select a Menu —' ) },
-		...menus.map( ( { id, name } ) => ( {
-			value: id,
-			label: name,
-		} ) ),
-	];
-
-	if ( menuLocations.length === 0 ) {
-		return (
-			<Card>
-				<CardHeader>{ __( 'Menu locations' ) }</CardHeader>
-				<CardBody>
-					<p>{ __( 'There are no available menu locations' ) }</p>
-				</CardBody>
-			</Card>
-		);
-	}
-
-	if ( menus.length === 0 ) {
-		return (
-			<Card>
-				<CardHeader>{ __( 'Menu locations' ) }</CardHeader>
-				<CardBody>
-					<p>{ __( 'There are no available menus' ) }</p>
-				</CardBody>
-			</Card>
-		);
-	}
-
-	return (
-		<Card>
-			<CardHeader>{ __( 'Menu locations' ) }</CardHeader>
-			<CardBody>
-				<form
-					onSubmit={ ( event ) => {
-						event.preventDefault();
-						saveMenuLocations();
-					} }
-				>
-					<table>
-						<thead>
-							<tr>
-								<th scope="col">{ __( 'Theme Location' ) }</th>
-								<th scope="col">{ __( 'Assigned Menu' ) }</th>
-							</tr>
-						</thead>
-						<tbody>
-							{ menuLocations.map( ( location ) => (
-								<tr key={ location.name }>
-									<td>{ location.description }</td>
-									<td>
-										<SelectControl
-											options={ menuSelectControlOptions }
-											value={ location.menu }
-											onChange={ ( newMenuId ) => {
-												assignMenuToLocation(
-													location.name,
-													parseInt( newMenuId )
-												);
-											} }
-										/>
-									</td>
-								</tr>
-							) ) }
-						</tbody>
-					</table>
-					<Button type="submit" isPrimary>
-						{ __( 'Save' ) }
-					</Button>
-				</form>
-			</CardBody>
-		</Card>
-	);
-}
diff --git a/packages/edit-navigation/src/components/menu-locations-editor/use-menu-locations.js b/packages/edit-navigation/src/components/menu-locations-editor/use-menu-locations.js
deleted file mode 100644
index 16200984819d0..0000000000000
--- a/packages/edit-navigation/src/components/menu-locations-editor/use-menu-locations.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	includes,
-	map,
-	find,
-	findKey,
-	mapValues,
-	flatMap,
-	groupBy,
-} from 'lodash';
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-
-export default function useMenuLocations() {
-	const { saveMenu } = useDispatch( 'core' );
-	const [ menuLocations, setMenuLocations ] = useState( null );
-	const [ emptyLocations, setEmptyLocations ] = useState( [] );
-
-	// a local state which maps menus to locations
-	// so that we can send one call per menu when
-	// updating locations, otherwise, without this local state
-	// we'd send one call per location
-	const [ menuLocationMap, setMenuLocationMap ] = useState( null );
-
-	const initMenuLocations = async () => {
-		const path = '/__experimental/menu-locations';
-		const apiLocations = await apiFetch( {
-			path,
-			method: 'GET',
-		} );
-		setMenuLocations( flatMap( apiLocations ) );
-	};
-
-	// we need to fetch the list of locations
-	// because the menu location entity
-	// caches their menu associations
-	useEffect( () => {
-		initMenuLocations();
-	}, [] );
-
-	// as soon as we have the menus we group
-	// all locations by the menuId they are assigned to
-	useEffect( () => {
-		if ( menuLocations ) {
-			const locationsByMenu = mapValues(
-				groupBy( menuLocations, 'menu' ),
-				( locations ) => map( locations, 'name' )
-			);
-			setMenuLocationMap( locationsByMenu );
-		}
-	}, [ menuLocations ] );
-
-	const assignMenuToLocation = ( newLocation, newMenuId ) => {
-		newMenuId = parseInt( newMenuId );
-
-		// we need the old menu ID so that we can set empty locations
-		const oldMenuId = findKey( menuLocationMap, ( locations ) => {
-			return includes( locations, newLocation );
-		} );
-
-		// we save a list on menus that were unassigned from their location
-		// and the location is now empty because we need to send
-		// an update to the API for these menus with an empty location set
-		const newEmptyLocations = [ ...emptyLocations ];
-		if ( newMenuId === 0 ) {
-			if ( ! includes( newEmptyLocations, oldMenuId ) ) {
-				newEmptyLocations.push( oldMenuId );
-			}
-		} else if ( includes( newEmptyLocations, oldMenuId ) ) {
-			// if the menu is assigned to another location
-			// we remove it from this list because the API
-			// will unassign it from the past location
-			delete newEmptyLocations[ oldMenuId ];
-		}
-		setEmptyLocations( newEmptyLocations );
-
-		const updatedLocation = {
-			...find( menuLocations, { name: newLocation } ),
-		};
-		updatedLocation.menu = newMenuId;
-
-		const updatedLocationKey = findKey( menuLocations, {
-			name: newLocation,
-		} );
-
-		const newMenuLocations = [ ...menuLocations ];
-		newMenuLocations[ updatedLocationKey ] = { ...updatedLocation };
-
-		setMenuLocations( newMenuLocations );
-	};
-
-	const saveMenuLocations = async () => {
-		// first call the API to empty the locations of unset menus
-		for ( const menuId of emptyLocations ) {
-			await saveMenu( {
-				id: menuId,
-				locations: [],
-			} );
-		}
-
-		// then save the new ones
-		for ( const menuId in menuLocationMap ) {
-			// sometimes menuId is 0 for unassigned locations
-			if ( menuId > 0 ) {
-				await saveMenu( {
-					id: menuId,
-					locations: menuLocationMap[ menuId ],
-				} );
-			}
-		}
-	};
-
-	return [ menuLocations, saveMenuLocations, assignMenuToLocation ];
-}
diff --git a/packages/edit-navigation/src/components/menus-editor/create-menu-area.js b/packages/edit-navigation/src/components/menus-editor/create-menu-area.js
deleted file mode 100644
index 01b83bcb2c6e4..0000000000000
--- a/packages/edit-navigation/src/components/menus-editor/create-menu-area.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Card,
-	CardHeader,
-	CardBody,
-	TextControl,
-	withFocusReturn,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-const { DOMParser } = window;
-
-const noticeId = 'edit-navigation-create-menu-error';
-
-const menuNameMatches = ( menuName ) => ( menu ) =>
-	menu.name.toLowerCase() === menuName.toLowerCase();
-
-export function CreateMenuArea( { onCancel, onCreateMenu, menus } ) {
-	const [ menuName, setMenuName ] = useState( '' );
-	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
-	const menuSaveError = useSelect( ( select ) =>
-		select( 'core' ).getLastEntitySaveError( 'root', 'menu' )
-	);
-	const { saveMenu } = useDispatch( 'core' );
-	const { createInfoNotice, createErrorNotice, removeNotice } = useDispatch(
-		'core/notices'
-	);
-
-	// Handle REST API Error messages.
-	useEffect( () => {
-		if ( menuSaveError ) {
-			// Error messages from the REST API often contain HTML.
-			// createErrorNotice does not support HTML in error text, so first
-			// strip HTML out using DOMParser.
-			const document = new DOMParser().parseFromString(
-				menuSaveError.message,
-				'text/html'
-			);
-			const errorText = document.body.textContent || '';
-			createErrorNotice( errorText, { id: noticeId } );
-		}
-	}, [ menuSaveError ] );
-
-	const createMenu = useCallback(
-		async ( event ) => {
-			// Prevent form submission.
-			event.preventDefault();
-
-			// Remove existing notices.
-			removeNotice( noticeId );
-
-			if ( menuName.length === 0 ) {
-				// Button is aria-disabled, do nothing.
-				return;
-			}
-
-			// Validate the menu name doesn't match an existing menu.
-			if ( some( menus, menuNameMatches( menuName ) ) ) {
-				const message = sprintf(
-					// translators: %s: the name of a menu.
-					__(
-						'The menu name %s conflicts with another menu name. Please try another.'
-					),
-					menuName
-				);
-				createErrorNotice( message, { id: noticeId } );
-				return;
-			}
-
-			setIsCreatingMenu( true );
-
-			const menu = await saveMenu( { name: menuName } );
-			if ( menu ) {
-				createInfoNotice( __( 'Menu created' ), {
-					type: 'snackbar',
-					isDismissible: true,
-				} );
-				onCreateMenu( menu.id );
-			}
-
-			setIsCreatingMenu( false );
-		},
-		[ menuName, menus ]
-	);
-
-	return (
-		<Card className="edit-navigation-menus-editor__create-menu-area">
-			<CardHeader>{ __( 'Create navigation menu' ) }</CardHeader>
-			<CardBody>
-				<form onSubmit={ createMenu }>
-					<TextControl
-						// Disable reason - autoFocus is legitimate in this usage,
-						// The first focusable on the form should be focused,
-						// which is this element.
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus
-						label={ __( 'Menu name' ) }
-						value={ menuName }
-						onChange={ setMenuName }
-						placeholder={ __( 'Main Navigation' ) }
-					/>
-					<Button
-						type="submit"
-						isBusy={ isCreatingMenu }
-						onClick={ createMenu }
-						aria-disabled={ menuName.length === 0 }
-						isPrimary
-					>
-						{ __( 'Create menu' ) }
-					</Button>
-					{ onCancel && (
-						<Button
-							className="edit-navigation-menus-editor__cancel-create-menu-button"
-							isSecondary
-							onClick={ onCancel }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					) }
-				</form>
-			</CardBody>
-		</Card>
-	);
-}
-
-export default withFocusReturn( CreateMenuArea );
diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js
deleted file mode 100644
index 7b22b5a295c71..0000000000000
--- a/packages/edit-navigation/src/components/menus-editor/index.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import {
-	Button,
-	Card,
-	CardBody,
-	Spinner,
-	SelectControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-const { DOMParser } = window;
-
-/**
- * Internal dependencies
- */
-import CreateMenuArea from './create-menu-area';
-import NavigationEditor from '../navigation-editor';
-
-export default function MenusEditor( { blockEditorSettings } ) {
-	const [ menuId, setMenuId ] = useState();
-	const [ showCreateMenuPanel, setShowCreateMenuPanel ] = useState( false );
-	const [ hasCompletedFirstLoad, setHasCompletedFirstLoad ] = useState(
-		false
-	);
-
-	const noticeId = useRef();
-
-	const { menus, hasLoadedMenus, menuDeleteError } = useSelect(
-		( select ) => {
-			const {
-				getMenus,
-				hasFinishedResolution,
-				getLastEntityDeleteError,
-			} = select( 'core' );
-			const query = { per_page: -1 };
-			return {
-				menus: getMenus( query ),
-				hasLoadedMenus: hasFinishedResolution( 'getMenus', [ query ] ),
-				menuDeleteError: getLastEntityDeleteError(
-					'root',
-					'menu',
-					menuId
-				),
-			};
-		},
-		[ menuId ]
-	);
-
-	const { deleteMenu } = useDispatch( 'core' );
-	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
-
-	useEffect( () => {
-		if ( ! hasCompletedFirstLoad && hasLoadedMenus ) {
-			setHasCompletedFirstLoad( true );
-		}
-	}, [ hasLoadedMenus ] );
-
-	// Handle REST API Error messages.
-	useEffect( () => {
-		if ( menuDeleteError ) {
-			// Error messages from the REST API often contain HTML.
-			// createErrorNotice does not support HTML in error text, so first
-			// strip HTML out using DOMParser.
-			const document = new DOMParser().parseFromString(
-				menuDeleteError.message,
-				'text/html'
-			);
-			const errorText = document.body.textContent || '';
-			noticeId.current = uniqueId(
-				'navigation-editor/menu-editor/edit-navigation-delete-menu-error'
-			);
-			createErrorNotice( errorText, { id: noticeId.current } );
-		}
-	}, [ menuDeleteError ] );
-
-	useEffect( () => {
-		if ( menus?.length ) {
-			// Only set menuId if it's currently unset.
-			if ( ! menuId ) {
-				setMenuId( menus[ 0 ].id );
-			}
-		}
-	}, [ menus, menuId ] );
-
-	if ( ! hasCompletedFirstLoad ) {
-		return <Spinner />;
-	}
-
-	const hasMenus = !! menus?.length;
-	const isCreateMenuPanelVisible =
-		hasCompletedFirstLoad && ( ! hasMenus || showCreateMenuPanel );
-
-	return (
-		<>
-			<Card className="edit-navigation-menus-editor__menu-selection-card">
-				<CardBody className="edit-navigation-menus-editor__menu-selection-card-body">
-					{ hasCompletedFirstLoad && ! hasMenus && (
-						<p className="edit-navigation-menus-editor__menu-selection-card-instructional-text">
-							{ __( 'Create your first menu below.' ) }
-						</p>
-					) }
-					{ hasMenus && (
-						<>
-							<SelectControl
-								className="edit-navigation-menus-editor__menu-select-control"
-								label={ __( 'Select navigation to edit:' ) }
-								options={ menus?.map( ( menu ) => ( {
-									value: menu.id,
-									label: menu.name,
-								} ) ) }
-								onChange={ ( selectedMenuId ) =>
-									setMenuId( Number( selectedMenuId ) )
-								}
-								value={ menuId }
-							/>
-							<Button
-								isLink
-								onClick={ () => setShowCreateMenuPanel( true ) }
-							>
-								{ __( 'Create a new menu' ) }
-							</Button>
-						</>
-					) }
-				</CardBody>
-			</Card>
-			{ isCreateMenuPanelVisible && (
-				<CreateMenuArea
-					menus={ menus }
-					onCancel={
-						// User can only cancel out of menu creation if there
-						// are other menus to fall back to showing.
-						hasMenus
-							? () => setShowCreateMenuPanel( false )
-							: undefined
-					}
-					onCreateMenu={ ( newMenuId ) => {
-						setMenuId( newMenuId );
-						setShowCreateMenuPanel( false );
-					} }
-				/>
-			) }
-			{ hasMenus && (
-				<NavigationEditor
-					menuId={ menuId }
-					blockEditorSettings={ blockEditorSettings }
-					onDeleteMenu={ async () => {
-						removeNotice( noticeId.current );
-						const deletedMenu = await deleteMenu( menuId, {
-							force: 'true',
-						} );
-						if ( deletedMenu ) {
-							setMenuId( false );
-						}
-					} }
-				/>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-navigation/src/components/menus-editor/style.scss b/packages/edit-navigation/src/components/menus-editor/style.scss
deleted file mode 100644
index 4609d50c0c959..0000000000000
--- a/packages/edit-navigation/src/components/menus-editor/style.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.edit-navigation-menus-editor__menu-selection-card {
-	margin-bottom: 10px;
-}
-
-.edit-navigation-menus-editor__menu-selection-card-body {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-
-	.edit-navigation-menus-editor__menu-select-control {
-		margin-right: 0;
-		margin-bottom: 10px;
-		align-self: normal;
-	}
-
-	@include break-large {
-		flex-direction: row;
-		align-items: center;
-
-		.edit-navigation-menus-editor__menu-select-control {
-			align-self: center;
-			margin-right: 1ch;
-			margin-bottom: 0;
-		}
-	}
-}
-
-.edit-navigation-menus-editor__menu-select-control {
-	flex: 1;
-	margin-right: 1ch;
-
-	@include break-small {
-		.components-base-control__field {
-			display: flex;
-			flex-direction: row;
-			align-items: baseline;
-			margin-bottom: 0;
-		}
-		.components-base-control__label {
-			margin-right: 1ch;
-		}
-	}
-}
-
-.edit-navigation-menus-editor__menu-selection-card-instructional-text {
-	margin: 0;
-}
-
-.edit-navigation-menus-editor__create-menu-area {
-	margin-bottom: 10px;
-}
-
-.edit-navigation-menus-editor__cancel-create-menu-button {
-	margin-left: 8px;
-}
-
diff --git a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
deleted file mode 100644
index 2bb3fe8569629..0000000000000
--- a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	BlockList,
-	BlockToolbar,
-	NavigableToolbar,
-	ObserveTyping,
-	WritingFlow,
-	BlockInspector,
-} from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
-import {
-	Button,
-	Card,
-	CardHeader,
-	CardBody,
-	CardFooter,
-	CheckboxControl,
-	Dropdown,
-	Popover,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { cog } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import DeleteMenuButton from '../delete-menu-button';
-
-export default function BlockEditorArea( {
-	onDeleteMenu,
-	menuId,
-	saveBlocks,
-} ) {
-	const {
-		rootBlockId,
-		isNavigationModeActive,
-		isRootBlockSelected,
-		hasSelectedBlock,
-	} = useSelect( ( select ) => {
-		const {
-			isNavigationMode,
-			getBlockSelectionStart,
-			getBlock,
-			getBlocks,
-		} = select( 'core/block-editor' );
-
-		const selectionStartClientId = getBlockSelectionStart();
-		const rootClientId = getBlocks()[ 0 ]?.clientId;
-
-		return {
-			selectionStartClientId,
-			rootBlockId: rootClientId,
-			isNavigationModeActive: isNavigationMode(),
-			isRootBlockSelected:
-				!! selectionStartClientId &&
-				rootClientId === selectionStartClientId,
-			hasSelectedBlock:
-				!! selectionStartClientId &&
-				!! getBlock( selectionStartClientId ),
-		};
-	}, [] );
-
-	const { saveMenu } = useDispatch( 'core' );
-	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
-		menuId,
-	] );
-
-	const [ autoAddPages, setAutoAddPages ] = useState( false );
-
-	useEffect( () => {
-		if ( menu ) {
-			setAutoAddPages( menu.auto_add );
-		}
-	}, [ menuId ] );
-
-	// Select the navigation block when it becomes available
-	const { selectBlock } = useDispatch( 'core/block-editor' );
-	useEffect( () => {
-		if ( rootBlockId ) {
-			selectBlock( rootBlockId );
-		}
-	}, [ rootBlockId ] );
-
-	return (
-		<Card className="edit-navigation-editor__block-editor-area">
-			<CardHeader>
-				<div className="edit-navigation-editor__block-editor-area-header-text">
-					{ __( 'Navigation menu' ) }
-				</div>
-
-				<Button isPrimary onClick={ saveBlocks }>
-					{ __( 'Save navigation' ) }
-				</Button>
-				<Dropdown
-					className="edit-navigation-editor__block-inspector"
-					position="bottom right"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							icon={ cog }
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-							label="Block inspector"
-						/>
-					) }
-					renderContent={ () => (
-						<BlockInspector bubblesVirtually={ false } />
-					) }
-				/>
-			</CardHeader>
-			<CardBody>
-				<NavigableToolbar
-					className={ classnames(
-						'edit-navigation-editor__block-editor-toolbar',
-						{
-							'is-hidden':
-								isNavigationModeActive || isRootBlockSelected,
-						}
-					) }
-					aria-label={ __( 'Block tools' ) }
-				>
-					{ hasSelectedBlock && ! isRootBlockSelected && (
-						<BlockToolbar __experimentalExpandedControl />
-					) }
-				</NavigableToolbar>
-				<Popover.Slot name="block-toolbar" />
-				<div className="editor-styles-wrapper">
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
-					</WritingFlow>
-				</div>
-			</CardBody>
-			<CardFooter>
-				<CheckboxControl
-					label={ __(
-						'Automatically add new top-level pages to this menu'
-					) }
-					help={ __(
-						'New menu items will automatically appear in this menu as new top level pages are added to your site'
-					) }
-					onChange={ async () => {
-						setAutoAddPages( ! autoAddPages );
-						saveMenu( {
-							...menu,
-							auto_add: ! autoAddPages,
-						} );
-					} }
-					checked={ autoAddPages }
-				/>
-				<DeleteMenuButton menuId={ menuId } onDelete={ onDeleteMenu } />
-			</CardFooter>
-		</Card>
-	);
-}
diff --git a/packages/edit-navigation/src/components/navigation-editor/helpers.js b/packages/edit-navigation/src/components/navigation-editor/helpers.js
deleted file mode 100644
index 1937a6f4a0f02..0000000000000
--- a/packages/edit-navigation/src/components/navigation-editor/helpers.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const flattenBlocks = ( blocks ) =>
-	blocks.flatMap( ( item ) =>
-		[ item ].concat( flattenBlocks( item.innerBlocks || [] ) )
-	);
diff --git a/packages/edit-navigation/src/components/navigation-editor/index.js b/packages/edit-navigation/src/components/navigation-editor/index.js
deleted file mode 100644
index 6602f2f5913ca..0000000000000
--- a/packages/edit-navigation/src/components/navigation-editor/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockEditorKeyboardShortcuts,
-	BlockEditorProvider,
-} from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
-import { Spinner } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import NavigationEditorShortcuts from './shortcuts';
-import BlockEditorArea from './block-editor-area';
-import NavigationStructureArea from './navigation-structure-area';
-import useNavigationBlockEditor from './use-navigation-block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-
-export default function NavigationEditor( {
-	menuId,
-	blockEditorSettings,
-	onDeleteMenu,
-} ) {
-	const { post, hasResolved } = useSelect( ( select ) => ( {
-		post: select( 'core/edit-navigation' ).getNavigationPostForMenu(
-			menuId
-		),
-		hasResolved: select( 'core/edit-navigation' ).hasResolvedNavigationPost(
-			menuId
-		),
-	} ) );
-	return (
-		<div className="edit-navigation-editor">
-			<BlockEditorKeyboardShortcuts.Register />
-			<NavigationEditorShortcuts.Register />
-
-			{ ! hasResolved ? (
-				<Spinner />
-			) : (
-				<NavigationPostEditor
-					post={ post }
-					blockEditorSettings={ blockEditorSettings }
-					onDeleteMenu={ onDeleteMenu }
-				/>
-			) }
-		</div>
-	);
-}
-
-function NavigationPostEditor( { post, blockEditorSettings, onDeleteMenu } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ blocks, onInput, onChange ] = useNavigationBlockEditor( post );
-	const { saveNavigationPost } = useDispatch( 'core/edit-navigation' );
-	const save = () => saveNavigationPost( post );
-	return (
-		<BlockEditorProvider
-			value={ blocks }
-			onInput={ onInput }
-			onChange={ onChange }
-			settings={ {
-				...blockEditorSettings,
-				templateLock: 'all',
-				hasFixedToolbar: true,
-			} }
-			useSubRegistry={ false }
-		>
-			<BlockEditorKeyboardShortcuts />
-			<NavigationEditorShortcuts saveBlocks={ save } />
-			<NavigationStructureArea
-				blocks={ blocks }
-				initialOpen={ isLargeViewport }
-			/>
-			<BlockEditorArea
-				saveBlocks={ save }
-				menuId={ post.meta.menuId }
-				onDeleteMenu={ onDeleteMenu }
-			/>
-		</BlockEditorProvider>
-	);
-}
diff --git a/packages/edit-navigation/src/components/navigation-editor/navigation-structure-area.js b/packages/edit-navigation/src/components/navigation-editor/navigation-structure-area.js
deleted file mode 100644
index 7c01de144d735..0000000000000
--- a/packages/edit-navigation/src/components/navigation-editor/navigation-structure-area.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import { __experimentalBlockNavigationTree } from '@wordpress/block-editor';
-import {
-	Card,
-	CardHeader,
-	CardBody,
-	Panel,
-	PanelBody,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-export default function NavigationStructureArea( { blocks, initialOpen } ) {
-	const [ selectedBlockId, setSelectedBlockId ] = useState(
-		blocks[ 0 ]?.clientId
-	);
-	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const showNavigationStructure = !! blocks.length;
-
-	const content = showNavigationStructure && (
-		<__experimentalBlockNavigationTree
-			blocks={ blocks }
-			selectedBlockClientId={ selectedBlockId }
-			selectBlock={ ( id ) => {
-				setSelectedBlockId( id );
-			} }
-			__experimentalFeatures
-			showNestedBlocks
-			showAppender
-			showBlockMovers
-		/>
-	);
-
-	return isSmallScreen ? (
-		<Panel className="edit-navigation-editor__navigation-structure-panel">
-			<PanelBody
-				title={ __( 'Navigation structure' ) }
-				initialOpen={ initialOpen }
-			>
-				{ content }
-			</PanelBody>
-		</Panel>
-	) : (
-		<Card className="edit-navigation-editor__navigation-structure-card">
-			<CardHeader className="edit-navigation-editor__navigation-structure-header">
-				{ __( 'Navigation structure' ) }
-			</CardHeader>
-			<CardBody>{ content }</CardBody>
-		</Card>
-	);
-}
diff --git a/packages/edit-navigation/src/components/navigation-editor/style.scss b/packages/edit-navigation/src/components/navigation-editor/style.scss
deleted file mode 100644
index 26a20bfce1680..0000000000000
--- a/packages/edit-navigation/src/components/navigation-editor/style.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-.edit-navigation-editor {
-	display: grid;
-	align-items: self-start;
-	grid-gap: 10px;
-
-	@include break-medium {
-		grid-template-columns: 280px 1fr;
-	}
-
-	// Make the block list take up the full width of the panel.
-	.block-editor-block-list__layout.is-root-container {
-		padding: 0;
-	}
-}
-
-.edit-navigation-editor__block-editor-toolbar {
-	height: 46px;
-	margin-bottom: 12px;
-	border: 1px solid #e2e4e7;
-
-	// Borders around toolbar segments.
-	.components-toolbar-group,
-	.components-toolbar {
-		background: none;
-		// IE11 has thick paddings without this.
-		line-height: 0;
-
-		// These margins make the buttons themselves overlap the chrome of the toolbar.
-		// This helps make them square, and maximize the hit area.
-		margin-top: -$border-width;
-		margin-bottom: -$border-width;
-
-		// The component is born with a border, but we only need some of them.
-		border: 0;
-
-		// Add a border after item groups to show as separator in the block toolbar.
-		border-right: $border-width solid $gray-200;
-	}
-
-
-	// When entering navigation mode, hide the toolbar, but do so in a way where the
-	// outer container retains its height to avoid the blocks moving upwards.
-	&.is-hidden {
-		border-color: transparent;
-
-		.block-editor-block-toolbar {
-			display: none;
-		}
-	}
-}
-
-.block-editor-block-navigation-leaf {
-	> :first-child {
-		padding-left: 0;
-	}
-	> :first-child button {
-		padding-left: 0;
-	}
-
-	&.is-selected .block-editor-block-icon svg,
-	&.is-selected:focus .block-editor-block-icon svg {
-		color: $dark-gray-600;
-		background: transparent;
-		box-shadow: none;
-	}
-}
-
-.edit-navigation-editor__navigation-structure-panel {
-	// IE11 requires the column to be explicitly declared.
-	grid-column: 1;
-
-	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
-	-ms-grid-row-align: start;
-
-	.components-card__header {
-		font-weight: bold;
-		border-bottom: 0;
-		padding-top: $grid-unit-30 !important;
-		padding-bottom: $grid-unit-30 !important;
-	}
-}
-
-.edit-navigation-editor__navigation-structure-header {
-	font-weight: bold;
-}
-
-.edit-navigation-editor__block-editor-area {
-	@include break-medium {
-		// IE11 requires the column to be explicitly declared.
-		// Only shift this into the second column on desktop.
-		grid-column: 2;
-	}
-
-	.components-card__footer,
-	.components-card__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.edit-navigation-editor__block-editor-area-header-text {
-		flex-grow: 1;
-		font-weight: bold;
-	}
-}
-
-.components-panel__header-actions {
-	margin-bottom: $grid-unit-60;
-	width: 100%;
-	text-align: right;
-}
-
-.components-panel__footer-actions {
-	margin-top: $grid-unit-60;
-	padding-top: $grid-unit-20;
-	width: 100%;
-	text-align: left;
-	border-top: 1px solid $gray-200;
-}
-
-.edit-navigation-editor__block-inspector {
-	.components-button {
-		margin-left: $grid-unit-20;
-
-		&[aria-expanded="true"] {
-			color: $white;
-			background-color: $gray-900;
-		}
-	}
-}
diff --git a/packages/edit-navigation/src/components/toolbar/add-menu-form.js b/packages/edit-navigation/src/components/toolbar/add-menu-form.js
new file mode 100644
index 0000000000000..549ea584801a5
--- /dev/null
+++ b/packages/edit-navigation/src/components/toolbar/add-menu-form.js
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { some } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { Icon, TextControl, Button } from '@wordpress/components';
+import { navigation } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+const menuNameMatches = ( menuName ) => ( menu ) =>
+	menu.name.toLowerCase() === menuName.toLowerCase();
+
+export default function AddMenuForm( { menus, onCancel, onCreate } ) {
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const { createErrorNotice, createInfoNotice } = useDispatch(
+		'core/notices'
+	);
+
+	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+
+	const { saveMenu } = useDispatch( 'core' );
+
+	const createMenu = useCallback(
+		async ( event ) => {
+			event.preventDefault();
+
+			if ( ! menuName.length ) {
+				return;
+			}
+
+			if ( some( menus, menuNameMatches( menuName ) ) ) {
+				const message = sprintf(
+					// translators: %s: the name of a menu.
+					__(
+						'The menu name %s conflicts with another menu name. Please try another.'
+					),
+					menuName
+				);
+				createErrorNotice( message, { id: 'edit-navigation-error' } );
+				return;
+			}
+
+			setIsCreatingMenu( true );
+
+			const menu = await saveMenu( { name: menuName } );
+			if ( menu ) {
+				createInfoNotice( __( 'Menu created' ), {
+					type: 'snackbar',
+					isDismissible: true,
+				} );
+				onCreate( menu.id );
+			}
+
+			setIsCreatingMenu( false );
+		},
+		[ menuName, menus ]
+	);
+
+	return (
+		<form
+			className="edit-navigation-toolbar__add-menu-form"
+			onSubmit={ createMenu }
+		>
+			<Icon
+				className="edit-navigation-toolbar__add-menu-icon"
+				icon={ navigation }
+			/>
+
+			<TextControl
+				className="edit-navigation-toolbar__add-menu-name-field"
+				// Disable reason: The name field should receive focus when
+				// component mounts.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
+				label={ __( 'New menu name' ) }
+				placeholder={ __( 'New menu name' ) }
+				hideLabelFromVision
+				value={ menuName }
+				onChange={ setMenuName }
+			/>
+
+			<Button
+				className="edit-navigation-toolbar__add-menu-cancel-button"
+				isLink
+				onClick={ onCancel }
+			>
+				{ __( 'Cancel' ) }
+			</Button>
+
+			<Button
+				className="edit-navigation-toolbar__add-menu-create-button"
+				type="submit"
+				isPrimary
+				disabled={ ! menuName.length }
+				isBusy={ isCreatingMenu }
+			>
+				{ __( 'Create menu' ) }
+			</Button>
+		</form>
+	);
+}
diff --git a/packages/edit-navigation/src/components/toolbar/block-inspector-dropdown.js b/packages/edit-navigation/src/components/toolbar/block-inspector-dropdown.js
new file mode 100644
index 0000000000000..dece6bd9d8bbb
--- /dev/null
+++ b/packages/edit-navigation/src/components/toolbar/block-inspector-dropdown.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { Dropdown, Button } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { BlockInspector } from '@wordpress/block-editor';
+
+export default function BlockInspectorDropdown() {
+	return (
+		<Dropdown
+			position="bottom left"
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					icon={ cog }
+					isPressed={ isOpen }
+					label={ __( 'Block inspector' ) }
+					aria-expanded={ isOpen }
+					onClick={ onToggle }
+				/>
+			) }
+			renderContent={ () => (
+				<BlockInspector bubblesVirtually={ false } />
+			) }
+		/>
+	);
+}
diff --git a/packages/edit-navigation/src/components/toolbar/index.js b/packages/edit-navigation/src/components/toolbar/index.js
new file mode 100644
index 0000000000000..a8da4c64d2a50
--- /dev/null
+++ b/packages/edit-navigation/src/components/toolbar/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner, SelectControl, Popover } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { BlockToolbar } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import SaveButton from './save-button';
+import BlockInspectorDropdown from './block-inspector-dropdown';
+import AddMenuForm from './add-menu-form';
+
+export default function Toolbar( {
+	menus,
+	selectedMenuId,
+	isAddingMenu,
+	onSelectMenu,
+	onCancelAddingMenu,
+} ) {
+	const hasSelectedMenu = !! menus && !! selectedMenuId;
+
+	return (
+		<div className="edit-navigation-toolbar">
+			{ hasSelectedMenu || isAddingMenu ? (
+				<>
+					{ hasSelectedMenu && (
+						<SelectControl
+							className="edit-navigation-toolbar__menu-select"
+							label={ __( 'Currently editing' ) }
+							hideLabelFromVision
+							value={ selectedMenuId }
+							options={ menus.map( ( menu ) => ( {
+								label: menu.name,
+								value: menu.id,
+							} ) ) }
+							onChange={ onSelectMenu }
+						/>
+					) }
+
+					{ ! isAddingMenu && (
+						<>
+							<BlockToolbar __experimentalExpandedControl />
+							<Popover.Slot name="block-toolbar" />
+							<SaveButton menuId={ selectedMenuId } />
+							<BlockInspectorDropdown />
+						</>
+					) }
+
+					{ isAddingMenu && (
+						<AddMenuForm
+							menus={ menus }
+							onCancel={ onCancelAddingMenu }
+							onCreate={ onSelectMenu }
+						/>
+					) }
+				</>
+			) : (
+				<Spinner />
+			) }
+		</div>
+	);
+}
diff --git a/packages/edit-navigation/src/components/toolbar/save-button.js b/packages/edit-navigation/src/components/toolbar/save-button.js
new file mode 100644
index 0000000000000..3bb4257e6d8af
--- /dev/null
+++ b/packages/edit-navigation/src/components/toolbar/save-button.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function SaveButton( { menuId } ) {
+	const post = useSelect( ( select ) =>
+		select( 'core/edit-navigation' ).getNavigationPostForMenu( menuId )
+	);
+
+	const { saveNavigationPost } = useDispatch( 'core/edit-navigation' );
+
+	return (
+		<Button
+			className="edit-navigation-toolbar__save-button"
+			isPrimary
+			onClick={ () => {
+				saveNavigationPost( post );
+			} }
+		>
+			{ __( 'Save' ) }
+		</Button>
+	);
+}
diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss
new file mode 100644
index 0000000000000..dbdf4129d436d
--- /dev/null
+++ b/packages/edit-navigation/src/components/toolbar/style.scss
@@ -0,0 +1,64 @@
+.edit-navigation-toolbar {
+	align-items: center;
+	background: $white;
+	border-radius: 3px;
+	border: $border-width solid $gray-200;
+	display: flex;
+	height: $grid-unit-60;
+	margin-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+
+	.components-base-control__field {
+		margin: 0;
+	}
+
+	.block-editor-block-toolbar {
+		border-left: 1px solid $gray-200;
+		margin-left: $grid-unit-20;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 0 auto;
+	}
+}
+
+.edit-navigation-toolbar__menu-select {
+	@include break-medium() {
+		width: 299px;
+	}
+}
+
+.edit-navigation-toolbar__save-button {
+	margin: 0 $grid-unit-10 0 auto;
+}
+
+.edit-navigation-toolbar__add-menu-form {
+	align-items: center;
+	border-left: 1px solid $gray-200;
+	display: flex;
+	flex-grow: 1;
+	height: 100%;
+	margin-left: $grid-unit-20;
+}
+
+.edit-navigation-toolbar__add-menu-icon {
+	margin-left: $grid-unit-10;
+}
+
+.edit-navigation-toolbar__add-menu-name-field {
+	align-items: center;
+	border-left: 1px solid $gray-200;
+	display: flex;
+	height: 100%;
+	margin-left: $grid-unit-10;
+	padding-left: $grid-unit-10;
+}
+
+.components-button.edit-navigation-toolbar__add-menu-cancel-button {
+	margin-left: auto;
+}
+
+.components-button.edit-navigation-toolbar__add-menu-create-button {
+	margin-left: $grid-unit-20;
+}
diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss
index 9e179196deadf..da4b488480c7d 100644
--- a/packages/edit-navigation/src/style.scss
+++ b/packages/edit-navigation/src/style.scss
@@ -4,9 +4,10 @@
 	box-sizing: border-box;
 }
 
+@import "./components/editor/style.scss";
+@import "./components/error-boundary/style.scss";
+@import "./components/header/style.scss";
+@import "./components/inspector-additions/style.scss";
 @import "./components/layout/style.scss";
-@import "./components/navigation-editor/style.scss";
-@import "./components/menus-editor/style.scss";
-@import "./components/delete-menu-button/style.scss";
 @import "./components/notices/style.scss";
-@import "./components/error-boundary/style.scss";
+@import "./components/toolbar/style.scss";

From 7ba845247b65aa436ba89dcdcd1621979fe87622 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 10:24:43 +1000
Subject: [PATCH 02/34] Navigation: Typo: @wordpress/i18n -> @wordpress/element

---
 .../src/components/layout/use-menu-notifications.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/layout/use-menu-notifications.js b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
index b011b6fa19e3e..1b76ee82b7263 100644
--- a/packages/edit-navigation/src/components/layout/use-menu-notifications.js
+++ b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
 
 export default function useMenuNotifications( menuId ) {
 	const { lastSaveError, lastDeleteError } = useSelect( ( select ) => ( {

From 7efa781219a54594942906b473e04ac92830cfc5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 10:34:56 +1000
Subject: [PATCH 03/34] Navigation: Inline call to setSelectedBlockId

Co-authored-by: Kai Hao <kevin830726@gmail.com>
---
 packages/edit-navigation/src/components/editor/list-view.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/list-view.js b/packages/edit-navigation/src/components/editor/list-view.js
index a220785236ab8..993b132854a80 100644
--- a/packages/edit-navigation/src/components/editor/list-view.js
+++ b/packages/edit-navigation/src/components/editor/list-view.js
@@ -18,9 +18,7 @@ export default function ListView( { isPending, blocks } ) {
 				<__experimentalBlockNavigationTree
 					blocks={ blocks }
 					selectedBlockClientId={ selectedBlockId }
-					selectBlock={ ( id ) => {
-						setSelectedBlockId( id );
-					} }
+					selectBlock={ setSelectedBlockId }
 					__experimentalFeatures
 					showNestedBlocks
 					showAppender

From 7f59c24280262064c9c501fc78f52e9aaf33e4b8 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 10:35:36 +1000
Subject: [PATCH 04/34] Navigation: Add selectBlock as a useEffect dependency

Co-authored-by: Kai Hao <kevin830726@gmail.com>
---
 packages/edit-navigation/src/components/editor/visual-view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/editor/visual-view.js b/packages/edit-navigation/src/components/editor/visual-view.js
index 683d19711c634..910b110e88d2f 100644
--- a/packages/edit-navigation/src/components/editor/visual-view.js
+++ b/packages/edit-navigation/src/components/editor/visual-view.js
@@ -18,7 +18,7 @@ export default function VisualView( { isPending } ) {
 		if ( rootClientId ) {
 			selectBlock( rootClientId );
 		}
-	}, [ rootClientId ] );
+	}, [ rootClientId, selectBlock ] );
 
 	return (
 		<div className="edit-navigation-editor__visual-view">

From 96db71a918d1d8b7195623004473d4c7a053d3e1 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 10:38:50 +1000
Subject: [PATCH 05/34] Navigation: Don't call setMenuLocationsByName when
 component is not mounted

---
 .../src/components/header/use-menu-locations.js        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/header/use-menu-locations.js b/packages/edit-navigation/src/components/header/use-menu-locations.js
index 89895035d5cc2..c952f1133ce86 100644
--- a/packages/edit-navigation/src/components/header/use-menu-locations.js
+++ b/packages/edit-navigation/src/components/header/use-menu-locations.js
@@ -9,14 +9,22 @@ export default function useMenuLocations() {
 	const [ menuLocationsByName, setMenuLocationsByName ] = useState( null );
 
 	useEffect( () => {
+		let isMounted = true;
+
 		const fetchMenuLocationsByName = async () => {
 			const newMenuLocationsByName = await apiFetch( {
 				method: 'GET',
 				path: '/__experimental/menu-locations',
 			} );
-			setMenuLocationsByName( newMenuLocationsByName );
+
+			if ( isMounted ) {
+				setMenuLocationsByName( newMenuLocationsByName );
+			}
 		};
+
 		fetchMenuLocationsByName();
+
+		return () => ( isMounted = false );
 	}, [] );
 
 	const { saveMenu } = useDispatch( 'core' );

From 3f1eaf677d5b0dcc15bda230f69dcb63fe2e3ad4 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 12:10:57 +1000
Subject: [PATCH 06/34] Navigation: Remove unnecessary useCallback()

---
 .../src/components/toolbar/add-menu-form.js   | 69 +++++++++----------
 1 file changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/edit-navigation/src/components/toolbar/add-menu-form.js b/packages/edit-navigation/src/components/toolbar/add-menu-form.js
index 549ea584801a5..94326bb27ec7f 100644
--- a/packages/edit-navigation/src/components/toolbar/add-menu-form.js
+++ b/packages/edit-navigation/src/components/toolbar/add-menu-form.js
@@ -6,7 +6,7 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { Icon, TextControl, Button } from '@wordpress/components';
 import { navigation } from '@wordpress/icons';
@@ -26,41 +26,38 @@ export default function AddMenuForm( { menus, onCancel, onCreate } ) {
 
 	const { saveMenu } = useDispatch( 'core' );
 
-	const createMenu = useCallback(
-		async ( event ) => {
-			event.preventDefault();
-
-			if ( ! menuName.length ) {
-				return;
-			}
-
-			if ( some( menus, menuNameMatches( menuName ) ) ) {
-				const message = sprintf(
-					// translators: %s: the name of a menu.
-					__(
-						'The menu name %s conflicts with another menu name. Please try another.'
-					),
-					menuName
-				);
-				createErrorNotice( message, { id: 'edit-navigation-error' } );
-				return;
-			}
-
-			setIsCreatingMenu( true );
-
-			const menu = await saveMenu( { name: menuName } );
-			if ( menu ) {
-				createInfoNotice( __( 'Menu created' ), {
-					type: 'snackbar',
-					isDismissible: true,
-				} );
-				onCreate( menu.id );
-			}
-
-			setIsCreatingMenu( false );
-		},
-		[ menuName, menus ]
-	);
+	const createMenu = async ( event ) => {
+		event.preventDefault();
+
+		if ( ! menuName.length ) {
+			return;
+		}
+
+		if ( some( menus, menuNameMatches( menuName ) ) ) {
+			const message = sprintf(
+				// translators: %s: the name of a menu.
+				__(
+					'The menu name %s conflicts with another menu name. Please try another.'
+				),
+				menuName
+			);
+			createErrorNotice( message, { id: 'edit-navigation-error' } );
+			return;
+		}
+
+		setIsCreatingMenu( true );
+
+		const menu = await saveMenu( { name: menuName } );
+		if ( menu ) {
+			createInfoNotice( __( 'Menu created' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+			onCreate( menu.id );
+		}
+
+		setIsCreatingMenu( false );
+	};
 
 	return (
 		<form

From 22750a80a82ad5d8a2f47003cca072de9fe1f866 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 13:01:55 +1000
Subject: [PATCH 07/34] Navigation: Show Toolbar when there are no menus

---
 .../src/components/toolbar/index.js           | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/packages/edit-navigation/src/components/toolbar/index.js b/packages/edit-navigation/src/components/toolbar/index.js
index a8da4c64d2a50..8b4001efc0445 100644
--- a/packages/edit-navigation/src/components/toolbar/index.js
+++ b/packages/edit-navigation/src/components/toolbar/index.js
@@ -19,27 +19,41 @@ export default function Toolbar( {
 	onSelectMenu,
 	onCancelAddingMenu,
 } ) {
-	const hasSelectedMenu = !! menus && !! selectedMenuId;
-
 	return (
 		<div className="edit-navigation-toolbar">
-			{ hasSelectedMenu || isAddingMenu ? (
+			{ menus ? (
 				<>
-					{ hasSelectedMenu && (
-						<SelectControl
-							className="edit-navigation-toolbar__menu-select"
-							label={ __( 'Currently editing' ) }
-							hideLabelFromVision
-							value={ selectedMenuId }
-							options={ menus.map( ( menu ) => ( {
-								label: menu.name,
-								value: menu.id,
-							} ) ) }
-							onChange={ onSelectMenu }
-						/>
-					) }
+					<SelectControl
+						className="edit-navigation-toolbar__menu-select"
+						label={ __( 'Currently editing' ) }
+						hideLabelFromVision
+						disabled={ ! menus.length }
+						value={ selectedMenuId ?? 0 }
+						options={
+							menus.length
+								? menus.map( ( menu ) => ( {
+										value: menu.id,
+										label: menu.name,
+								  } ) )
+								: [
+										{
+											value: 0,
+											label: __(
+												'— Select navigation —'
+											),
+										},
+								  ]
+						}
+						onChange={ onSelectMenu }
+					/>
 
-					{ ! isAddingMenu && (
+					{ isAddingMenu ? (
+						<AddMenuForm
+							menus={ menus }
+							onCancel={ onCancelAddingMenu }
+							onCreate={ onSelectMenu }
+						/>
+					) : (
 						<>
 							<BlockToolbar __experimentalExpandedControl />
 							<Popover.Slot name="block-toolbar" />
@@ -47,14 +61,6 @@ export default function Toolbar( {
 							<BlockInspectorDropdown />
 						</>
 					) }
-
-					{ isAddingMenu && (
-						<AddMenuForm
-							menus={ menus }
-							onCancel={ onCancelAddingMenu }
-							onCreate={ onSelectMenu }
-						/>
-					) }
 				</>
 			) : (
 				<Spinner />

From 18341e8427a10ff5dd6a8f6fde302289ac7c5f86 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 13:23:49 +1000
Subject: [PATCH 08/34] Return stable references from useMenuLocations()

---
 .../components/header/use-menu-locations.js   | 92 ++++++++++---------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/use-menu-locations.js b/packages/edit-navigation/src/components/header/use-menu-locations.js
index c952f1133ce86..bfd1022590406 100644
--- a/packages/edit-navigation/src/components/header/use-menu-locations.js
+++ b/packages/edit-navigation/src/components/header/use-menu-locations.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 
@@ -29,48 +29,54 @@ export default function useMenuLocations() {
 
 	const { saveMenu } = useDispatch( 'core' );
 
-	const assignMenuToLocation = async ( locationName, newMenuId ) => {
-		const oldMenuId = menuLocationsByName[ locationName ].menu;
+	const assignMenuToLocation = useCallback(
+		async ( locationName, newMenuId ) => {
+			const oldMenuId = menuLocationsByName[ locationName ].menu;
 
-		const newMenuLocationsByName = {
-			...menuLocationsByName,
-			[ locationName ]: {
-				...menuLocationsByName[ locationName ],
-				menu: newMenuId,
-			},
-		};
+			const newMenuLocationsByName = {
+				...menuLocationsByName,
+				[ locationName ]: {
+					...menuLocationsByName[ locationName ],
+					menu: newMenuId,
+				},
+			};
+
+			setMenuLocationsByName( newMenuLocationsByName );
+
+			const promises = [];
+
+			if ( oldMenuId ) {
+				promises.push(
+					saveMenu( {
+						id: oldMenuId,
+						locations: Object.values( newMenuLocationsByName )
+							.filter( ( { menu } ) => menu === oldMenuId )
+							.map( ( { name } ) => name ),
+					} )
+				);
+			}
+
+			if ( newMenuId ) {
+				promises.push(
+					saveMenu( {
+						id: newMenuId,
+						locations: Object.values( newMenuLocationsByName )
+							.filter( ( { menu } ) => menu === newMenuId )
+							.map( ( { name } ) => name ),
+					} )
+				);
+			}
+
+			await Promise.all( promises );
+		},
+		[ menuLocationsByName ]
+	);
+
+	const menuLocations = useMemo(
+		() =>
+			menuLocationsByName ? Object.values( menuLocationsByName ) : null,
+		[ menuLocationsByName ]
+	);
 
-		setMenuLocationsByName( newMenuLocationsByName );
-
-		const promises = [];
-
-		if ( oldMenuId ) {
-			promises.push(
-				saveMenu( {
-					id: oldMenuId,
-					locations: Object.values( newMenuLocationsByName )
-						.filter( ( { menu } ) => menu === oldMenuId )
-						.map( ( { name } ) => name ),
-				} )
-			);
-		}
-
-		if ( newMenuId ) {
-			promises.push(
-				saveMenu( {
-					id: newMenuId,
-					locations: Object.values( newMenuLocationsByName )
-						.filter( ( { menu } ) => menu === newMenuId )
-						.map( ( { name } ) => name ),
-				} )
-			);
-		}
-
-		await Promise.all( promises );
-	};
-
-	return [
-		menuLocationsByName ? Object.values( menuLocationsByName ) : null,
-		assignMenuToLocation,
-	];
+	return [ menuLocations, assignMenuToLocation ];
 }

From 5888c7aa3d0875f5227cf7b706f7bab8bd4186bf Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 15:31:42 +1000
Subject: [PATCH 09/34] Navigation: Fix createStubPost() setting blocks = [
 undefined ]

---
 packages/edit-navigation/src/store/resolvers.js      | 4 ++--
 packages/edit-navigation/src/store/test/resolvers.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
index 99a0f76ae4b05..af3b59a02b8ac 100644
--- a/packages/edit-navigation/src/store/resolvers.js
+++ b/packages/edit-navigation/src/store/resolvers.js
@@ -51,14 +51,14 @@ export function* getNavigationPostForMenu( menuId ) {
 	yield dispatch( 'core', 'finishResolution', 'getEntityRecord', args );
 }
 
-const createStubPost = ( menuId, navigationBlock ) => {
+const createStubPost = ( menuId, navigationBlock = null ) => {
 	const id = buildNavigationPostId( menuId );
 	return {
 		id,
 		slug: id,
 		status: 'draft',
 		type: 'page',
-		blocks: [ navigationBlock ],
+		blocks: navigationBlock ? [ navigationBlock ] : [],
 		meta: {
 			menuId,
 		},
diff --git a/packages/edit-navigation/src/store/test/resolvers.js b/packages/edit-navigation/src/store/test/resolvers.js
index a46d624bba727..9d3b8485417b2 100644
--- a/packages/edit-navigation/src/store/test/resolvers.js
+++ b/packages/edit-navigation/src/store/test/resolvers.js
@@ -35,7 +35,7 @@ describe( 'getNavigationPostForMenu', () => {
 			slug: id,
 			status: 'draft',
 			type: 'page',
-			blocks: [ undefined ],
+			blocks: [],
 			meta: {
 				menuId,
 			},

From 79026cf6a68f8e90cb2a7167d64d78cadef2d594 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 16:10:20 +1000
Subject: [PATCH 10/34] Navigation: Use NavigableToolbar

---
 .../edit-navigation/src/components/toolbar/index.js  | 12 ++++++++++--
 .../src/components/toolbar/style.scss                |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/toolbar/index.js b/packages/edit-navigation/src/components/toolbar/index.js
index 8b4001efc0445..f3b4296f96c28 100644
--- a/packages/edit-navigation/src/components/toolbar/index.js
+++ b/packages/edit-navigation/src/components/toolbar/index.js
@@ -3,7 +3,7 @@
  */
 import { Spinner, SelectControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { BlockToolbar } from '@wordpress/block-editor';
+import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -55,7 +55,15 @@ export default function Toolbar( {
 						/>
 					) : (
 						<>
-							<BlockToolbar __experimentalExpandedControl />
+							<NavigableToolbar
+								className="edit-navigation-toolbar__block-tools"
+								aria-label={ __( 'Block tools' ) }
+							>
+								<BlockToolbar
+									hideDragHandle
+									__experimentalExpandedControl
+								/>
+							</NavigableToolbar>
 							<Popover.Slot name="block-toolbar" />
 							<SaveButton menuId={ selectedMenuId } />
 							<BlockInspectorDropdown />
diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss
index dbdf4129d436d..bd5f8ceb2df7d 100644
--- a/packages/edit-navigation/src/components/toolbar/style.scss
+++ b/packages/edit-navigation/src/components/toolbar/style.scss
@@ -29,6 +29,10 @@
 	}
 }
 
+.edit-navigation-toolbar__block-tools {
+	border: none;
+}
+
 .edit-navigation-toolbar__save-button {
 	margin: 0 $grid-unit-10 0 auto;
 }

From 86440fab14cc0296220882db92a9e9054a5ee43f Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 10 Sep 2020 17:04:11 +1000
Subject: [PATCH 11/34] Navigation: Split toolbar into two lines on mobile

---
 .../src/components/toolbar/style.scss         | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss
index bd5f8ceb2df7d..5485bffbf5f70 100644
--- a/packages/edit-navigation/src/components/toolbar/style.scss
+++ b/packages/edit-navigation/src/components/toolbar/style.scss
@@ -4,22 +4,34 @@
 	border-radius: 3px;
 	border: $border-width solid $gray-200;
 	display: flex;
-	height: $grid-unit-60;
+	height: $grid-unit-60 * 2;
 	margin-top: $grid-unit-10;
+	padding-bottom: $grid-unit-60;
 	padding-right: $grid-unit-10;
+	position: relative;
+
+	@include break-medium() {
+		height: $grid-unit-60;
+		padding-bottom: 0;
+	}
 
 	.components-base-control__field {
 		margin: 0;
 	}
 
 	.block-editor-block-toolbar {
-		border-left: 1px solid $gray-200;
-		margin-left: $grid-unit-20;
+		@include break-medium() {
+			border-left: 1px solid $gray-200;
+			margin-left: $grid-unit-20;
+		}
 	}
 
 	.components-spinner {
-		display: block;
-		margin: 0 auto;
+		left: 50%;
+		margin: 0;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
 	}
 }
 
@@ -30,7 +42,19 @@
 }
 
 .edit-navigation-toolbar__block-tools {
-	border: none;
+	border-bottom: none;
+	border-left: none;
+	border-right: none;
+	border-top: 1px solid $gray-200;
+	position: absolute;
+	top: $grid-unit-60;
+	width: 100%;
+
+	@include break-medium() {
+		border-top: none;
+		position: static;
+		width: auto;
+	}
 }
 
 .edit-navigation-toolbar__save-button {

From cd405b73f4bf77535c967440d69d5e33623f3cf2 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 10 Sep 2020 16:36:49 -0400
Subject: [PATCH 12/34] Changing the order of the list view and visual view so
 the list view appears after.

---
 packages/edit-navigation/src/components/editor/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js
index e28e65622226e..23c7f1dfcd34b 100644
--- a/packages/edit-navigation/src/components/editor/index.js
+++ b/packages/edit-navigation/src/components/editor/index.js
@@ -7,8 +7,8 @@ import VisualView from './visual-view';
 export default function Editor( { isPending, blocks } ) {
 	return (
 		<div className="edit-navigation-editor">
-			<ListView isPending={ isPending } blocks={ blocks } />
 			<VisualView isPending={ isPending } />
+			<ListView isPending={ isPending } blocks={ blocks } />
 		</div>
 	);
 }

From a758ad24ca051579ee4bf332f0c7c2aa211c2999 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 10 Sep 2020 16:37:13 -0400
Subject: [PATCH 13/34] Adding a title to the top of the List View.

---
 packages/edit-navigation/src/components/editor/list-view.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-navigation/src/components/editor/list-view.js b/packages/edit-navigation/src/components/editor/list-view.js
index 993b132854a80..f24778372c7a5 100644
--- a/packages/edit-navigation/src/components/editor/list-view.js
+++ b/packages/edit-navigation/src/components/editor/list-view.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __experimentalBlockNavigationTree } from '@wordpress/block-editor';
@@ -12,6 +13,7 @@ export default function ListView( { isPending, blocks } ) {
 
 	return (
 		<div className="edit-navigation-editor__list-view">
+			<h3>{ __( 'List view' ) }</h3>
 			{ isPending ? (
 				<Spinner />
 			) : (

From 90c2b58427f72eb2b5b0b6cc0b940dbeca5e85c6 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 10 Sep 2020 16:38:15 -0400
Subject: [PATCH 14/34] Moving the add-menu-form from the toolbar into the
 header.

---
 .../{toolbar => header}/add-menu-form.js         | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)
 rename packages/edit-navigation/src/components/{toolbar => header}/add-menu-form.js (81%)

diff --git a/packages/edit-navigation/src/components/toolbar/add-menu-form.js b/packages/edit-navigation/src/components/header/add-menu-form.js
similarity index 81%
rename from packages/edit-navigation/src/components/toolbar/add-menu-form.js
rename to packages/edit-navigation/src/components/header/add-menu-form.js
index 94326bb27ec7f..c3089838ead82 100644
--- a/packages/edit-navigation/src/components/toolbar/add-menu-form.js
+++ b/packages/edit-navigation/src/components/header/add-menu-form.js
@@ -8,8 +8,7 @@ import { some } from 'lodash';
  */
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { Icon, TextControl, Button } from '@wordpress/components';
-import { navigation } from '@wordpress/icons';
+import { TextControl, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 const menuNameMatches = ( menuName ) => ( menu ) =>
@@ -61,16 +60,11 @@ export default function AddMenuForm( { menus, onCancel, onCreate } ) {
 
 	return (
 		<form
-			className="edit-navigation-toolbar__add-menu-form"
+			className="edit-navigation-header__add-menu-form"
 			onSubmit={ createMenu }
 		>
-			<Icon
-				className="edit-navigation-toolbar__add-menu-icon"
-				icon={ navigation }
-			/>
-
 			<TextControl
-				className="edit-navigation-toolbar__add-menu-name-field"
+				className="edit-navigation-header__add-menu-name-field"
 				// Disable reason: The name field should receive focus when
 				// component mounts.
 				// eslint-disable-next-line jsx-a11y/no-autofocus
@@ -83,7 +77,7 @@ export default function AddMenuForm( { menus, onCancel, onCreate } ) {
 			/>
 
 			<Button
-				className="edit-navigation-toolbar__add-menu-cancel-button"
+				className="edit-navigation-header__add-menu-cancel-button"
 				isLink
 				onClick={ onCancel }
 			>
@@ -91,7 +85,7 @@ export default function AddMenuForm( { menus, onCancel, onCreate } ) {
 			</Button>
 
 			<Button
-				className="edit-navigation-toolbar__add-menu-create-button"
+				className="edit-navigation-header__add-menu-create-button"
 				type="submit"
 				isPrimary
 				disabled={ ! menuName.length }

From 143df0b51799bddbcaaf330d059d0a5854085cb9 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 10 Sep 2020 16:39:02 -0400
Subject: [PATCH 15/34] Moving the props for the add form from the toolbar to
 the header.

---
 .../edit-navigation/src/components/layout/index.js   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index 51d88f37067e8..b629ef5bc3756 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -55,7 +55,14 @@ export default function Layout( { blockEditorSettings } ) {
 						<Notices />
 
 						<div className="edit-navigation-layout">
-							<Header onBeginAddingMenu={ beginAddingMenu } />
+							<Header
+								onBeginAddingMenu={ beginAddingMenu }
+								menus={ menus }
+								selectedMenuId={ selectedMenuId }
+								isAddingMenu={ isAddingMenu }
+								onSelectMenu={ selectMenu }
+								onCancelAddingMenu={ cancelAddingMenu }
+							/>
 
 							<BlockEditorProvider
 								value={ blocks }
@@ -70,9 +77,6 @@ export default function Layout( { blockEditorSettings } ) {
 								<Toolbar
 									menus={ menus }
 									selectedMenuId={ selectedMenuId }
-									isAddingMenu={ isAddingMenu }
-									onSelectMenu={ selectMenu }
-									onCancelAddingMenu={ cancelAddingMenu }
 								/>
 								<Editor
 									isPending={ ! navigationPost }

From f5cdbbb90702fc88495133bb0b05330239f3a8b9 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 10 Sep 2020 16:46:45 -0400
Subject: [PATCH 16/34] A general refactor of the CSS, moving the add menu
 around, and generally cleaning up the UI.

---
 .../src/components/editor/style.scss          |  22 ++--
 .../src/components/header/index.js            | 103 ++++++++++++++----
 .../src/components/header/style.scss          |  64 ++++++++---
 .../src/components/layout/style.scss          |  10 +-
 .../src/components/notices/style.scss         |   1 +
 .../src/components/toolbar/index.js           |  67 +++---------
 .../src/components/toolbar/style.scss         |  52 ---------
 7 files changed, 159 insertions(+), 160 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 3dccf9503e5d7..03bfeeb668cc1 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -1,5 +1,5 @@
 .edit-navigation-editor {
-	margin-top: $grid-unit-20;
+	margin: $grid-unit-20;
 
 	@include break-medium() {
 		align-items: flex-start;
@@ -7,20 +7,20 @@
 	}
 }
 
-.edit-navigation-editor__list-view,
-.edit-navigation-editor__visual-view {
-	background: $white;
-	border-radius: 3px;
-	border: $border-width solid $gray-200;
-}
-
 .edit-navigation-editor__list-view {
-	padding: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	margin-left: $grid-unit-20;
+	border-left: 1px solid $gray-200;
 
 	@include break-medium() {
 		width: 300px;
 	}
 
+	h3 {
+		font-size: 15px;
+		margin: 0;
+	}
+
 	.components-spinner {
 		display: block;
 		margin: 100px auto;
@@ -28,12 +28,8 @@
 }
 
 .edit-navigation-editor__visual-view {
-	margin-top: $grid-unit-20;
-
 	@include break-medium() {
 		flex-grow: 1;
-		margin-left: $grid-unit-20;
-		margin-top: 0;
 	}
 
 	.components-spinner {
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index aef834d47b05d..a91defb4f5f43 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -2,40 +2,97 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Dropdown } from '@wordpress/components';
+import {
+	Spinner,
+	Button,
+	SelectControl,
+	Dropdown,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ManageLocations from './manage-locations';
+import AddMenuForm from './add-menu-form';
 
-export default function Header( { onBeginAddingMenu } ) {
+export default function Header( {
+	menus,
+	selectedMenuId,
+	onSelectMenu,
+	onCancelAddingMenu,
+} ) {
 	return (
 		<div className="edit-navigation-header">
 			<h1>{ __( 'Navigation' ) }</h1>
 
-			<Button
-				className="edit-navigation-header__add-new-button"
-				isSecondary
-				onClick={ onBeginAddingMenu }
-			>
-				{ __( 'Add new' ) }
-			</Button>
-
-			<Dropdown
-				contentClassName="edit-navigation-header__manage-locations"
-				position="bottom center"
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
-						isLink
-						aria-expanded={ isOpen }
-						onClick={ onToggle }
-					>
-						{ __( 'Manage locations' ) }
-					</Button>
+			<div className="edit-navigation-header__actions">
+				{ menus ? (
+					<div className="edit-navigation-header__current-menu">
+						<p>{ __( 'Currently editing' ) }</p>
+						<SelectControl
+							className="edit-navigation-toolbar__menu-select"
+							label={ __( 'Currently editing' ) }
+							hideLabelFromVision
+							disabled={ ! menus.length }
+							value={ selectedMenuId ?? 0 }
+							options={
+								menus.length
+									? menus.map( ( menu ) => ( {
+											value: menu.id,
+											label: menu.name + ' (Primary)', //Just a reminder to show the menu location, if set.
+									  } ) )
+									: [
+											{
+												value: 0,
+												label: __(
+													'— Select navigation —'
+												),
+											},
+									  ]
+							}
+							onChange={ onSelectMenu }
+						/>
+					</div>
+				) : (
+					<Spinner />
 				) }
-				renderContent={ () => <ManageLocations /> }
-			/>
+
+				<Dropdown
+					contentClassName="edit-navigation-header__add-new-form"
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isTertiary
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Add new' ) }
+						</Button>
+					) }
+					renderContent={ () => (
+						<AddMenuForm
+							menus={ menus }
+							onCancel={ onCancelAddingMenu }
+							onCreate={ onSelectMenu }
+						/>
+					) }
+				/>
+
+				<Dropdown
+					contentClassName="edit-navigation-header__manage-locations"
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							isTertiary
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Manage locations' ) }
+						</Button>
+					) }
+					renderContent={ () => <ManageLocations /> }
+				/>
+			</div>
 		</div>
 	);
 }
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 89503f8ef3c6e..28ee278c9aee0 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -1,25 +1,61 @@
 .edit-navigation-header {
+	padding: $grid-unit-20;
+	background: #f1f1f1; // Need to find a variable for this
+
+	h1 {
+		font-size: 23px;
+		font-weight: 400;
+		line-height: 1.3;
+		margin: 0 0 $grid-unit-10;
+	}
+}
+
+// Lining up all the actions in a nice row.
+.edit-navigation-header__actions {
 	align-items: center;
 	display: flex;
-	margin-top: $grid-unit-10;
-}
 
-.edit-navigation-header__add-new-button {
-	margin: 0 $grid-unit-20;
+	// Spacing out the actions a little.
+	.edit-navigation-header__current-menu,
+	.components-dropdown {
+		margin-right: $grid-unit-20;
+	}
 }
 
-.edit-navigation-header__manage-locations {
-	text-align: center;
+// The select menu for choosing which menu to edit.
+.edit-navigation-header__current-menu {
+	align-items: center;
+	display: flex;
 
-	.components-popover__content > div {
-		padding: $grid-unit-20;
+	// Overriding some aggressive defaults
+	.components-base-control .components-base-control__field {
+		margin: 0;
 	}
+}
 
-	.components-base-control {
-		margin-bottom: $grid-unit-20;
+.edit-navigation-header__save-button {
+	margin: 0 $grid-unit-15 0 auto;
+	padding-right: 24px;
+	padding-left: 24px;
+}
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+.edit-navigation-header__add-menu-form {
+	align-items: center;
+	display: flex;
+	flex-grow: 1;
+	height: 100%;
+}
+
+.edit-navigation-header__add-menu-name-field {
+	align-items: center;
+	display: flex;
+	height: 100%;
+}
+
+.components-button.edit-navigation-header__add-menu-cancel-button {
+	margin-left: auto;
+}
+
+.components-button.edit-navigation-header__add-menu-create-button {
+	margin-left: $grid-unit-20;
 }
diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
index 1a6bdbf01ea17..288b3e9764705 100644
--- a/packages/edit-navigation/src/components/layout/style.scss
+++ b/packages/edit-navigation/src/components/layout/style.scss
@@ -1,7 +1,9 @@
-.edit-navigation-layout {
-	margin-right: 10px;
+// Overriding the wp-admin background and padding
+// to give the navigation editor more room to breathe.
+.gutenberg_page_gutenberg-navigation {
+	background: $white;
 
-	@include break-medium {
-		margin-right: 20px;
+	#wpcontent {
+		padding-left: 0;
 	}
 }
diff --git a/packages/edit-navigation/src/components/notices/style.scss b/packages/edit-navigation/src/components/notices/style.scss
index a5f3848cd8b10..c952988f1a09a 100644
--- a/packages/edit-navigation/src/components/notices/style.scss
+++ b/packages/edit-navigation/src/components/notices/style.scss
@@ -1,6 +1,7 @@
 .edit-navigation-notices__snackbar-list {
 	position: fixed;
 	bottom: 20px;
+	margin-left: 20px;
 }
 
 .edit-navigation-notices__notice-list {
diff --git a/packages/edit-navigation/src/components/toolbar/index.js b/packages/edit-navigation/src/components/toolbar/index.js
index f3b4296f96c28..2cacf31a9b07b 100644
--- a/packages/edit-navigation/src/components/toolbar/index.js
+++ b/packages/edit-navigation/src/components/toolbar/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Spinner, SelectControl, Popover } from '@wordpress/components';
+import { Spinner, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';
 
@@ -10,65 +10,24 @@ import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';
  */
 import SaveButton from './save-button';
 import BlockInspectorDropdown from './block-inspector-dropdown';
-import AddMenuForm from './add-menu-form';
 
-export default function Toolbar( {
-	menus,
-	selectedMenuId,
-	isAddingMenu,
-	onSelectMenu,
-	onCancelAddingMenu,
-} ) {
+export default function Toolbar( { menus, selectedMenuId } ) {
 	return (
 		<div className="edit-navigation-toolbar">
 			{ menus ? (
 				<>
-					<SelectControl
-						className="edit-navigation-toolbar__menu-select"
-						label={ __( 'Currently editing' ) }
-						hideLabelFromVision
-						disabled={ ! menus.length }
-						value={ selectedMenuId ?? 0 }
-						options={
-							menus.length
-								? menus.map( ( menu ) => ( {
-										value: menu.id,
-										label: menu.name,
-								  } ) )
-								: [
-										{
-											value: 0,
-											label: __(
-												'— Select navigation —'
-											),
-										},
-								  ]
-						}
-						onChange={ onSelectMenu }
-					/>
-
-					{ isAddingMenu ? (
-						<AddMenuForm
-							menus={ menus }
-							onCancel={ onCancelAddingMenu }
-							onCreate={ onSelectMenu }
+					<NavigableToolbar
+						className="edit-navigation-toolbar__block-tools"
+						aria-label={ __( 'Block tools' ) }
+					>
+						<BlockToolbar
+							hideDragHandle
+							__experimentalExpandedControl
 						/>
-					) : (
-						<>
-							<NavigableToolbar
-								className="edit-navigation-toolbar__block-tools"
-								aria-label={ __( 'Block tools' ) }
-							>
-								<BlockToolbar
-									hideDragHandle
-									__experimentalExpandedControl
-								/>
-							</NavigableToolbar>
-							<Popover.Slot name="block-toolbar" />
-							<SaveButton menuId={ selectedMenuId } />
-							<BlockInspectorDropdown />
-						</>
-					) }
+					</NavigableToolbar>
+					<Popover.Slot name="block-toolbar" />
+					<BlockInspectorDropdown />
+					<SaveButton menuId={ selectedMenuId } />
 				</>
 			) : (
 				<Spinner />
diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss
index 5485bffbf5f70..ef00d0d86ed7c 100644
--- a/packages/edit-navigation/src/components/toolbar/style.scss
+++ b/packages/edit-navigation/src/components/toolbar/style.scss
@@ -1,29 +1,13 @@
 .edit-navigation-toolbar {
 	align-items: center;
 	background: $white;
-	border-radius: 3px;
 	border: $border-width solid $gray-200;
 	display: flex;
 	height: $grid-unit-60 * 2;
-	margin-top: $grid-unit-10;
-	padding-bottom: $grid-unit-60;
-	padding-right: $grid-unit-10;
 	position: relative;
 
 	@include break-medium() {
 		height: $grid-unit-60;
-		padding-bottom: 0;
-	}
-
-	.components-base-control__field {
-		margin: 0;
-	}
-
-	.block-editor-block-toolbar {
-		@include break-medium() {
-			border-left: 1px solid $gray-200;
-			margin-left: $grid-unit-20;
-		}
 	}
 
 	.components-spinner {
@@ -35,12 +19,6 @@
 	}
 }
 
-.edit-navigation-toolbar__menu-select {
-	@include break-medium() {
-		width: 299px;
-	}
-}
-
 .edit-navigation-toolbar__block-tools {
 	border-bottom: none;
 	border-left: none;
@@ -60,33 +38,3 @@
 .edit-navigation-toolbar__save-button {
 	margin: 0 $grid-unit-10 0 auto;
 }
-
-.edit-navigation-toolbar__add-menu-form {
-	align-items: center;
-	border-left: 1px solid $gray-200;
-	display: flex;
-	flex-grow: 1;
-	height: 100%;
-	margin-left: $grid-unit-20;
-}
-
-.edit-navigation-toolbar__add-menu-icon {
-	margin-left: $grid-unit-10;
-}
-
-.edit-navigation-toolbar__add-menu-name-field {
-	align-items: center;
-	border-left: 1px solid $gray-200;
-	display: flex;
-	height: 100%;
-	margin-left: $grid-unit-10;
-	padding-left: $grid-unit-10;
-}
-
-.components-button.edit-navigation-toolbar__add-menu-cancel-button {
-	margin-left: auto;
-}
-
-.components-button.edit-navigation-toolbar__add-menu-create-button {
-	margin-left: $grid-unit-20;
-}

From c19c4498d0b85e0ac32af21de66e15dc572b7289 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 11:24:43 +1000
Subject: [PATCH 17/34] Navigation: Use <label> for dropdown instead of <p>

---
 packages/edit-navigation/src/components/header/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index a91defb4f5f43..5759aecfb4ec9 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -28,11 +28,9 @@ export default function Header( {
 			<div className="edit-navigation-header__actions">
 				{ menus ? (
 					<div className="edit-navigation-header__current-menu">
-						<p>{ __( 'Currently editing' ) }</p>
 						<SelectControl
 							className="edit-navigation-toolbar__menu-select"
 							label={ __( 'Currently editing' ) }
-							hideLabelFromVision
 							disabled={ ! menus.length }
 							value={ selectedMenuId ?? 0 }
 							options={

From 93f5efaad4f1e5ff5a0de6c6da0e160c8dd94fdb Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 11:31:03 +1000
Subject: [PATCH 18/34] Navigation: Remove Cancel buton from AddMenuForm

---
 .../src/components/header/add-menu-form.js             | 10 +---------
 .../edit-navigation/src/components/header/style.scss   |  4 ----
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/add-menu-form.js b/packages/edit-navigation/src/components/header/add-menu-form.js
index c3089838ead82..c5ca54b699a89 100644
--- a/packages/edit-navigation/src/components/header/add-menu-form.js
+++ b/packages/edit-navigation/src/components/header/add-menu-form.js
@@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
 const menuNameMatches = ( menuName ) => ( menu ) =>
 	menu.name.toLowerCase() === menuName.toLowerCase();
 
-export default function AddMenuForm( { menus, onCancel, onCreate } ) {
+export default function AddMenuForm( { menus, onCreate } ) {
 	const [ menuName, setMenuName ] = useState( '' );
 
 	const { createErrorNotice, createInfoNotice } = useDispatch(
@@ -76,14 +76,6 @@ export default function AddMenuForm( { menus, onCancel, onCreate } ) {
 				onChange={ setMenuName }
 			/>
 
-			<Button
-				className="edit-navigation-header__add-menu-cancel-button"
-				isLink
-				onClick={ onCancel }
-			>
-				{ __( 'Cancel' ) }
-			</Button>
-
 			<Button
 				className="edit-navigation-header__add-menu-create-button"
 				type="submit"
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 28ee278c9aee0..66c4e29ca2531 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -52,10 +52,6 @@
 	height: 100%;
 }
 
-.components-button.edit-navigation-header__add-menu-cancel-button {
-	margin-left: auto;
-}
-
 .components-button.edit-navigation-header__add-menu-create-button {
 	margin-left: $grid-unit-20;
 }

From 62211f0f8d8606d285bc0e94d39114f83e454d62 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 11:32:20 +1000
Subject: [PATCH 19/34] Navigation: 24px -> -unit-30

---
 packages/edit-navigation/src/components/header/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 66c4e29ca2531..b8abb0b5cbfe9 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -35,8 +35,8 @@
 
 .edit-navigation-header__save-button {
 	margin: 0 $grid-unit-15 0 auto;
-	padding-right: 24px;
-	padding-left: 24px;
+	padding-right: $grid-unit-30;
+	padding-left: $grid-unit-30;
 }
 
 .edit-navigation-header__add-menu-form {

From 6e5df7d910b3dd69fd085ec3fbc389a66bb37b75 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 13:52:14 +1000
Subject: [PATCH 20/34] Navigation: Remove isAddingMenu state

---
 .../edit-navigation/src/components/header/index.js     |  8 +-------
 .../edit-navigation/src/components/layout/index.js     |  6 ------
 .../src/components/layout/use-navigation-editor.js     | 10 ----------
 3 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 5759aecfb4ec9..c0a5d5fcf726f 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -15,12 +15,7 @@ import {
 import ManageLocations from './manage-locations';
 import AddMenuForm from './add-menu-form';
 
-export default function Header( {
-	menus,
-	selectedMenuId,
-	onSelectMenu,
-	onCancelAddingMenu,
-} ) {
+export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 	return (
 		<div className="edit-navigation-header">
 			<h1>{ __( 'Navigation' ) }</h1>
@@ -70,7 +65,6 @@ export default function Header( {
 					renderContent={ () => (
 						<AddMenuForm
 							menus={ menus }
-							onCancel={ onCancelAddingMenu }
 							onCreate={ onSelectMenu }
 						/>
 					) }
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index b629ef5bc3756..ef1fe96d95c74 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -31,10 +31,7 @@ export default function Layout( { blockEditorSettings } ) {
 		menus,
 		selectedMenuId,
 		navigationPost,
-		isAddingMenu,
 		selectMenu,
-		beginAddingMenu,
-		cancelAddingMenu,
 		deleteMenu,
 	} = useNavigationEditor();
 
@@ -56,12 +53,9 @@ export default function Layout( { blockEditorSettings } ) {
 
 						<div className="edit-navigation-layout">
 							<Header
-								onBeginAddingMenu={ beginAddingMenu }
 								menus={ menus }
 								selectedMenuId={ selectedMenuId }
-								isAddingMenu={ isAddingMenu }
 								onSelectMenu={ selectMenu }
-								onCancelAddingMenu={ cancelAddingMenu }
 							/>
 
 							<BlockEditorProvider
diff --git a/packages/edit-navigation/src/components/layout/use-navigation-editor.js b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
index a15ad104a52e6..7bac34e144929 100644
--- a/packages/edit-navigation/src/components/layout/use-navigation-editor.js
+++ b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
@@ -23,17 +23,10 @@ export default function useNavigationEditor() {
 		)
 	);
 
-	const [ isAddingMenu, setIsAddingMenu ] = useState( false );
-
 	const selectMenu = ( menuId ) => {
 		setSelectedMenuId( menuId );
-		setIsAddingMenu( false );
 	};
 
-	const beginAddingMenu = () => setIsAddingMenu( true );
-
-	const cancelAddingMenu = () => setIsAddingMenu( false );
-
 	const { deleteMenu: _deleteMenu } = useDispatch( 'core' );
 
 	const deleteMenu = async () => {
@@ -49,10 +42,7 @@ export default function useNavigationEditor() {
 		menus,
 		selectedMenuId,
 		navigationPost,
-		isAddingMenu,
 		selectMenu,
-		beginAddingMenu,
-		cancelAddingMenu,
 		deleteMenu,
 	};
 }

From 4a7da3f0c28f4777e87cca67048f2ad948881da1 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 14:00:03 +1000
Subject: [PATCH 21/34] Navigation: Simplify Add Menu Form

---
 .../src/components/header/add-menu-form.js        | 10 ++--------
 .../src/components/header/style.scss              | 15 +--------------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/add-menu-form.js b/packages/edit-navigation/src/components/header/add-menu-form.js
index c5ca54b699a89..aced3a9a68993 100644
--- a/packages/edit-navigation/src/components/header/add-menu-form.js
+++ b/packages/edit-navigation/src/components/header/add-menu-form.js
@@ -59,19 +59,13 @@ export default function AddMenuForm( { menus, onCreate } ) {
 	};
 
 	return (
-		<form
-			className="edit-navigation-header__add-menu-form"
-			onSubmit={ createMenu }
-		>
+		<form onSubmit={ createMenu }>
 			<TextControl
-				className="edit-navigation-header__add-menu-name-field"
 				// Disable reason: The name field should receive focus when
 				// component mounts.
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus
-				label={ __( 'New menu name' ) }
-				placeholder={ __( 'New menu name' ) }
-				hideLabelFromVision
+				label={ __( 'Menu name' ) }
 				value={ menuName }
 				onChange={ setMenuName }
 			/>
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index b8abb0b5cbfe9..0a23b919a9e51 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -39,19 +39,6 @@
 	padding-left: $grid-unit-30;
 }
 
-.edit-navigation-header__add-menu-form {
-	align-items: center;
-	display: flex;
-	flex-grow: 1;
-	height: 100%;
-}
-
-.edit-navigation-header__add-menu-name-field {
-	align-items: center;
-	display: flex;
-	height: 100%;
-}
-
 .components-button.edit-navigation-header__add-menu-create-button {
-	margin-left: $grid-unit-20;
+	margin-top: $grid-unit-10;
 }

From 08980a237ffe7e8bb7b64ade95071a1c06d3dfe1 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 14:02:16 +1000
Subject: [PATCH 22/34] Navigation: Remove menu location from label for now

---
 packages/edit-navigation/src/components/header/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index c0a5d5fcf726f..e1ea0adf6a178 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -32,7 +32,7 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 								menus.length
 									? menus.map( ( menu ) => ( {
 											value: menu.id,
-											label: menu.name + ' (Primary)', //Just a reminder to show the menu location, if set.
+											label: menu.name,
 									  } ) )
 									: [
 											{

From bdc1cdc6c44333a6a2e049465dca53829ca79a10 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 14:14:31 +1000
Subject: [PATCH 23/34] Navigation: Center spinner in Add Menu Form

---
 .../edit-navigation/src/components/header/index.js    |  1 -
 .../src/components/header/manage-locations.js         |  2 +-
 .../edit-navigation/src/components/header/style.scss  | 11 +++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index e1ea0adf6a178..93b9e554cddd1 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -51,7 +51,6 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 				) }
 
 				<Dropdown
-					contentClassName="edit-navigation-header__add-new-form"
 					position="bottom center"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
diff --git a/packages/edit-navigation/src/components/header/manage-locations.js b/packages/edit-navigation/src/components/header/manage-locations.js
index c883617196fa4..d9319f52f2efc 100644
--- a/packages/edit-navigation/src/components/header/manage-locations.js
+++ b/packages/edit-navigation/src/components/header/manage-locations.js
@@ -34,7 +34,7 @@ export default function ManageLocations() {
 			labelPosition="top"
 			value={ menuLocation.menu }
 			options={ [
-				{ value: 0, label: __( '— Select navigation —' ) },
+				{ value: 0, label: __( '-' ) },
 				...menus.map( ( menu ) => ( {
 					value: menu.id,
 					label: menu.name,
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 0a23b919a9e51..da8941ef8b4b8 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -33,12 +33,11 @@
 	}
 }
 
-.edit-navigation-header__save-button {
-	margin: 0 $grid-unit-15 0 auto;
-	padding-right: $grid-unit-30;
-	padding-left: $grid-unit-30;
+.edit-navigation-header__add-menu-create-button {
+	margin-top: $grid-unit-10;
 }
 
-.components-button.edit-navigation-header__add-menu-create-button {
-	margin-top: $grid-unit-10;
+.edit-navigation-header__manage-locations .components-spinner {
+	display: block;
+	margin: $grid-unit-20 auto;
 }

From 1b668fbeac60023206e9f89f03b816e6426945df Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 14:32:00 +1000
Subject: [PATCH 24/34] Navigation: Improve mobile styling

---
 .../src/components/editor/style.scss          | 34 +++++++++++--------
 .../src/components/header/index.js            |  4 +++
 .../src/components/toolbar/style.scss         |  2 ++
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 03bfeeb668cc1..76040447d73b8 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -7,12 +7,29 @@
 	}
 }
 
+.edit-navigation-editor__visual-view {
+	@include break-medium() {
+		flex-grow: 1;
+	}
+
+	.components-spinner {
+		display: block;
+		margin: 10px auto;
+	}
+}
+
 .edit-navigation-editor__list-view {
-	padding-left: $grid-unit-20;
-	margin-left: $grid-unit-20;
-	border-left: 1px solid $gray-200;
+	border-top: 1px solid $gray-200;
+	margin-top: $grid-unit-20;
+	padding-top: $grid-unit-20;
 
 	@include break-medium() {
+		border-left: 1px solid $gray-200;
+		border-top: none;
+		margin-left: $grid-unit-20;
+		margin-top: 0;
+		padding-left: $grid-unit-20;
+		padding-top: 0;
 		width: 300px;
 	}
 
@@ -26,14 +43,3 @@
 		margin: 100px auto;
 	}
 }
-
-.edit-navigation-editor__visual-view {
-	@include break-medium() {
-		flex-grow: 1;
-	}
-
-	.components-spinner {
-		display: block;
-		margin: 10px auto;
-	}
-}
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 93b9e554cddd1..5199ba5962aa8 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
 	Spinner,
@@ -16,6 +17,8 @@ import ManageLocations from './manage-locations';
 import AddMenuForm from './add-menu-form';
 
 export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+
 	return (
 		<div className="edit-navigation-header">
 			<h1>{ __( 'Navigation' ) }</h1>
@@ -26,6 +29,7 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 						<SelectControl
 							className="edit-navigation-toolbar__menu-select"
 							label={ __( 'Currently editing' ) }
+							hideLabelFromVision={ isMobileViewport }
 							disabled={ ! menus.length }
 							value={ selectedMenuId ?? 0 }
 							options={
diff --git a/packages/edit-navigation/src/components/toolbar/style.scss b/packages/edit-navigation/src/components/toolbar/style.scss
index ef00d0d86ed7c..2e07c14ef0946 100644
--- a/packages/edit-navigation/src/components/toolbar/style.scss
+++ b/packages/edit-navigation/src/components/toolbar/style.scss
@@ -4,10 +4,12 @@
 	border: $border-width solid $gray-200;
 	display: flex;
 	height: $grid-unit-60 * 2;
+	padding-bottom: $grid-unit-60;
 	position: relative;
 
 	@include break-medium() {
 		height: $grid-unit-60;
+		padding-bottom: 0;
 	}
 
 	.components-spinner {

From 74d6a8be880eee0518b4e7862ce04e623487c833 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 14:58:17 +1000
Subject: [PATCH 25/34] Navigation: Minor cleanup

---
 .../src/components/header/add-menu-form.js             |  2 +-
 .../edit-navigation/src/components/header/index.js     |  1 -
 .../edit-navigation/src/components/header/style.scss   |  2 +-
 .../edit-navigation/src/components/layout/index.js     |  4 ++--
 .../edit-navigation/src/components/toolbar/index.js    | 10 +++++-----
 .../src/components/toolbar/save-button.js              | 10 +++-------
 6 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/add-menu-form.js b/packages/edit-navigation/src/components/header/add-menu-form.js
index aced3a9a68993..3f47f594bd962 100644
--- a/packages/edit-navigation/src/components/header/add-menu-form.js
+++ b/packages/edit-navigation/src/components/header/add-menu-form.js
@@ -71,7 +71,7 @@ export default function AddMenuForm( { menus, onCreate } ) {
 			/>
 
 			<Button
-				className="edit-navigation-header__add-menu-create-button"
+				className="edit-navigation-header__create-menu-button"
 				type="submit"
 				isPrimary
 				disabled={ ! menuName.length }
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 5199ba5962aa8..dda37ae7e5a0c 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -27,7 +27,6 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 				{ menus ? (
 					<div className="edit-navigation-header__current-menu">
 						<SelectControl
-							className="edit-navigation-toolbar__menu-select"
 							label={ __( 'Currently editing' ) }
 							hideLabelFromVision={ isMobileViewport }
 							disabled={ ! menus.length }
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index da8941ef8b4b8..72d59de537b64 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -33,7 +33,7 @@
 	}
 }
 
-.edit-navigation-header__add-menu-create-button {
+.edit-navigation-header__create-menu-button {
 	margin-top: $grid-unit-10;
 }
 
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
index ef1fe96d95c74..8fb1da3aba007 100644
--- a/packages/edit-navigation/src/components/layout/index.js
+++ b/packages/edit-navigation/src/components/layout/index.js
@@ -69,8 +69,8 @@ export default function Layout( { blockEditorSettings } ) {
 								} }
 							>
 								<Toolbar
-									menus={ menus }
-									selectedMenuId={ selectedMenuId }
+									isPending={ ! navigationPost }
+									navigationPost={ navigationPost }
 								/>
 								<Editor
 									isPending={ ! navigationPost }
diff --git a/packages/edit-navigation/src/components/toolbar/index.js b/packages/edit-navigation/src/components/toolbar/index.js
index 2cacf31a9b07b..9837b1e263510 100644
--- a/packages/edit-navigation/src/components/toolbar/index.js
+++ b/packages/edit-navigation/src/components/toolbar/index.js
@@ -11,10 +11,12 @@ import { NavigableToolbar, BlockToolbar } from '@wordpress/block-editor';
 import SaveButton from './save-button';
 import BlockInspectorDropdown from './block-inspector-dropdown';
 
-export default function Toolbar( { menus, selectedMenuId } ) {
+export default function Toolbar( { isPending, navigationPost } ) {
 	return (
 		<div className="edit-navigation-toolbar">
-			{ menus ? (
+			{ isPending ? (
+				<Spinner />
+			) : (
 				<>
 					<NavigableToolbar
 						className="edit-navigation-toolbar__block-tools"
@@ -27,10 +29,8 @@ export default function Toolbar( { menus, selectedMenuId } ) {
 					</NavigableToolbar>
 					<Popover.Slot name="block-toolbar" />
 					<BlockInspectorDropdown />
-					<SaveButton menuId={ selectedMenuId } />
+					<SaveButton navigationPost={ navigationPost } />
 				</>
-			) : (
-				<Spinner />
 			) }
 		</div>
 	);
diff --git a/packages/edit-navigation/src/components/toolbar/save-button.js b/packages/edit-navigation/src/components/toolbar/save-button.js
index 3bb4257e6d8af..c5adfef8b8ac7 100644
--- a/packages/edit-navigation/src/components/toolbar/save-button.js
+++ b/packages/edit-navigation/src/components/toolbar/save-button.js
@@ -1,15 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function SaveButton( { menuId } ) {
-	const post = useSelect( ( select ) =>
-		select( 'core/edit-navigation' ).getNavigationPostForMenu( menuId )
-	);
-
+export default function SaveButton( { navigationPost } ) {
 	const { saveNavigationPost } = useDispatch( 'core/edit-navigation' );
 
 	return (
@@ -17,7 +13,7 @@ export default function SaveButton( { menuId } ) {
 			className="edit-navigation-toolbar__save-button"
 			isPrimary
 			onClick={ () => {
-				saveNavigationPost( post );
+				saveNavigationPost( navigationPost );
 			} }
 		>
 			{ __( 'Save' ) }

From f4e9bb9bfb8833171c9a67587ad1d923790f7bb5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:01:40 +1000
Subject: [PATCH 26/34] Navigation: Use className instead of h3

---
 packages/edit-navigation/src/components/editor/list-view.js | 4 +++-
 packages/edit-navigation/src/components/editor/style.scss   | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/list-view.js b/packages/edit-navigation/src/components/editor/list-view.js
index f24778372c7a5..8d20e1c1fa5d7 100644
--- a/packages/edit-navigation/src/components/editor/list-view.js
+++ b/packages/edit-navigation/src/components/editor/list-view.js
@@ -13,7 +13,9 @@ export default function ListView( { isPending, blocks } ) {
 
 	return (
 		<div className="edit-navigation-editor__list-view">
-			<h3>{ __( 'List view' ) }</h3>
+			<h3 className="edit-navigation-editor__list-view-title">
+				{ __( 'List view' ) }
+			</h3>
 			{ isPending ? (
 				<Spinner />
 			) : (
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 76040447d73b8..13d9c563be4f9 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -33,7 +33,7 @@
 		width: 300px;
 	}
 
-	h3 {
+	.edit-navigation-editor__list-view-title {
 		font-size: 15px;
 		margin: 0;
 	}

From a09425647ff3a12ced9e95dec83510aaeddf414a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:04:35 +1000
Subject: [PATCH 27/34] Navigation: Use em for font-size

---
 packages/edit-navigation/src/components/editor/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 13d9c563be4f9..527b44c38d27d 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -34,7 +34,7 @@
 	}
 
 	.edit-navigation-editor__list-view-title {
-		font-size: 15px;
+		font-size: 1.2em;
 		margin: 0;
 	}
 

From 417ee5502e80682bd1b4a837afc3f10652067c0c Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:07:55 +1000
Subject: [PATCH 28/34] Navigation: Remove Spinner from header

---
 .../src/components/header/index.js            | 57 ++++++++-----------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index dda37ae7e5a0c..4a10359f81768 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -3,12 +3,7 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import {
-	Spinner,
-	Button,
-	SelectControl,
-	Dropdown,
-} from '@wordpress/components';
+import { Button, SelectControl, Dropdown } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,34 +19,28 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 			<h1>{ __( 'Navigation' ) }</h1>
 
 			<div className="edit-navigation-header__actions">
-				{ menus ? (
-					<div className="edit-navigation-header__current-menu">
-						<SelectControl
-							label={ __( 'Currently editing' ) }
-							hideLabelFromVision={ isMobileViewport }
-							disabled={ ! menus.length }
-							value={ selectedMenuId ?? 0 }
-							options={
-								menus.length
-									? menus.map( ( menu ) => ( {
-											value: menu.id,
-											label: menu.name,
-									  } ) )
-									: [
-											{
-												value: 0,
-												label: __(
-													'— Select navigation —'
-												),
-											},
-									  ]
-							}
-							onChange={ onSelectMenu }
-						/>
-					</div>
-				) : (
-					<Spinner />
-				) }
+				<div className="edit-navigation-header__current-menu">
+					<SelectControl
+						label={ __( 'Currently editing' ) }
+						hideLabelFromVision={ isMobileViewport }
+						disabled={ ! menus?.length }
+						value={ selectedMenuId ?? 0 }
+						options={
+							menus?.length
+								? menus.map( ( menu ) => ( {
+										value: menu.id,
+										label: menu.name,
+								  } ) )
+								: [
+										{
+											value: 0,
+											label: '-',
+										},
+								  ]
+						}
+						onChange={ onSelectMenu }
+					/>
+				</div>
 
 				<Dropdown
 					position="bottom center"

From bf6aefae50e9285cdca5ed770fbbfbde741f6dc5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:10:20 +1000
Subject: [PATCH 29/34] Navigation: Use $default-line-height

---
 packages/edit-navigation/src/components/header/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 72d59de537b64..6e0afe8246d17 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -5,7 +5,7 @@
 	h1 {
 		font-size: 23px;
 		font-weight: 400;
-		line-height: 1.3;
+		line-height: $default-line-height;
 		margin: 0 0 $grid-unit-10;
 	}
 }

From 6125e6f8014b562fafa2c558109ecca059dc8d41 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:11:39 +1000
Subject: [PATCH 30/34] Navigation: Use className for h1

---
 packages/edit-navigation/src/components/header/index.js   | 4 +++-
 packages/edit-navigation/src/components/header/style.scss | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 4a10359f81768..1713b4b04988f 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -16,7 +16,9 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
 
 	return (
 		<div className="edit-navigation-header">
-			<h1>{ __( 'Navigation' ) }</h1>
+			<h1 className="edit-navigation-header__title">
+				{ __( 'Navigation' ) }
+			</h1>
 
 			<div className="edit-navigation-header__actions">
 				<div className="edit-navigation-header__current-menu">
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 6e0afe8246d17..200c2dc087592 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -2,7 +2,7 @@
 	padding: $grid-unit-20;
 	background: #f1f1f1; // Need to find a variable for this
 
-	h1 {
+	.edit-navigation-header__title {
 		font-size: 23px;
 		font-weight: 400;
 		line-height: $default-line-height;

From 80215a7f612128672ef20b4e5f28bdb733beac8e Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:15:47 +1000
Subject: [PATCH 31/34] Navigation: Remove unnecessary flexbox styling

---
 .../edit-navigation/src/components/header/style.scss   | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
index 200c2dc087592..093e9805b6e16 100644
--- a/packages/edit-navigation/src/components/header/style.scss
+++ b/packages/edit-navigation/src/components/header/style.scss
@@ -23,14 +23,8 @@
 }
 
 // The select menu for choosing which menu to edit.
-.edit-navigation-header__current-menu {
-	align-items: center;
-	display: flex;
-
-	// Overriding some aggressive defaults
-	.components-base-control .components-base-control__field {
-		margin: 0;
-	}
+.edit-navigation-header__current-menu .components-base-control__field {
+	margin: 0;
 }
 
 .edit-navigation-header__create-menu-button {

From 5d0632066125b002ce11d44ab89565a87bb267b5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:24:01 +1000
Subject: [PATCH 32/34] Navigation: VisualView -> BlockView

---
 .../src/components/editor/{visual-view.js => block-view.js}   | 4 ++--
 packages/edit-navigation/src/components/editor/index.js       | 4 ++--
 packages/edit-navigation/src/components/editor/style.scss     | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/edit-navigation/src/components/editor/{visual-view.js => block-view.js} (88%)

diff --git a/packages/edit-navigation/src/components/editor/visual-view.js b/packages/edit-navigation/src/components/editor/block-view.js
similarity index 88%
rename from packages/edit-navigation/src/components/editor/visual-view.js
rename to packages/edit-navigation/src/components/editor/block-view.js
index 910b110e88d2f..cd817e4aabe43 100644
--- a/packages/edit-navigation/src/components/editor/visual-view.js
+++ b/packages/edit-navigation/src/components/editor/block-view.js
@@ -6,7 +6,7 @@ import { useEffect } from '@wordpress/element';
 import { WritingFlow, ObserveTyping, BlockList } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
 
-export default function VisualView( { isPending } ) {
+export default function BlockView( { isPending } ) {
 	const rootClientId = useSelect(
 		( select ) => select( 'core/block-editor' ).getBlocks()[ 0 ]?.clientId
 	);
@@ -21,7 +21,7 @@ export default function VisualView( { isPending } ) {
 	}, [ rootClientId, selectBlock ] );
 
 	return (
-		<div className="edit-navigation-editor__visual-view">
+		<div className="edit-navigation-editor__block-view">
 			{ isPending ? (
 				<Spinner />
 			) : (
diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js
index 23c7f1dfcd34b..9b4f756489b61 100644
--- a/packages/edit-navigation/src/components/editor/index.js
+++ b/packages/edit-navigation/src/components/editor/index.js
@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
+import BlockView from './block-view';
 import ListView from './list-view';
-import VisualView from './visual-view';
 
 export default function Editor( { isPending, blocks } ) {
 	return (
 		<div className="edit-navigation-editor">
-			<VisualView isPending={ isPending } />
+			<BlockView isPending={ isPending } />
 			<ListView isPending={ isPending } blocks={ blocks } />
 		</div>
 	);
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 527b44c38d27d..386a51bb04df1 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -7,7 +7,7 @@
 	}
 }
 
-.edit-navigation-editor__visual-view {
+.edit-navigation-editor__block-view {
 	@include break-medium() {
 		flex-grow: 1;
 	}

From d02bcb8c86fb578127be222f3b86bf2aa70ab8a4 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 15:38:43 +1000
Subject: [PATCH 33/34] Navigation: Use deps in useSelect()

---
 .../src/components/editor/block-view.js       |  3 ++-
 .../src/components/header/manage-locations.js |  2 +-
 .../auto-add-pages-panel.js                   |  4 ++-
 .../components/inspector-additions/index.js   |  5 ++--
 .../layout/use-menu-notifications.js          | 25 +++++++++++--------
 .../layout/use-navigation-editor.js           | 15 ++++++-----
 6 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/block-view.js b/packages/edit-navigation/src/components/editor/block-view.js
index cd817e4aabe43..416f38c9fe900 100644
--- a/packages/edit-navigation/src/components/editor/block-view.js
+++ b/packages/edit-navigation/src/components/editor/block-view.js
@@ -8,7 +8,8 @@ import { Spinner } from '@wordpress/components';
 
 export default function BlockView( { isPending } ) {
 	const rootClientId = useSelect(
-		( select ) => select( 'core/block-editor' ).getBlocks()[ 0 ]?.clientId
+		( select ) => select( 'core/block-editor' ).getBlocks()[ 0 ]?.clientId,
+		[]
 	);
 
 	const { selectBlock } = useDispatch( 'core/block-editor' );
diff --git a/packages/edit-navigation/src/components/header/manage-locations.js b/packages/edit-navigation/src/components/header/manage-locations.js
index d9319f52f2efc..480917f901924 100644
--- a/packages/edit-navigation/src/components/header/manage-locations.js
+++ b/packages/edit-navigation/src/components/header/manage-locations.js
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import useMenuLocations from './use-menu-locations';
 
 export default function ManageLocations() {
-	const menus = useSelect( ( select ) => select( 'core' ).getMenus() );
+	const menus = useSelect( ( select ) => select( 'core' ).getMenus(), [] );
 
 	const [ menuLocations, assignMenuToLocation ] = useMenuLocations();
 
diff --git a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
index 0eccce950ce41..ad4350b335a6d 100644
--- a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
+++ b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
@@ -7,7 +7,9 @@ import { PanelBody, CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function AutoAddPagesPanel( { menuId } ) {
-	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ) );
+	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
+		menuId,
+	] );
 
 	const [ autoAddPages, setAutoAddPages ] = useState( null );
 
diff --git a/packages/edit-navigation/src/components/inspector-additions/index.js b/packages/edit-navigation/src/components/inspector-additions/index.js
index 0d95d069e2015..e9cc696bd7c1f 100644
--- a/packages/edit-navigation/src/components/inspector-additions/index.js
+++ b/packages/edit-navigation/src/components/inspector-additions/index.js
@@ -11,8 +11,9 @@ import AutoAddPagesPanel from './auto-add-pages-panel';
 import DeleteMenuPanel from './delete-menu-panel';
 
 export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
-	const selectedBlock = useSelect( ( select ) =>
-		select( 'core/block-editor' ).getSelectedBlock()
+	const selectedBlock = useSelect(
+		( select ) => select( 'core/block-editor' ).getSelectedBlock(),
+		[]
 	);
 
 	if ( selectedBlock?.name !== 'core/navigation' ) {
diff --git a/packages/edit-navigation/src/components/layout/use-menu-notifications.js b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
index 1b76ee82b7263..34adaa51e67ec 100644
--- a/packages/edit-navigation/src/components/layout/use-menu-notifications.js
+++ b/packages/edit-navigation/src/components/layout/use-menu-notifications.js
@@ -5,17 +5,20 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 export default function useMenuNotifications( menuId ) {
-	const { lastSaveError, lastDeleteError } = useSelect( ( select ) => ( {
-		lastSaveError: select( 'core' ).getLastEntitySaveError(
-			'root',
-			'menu'
-		),
-		lastDeleteError: select( 'core' ).getLastEntityDeleteError(
-			'root',
-			'menu',
-			menuId
-		),
-	} ) );
+	const { lastSaveError, lastDeleteError } = useSelect(
+		( select ) => ( {
+			lastSaveError: select( 'core' ).getLastEntitySaveError(
+				'root',
+				'menu'
+			),
+			lastDeleteError: select( 'core' ).getLastEntityDeleteError(
+				'root',
+				'menu',
+				menuId
+			),
+		} ),
+		[ menuId ]
+	);
 
 	const { createErrorNotice } = useDispatch( 'core/notices' );
 
diff --git a/packages/edit-navigation/src/components/layout/use-navigation-editor.js b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
index 7bac34e144929..590f66ac0df9f 100644
--- a/packages/edit-navigation/src/components/layout/use-navigation-editor.js
+++ b/packages/edit-navigation/src/components/layout/use-navigation-editor.js
@@ -5,8 +5,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
 export default function useNavigationEditor() {
-	const menus = useSelect( ( select ) =>
-		select( 'core' ).getMenus( { per_page: -1 } )
+	const menus = useSelect(
+		( select ) => select( 'core' ).getMenus( { per_page: -1 } ),
+		[]
 	);
 
 	const [ selectedMenuId, setSelectedMenuId ] = useState( null );
@@ -17,10 +18,12 @@ export default function useNavigationEditor() {
 		}
 	}, [ selectedMenuId, menus ] );
 
-	const navigationPost = useSelect( ( select ) =>
-		select( 'core/edit-navigation' ).getNavigationPostForMenu(
-			selectedMenuId
-		)
+	const navigationPost = useSelect(
+		( select ) =>
+			select( 'core/edit-navigation' ).getNavigationPostForMenu(
+				selectedMenuId
+			),
+		[ selectedMenuId ]
 	);
 
 	const selectMenu = ( menuId ) => {

From 3ba5109935982057b7e092d1ee4d7f23749388e3 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 11 Sep 2020 16:58:35 +1000
Subject: [PATCH 34/34] Navigation: Remove CSS re-ordering of block inspector,
 for now

---
 .../inspector-additions/auto-add-pages-panel.js |  2 +-
 .../components/inspector-additions/style.scss   | 17 -----------------
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
index ad4350b335a6d..62ca9ffb2db98 100644
--- a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
+++ b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages-panel.js
@@ -22,7 +22,7 @@ export default function AutoAddPagesPanel( { menuId } ) {
 	const { saveMenu } = useDispatch( 'core' );
 
 	return (
-		<PanelBody className="edit-navigation-inspector-additions__auto-add-pages-panel">
+		<PanelBody>
 			<CheckboxControl
 				label={ __( 'Automatically add new top-level pages' ) }
 				checked={ autoAddPages ?? false }
diff --git a/packages/edit-navigation/src/components/inspector-additions/style.scss b/packages/edit-navigation/src/components/inspector-additions/style.scss
index 8d22118a3273b..359310cfb6e0b 100644
--- a/packages/edit-navigation/src/components/inspector-additions/style.scss
+++ b/packages/edit-navigation/src/components/inspector-additions/style.scss
@@ -1,20 +1,3 @@
-// Set the block inspector to use flexbox so that we can change the order of
-// panels within it.
-// TODO: Is there a way to do this natively using InspectorControls?
-.block-editor-block-inspector {
-	display: flex;
-	flex-direction: column;
-
-	.block-editor-block-card {
-		order: -2;
-	}
-}
-
-.edit-navigation-inspector-additions__auto-add-pages-panel {
-	order: -1;
-}
-
 .edit-navigation-inspector-additions__delete-menu-panel {
 	text-align: center;
-	order: 1;
 }