From 1cd8b89a16576bb5fd5207b077f8c6fae1c91f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 14:29:35 +0200
Subject: [PATCH 1/8] Squash

---
 .../block-library/src/navigation/block.json   |   4 +
 packages/block-library/src/navigation/edit.js |  29 ++-
 .../block-library/src/navigation/editor.scss  | 185 ++++++++++++++++--
 .../block-library/src/navigation/style.scss   |  55 +++++-
 .../src/components/editor/style.scss          | 148 --------------
 .../edit-navigation/src/store/resolvers.js    |   1 +
 6 files changed, 246 insertions(+), 176 deletions(-)

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 273ac75dd65f3e..2bc5c2190097a5 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -36,6 +36,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"expandEffect":{
+			"type": "string",
+			"default": "dropdown"
+		},
 		"openSubmenusOnClick":{
 			"type": "boolean",
 			"default": false
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d5ef92a4c894f2..c0bf356358e821 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -26,7 +26,12 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -135,6 +140,9 @@ function Navigation( {
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
+			'is-accordion':
+				attributes.orientation === 'vertical' &&
+				attributes.expandEffect === 'accordion',
 			'is-responsive': attributes.isResponsive,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -301,6 +309,25 @@ function Navigation( {
 								label={ __( 'Show submenu indicator icons' ) }
 							/>
 						) }
+						{ attributes.orientation === 'vertical' && (
+							<SelectControl
+								label={ __( 'Expand submenus as' ) }
+								value={ attributes.expandEffect }
+								options={ [
+									{
+										value: 'dropdown',
+										label: __( 'Dropdown' ),
+									},
+									{
+										value: 'accordion',
+										label: __( 'Accordion' ),
+									},
+								] }
+								onChange={ ( expandEffect ) => {
+									setAttributes( { expandEffect } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				) }
 				{ hasColorSettings && (
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 07afc4ceb4394e..96619486b06767 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -41,26 +41,6 @@
 	background-color: inherit;
 }
 
-// Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-.has-child:hover {
-	> .wp-block-navigation__submenu-container {
-		opacity: 0;
-		visibility: hidden;
-	}
-}
-
-// Styles for submenu flyout.
-.has-child {
-	&.is-selected,
-	&.has-child-selected {
-		> .wp-block-navigation__submenu-container {
-			display: flex;
-			opacity: 1;
-			visibility: visible;
-		}
-	}
-}
 
 // Show a submenu when generally dragging (is-dragging-components-draggable) if that
 // submenu has children (has-child) and is being dragged within (is-dragging-within).
@@ -515,3 +495,168 @@ body.editor-styles-wrapper
 		margin-top: $grid-unit-20;
 	}
 }
+
+// Styles for dropdown style menu.
+.wp-block-navigation:where(:not(.is-accordion)) {
+	// Styles for submenu flyout.
+	.has-child {
+		&.is-selected,
+		&.has-child-selected {
+			> .wp-block-navigation__submenu-container {
+				display: flex;
+				opacity: 1;
+				visibility: visible;
+			}
+		}
+	}
+
+	// Only show the flyout on hover if the parent menu item is selected.
+	.wp-block-navigation:not(.is-selected):not(.has-child-selected)
+	.has-child:hover {
+		> .wp-block-navigation__submenu-container {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+}
+
+// Styles for accordion style menu.
+.wp-block-navigation.is-accordion {
+	padding: 0;
+
+	// Increase specificity.
+	.wp-block-navigation-item {
+		display: block;
+		margin: $grid-unit-10 0;
+
+		// Show submenus on click.
+		> .wp-block-navigation__submenu-container {
+			// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
+			opacity: 1;
+			visibility: visible;
+			display: none;
+			right: auto;
+			box-sizing: border-box;
+		}
+
+		// Fix focus outlines.
+		&.is-selected > .wp-block-navigation-item__content,
+		&.is-selected:hover > .wp-block-navigation-item__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;
+		}
+
+		.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
+			padding: 0.5em 1em;
+			margin-right: 0;
+			border-radius: $radius-block-ui;
+
+			&:hover {
+				box-shadow: 0 0 0 $border-width $gray-300;
+			}
+		}
+
+		.wp-block-navigation-link__label,
+		.wp-block-navigation-link__placeholder-text {
+			padding: $grid-unit-05;
+			padding-left: $grid-unit-10;
+		}
+
+		.wp-block-navigation-link__label {
+			// Without this Links with submenus display a pointer.
+			cursor: text;
+		}
+	}
+
+
+	// Basic Page List support.
+	ul.wp-block-page-list {
+		// Make it inert.
+		background: $gray-100;
+		border-radius: $radius-block-ui;
+		pointer-events: none;
+		margin-right: 0;
+
+		.wp-block-navigation-item {
+			color: $gray-700;
+			margin-bottom: 6px;
+			border-radius: $radius-block-ui;
+			padding: $grid-unit-05;
+			padding-left: $grid-unit-10;
+		}
+	}
+
+	// Submenu icon indicator.
+	.wp-block-navigation__submenu-icon {
+		position: absolute;
+		top: 15px;
+		left: 0;
+		padding: 0;
+		pointer-events: none;
+
+		svg {
+			// Point rightwards.
+			transform: rotate(-90deg);
+			transition: transform 0.2s ease;
+			@include reduce-motion("transition");
+		}
+	}
+
+	// Point downwards when open.
+	.wp-block-navigation-submenu.is-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg,
+	.wp-block-navigation-submenu.has-child-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg {
+		transform: rotate(0deg);
+	}
+
+	// Override inherited values to optimize menu items for the screen context.
+	.wp-block-navigation-submenu.has-child,
+	.wp-block-navigation-item.has-child {
+		cursor: default;
+		border-radius: $radius-block-ui;
+	}
+
+	// Override for deeply nested submenus.
+	.has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
+		left: auto;
+	}
+
+	// When editing a submenu with children, highlight the parent
+	// and adjust the spacing and submenu icon.
+	.wp-block-navigation-submenu.is-editing {
+		> .wp-block-navigation__submenu-container {
+			opacity: 1;
+			visibility: visible;
+			position: relative;
+			background: transparent;
+			top: auto;
+			left: auto;
+			padding-left: $grid-unit-20 + $grid-unit-05;
+			min-width: auto;
+			width: 100%;
+			border: none;
+			display: block;
+
+			&::before {
+				display: none;
+			}
+		}
+	}
+
+	// Appender styles
+	.block-list-appender {
+		// Make appender rows the same height as items and center the button vertically.
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: $grid-unit-50;
+		margin: $grid-unit-10 0;
+	}
+
+	.block-editor-button-block-appender.block-list-appender__toggle {
+		margin: 0 0 0 $grid-unit-30;
+		padding: 0;
+	}
+}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index bcd241248cdd98..c834580ceb3626 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -145,7 +145,43 @@
 		a {
 			margin: 0;
 		}
+	}
+
+	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
+	// We will need to replace focus-within with a JS solution for IE keyboard support.
+
+	// Custom menu items.
+	// Show submenus on hover unless they open on click.
+	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
+	}
 
+	// Keep submenus open when focus is within.
+	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
+	}
+
+	// Show submenus on click.
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
+	}
+}
+
+// Styles for dropdown style menu.
+.wp-block-navigation:where(:not(.is-accordion)) .has-child {
+	:where(.wp-block-navigation__submenu-container) {
 		// Submenu indentation when there's no background.
 		left: -1em;
 		top: 100%;
@@ -196,14 +232,19 @@
 		height: auto;
 		min-width: 200px;
 	}
+}
 
