From eeb888f38f0c6ab6df9a94bf9a6accaa283690a7 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 7 Apr 2021 12:49:50 +1000
Subject: [PATCH 1/6] Change markup on front end

---
 packages/block-library/src/navigation/edit.js   | 6 ++----
 packages/block-library/src/navigation/index.php | 9 +++++++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d4b6cd57b497b..056a070419d90 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -167,15 +167,13 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<nav { ...blockProps }>
+			<nav { ...innerBlocksProps }>
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
-				>
-					<ul { ...innerBlocksProps }></ul>
-				</ResponsiveWrapper>
+				></ResponsiveWrapper>
 			</nav>
 		</>
 	);
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index bbe7ea6b586a6..91c8c4b19d917 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -174,7 +174,16 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$inner_blocks_html = '';
+	$is_list_open = false;
 	foreach ( $block->inner_blocks as $inner_block ) {
+		if ($inner_block->name === "core/navigation-link" && $is_list_open === false) {
+			$is_list_open = true;
+			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
+		}
+		if ($inner_block->name !== "core/navigation-link" && $inner_block->name !== "core/spacer" && $is_list_open === true) {
+			$is_list_open = false;
+			$inner_blocks_html .= '</ul>';
+		}
 		$inner_blocks_html .= $inner_block->render();
 	}
 

From 96613753f217afe086078b652c7b8f359eadc05c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 28 May 2021 16:41:42 +1000
Subject: [PATCH 2/6] Fix rendering issue with responsive wrapper

---
 packages/block-library/src/navigation/edit.js   | 6 ++++--
 packages/block-library/src/navigation/index.php | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 056a070419d90..0e0e0ab021ce5 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -167,13 +167,15 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<nav { ...innerBlocksProps }>
+			<nav { ...blockProps }>
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
-				></ResponsiveWrapper>
+				>
+					<div { ...innerBlocksProps }></div>
+				</ResponsiveWrapper>
 			</nav>
 		</>
 	);
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 91c8c4b19d917..7271e243dad4b 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -202,7 +202,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// return early if they don't.
 	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
 		return sprintf(
-			'<nav %1$s><ul class="wp-block-navigation__container">%2$s</ul></nav>',
+			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
@@ -215,7 +215,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
-							<ul class="wp-block-navigation__container">%2$s</ul>
+							%2$s
 						</div>
 					</div>
 				</div>

From 2ecb7a6b44bba7e8e884a5b56b13e8a0e4bb0555 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 24 Jun 2021 14:30:49 +1000
Subject: [PATCH 3/6] Use divs in Nav link; remove Spacer from lists

---
 packages/block-library/src/navigation-link/edit.js |  9 ++++-----
 packages/block-library/src/navigation/index.php    |  2 +-
 packages/block-library/src/navigation/style.scss   | 11 +++++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 641d95ec5c2e0..f2ff2a3d861e9 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -48,7 +48,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/spacer' ];
+const ALLOWED_BLOCKS = [ 'core/navigation-link' ];
 
 const MAX_NESTING = 5;
 
@@ -418,7 +418,6 @@ export default function NavigationLinkEdit( {
 				hasDescendants
 					? InnerBlocks.DefaultAppender
 					: false,
-			__experimentalAppenderTagName: 'li',
 		}
 	);
 
@@ -507,7 +506,7 @@ export default function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
@@ -611,8 +610,8 @@ export default function NavigationLinkEdit( {
 						</span>
 					) }
 				</a>
-				<ul { ...innerBlocksProps } />
-			</li>
+				<div { ...innerBlocksProps } />
+			</div>
 		</Fragment>
 	);
 }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 7271e243dad4b..27e3e441c2e93 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -180,7 +180,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			$is_list_open = true;
 			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
 		}
