From 7f8c1059a912d75c3c58eb5049ee8ccd33fa2ce5 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente.canales@automattic.com>
Date: Tue, 12 Oct 2021 16:39:45 -0300
Subject: [PATCH 01/16] Enable always-on burger menu in the editor

---
 .../block-library/src/navigation/block.json   | 17 +++++++++--
 packages/block-library/src/navigation/edit.js | 12 ++++++++
 .../block-library/src/navigation/editor.scss  |  6 ----
 .../src/navigation/responsive-wrapper.js      |  8 +++++-
 .../block-library/src/navigation/style.scss   | 28 +++++++++++--------
 5 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 273ac75dd65f3e..c50e34f167b6bc 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -4,7 +4,11 @@
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [ "menu", "navigation", "links" ],
+	"keywords": [
+		"menu",
+		"navigation",
+		"links"
+	],
 	"textdomain": "default",
 	"attributes": {
 		"orientation": {
@@ -36,7 +40,7 @@
 			"type": "boolean",
 			"default": true
 		},
-		"openSubmenusOnClick":{
+		"openSubmenusOnClick": {
 			"type": "boolean",
 			"default": false
 		},
@@ -44,6 +48,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"isHiddenByDefault": {
+			"type": "boolean",
+			"default": false
+		},
 		"__unstableLocation": {
 			"type": "string"
 		},
@@ -77,7 +85,10 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [ "wide", "full" ],
+		"align": [
+			"wide",
+			"full"
+		],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d5ef92a4c894f2..8acb240ae9c860 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -281,6 +281,17 @@ function Navigation( {
 							} }
 							label={ __( 'Enable responsive menu' ) }
 						/>
+						<ToggleControl
+							checked={ attributes.isHiddenByDefault }
+							onChange={ ( value ) => {
+								setAttributes( {
+									isHiddenByDefault: value,
+								} );
+							} }
+							label={ __(
+								'Always hide Navigation Menu behind toggle'
+							) }
+						/>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
@@ -353,6 +364,7 @@ function Navigation( {
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
+					isHiddenByDefault={ attributes.isHiddenByDefault }
 				>
 					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 07afc4ceb4394e..5906cbe7993226 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -397,12 +397,6 @@ $color-control-label-height: 20px;
 		}
 	}
 }
-.components-button.wp-block-navigation__responsive-container-open {
-	@include break-small {
-		display: none;
-	}
-}
-
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
diff --git a/packages/block-library/src/navigation/responsive-wrapper.js b/packages/block-library/src/navigation/responsive-wrapper.js
index b29cdbdef7c902..1786ba974b75f8 100644
--- a/packages/block-library/src/navigation/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/responsive-wrapper.js
@@ -17,6 +17,7 @@ export default function ResponsiveWrapper( {
 	isOpen,
 	isResponsive,
 	onToggle,
+	isHiddenByDefault,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -25,8 +26,13 @@ export default function ResponsiveWrapper( {
 		'wp-block-navigation__responsive-container',
 		{
 			'is-menu-open': isOpen,
+			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+	const openButtonClasses = classnames(
+		'wp-block-navigation__responsive-container-open',
+		{ 'always-on': isHiddenByDefault }
+	);
 
 	const modalId = `${ id }-modal`;
 
@@ -37,7 +43,7 @@ export default function ResponsiveWrapper( {
 					aria-haspopup="true"
 					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
-					className="wp-block-navigation__responsive-container-open"
+					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
 					<SVG
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index bcd241248cdd98..c991db9a2ef446 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -505,16 +505,18 @@
 	}
 
 	@include break-small() {
-		&:not(.is-menu-open) {
-			display: flex;
-			flex-direction: row;
-			width: 100%;
-			position: relative;
-			z-index: 2;
-			background-color: inherit;
-
-			.wp-block-navigation__responsive-container-close {
-				display: none;
+		&:not(.hidden-by-default) {
+			&:not(.is-menu-open) {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				position: relative;
+				z-index: 2;
+				background-color: inherit;
+
+				.wp-block-navigation__responsive-container-close {
+					display: none;
+				}
 			}
 		}
 
@@ -558,8 +560,10 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	@include break-small {
-		display: none;
+	&:not(.always-on) {
+		@include break-small {
+			display: none;
+		}
 	}
 
 	// Justify the button.

From 2151417d1036a691c63f4de56a30ffc0673add7b Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente.canales@automattic.com>
Date: Tue, 12 Oct 2021 16:52:04 -0300
Subject: [PATCH 02/16] enable always hidden responsive menu

---
 .../block-library/src/navigation/index.php    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 5b4b03f3a420d9..d134e1d6585e43 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -296,9 +296,20 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		);
 	}
 
+	$is_hidden_by_default = isset( $attributes['isHiddenByDefault'] ) && true === $attributes['isHiddenByDefault'];
+
+	$responsive_container_classes = array(
+		'wp-block-navigation__responsive-container',
+		$is_hidden_by_default ? 'hidden-by-default' : '',
+	);
+	$open_button_classes          = array(
+		'wp-block-navigation__responsive-container-open',
+		$is_hidden_by_default ? 'always-on' : '',
+	);
+
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="wp-block-navigation__responsive-container-open" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="wp-block-navigation__responsive-container" id="modal-%1$s" aria-hidden="true">
+		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+			<div class="%5$s" id="modal-%1$s" aria-hidden="true">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<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>
@@ -311,7 +322,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$modal_unique_id,
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
-		__( 'Close menu' ) // Close button label.
+		__( 'Close menu' ), // Close button label.
+		implode( ' ', $responsive_container_classes ),
+		implode( ' ', $open_button_classes )
 	);
 
 	return sprintf(

From 937b22489c088db739e19b74dc3ae534531440cf Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente.canales@automattic.com>
Date: Tue, 12 Oct 2021 16:56:22 -0300
Subject: [PATCH 03/16] only show toggle if menu is responsive

---
 packages/block-library/src/navigation/edit.js | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 8acb240ae9c860..d9f6b6bbaaf5fd 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -281,17 +281,17 @@ function Navigation( {
 							} }
 							label={ __( 'Enable responsive menu' ) }
 						/>
-						<ToggleControl
-							checked={ attributes.isHiddenByDefault }
-							onChange={ ( value ) => {
-								setAttributes( {
-									isHiddenByDefault: value,
-								} );
-							} }
-							label={ __(
-								'Always hide Navigation Menu behind toggle'
-							) }
-						/>
+						{ attributes.isResponsive && (
+							<ToggleControl
+								checked={ attributes.isHiddenByDefault }
+								onChange={ ( value ) => {
+									setAttributes( {
+										isHiddenByDefault: value,
+									} );
+								} }
+								label={ __( 'Always on burger menu' ) }
+							/>
+						) }
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {

From 7f7fa4ffa067761e99ea454391e62713069869cf Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente.canales@automattic.com>
Date: Tue, 12 Oct 2021 16:59:31 -0300
Subject: [PATCH 04/16] change open button modifier classname

---
 packages/block-library/src/navigation/index.php             | 2 +-
 packages/block-library/src/navigation/responsive-wrapper.js | 2 +-
 packages/block-library/src/navigation/style.scss            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index d134e1d6585e43..a1bddfc31d94fb 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -304,7 +304,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 	$open_button_classes          = array(
 		'wp-block-navigation__responsive-container-open',
-		$is_hidden_by_default ? 'always-on' : '',
+		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
 	$responsive_container_markup = sprintf(
diff --git a/packages/block-library/src/navigation/responsive-wrapper.js b/packages/block-library/src/navigation/responsive-wrapper.js
index 1786ba974b75f8..7030e8e7914abc 100644
--- a/packages/block-library/src/navigation/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/responsive-wrapper.js
@@ -31,7 +31,7 @@ export default function ResponsiveWrapper( {
 	);
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
-		{ 'always-on': isHiddenByDefault }
+		{ 'always-shown': isHiddenByDefault }
 	);
 
 	const modalId = `${ id }-modal`;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index c991db9a2ef446..a6cd74ad311d9a 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -560,7 +560,7 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	&:not(.always-on) {
+	&:not(.always-shown) {
 		@include break-small {
 			display: none;
 		}

From 3f1580a1fce1f50b459254d05dbdfa3714437436 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente.canales@automattic.com>
Date: Tue, 12 Oct 2021 17:22:28 -0300
Subject: [PATCH 05/16] regenerate fixtures to include new attribute

---
 test/integration/fixtures/blocks/core__navigation.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
index 4378f2605bc610..f10689c115e371 100644
--- a/test/integration/fixtures/blocks/core__navigation.json
+++ b/test/integration/fixtures/blocks/core__navigation.json
@@ -7,7 +7,8 @@
 			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
-			"isResponsive": false
+			"isResponsive": false,
+			"isHiddenByDefault": false
 		},
 		"innerBlocks": [],
 		"originalContent": ""

From b7587957d1fa0edaa5169ce3c05f0cd2dcb62ab8 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Tue, 12 Oct 2021 21:14:21 -0300
Subject: [PATCH 06/16] replace isResponsive with overlayMenu attribute

---
 .../block-library/src/navigation/block.json   | 10 +--
 packages/block-library/src/navigation/edit.js | 64 ++++++++++++-------
 .../block-library/src/navigation/index.php    |  8 +--
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index c50e34f167b6bc..2822b03081f024 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -44,13 +44,9 @@
 			"type": "boolean",
 			"default": false
 		},
-		"isResponsive": {
-			"type": "boolean",
-			"default": false
-		},
-		"isHiddenByDefault": {
-			"type": "boolean",
-			"default": false
+		"overlayMenu": {
+			"type": "string",
+			"default": "never"
 		},
 		"__unstableLocation": {
 			"type": "string"
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d9f6b6bbaaf5fd..af04b30f8e0751 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -26,7 +26,13 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -135,7 +141,7 @@ function Navigation( {
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
-			'is-responsive': attributes.isResponsive,
+			'is-responsive': 'never' !== attributes.overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',
@@ -272,26 +278,38 @@ function Navigation( {
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
 					<PanelBody title={ __( 'Display settings' ) }>
-						<ToggleControl
-							checked={ attributes.isResponsive }
-							onChange={ ( value ) => {
-								setAttributes( {
-									isResponsive: value,
-								} );
-							} }
-							label={ __( 'Enable responsive menu' ) }
-						/>
-						{ attributes.isResponsive && (
-							<ToggleControl
-								checked={ attributes.isHiddenByDefault }
-								onChange={ ( value ) => {
-									setAttributes( {
-										isHiddenByDefault: value,
-									} );
-								} }
-								label={ __( 'Always on burger menu' ) }
+						<ToggleGroupControl
+							label={
+								<div>
+									<h5>Overlay Menu</h5>
+									<p>
+										Controls whether the menu collapses into
+										a toggle button opening an overlay for
+										navigation.
+									</p>
+								</div>
+							}
+							value={ attributes.overlayMenu }
+							onChange={ ( value ) =>
+								setAttributes( { overlayMenu: value } )
+							}
+						>
+							<ToggleGroupControlOption
+								value="never"
+								label="Never"
+								aria-label="Never"
 							/>
-						) }
+							<ToggleGroupControlOption
+								value="mobile"
+								label="Mobile"
+								aria-label="Mobile"
+							/>
+							<ToggleGroupControlOption
+								value="always"
+								label="Always"
+								aria-label="Always"
+							/>
+						</ToggleGroupControl>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
@@ -363,8 +381,8 @@ function Navigation( {
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
-					isResponsive={ attributes.isResponsive }
-					isHiddenByDefault={ attributes.isHiddenByDefault }
+					isResponsive={ 'never' !== attributes.overlayMenu }
+					isHiddenByDefault={ 'always' === attributes.overlayMenu }
 				>
 					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index a1bddfc31d94fb..1501d80d43bd40 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
+	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ( ! empty( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -250,7 +250,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['isResponsive'] ) && true === $attributes['isResponsive'] ? array( 'is-responsive' ) : array()
+		isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,7 +288,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
-	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
+	if ( ! isset( $attributes['overlayMenu'] ) || 'never' === $attributes['overlayMenu'] ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
@@ -296,7 +296,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		);
 	}
 
-	$is_hidden_by_default = isset( $attributes['isHiddenByDefault'] ) && true === $attributes['isHiddenByDefault'];
+	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
 
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',

From 5fbdd0b51eccda32d8e6d8cff7d3c698d79323e7 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Tue, 12 Oct 2021 21:30:22 -0300
Subject: [PATCH 07/16] add submenus option header

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

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index af04b30f8e0751..249569aa27d70a 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -281,7 +281,7 @@ function Navigation( {
 						<ToggleGroupControl
 							label={
 								<div>
-									<h5>Overlay Menu</h5>
+									<h4>Overlay Menu</h4>
 									<p>
 										Controls whether the menu collapses into
 										a toggle button opening an overlay for
@@ -310,6 +310,7 @@ function Navigation( {
 								aria-label="Always"
 							/>
 						</ToggleGroupControl>
+						<h4>Submenus</h4>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {

From 3b6cf52717e83dcdc29feae47b6b96051d1c6178 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Tue, 12 Oct 2021 21:30:35 -0300
Subject: [PATCH 08/16] update fixtures for new overlayMenu attribute

---
 test/integration/fixtures/blocks/core__navigation.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
index f10689c115e371..a770861fd7824e 100644
--- a/test/integration/fixtures/blocks/core__navigation.json
+++ b/test/integration/fixtures/blocks/core__navigation.json
@@ -7,8 +7,7 @@
 			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
-			"isResponsive": false,
-			"isHiddenByDefault": false
+			"overlayMenu": "never"
 		},
 		"innerBlocks": [],
 		"originalContent": ""

From 5d3e03bf629682fb7cefadee29d6817594c2be0f Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Tue, 12 Oct 2021 21:40:20 -0300
Subject: [PATCH 09/16] make texts translatable

---
 packages/block-library/src/navigation/edit.js | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 249569aa27d70a..12ec773acd4926 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -281,11 +281,11 @@ function Navigation( {
 						<ToggleGroupControl
 							label={
 								<div>
-									<h4>Overlay Menu</h4>
+									<h4>{ __( 'Overlay Menu' ) }</h4>
 									<p>
-										Controls whether the menu collapses into
-										a toggle button opening an overlay for
-										navigation.
+										{ __(
+											'Controls whether the menu collapses into a toggle button opening an overlay for navigation.'
+										) }
 									</p>
 								</div>
 							}
@@ -296,21 +296,21 @@ function Navigation( {
 						>
 							<ToggleGroupControlOption
 								value="never"
-								label="Never"
-								aria-label="Never"
+								label={ __( 'Never' ) }
+								aria-label={ __( 'Never' ) }
 							/>
 							<ToggleGroupControlOption
 								value="mobile"
-								label="Mobile"
-								aria-label="Mobile"
+								label={ __( 'Mobile' ) }
+								aria-label={ __( 'Mobile' ) }
 							/>
 							<ToggleGroupControlOption
 								value="always"
-								label="Always"
-								aria-label="Always"
+								label={ __( 'Always' ) }
+								aria-label={ __( 'Always' ) }
 							/>
 						</ToggleGroupControl>
-						<h4>Submenus</h4>
+						<h4>{ __( 'Submenus' ) }</h4>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {

From 96f3dffad48e878fcbafed2f4a504f2d50665c94 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 13 Oct 2021 10:14:02 +0200
Subject: [PATCH 10/16] Tweak inspector

---
 packages/block-library/src/navigation/edit.js | 19 +++++++------------
 .../components/complementary-area/style.scss  | 12 ++++++++++--
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 12ec773acd4926..8156cb45296fa0 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -277,22 +277,17 @@ function Navigation( {
 			{ navigatorModal }
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display settings' ) }>
+					<PanelBody title={ __( 'Display' ) }>
 						<ToggleGroupControl
-							label={
-								<div>
-									<h4>{ __( 'Overlay Menu' ) }</h4>
-									<p>
-										{ __(
-											'Controls whether the menu collapses into a toggle button opening an overlay for navigation.'
-										) }
-									</p>
-								</div>
-							}
+							label={ __( 'Overlay Menu' ) }
 							value={ attributes.overlayMenu }
+							help={ __(
+								'Controls whether the menu collapses into a toggle button opening an overlay for navigation.'
+							) }
 							onChange={ ( value ) =>
 								setAttributes( { overlayMenu: value } )
 							}
+							isBlock
 						>
 							<ToggleGroupControlOption
 								value="never"
@@ -310,7 +305,7 @@ function Navigation( {
 								aria-label={ __( 'Always' ) }
 							/>
 						</ToggleGroupControl>
-						<h4>{ __( 'Submenus' ) }</h4>
+						<h3>{ __( 'Submenus' ) }</h3>
 						<ToggleControl
 							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index d28e16f3d384f1..a3e7dc949ca124 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -35,13 +35,21 @@
 		margin-top: 0;
 	}
 
-	h2,
-	h3 {
+	h2 {
 		font-size: $default-font-size;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
 
+	// Subheading style.
+	h3 {
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+		color: $gray-900;
+		margin-bottom: 1.5em;
+	}
+
 	hr {
 		border-top: none;
 		border-bottom: 1px solid $gray-100;

From 6524981d2a595e2adbce432e105d111d72273135 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 13 Oct 2021 10:16:52 +0200
Subject: [PATCH 11/16] Add separate heading.

---
 packages/block-library/src/navigation/edit.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 8156cb45296fa0..b61aa55ce65a37 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -278,8 +278,9 @@ function Navigation( {
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
 					<PanelBody title={ __( 'Display' ) }>
+						<h3>{ __( 'Overlay Menu' ) }</h3>
 						<ToggleGroupControl
-							label={ __( 'Overlay Menu' ) }
+							label={ __( 'Configure overlay menu' ) }
 							value={ attributes.overlayMenu }
 							help={ __(
 								'Controls whether the menu collapses into a toggle button opening an overlay for navigation.'
@@ -288,6 +289,7 @@ function Navigation( {
 								setAttributes( { overlayMenu: value } )
 							}
 							isBlock
+							hideLabelFromVision
 						>
 							<ToggleGroupControlOption
 								value="never"

From 9e6693a2a819e1511afacf170308439f5c335d1e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 13 Oct 2021 10:37:05 +0200
Subject: [PATCH 12/16] Tweak wording.

---
 packages/block-library/src/navigation/edit.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index b61aa55ce65a37..d9e7f610d386cd 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -283,7 +283,7 @@ function Navigation( {
 							label={ __( 'Configure overlay menu' ) }
 							value={ attributes.overlayMenu }
 							help={ __(
-								'Controls whether the menu collapses into a toggle button opening an overlay for navigation.'
+								'Collapses the navigation options in a menu icon opening an overlay.'
 							) }
 							onChange={ ( value ) =>
 								setAttributes( { overlayMenu: value } )
@@ -293,8 +293,8 @@ function Navigation( {
 						>
 							<ToggleGroupControlOption
 								value="never"
-								label={ __( 'Never' ) }
-								aria-label={ __( 'Never' ) }
+								label={ __( 'Off' ) }
+								aria-label={ __( 'Off' ) }
 							/>
 							<ToggleGroupControlOption
 								value="mobile"

From facfdf7a90ac757f48aa83fd047e936d2d57024a Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 13 Oct 2021 10:46:31 +0200
Subject: [PATCH 13/16] Simplify toggles.

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

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d9e7f610d386cd..d0a7f5ffa6f949 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -315,7 +315,7 @@ function Navigation( {
 									openSubmenusOnClick: value,
 								} );
 							} }
-							label={ __( 'Open submenus on click' ) }
+							label={ __( 'Open on click' ) }
 						/>
 						{ ! attributes.openSubmenusOnClick && (
 							<ToggleControl
@@ -325,7 +325,7 @@ function Navigation( {
 										showSubmenuIcon: value,
 									} );
 								} }
-								label={ __( 'Show submenu indicator icons' ) }
+								label={ __( 'Show icons' ) }
 							/>
 						) }
 					</PanelBody>

From c9464cd8a0521c8ce5c17cd2271cd1fbc36edf04 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 13 Oct 2021 14:24:13 +0300
Subject: [PATCH 14/16] add deprecation

---
 .../src/navigation/deprecated.js              | 89 ++++++++++++++++++-
 .../block-library/src/navigation/index.php    | 11 ++-
 .../core__navigation__deprecated-1.html       |  3 +
 .../core__navigation__deprecated-1.json       | 28 ++++++
 ...core__navigation__deprecated-1.parsed.json | 22 +++++
 ...__navigation__deprecated-1.serialized.html |  3 +
 6 files changed, 152 insertions(+), 4 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-1.html
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-1.json
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html

diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js
index 0ee64c0a44da89..f41acc381bda65 100644
--- a/packages/block-library/src/navigation/deprecated.js
+++ b/packages/block-library/src/navigation/deprecated.js
@@ -15,7 +15,92 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
-export default [
+const deprecated = [
+	// Remove `isResponsive` attribute.
+	{
+		attributes: {
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			rgbTextColor: {
+				type: 'string',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			rgbBackgroundColor: {
+				type: 'string',
+			},
+			itemsJustification: {
+				type: 'string',
+			},
+			showSubmenuIcon: {
+				type: 'boolean',
+				default: true,
+			},
+			openSubmenusOnClick: {
+				type: 'boolean',
+				default: false,
+			},
+			isResponsive: {
+				type: 'boolean',
+				default: 'false',
+			},
+			__unstableLocation: {
+				type: 'string',
+			},
+			overlayBackgroundColor: {
+				type: 'string',
+			},
+			customOverlayBackgroundColor: {
+				type: 'string',
+			},
+			overlayTextColor: {
+				type: 'string',
+			},
+			customOverlayTextColor: {
+				type: 'string',
+			},
+		},
+		supports: {
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			html: false,
+			inserter: true,
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalTextTransform: true,
+				__experimentalFontFamily: true,
+				__experimentalTextDecoration: true,
+			},
+		},
+		isEligible( attributes ) {
+			return attributes.isResponsive;
+		},
+		migrate( attributes ) {
+			delete attributes.isResponsive;
+			return {
+				...attributes,
+				overlayMenu: 'mobile',
+			};
+		},
+		save() {
+			return <InnerBlocks.Content />;
+		},
+	},
 	{
 		attributes: {
 			orientation: {
@@ -163,3 +248,5 @@ export default [
 		},
 	},
 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 1501d80d43bd40..32c3fbea0ef462 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ( ! empty( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
+	/**
+	 * This is for backwards compatibility after `isResponsive` attribute has been removed.
+	 */
+	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
+	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
+	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -250,7 +255,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -288,7 +293,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
-	if ( ! isset( $attributes['overlayMenu'] ) || 'never' === $attributes['overlayMenu'] ) {
+	if ( ! $is_responsive_menu ) {
 		return sprintf(
 			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.html
new file mode 100644
index 00000000000000..8640ce41324a06
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.html
@@ -0,0 +1,3 @@
+<!-- wp:navigation {"isResponsive":true} -->
+<!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
+<!-- /wp:navigation -->
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
new file mode 100644
index 00000000000000..11b24a32fbe661
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
@@ -0,0 +1,28 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/navigation",
+		"isValid": true,
+		"attributes": {
+			"orientation": "horizontal",
+			"showSubmenuIcon": true,
+			"openSubmenusOnClick": false,
+			"overlayMenu": "mobile"
+		},
+		"innerBlocks": [
+			{
+				"clientId": "_clientId_0",
+				"name": "core/navigation-link",
+				"isValid": true,
+				"attributes": {
+					"label": "WordPress",
+					"opensInNewTab": false,
+					"url": "https://www.wordpress.org/"
+				},
+				"innerBlocks": [],
+				"originalContent": ""
+			}
+		],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json
new file mode 100644
index 00000000000000..38dcb1daf2af11
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.parsed.json
@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/navigation",
+		"attrs": {
+			"isResponsive": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/navigation-link",
+				"attrs": {
+					"label": "WordPress",
+					"url": "https://www.wordpress.org/"
+				},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			}
+		],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n", null, "\n" ]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
new file mode 100644
index 00000000000000..93177274b56cdc
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:navigation {"overlayMenu":"mobile"} -->
+<!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
+<!-- /wp:navigation -->

From b832b866e56e6e3773d5c86eb3d29a8429354bfa Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 13 Oct 2021 15:03:02 +0300
Subject: [PATCH 15/16] fix e2e test

---
 packages/e2e-tests/specs/experiments/blocks/navigation.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
index 8edeead41f2260..c7fdf79251746f 100644
--- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -598,7 +598,7 @@ describe( 'Navigation', () => {
 		await toggleSidebar();
 
 		const [ openOnClickButton ] = await page.$x(
-			'//label[contains(text(),"Open submenus on click")]'
+			'//label[contains(text(),"Open on click")]'
 		);
 
 		await openOnClickButton.click();

From 78f96afdb13306faf37f345940f113c5cdd6ed76 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Wed, 13 Oct 2021 12:22:56 -0300
Subject: [PATCH 16/16] remove redundant aria-label attributes

---
 packages/block-library/src/navigation/edit.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d0a7f5ffa6f949..77740d91a619d7 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -294,17 +294,14 @@ function Navigation( {
 							<ToggleGroupControlOption
 								value="never"
 								label={ __( 'Off' ) }
-								aria-label={ __( 'Off' ) }
 							/>
 							<ToggleGroupControlOption
 								value="mobile"
 								label={ __( 'Mobile' ) }
-								aria-label={ __( 'Mobile' ) }
 							/>
 							<ToggleGroupControlOption
 								value="always"
 								label={ __( 'Always' ) }
-								aria-label={ __( 'Always' ) }
 							/>
 						</ToggleGroupControl>
 						<h3>{ __( 'Submenus' ) }</h3>