-	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
-		visibility: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
+// Styles for submenu accordion.
+// These are separated out with reduced specificity to allow better inheritance from Global Styles.
+.wp-block-navigation:where(.is-accordion) .has-child {
+	display: block;
+	margin: $grid-unit-10 0;
+
+	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
+	// That way if padding is set in theme.json, it still wins.
+	// https://css-tricks.com/almanac/selectors/w/where/
+	:where(.wp-block-navigation__submenu-container) {
+		position: relative;
 	}
 }
 
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 7c1c631a436616..5633ee92db9655 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -25,154 +25,6 @@
 		margin: 0;
 		font-size: 15px;
 		padding: $grid-unit-15;
-
-		// This is the default font that is going to be used in the content of the areas (blocks).
-		font-family: $default-font;
-
-		// Customize/zero out the gap.
-		.wp-block-navigation__container {
-			// This unsets flex.
-			display: block;
-		}
-
-		// Increase specificity.
-		.wp-block-navigation-item {
-			display: block;
-			margin: $grid-unit-10 0;
-
-			// Show submenus on click.
-			> .wp-block-navigation__submenu-container {
-				// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
-				opacity: 1;
-				visibility: visible;
-				display: none;
-				right: auto;
-				box-sizing: border-box;
-				width: auto;
-				height: auto;
-				overflow: initial;
-				min-width: initial;
-			}
-
-			// Fix focus outlines.
-			&.is-selected > .wp-block-navigation-item__content,
-			&.is-selected:hover > .wp-block-navigation-item__content {
-				box-shadow: inset 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;
-			}
-
-			.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
-				padding: 0.5em 1em;
-				margin-right: 0;
-				border-radius: $radius-block-ui;
-
-				&:hover {
-					box-shadow: 0 0 0 $border-width $gray-300;
-				}
-			}
-
-			.wp-block-navigation-item__label,
-			.wp-block-navigation-link__placeholder-text {
-				padding: $grid-unit-05;
-				padding-left: $grid-unit-10;
-				line-height: 1;
-			}
-
-			.wp-block-navigation-item__label {
-				// Without this Links with submenus display a pointer.
-				cursor: text;
-			}
-		}
-
-		// Basic Page List support.
-		ul.wp-block-page-list {
-			// Make it inert.
-			background: $gray-100;
-			border-radius: $radius-block-ui;
-			pointer-events: none;
-			margin-right: 0;
-
-			.wp-block-navigation-item {
-				color: $gray-700;
-				margin-bottom: 6px;
-				border-radius: $radius-block-ui;
-				padding: $grid-unit-05;
-				padding-left: $grid-unit-10;
-			}
-		}
-
-		// Submenu icon indicator.
-		.wp-block-navigation__submenu-icon {
-			position: absolute;
-			top: 15px;
-			left: 0;
-			padding: 0;
-			pointer-events: none;
-
-			svg {
-				// Point rightwards.
-				transform: rotate(-90deg);
-				transition: transform 0.2s ease;
-				@include reduce-motion("transition");
-			}
-		}
-
-		// Point downwards when open.
-		.wp-block-navigation-submenu.is-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg,
-		.wp-block-navigation-submenu.has-child-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg {
-			transform: rotate(0deg);
-		}
-
-		// Override inherited values to optimize menu items for the screen context.
-		.wp-block-navigation-submenu.has-child,
-		.wp-block-navigation-item.has-child {
-			cursor: default;
-			border-radius: $radius-block-ui;
-		}
-
-		// Override for deeply nested submenus.
-		.has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
-			left: auto;
-		}
-
-		// When editing a submenu with children, highlight the parent
-		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-submenu.is-editing {
-			> .wp-block-navigation__submenu-container {
-				opacity: 1;
-				visibility: visible;
-				position: relative;
-				background: transparent;
-				top: auto;
-				left: auto;
-				padding-left: $grid-unit-20 + $grid-unit-05;
-				min-width: auto;
-				width: 100%;
-				border: none;
-				display: block;
-
-				&::before {
-					display: none;
-				}
-			}
-		}
-
-		// Appender styles
-		.block-list-appender {
-			// Make appender rows the same height as items and center the button vertically.
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			height: $grid-unit-50;
-			margin: $grid-unit-10 auto $grid-unit-10 0;
-		}
-
-		.block-editor-button-block-appender.block-list-appender__toggle {
-			margin-left: $grid-unit-30;
-		}
 	}
 
 	// Override behavior that hides the navigation block's appender when it's deselected.
diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
index ade3c7ab8bfa9a..326d2259025425 100644
--- a/packages/edit-navigation/src/store/resolvers.js
+++ b/packages/edit-navigation/src/store/resolvers.js
@@ -95,6 +95,7 @@ function createNavigationBlock( menuItems ) {
 		'core/navigation',
 		{
 			orientation: 'vertical',
+			expandEffect: 'accordion',
 		},
 		innerBlocks
 	);

From 565274032be8e2ee15a548fbddebbcb9f31f8912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 15:09:10 +0200
Subject: [PATCH 2/8] Make tree view an internal edit-only feature

---
 .../block-library/src/navigation/block.json   |  4 --
 packages/block-library/src/navigation/edit.js | 50 ++++++++-----------
 .../block-library/src/navigation/editor.scss  |  7 ++-
 .../block-library/src/navigation/style.scss   | 22 ++------
 packages/edit-navigation/src/filters/index.js |  2 +
 .../filters/with-navigation-menu-tree-view.js | 34 +++++++++++++
 .../edit-navigation/src/store/resolvers.js    |  1 -
 7 files changed, 65 insertions(+), 55 deletions(-)
 create mode 100644 packages/edit-navigation/src/filters/with-navigation-menu-tree-view.js

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 2bc5c2190097a5..273ac75dd65f3e 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -36,10 +36,6 @@
 			"type": "boolean",
 			"default": true
 		},
