From ead40d4c22883b3eac614a99017274de1a7f8f02 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 25 Aug 2021 13:46:12 +0800
Subject: [PATCH 01/13] Include submenu in navigation editor inserter blocks

---
 .../filters/disable-inserting-non-navigation-blocks.js    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js b/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
index c9a34fe168b0f1..f8426c7dd9137d 100644
--- a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
+++ b/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
@@ -8,7 +8,13 @@ import { addFilter } from '@wordpress/hooks';
 import { set } from 'lodash';
 
 function disableInsertingNonNavigationBlocks( settings, name ) {
-	if ( ! [ 'core/navigation', 'core/navigation-link' ].includes( name ) ) {
+	if (
+		! [
+			'core/navigation',
+			'core/navigation-link',
+			'core/navigation-submenu',
+		].includes( name )
+	) {
 		set( settings, [ 'supports', 'inserter' ], false );
 	}
 	return settings;

From 83eefbd20ed79b3b0ed8387993211a758d1edf5c Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 25 Aug 2021 13:51:14 +0800
Subject: [PATCH 02/13] Create submenu blocks when serializing from menu items

---
 .../src/store/menu-items-to-blocks.js                | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/edit-navigation/src/store/menu-items-to-blocks.js b/packages/edit-navigation/src/store/menu-items-to-blocks.js
index 024c267d67cefc..88dd0d768f54a6 100644
--- a/packages/edit-navigation/src/store/menu-items-to-blocks.js
+++ b/packages/edit-navigation/src/store/menu-items-to-blocks.js
@@ -65,12 +65,14 @@ function mapMenuItemsToBlocks( menuItems ) {
 			...nestedMapping,
 		};
 
+		// Create a submenu block when there are inner blocks, or just a link
+		// for a standalone item.
+		const itemBlockName = nestedBlocks?.length
+			? 'core/navigation-submenu'
+			: 'core/navigation-link';
+
 		// Create block with nested "innerBlocks".
-		const block = createBlock(
-			'core/navigation-link',
-			attributes,
-			nestedBlocks
-		);
+		const block = createBlock( itemBlockName, attributes, nestedBlocks );
 
 		// Create mapping for menuItem -> block
 		mapping[ menuItem.id ] = block.clientId;

From ab67b89a38d26ab21dddd27c9cfc569a6a388c85 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 25 Aug 2021 14:34:55 +0800
Subject: [PATCH 03/13] Serialize submenu blocks back to menu items

---
 packages/edit-navigation/src/store/utils.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/edit-navigation/src/store/utils.js b/packages/edit-navigation/src/store/utils.js
index 13da7255ad626b..b26b41dc4e830e 100644
--- a/packages/edit-navigation/src/store/utils.js
+++ b/packages/edit-navigation/src/store/utils.js
@@ -156,7 +156,10 @@ export function computeCustomizedAttribute(
 
 		let attributes;
 
-		if ( block.name === 'core/navigation-link' ) {
+		if (
+			block.name === 'core/navigation-link' ||
+			block.name === 'core/navigation-submenu'
+		) {
 			attributes = blockAttributesToMenuItem( block.attributes );
 		} else {
 			attributes = {

From e7643859ecc4923681ed671a773582b59ec7e93e Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 25 Aug 2021 14:53:51 +0800
Subject: [PATCH 04/13] Update navigation editor styles

---
 .../src/components/editor/style.scss          | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 5c5d813b02d38b..42691aeabf14e0 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -30,8 +30,10 @@
 		font-family: $default-font;
 
 		// Increase specificity.
-		.wp-block-navigation-item {
+		.wp-block-navigation-item,
+		.wp-block-navigation-submenu {
 			display: block;
+			margin: $grid-unit-05 0 $grid-unit-05 0;
 
 			// Show submenus on click.
 			> .wp-block-navigation__submenu-container {
@@ -55,7 +57,8 @@
 
 			// Menu items.
 			// This needs high specificity to override inherited values.
-			&.wp-block-navigation-item.wp-block-navigation-item {
+			&.wp-block-navigation-item.wp-block-navigation-item,
+			&.wp-block-navigation-submenu .wp-block-navigation-submenu {
 				margin-right: 0;
 			}
 
@@ -103,27 +106,27 @@
 		// Submenu icon indicator.
 		.wp-block-navigation__submenu-icon {
 			position: absolute;
-			top: 6px;
+			top: 15px;
 			left: 0;
-			padding: 6px;
+			padding: 0px;
 			pointer-events: none;
 
 			svg {
 				// Point rightwards.
 				transform: rotate(-90deg);
-
 				transition: transform 0.2s ease;
 				@include reduce-motion("transition");
 			}
 		}
 
 		// Point downwards when open.
-		.is-selected.has-child > .wp-block-navigation__submenu-icon svg,
-		.has-child-selected.has-child > .wp-block-navigation__submenu-icon svg {
+		.is-selected.has-child .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg,
+		.has-child-selected.has-child .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;
@@ -137,7 +140,8 @@
 
 		// When editing a link with children, highlight the parent
 		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-item.has-child.is-editing {
+		.wp-block-navigation-item.has-child.is-editing,
+		.wp-block-navigation-submenu.has-child.is-editing {
 			> .wp-block-navigation__container,
 			> .wp-block-navigation__submenu-container {
 				opacity: 1;
@@ -158,9 +162,13 @@
 			}
 		}
 
-		// Add buttons
+		// Appender styles
+		.block-list-appender {
+			margin: 0;
+		}
+
 		.block-editor-button-block-appender.block-list-appender__toggle {
-			margin: 0 0 0 $grid-unit-20;
+			margin: $grid-unit-05 0 $grid-unit-05 $grid-unit-30;
 			padding: 0;
 		}
 	}

From c9ac983c5104fed2d2684856b3e9a2bc5e588487 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 13:51:32 +0800
Subject: [PATCH 05/13] Fix submenu arrow rotation

---
 packages/edit-navigation/src/components/editor/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 42691aeabf14e0..e511c9de09d426 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -108,7 +108,7 @@
 			position: absolute;
 			top: 15px;
 			left: 0;
-			padding: 0px;
+			padding: 0;
 			pointer-events: none;
 
 			svg {
@@ -120,8 +120,8 @@
 		}
 
 		// Point downwards when open.
-		.is-selected.has-child .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg,
-		.has-child-selected.has-child .wp-block-navigation-item__content .wp-block-navigation__submenu-icon svg {
+		.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);
 		}
 

From 54f6ddf2124f1d40573f2b59f8985647162479cd Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 13:51:57 +0800
Subject: [PATCH 06/13] Fix appender not showing when creating a submenu

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

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index e511c9de09d426..4f933a0bf824f9 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -138,10 +138,9 @@
 			left: auto;
 		}
 
-		// When editing a link with children, highlight the parent
+		// When editing a submenu with children, highlight the parent
 		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-item.has-child.is-editing,
-		.wp-block-navigation-submenu.has-child.is-editing {
+		.wp-block-navigation-submenu.is-editing {
 			> .wp-block-navigation__container,
 			> .wp-block-navigation__submenu-container {
 				opacity: 1;

From 9e88f0f61e2c3fd131ee2436a5ea68cc8eddc9cd Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 14:03:23 +0800
Subject: [PATCH 07/13] Adjust vertical spacing

---
 .../src/components/editor/style.scss                | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 4f933a0bf824f9..fab463421aef30 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -33,7 +33,7 @@
 		.wp-block-navigation-item,
 		.wp-block-navigation-submenu {
 			display: block;
-			margin: $grid-unit-05 0 $grid-unit-05 0;
+			margin: $grid-unit-10 0;
 
 			// Show submenus on click.
 			> .wp-block-navigation__submenu-container {
@@ -133,7 +133,6 @@
 		}
 
 		// Override for deeply nested submenus.
-		.has-child .wp-block-navigation__container .wp-block-navigation__container,
 		.has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
 			left: auto;
 		}
@@ -141,7 +140,6 @@
 		// 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__container,
 			> .wp-block-navigation__submenu-container {
 				opacity: 1;
 				visibility: visible;
@@ -163,11 +161,16 @@
 
 		// Appender styles
 		.block-list-appender {
-			margin: 0;
+			// 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: $grid-unit-05 0 $grid-unit-05 $grid-unit-30;
+			margin: 0 0 0 $grid-unit-30;
 			padding: 0;
 		}
 	}

From 6670a4de4fe19367bf29530a6c030eb9c08b91ac Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 14:07:07 +0800
Subject: [PATCH 08/13] Adjust horizontal spacing

---
 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 fab463421aef30..fdb825a44e8380 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -147,7 +147,7 @@
 				background: transparent;
 				top: auto;
 				left: auto;
-				padding-left: $grid-unit-15;
+				padding-left: $grid-unit-20;
 				min-width: auto;
 				width: 100%;
 				border: none;

From 782df2c2dbb0b1a8dda680e6ac355e58f73f7fda Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 14:11:49 +0800
Subject: [PATCH 09/13] Adjust indentation some more

---
 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 fdb825a44e8380..4d829acd0bf2ef 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -147,7 +147,7 @@
 				background: transparent;
 				top: auto;
 				left: auto;
-				padding-left: $grid-unit-20;
+				padding-left: $grid-unit-20 + $grid-unit-05;
 				min-width: auto;
 				width: 100%;
 				border: none;

From b43332d43fb6059bd420fbc90ece231414c50c75 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 27 Aug 2021 14:16:39 +0800
Subject: [PATCH 10/13] Remove margin rule that introduces inconsistent spacing

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

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 4d829acd0bf2ef..9fe434ba9fe992 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -64,7 +64,6 @@
 
 			.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
 				padding: 0.5em 1em;
-				margin-bottom: 6px;
 				margin-right: 0;
 				border-radius: $radius-block-ui;
 

From 2856e6fd1cfb7652d143685405d8f4d5bbbb6ce6 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 8 Sep 2021 11:34:36 +0800
Subject: [PATCH 11/13] Update block types in unit test

---
 .../edit-navigation/src/store/test/menu-items-to-blocks.js  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-navigation/src/store/test/menu-items-to-blocks.js b/packages/edit-navigation/src/store/test/menu-items-to-blocks.js
index 599b30e679ff55..f4a40f0dae27e1 100644
--- a/packages/edit-navigation/src/store/test/menu-items-to-blocks.js
+++ b/packages/edit-navigation/src/store/test/menu-items-to-blocks.js
@@ -186,7 +186,7 @@ describe( 'converting menu items to blocks', () => {
 
 		expect( actual ).toEqual( [
 			expect.objectContaining( {
-				name: 'core/navigation-link',
+				name: 'core/navigation-submenu',
 				attributes: expect.objectContaining( {
 					label: 'Top Level',
 				} ),
@@ -199,13 +199,13 @@ describe( 'converting menu items to blocks', () => {
 						innerBlocks: [],
 					} ),
 					expect.objectContaining( {
-						name: 'core/navigation-link',
+						name: 'core/navigation-submenu',
 						attributes: expect.objectContaining( {
 							label: 'Child 2',
 						} ),
 						innerBlocks: [
 							expect.objectContaining( {
-								name: 'core/navigation-link',
+								name: 'core/navigation-submenu',
 								attributes: expect.objectContaining( {
 									label: 'Sub Child',
 								} ),

From 5610a85f04cb5ad3a609682313835adb161fd061 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 8 Sep 2021 12:41:39 +0800
Subject: [PATCH 12/13] Update e2e test

---
 .../navigation-editor.test.js.snap            | 36 +++++++++----------
 .../experiments/navigation-editor.test.js     |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
index 82c208896c7dca..15a87d5fd1c4d6 100644
--- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
+++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
@@ -12,34 +12,34 @@ exports[`Navigation editor displays the first menu from the REST response when a
 "<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
 <!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
 
-<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
 <!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"page\\",\\"id\\":51,\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
 
-<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
 <!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"page\\",\\"id\\":27,\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
 
 <!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"page\\",\\"id\\":43,\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
 
-<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
 <!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"category\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"id\\":16,\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
 
-<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelItem\\":true} -->
 <!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
 <!-- /wp:navigation -->"
 `;
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index 972ba27eb834b3..cc4514e4a85c61 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -324,7 +324,7 @@ describe( 'Navigation editor', () => {
 
 		// Select a link block with nested links in a submenu.
 		const parentLinkXPath =
-			'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
+			'//div[@aria-label="Block: Submenu" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
 		await linkBlock.click();
 

From df75aefadb07daa3a5c7a2d014686af60a3ce65d Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 10 Sep 2021 15:39:19 +0800
Subject: [PATCH 13/13] Address feedback

---
 .../specs/experiments/navigation-editor.test.js        |  2 +-
 .../edit-navigation/src/components/editor/style.scss   | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index cc4514e4a85c61..c2faffdf6e61a5 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -322,7 +322,7 @@ describe( 'Navigation editor', () => {
 		] );
 		await visitNavigationEditor();
 
-		// Select a link block with nested links in a submenu.
+		// Select a submenu block with nested links in a submenu.
 		const parentLinkXPath =
 			'//div[@aria-label="Block: Submenu" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index 9fe434ba9fe992..fa1f3674ab53d4 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -30,8 +30,7 @@
 		font-family: $default-font;
 
 		// Increase specificity.
-		.wp-block-navigation-item,
-		.wp-block-navigation-submenu {
+		.wp-block-navigation-item {
 			display: block;
 			margin: $grid-unit-10 0;
 
@@ -55,13 +54,6 @@
 				display: none;
 			}
 
-			// Menu items.
-			// This needs high specificity to override inherited values.
-			&.wp-block-navigation-item.wp-block-navigation-item,
-			&.wp-block-navigation-submenu .wp-block-navigation-submenu {
-				margin-right: 0;
-			}
-
 			.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
 				padding: 0.5em 1em;
 				margin-right: 0;