Try using interface package in navigation screen re-design

packages/edit-navigation/package.json

@@ -40,6 +40,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",

packages/edit-navigation/src/components/editor/index.js

@@ -1,14 +1,31 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import BlockView from './block-view';
-import ListView from './list-view';
+import { BlockList, ObserveTyping, WritingFlow } from '@wordpress/block-editor';
+import { Spinner } from '@wordpress/components';
 
-export default function Editor( { isPending, blocks } ) {
+/**
+ * The current navigation rendered in the form of a core Navigation block.
+ *
+ * @param {Object}  props           Component props.
+ * @param {boolean} props.isPending Whether the navigation post has loaded.
+ */
+
+export default function Editor( { isPending } ) {
 	return (
 		<div className="edit-navigation-editor">
-			<BlockView isPending={ isPending } />
-			<ListView isPending={ isPending } blocks={ blocks } />
+			{ isPending ? (
+				<Spinner />
+			) : (
+				// Do we need this div?
+				<div className="editor-styles-wrapper">
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</div>
+			) }
 		</div>
 	);
 }

packages/edit-navigation/src/components/editor/style.scss

@@ -1,45 +1,78 @@
 .edit-navigation-editor {
-	margin: $grid-unit-20;
+	background: $white;
+	border: 1px solid #1e1e1e;
+	border-radius: 2px;
+	margin: 18px 0 0 0;
 
-	@include break-medium() {
-		align-items: flex-start;
-		display: flex;
+	.components-spinner {
+		display: block;
+		margin: 10px auto;
 	}
-}
 
-.edit-navigation-editor__block-view {
-	@include break-medium() {
-		flex-grow: 1;
+
+	// The following attempts to adapt the layout of the Navigation
+	// and Link blocks to work better in the context of the Navigation Screen.
+	.block-editor-block-list__block {
+		margin: 0;
+		padding: 12px;
+		font-size: 15px;
 	}
 
-	.components-spinner {
+	// This _should_ force the vertical variation. Should we just force the screen
+	// to load the vertical variant, instead of forcing it like this?
+	.wp-block-navigation__container {
 		display: block;
-		margin: 10px auto;
 	}
-}
 
-.edit-navigation-editor__list-view {
-	border-top: 1px solid $gray-300;
-	margin-top: $grid-unit-20;
-	padding-top: $grid-unit-20;
+	.wp-block-navigation-link {
+		display: block;
+		align-items: baseline;
+		padding: 0;
+		cursor: text;
 
-	@include break-medium() {
-		border-left: 1px solid $gray-300;
-		border-top: none;
-		margin-left: $grid-unit-20;
-		margin-top: 0;
-		padding-left: $grid-unit-20;
-		padding-top: 0;
-		width: 300px;
+		// The following is a really stupid way to fix the focus outlines
+		&.is-selected > .wp-block-navigation-link__content,
+		&.is-selected:hover > .wp-block-navigation-link__content {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+		&.block-editor-block-list__block:not([contenteditable]):focus::after {
+			display: none;
+		}
 	}
 
-	.edit-navigation-editor__list-view-title {
-		font-size: 1.2em;
-		margin: 0;
+	.wp-block-navigation-link__content {
+		padding: 12px;
+		border-radius: 2px;
+
+		&:hover {
+			box-shadow: 0 0 0 1px $gray-300;
+		}
 	}
 
-	.components-spinner {
-		display: block;
-		margin: 100px auto;
+	// Hide the submenu icons
+	.wp-block-navigation-link__submenu-icon {
+		display: none;
+	}
+
+	// Submenus
+	// There's a bunch of stuff to override just to get submenus to
+	// as a normal block element.
+	.wp-block-navigation-link.has-child {
+		.wp-block-navigation__container {
+			border: none;
+			opacity: 1;
+			position: relative;
+			visibility: visible;
+			margin: 2px 0;
+			padding-left: 18px;
+			width: 100%;
+			left: 0;
+		}
+	}
+
+	.block-list-appender {
+		// These numbers make no sense, but look right. I think the block-list-appender
+		// has a bunch of errant styles competing for attention.
+		margin: 6px 0 9px 3px;
 	}
 }

packages/edit-navigation/src/components/header/add-menu-form.js

@@ -58,7 +58,10 @@ export default function AddMenuForm( { menus, onCreate } ) {
 	};
 
 	return (
-		<form onSubmit={ createMenu }>
+		<form
+			onSubmit={ createMenu }
+			className="edit-navigation-header__add-menu-form"
+		>
 			<TextControl
 				// Disable reason: The name field should receive focus when
 				// component mounts.

packages/edit-navigation/src/components/header/index.js

@@ -13,11 +13,14 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	Popover,
 } from '@wordpress/components';
+import { PinnedItems } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
+import SaveButton from './save-button';
 import ManageLocations from './manage-locations';
 import AddMenuForm from './add-menu-form';
 
@@ -26,6 +29,7 @@ export default function Header( {
 	selectedMenuId,
 	onSelectMenu,
 	isPending,
+	navigationPost,
 } ) {
 	const selectedMenu = find( menus, { id: selectedMenuId } );
 	const menuName = selectedMenu ? selectedMenu.name : undefined;
@@ -46,15 +50,15 @@ export default function Header( {
 
 	return (
 		<div className="edit-navigation-header">
-			<h1 className="edit-navigation-header__title">
-				{ __( 'Navigation' ) }
-			</h1>
-
-			<div className="edit-navigation-header__actions">
-				<h2 className="edit-navigation-header__action_header">
+			<div className="edit-navigation-header__title-subtitle">
+				<h1 className="edit-navigation-header__title">
+					{ __( 'Navigation' ) }
+				</h1>
+				<h2 className="edit-navigation-header__subtitle">
 					{ actionHeaderText }
 				</h2>
-
+			</div>
+			<div className="edit-navigation-header__actions">
 				<DropdownMenu
 					icon={ null }
 					toggleProps={ {
@@ -65,7 +69,7 @@ export default function Header( {
 						__experimentalIsFocusable: true,
 					} }
 					popoverProps={ {
-						position: 'bottom center',
+						position: 'bottom left',
 					} }
 				>
 					{ () => (
@@ -83,7 +87,7 @@ export default function Header( {
 				</DropdownMenu>
 
 				<Dropdown
-					position="bottom center"
+					position="bottom left"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
 							isTertiary
@@ -103,7 +107,7 @@ export default function Header( {
 
 				<Dropdown
 					contentClassName="edit-navigation-header__manage-locations"
-					position="bottom center"
+					position="bottom left"
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
 							isTertiary
@@ -115,6 +119,12 @@ export default function Header( {
 					) }
 					renderContent={ () => <ManageLocations /> }
 				/>
+
+				<SaveButton navigationPost={ navigationPost } />
+
+				<PinnedItems.Slot scope="core/edit-navigation" />
+
+				<Popover.Slot name="block-toolbar" />
 			</div>
 		</div>
 	);

packages/edit-navigation/src/components/header/style.scss

@@ -1,15 +1,39 @@
 .edit-navigation-header {
-	padding: $grid-unit-20;
-	background: #f1f1f1; // Need to find a variable for this
-
-	.edit-navigation-header__title {
-		font-size: 23px;
-		font-weight: 400;
-		line-height: $default-line-height;
-		margin: 0 0 $grid-unit-10;
+	display: flex;
+	align-items: center;
+	padding: 12px;
+}
+
+.edit-navigation-header__title-subtitle {
+	flex-grow: 1;
+	padding-left: $grid-unit-10;
+}
+
+.edit-navigation-header__title {
+	font-size: 13px;
+	line-height: $default-line-height;
+	margin: 0;
+}
+
+.edit-navigation-header__subtitle {
+	margin: 0;
+	font-size: 15px;
+	font-weight: normal;
+}
+
+.edit-navigation-header__actions {
+	display: flex;
+
+	.components-button {
+		margin-right: $grid-unit-10;
 	}
 }
 
+.edit-navigation-header__add-menu-form {
+	min-width: 220px;
+}
+
+/*
 // Lining up all the actions in a nice row.
 .edit-navigation-header__actions {
 	display: flex;
@@ -41,3 +65,4 @@
 	display: block;
 	margin: $grid-unit-20 auto;
 }
+*/