-		if ($inner_block->name !== "core/navigation-link" && $inner_block->name !== "core/spacer" && $is_list_open === true) {
+		if ($inner_block->name !== "core/navigation-link" && $is_list_open === true) {
 			$is_list_open = false;
 			$inner_blocks_html .= '</ul>';
 		}
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 4a5ae3b06c55c..60b939799bb82 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -6,6 +6,17 @@
 .wp-block-navigation {
 	position: relative;
 
+	// Horizontal layout
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	// Vertical layout
+	&.is-vertical {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
 	// Normalize list styles.
 	ul,
 	ul li {

From 221bdca9ba41e6ed02fc4e29d30d327fca6ca182 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 24 Jun 2021 14:42:40 +1000
Subject: [PATCH 4/6] lint php

---
 packages/block-library/src/navigation/index.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 27e3e441c2e93..b7be8214580df 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -174,14 +174,14 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$inner_blocks_html = '';
-	$is_list_open = false;
+	$is_list_open      = false;
 	foreach ( $block->inner_blocks as $inner_block ) {
-		if ($inner_block->name === "core/navigation-link" && $is_list_open === false) {
-			$is_list_open = true;
+		if ( 'core/navigation-link' === $inner_block->name && false === $is_list_open ) {
+			$is_list_open       = true;
 			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
 		}
-		if ($inner_block->name !== "core/navigation-link" && $is_list_open === true) {
-			$is_list_open = false;
+		if ( 'core/navigation-link' !== $inner_block->name && true === $is_list_open ) {
+			$is_list_open       = false;
 			$inner_blocks_html .= '</ul>';
 		}
 		$inner_blocks_html .= $inner_block->render();

From 877162b4d09f23aeeec679f7ed24da5373fe66f0 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 29 Jun 2021 09:41:44 +1000
Subject: [PATCH 5/6] Update e2e test selectors

---
 .../e2e-tests/specs/experiments/blocks/navigation.test.js     | 2 +-
 .../e2e-tests/specs/experiments/navigation-editor.test.js     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
index ed410616f9e07..8604ce6aeee81 100644
--- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -348,7 +348,7 @@ describe( 'Navigation', () => {
 			// Scope element selector to the Editor's "Content" region as otherwise it picks up on
 			// block previews.
 			const navBlockItemsLength = await page.$$eval(
-				'[aria-label="Editor content"][role="region"] li[aria-label="Block: Custom Link"]',
+				'[aria-label="Editor content"][role="region"] div[aria-label="Block: Custom Link"]',
 				( els ) => els.length
 			);
 
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index 301bbae01c705..fa8bdf21d852a 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -313,7 +313,7 @@ describe( 'Navigation editor', () => {
 
 		// Select a link block with nested links in a submenu.
 		const parentLinkXPath =
-			'//li[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
+			'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
 		await linkBlock.click();
 
@@ -322,7 +322,7 @@ describe( 'Navigation editor', () => {
 		// Submenus are hidden using `visibility: hidden` and shown using
 		// `visibility: visible` so the visible/hidden options must be used
 		// when selecting the elements.
-		const submenuLinkXPath = `${ parentLinkXPath }//li[@aria-label="Block: Custom Link"]`;
+		const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`;
 		const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, {
 			visible: true,
 		} );

From 3e7d0fbcb89d848504b046b577eb2dab599267ae Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 29 Jun 2021 10:23:04 +1000
Subject: [PATCH 6/6] Update Home Link semantics

---
 packages/block-library/src/home-link/edit.js    | 4 ++--
 packages/block-library/src/navigation/index.php | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index 85571c518c862..464ccf18d144e 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -56,7 +56,7 @@ export default function HomeEdit( {
 
 	return (
 		<>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				<a
 					className="wp-block-home-link__content"
 					href={ homeUrl }
@@ -80,7 +80,7 @@ export default function HomeEdit( {
 						] }
 					/>
 				</a>
-			</li>
+			</div>
 		</>
 	);
 }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index b7be8214580df..ee652390fc745 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -176,11 +176,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$inner_blocks_html = '';
 	$is_list_open      = false;
 	foreach ( $block->inner_blocks as $inner_block ) {
-		if ( 'core/navigation-link' === $inner_block->name && false === $is_list_open ) {
+		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name ) && false === $is_list_open ) {
 			$is_list_open       = true;
 			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
 		}
-		if ( 'core/navigation-link' !== $inner_block->name && true === $is_list_open ) {
+		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && true === $is_list_open ) {
 			$is_list_open       = false;
 			$inner_blocks_html .= '</ul>';
 		}