-		"expandEffect":{
-			"type": "string",
-			"default": "dropdown"
-		},
 		"openSubmenusOnClick":{
 			"type": "boolean",
 			"default": false
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index c0bf356358e821..1070586eacd94a 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -29,11 +29,12 @@ import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
-	SelectControl,
 	ToolbarGroup,
+	ToolbarButton,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { listView as treeIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -118,6 +119,9 @@ function Navigation( {
 
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
+	defaultToTreeView = false,
+	hasTreeViewSetting = true,
+
 	hasSubmenuIndicatorSetting = true,
 	hasItemJustificationControls = true,
 	hasColorSettings = true,
@@ -131,18 +135,20 @@ function Navigation( {
 		false
 	);
 
+	const [ isTreeView, setIsTreeView ] = useState( defaultToTreeView );
+
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const navRef = useRef();
 
+	const orientation = isTreeView ? 'vertical' : attributes.orientation;
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
-			'is-vertical': attributes.orientation === 'vertical',
-			'is-accordion':
-				attributes.orientation === 'vertical' &&
-				attributes.expandEffect === 'accordion',
+			'is-vertical': orientation === 'vertical',
+			'is-tree-view': isTreeView,
 			'is-responsive': attributes.isResponsive,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -184,14 +190,13 @@ function Navigation( {
 			allowedBlocks: ALLOWED_BLOCKS,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: DIRECT_INSERT,
-			orientation: attributes.orientation,
+			orientation,
 			renderAppender: CustomAppender || appender,
 
 			// Ensure block toolbar is not too far removed from item
 			// being edited when in vertical mode.
 			// see: https://github.com/WordPress/gutenberg/pull/34615.
-			__experimentalCaptureToolbars:
-				attributes.orientation !== 'vertical',
+			__experimentalCaptureToolbars: orientation !== 'vertical',
 			// Template lock set to false here so that the Nav
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.
@@ -254,7 +259,7 @@ function Navigation( {
 	}
 
 	const justifyAllowedControls =
-		attributes.orientation === 'vertical'
+		orientation === 'vertical'
 			? [ 'left', 'center', 'right' ]
 			: [ 'left', 'center', 'right', 'space-between' ];
 
@@ -274,6 +279,14 @@ function Navigation( {
 						} }
 					/>
 				) }
+				{ hasTreeViewSetting && (
+					<ToolbarButton
+						name="tree-view"
+						icon={ treeIcon }
+						title={ __( 'Tree view' ) }
+						onClick={ () => setIsTreeView( ! isTreeView ) }
+					/>
+				) }
 				<ToolbarGroup>{ navigatorToolbarButton }</ToolbarGroup>
 			</BlockControls>
 			{ navigatorModal }
@@ -309,25 +322,6 @@ function Navigation( {
 								label={ __( 'Show submenu indicator icons' ) }
 							/>
 						) }
-						{ attributes.orientation === 'vertical' && (
-							<SelectControl
-								label={ __( 'Expand submenus as' ) }
-								value={ attributes.expandEffect }
-								options={ [
-									{
-										value: 'dropdown',
-										label: __( 'Dropdown' ),
-									},
-									{
-										value: 'accordion',
-										label: __( 'Accordion' ),
-									},
-								] }
-								onChange={ ( expandEffect ) => {
-									setAttributes( { expandEffect } );
-								} }
-							/>
-						) }
 					</PanelBody>
 				) }
 				{ hasColorSettings && (
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 96619486b06767..88c42bd6612c28 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -497,7 +497,7 @@ body.editor-styles-wrapper
 }
 
 // Styles for dropdown style menu.
-.wp-block-navigation:where(:not(.is-accordion)) {
+.wp-block-navigation:where(:not(.is-tree-view)) {
 	// Styles for submenu flyout.
 	.has-child {
 		&.is-selected,
@@ -520,8 +520,8 @@ body.editor-styles-wrapper
 	}
 }
 
-// Styles for accordion style menu.
-.wp-block-navigation.is-accordion {
+// Styles for tree-view style menu.
+.wp-block-navigation.is-tree-view {
 	padding: 0;
 
 	// Increase specificity.
@@ -571,7 +571,6 @@ body.editor-styles-wrapper
 		}
 	}
 
-
 	// Basic Page List support.
 	ul.wp-block-page-list {
 		// Make it inert.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index c834580ceb3626..a6f2cd7b8dc6ea 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -180,7 +180,7 @@
 }
 
 // Styles for dropdown style menu.
-.wp-block-navigation:where(:not(.is-accordion)) .has-child {
+.wp-block-navigation:where(:not(.is-tree-view)) .has-child {
 	:where(.wp-block-navigation__submenu-container) {
 		// Submenu indentation when there's no background.
 		left: -1em;
@@ -188,7 +188,7 @@
 
 		// Indentation for all submenus.
 		// Nested submenus sit to the left on large breakpoints.
-		// On smaller breakpoints, they open vertically, accordion-style.
+		// On smaller breakpoints, they open vertically, tree-view-style.
 		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: 100%;
@@ -234,23 +234,9 @@
 	}
 }
 
-// Styles for submenu accordion.
-// These are separated out with reduced specificity to allow better inheritance from Global Styles.
-.wp-block-navigation:where(.is-accordion) .has-child {
-	display: block;
-	margin: $grid-unit-10 0;
-
-	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-	// That way if padding is set in theme.json, it still wins.
-	// https://css-tricks.com/almanac/selectors/w/where/
-	:where(.wp-block-navigation__submenu-container) {
-		position: relative;
-	}
-}
-
 // Submenu indentation when there's a background.
-.wp-block-navigation.has-background
-.has-child
+.wp-block-navigation.has-background,
+.has-child,
 .wp-block-navigation__submenu-container {
 	left: 0;
 	top: 100%;
diff --git a/packages/edit-navigation/src/filters/index.js b/packages/edit-navigation/src/filters/index.js
index 17074eb87c6603..27f054babf5091 100644
--- a/packages/edit-navigation/src/filters/index.js
+++ b/packages/edit-navigation/src/filters/index.js
@@ -7,6 +7,7 @@ import addMenuNameEditor from './add-menu-name-editor';
 import disableInsertingNonNavigationBlocks from './disable-inserting-non-navigation-blocks';
 import removeEditUnsupportedFeatures from './remove-edit-unsupported-features';
 import removeSettingsUnsupportedFeatures from './remove-settings-unsupported-features';
+import withNavigationMenuTreeView from './with-navigation-menu-tree-view';
 
 export const addFilters = (
 	shouldAddDisableInsertingNonNavigationBlocksFilter
@@ -14,6 +15,7 @@ export const addFilters = (
 	addNavigationEditorCustomAppender();
 	addNavigationEditorPlaceholder();
 	addMenuNameEditor();
+	withNavigationMenuTreeView();
 	if ( shouldAddDisableInsertingNonNavigationBlocksFilter ) {
 		disableInsertingNonNavigationBlocks();
 	}
diff --git a/packages/edit-navigation/src/filters/with-navigation-menu-tree-view.js b/packages/edit-navigation/src/filters/with-navigation-menu-tree-view.js
new file mode 100644
index 00000000000000..8fef5145d1d380
--- /dev/null
+++ b/packages/edit-navigation/src/filters/with-navigation-menu-tree-view.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+function EnhancedNavigationBlock( { blockEdit: BlockEdit, ...props } ) {
+	return (
+		<BlockEdit
+			{ ...props }
+			defaultToTreeView={ true }
+			hasTreeViewSetting={ false }
+		/>
+	);
+}
+
+const withNavigationMenuTreeView = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.name !== 'core/navigation' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		// Use a separate component so that `useSelect` only run on the navigation block.
+		return <EnhancedNavigationBlock blockEdit={ BlockEdit } { ...props } />;
+	},
+	'withNavigationMenuTreeView'
+);
+
+export default () =>
+	addFilter(
+		'editor.BlockEdit',
+		'core/edit-navigation/with-navigation-editor-tree-view',
+		withNavigationMenuTreeView
+	);
diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
index 326d2259025425..ade3c7ab8bfa9a 100644
--- a/packages/edit-navigation/src/store/resolvers.js
+++ b/packages/edit-navigation/src/store/resolvers.js
@@ -95,7 +95,6 @@ function createNavigationBlock( menuItems ) {
 		'core/navigation',
 		{
 			orientation: 'vertical',
-			expandEffect: 'accordion',
 		},
 		innerBlocks
 	);

From fdff9ca945bfe4e3467c3a36212c4ab0fbf450bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 15:18:00 +0200
Subject: [PATCH 3/8] Only show submenu preview on hover

---
 .../block-library/src/navigation/editor.scss  | 45 +++++++++----------
 .../block-library/src/navigation/style.scss   |  4 +-
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 88c42bd6612c28..bae39862c35bde 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -41,6 +41,27 @@
 	background-color: inherit;
 }
 
+// Only show the flyout on hover if the parent menu item is selected.
+.wp-block-navigation:not(.is-selected):not(.has-child-selected):where(:not(.is-tree-view))
+.has-child:hover {
+	> .wp-block-navigation__submenu-container {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+// Styles for submenu flyout.
+.wp-block-navigation:where(:not(.is-tree-view))
+.has-child {
+	&.is-selected,
+	&.has-child-selected {
+		> .wp-block-navigation__submenu-container {
+			display: flex;
+			opacity: 1;
+			visibility: visible;
+		}
+	}
+}
 
 // Show a submenu when generally dragging (is-dragging-components-draggable) if that
 // submenu has children (has-child) and is being dragged within (is-dragging-within).
@@ -496,30 +517,6 @@ body.editor-styles-wrapper
 	}
 }
 
-// Styles for dropdown style menu.
-.wp-block-navigation:where(:not(.is-tree-view)) {
-	// Styles for submenu flyout.
-	.has-child {
-		&.is-selected,
-		&.has-child-selected {
-			> .wp-block-navigation__submenu-container {
-				display: flex;
-				opacity: 1;
-				visibility: visible;
-			}
-		}
-	}
-
-	// Only show the flyout on hover if the parent menu item is selected.
-	.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-	.has-child:hover {
-		> .wp-block-navigation__submenu-container {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
-}
-
 // Styles for tree-view style menu.
 .wp-block-navigation.is-tree-view {
 	padding: 0;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index a6f2cd7b8dc6ea..c7b84d351aa9d2 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -235,8 +235,8 @@
 }
 
 // Submenu indentation when there's a background.
-.wp-block-navigation.has-background,
-.has-child,
+.wp-block-navigation.has-background
+.has-child
 .wp-block-navigation__submenu-container {
 	left: 0;
 	top: 100%;

From 5ece076826e9e7c77e9019f2bfdd48950a1a4b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 15:58:44 +0200
Subject: [PATCH 4/8] Add Tree mode

---
 packages/block-library/src/navigation/editor.scss | 14 +++++++++++---
 packages/block-library/src/navigation/style.scss  |  8 +++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index bae39862c35bde..c4a495f2a5b75e 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -524,7 +524,10 @@ body.editor-styles-wrapper
 	// Increase specificity.
 	.wp-block-navigation-item {
 		display: block;
-		margin: $grid-unit-10 0;
+
+		&.wp-block {
+			margin: #{$grid-unit-05 + 1px} $grid-unit-05 $grid-unit-05 $grid-unit-05;
+		}
 
 		// Show submenus on click.
 		> .wp-block-navigation__submenu-container {
@@ -547,21 +550,25 @@ body.editor-styles-wrapper
 		}
 
 		.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
+			position: relative;
 			padding: 0.5em 1em;
 			margin-right: 0;
 			border-radius: $radius-block-ui;
 
 			&:hover {
-				box-shadow: 0 0 0 $border-width $gray-300;
+				box-shadow: 0 0 0 $border-width $gray-600;
 			}
 		}
 
+		.wp-block-navigation-item__label,
+		.wp-block-navigation-item__placeholder-text,
 		.wp-block-navigation-link__label,
 		.wp-block-navigation-link__placeholder-text {
 			padding: $grid-unit-05;
 			padding-left: $grid-unit-10;
 		}
 
+		.wp-block-navigation-item__label,
 		.wp-block-navigation-link__label {
 			// Without this Links with submenus display a pointer.
 			cursor: text;
@@ -588,7 +595,8 @@ body.editor-styles-wrapper
 	// Submenu icon indicator.
 	.wp-block-navigation__submenu-icon {
 		position: absolute;
-		top: 15px;
+		top: 50%;
+		margin-top: -7px;
 		left: 0;
 		padding: 0;
 		pointer-events: none;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index c7b84d351aa9d2..89e5666caf5640 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -255,9 +255,11 @@
  */
 
 // Menu items with no background.
-.wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
-	gap: 0.5em 2em;
+.wp-block-navigation:where(:not(.is-tree-view)) {
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0.5em 2em;
+	}
 }
 
 // Menu items with background.

From 7e9413fe10abb688b0e5a22d4a995fd51801f4bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 16:17:10 +0200
Subject: [PATCH 5/8] Remove badly rebased CSS rules

---
 .../block-library/src/navigation/style.scss   | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 89e5666caf5640..9ce4c9c8f64749 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -146,37 +146,6 @@
 			margin: 0;
 		}
 	}
-
-	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
-	// We will need to replace focus-within with a JS solution for IE keyboard support.
-
-	// Custom menu items.
-	// Show submenus on hover unless they open on click.
-	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
-		visibility: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
-
-	// Keep submenus open when focus is within.
-	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
-		visibility: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
-
-	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
-		visibility: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
 }
 
 // Styles for dropdown style menu.

From e6c175af96e169f2ccc968ec2e4e8c69cdb144d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 16:18:37 +0200
Subject: [PATCH 6/8] Update wording of comments

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

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 9ce4c9c8f64749..e0e9db3ef16f57 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -148,7 +148,7 @@
 	}
 }
 
-// Styles for dropdown style menu.
+// Styles for when tree view isn't active.
 .wp-block-navigation:where(:not(.is-tree-view)) .has-child {
 	:where(.wp-block-navigation__submenu-container) {
 		// Submenu indentation when there's no background.
@@ -157,7 +157,7 @@
 
 		// Indentation for all submenus.
 		// Nested submenus sit to the left on large breakpoints.
-		// On smaller breakpoints, they open vertically, tree-view-style.
+		// On smaller breakpoints, they open vertically, accordion-style.
 		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: 100%;

From 5a0c7477faee4c29ed5917d7a6e22ec2753c2c99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 16:19:17 +0200
Subject: [PATCH 7/8] Lint

---
 packages/block-library/src/navigation/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 1070586eacd94a..909ffc37d9c5c3 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -187,10 +187,10 @@ function Navigation( {
 			className: 'wp-block-navigation__container',
 		},
 		{
+			orientation,
 			allowedBlocks: ALLOWED_BLOCKS,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: DIRECT_INSERT,
-			orientation,
 			renderAppender: CustomAppender || appender,
 
 			// Ensure block toolbar is not too far removed from item

From cd608e13aef56da8f029092065fd09843551e475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Fri, 8 Oct 2021 16:21:50 +0200
Subject: [PATCH 8/8] Restore removed CSS rule

---
 packages/block-library/src/navigation/style.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index e0e9db3ef16f57..858e81ffcda99a 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -201,6 +201,15 @@
 		height: auto;
 		min-width: 200px;
 	}
+
+	// Show submenus on click.
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
+	}
 }
 
 // Submenu indentation when there's a background.