From 7f0d935eb0583237c5743486bcb9e2b8df9d110e Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 3 Nov 2021 18:11:55 +1100
Subject: [PATCH 1/6] Try using flex layout on the Navigation block

---
 .../block-library/src/navigation/block.json   |  14 +-
 .../src/navigation/edit/index.js              |  21 +--
 .../block-library/src/navigation/editor.scss  |  21 +--
 .../block-library/src/navigation/index.js     |   2 -
 .../block-library/src/navigation/index.php    |   2 -
 .../block-library/src/navigation/style.scss   | 166 +++---------------
 .../src/navigation/variations.js              |  23 ---
 packages/block-library/src/navigation/view.js |   3 +
 .../block-library/src/page-list/style.scss    |  24 +--
 9 files changed, 51 insertions(+), 225 deletions(-)
 delete mode 100644 packages/block-library/src/navigation/variations.js

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 818cd217ab23cc..931010815030e2 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -14,10 +14,6 @@
 		"navigationMenuId": {
 			"type": "number"
 		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal"
-		},
 		"textColor": {
 			"type": "string"
 		},
@@ -36,9 +32,6 @@
 		"rgbBackgroundColor": {
 			"type": "string"
 		},
-		"itemsJustification": {
-			"type": "string"
-		},
 		"showSubmenuIcon": {
 			"type": "boolean",
 			"default": true
@@ -116,6 +109,13 @@
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
 		}
 	},
 	"viewScript": "file:./view.min.js",
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 294ee51835942d..e113a3e3ae8bb2 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -15,7 +15,6 @@ import {
 } from '@wordpress/element';
 import {
 	InspectorControls,
-	JustifyToolbar,
 	BlockControls,
 	useBlockProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
@@ -99,7 +98,6 @@ function Navigation( {
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
-	hasItemJustificationControls = true,
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 	customAppender: CustomAppender = null,
@@ -194,6 +192,7 @@ function Navigation( {
 			[ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification,
 			'is-vertical': orientation === 'vertical',
 			'is-responsive': 'never' !== overlayMenu,
+			'is-responsive-menu-open': isResponsiveMenuOpen,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',
@@ -300,11 +299,6 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	const justifyAllowedControls =
-		orientation === 'vertical'
-			? [ 'left', 'center', 'right' ]
-			: [ 'left', 'center', 'right', 'space-between' ];
-
 	return (
 		<EntityProvider
 			kind="postType"
@@ -331,19 +325,6 @@ function Navigation( {
 							</ToolbarDropdownMenu>
 						</ToolbarGroup>
 					) }
-					{ hasItemJustificationControls && (
-						<JustifyToolbar
-							value={ itemsJustification }
-							allowedControls={ justifyAllowedControls }
-							onChange={ ( value ) =>
-								setAttributes( { itemsJustification: value } )
-							}
-							popoverProps={ {
-								position: 'bottom right',
-								isAlternate: true,
-							} }
-						/>
-					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
 					{ isDraftNavigationMenu && (
 						<ToolbarGroup>
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 7e5d6708009d08..77cce3485916d0 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -417,8 +417,9 @@ $color-control-label-height: 20px;
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
-.wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation.is-responsive-menu-open.is-responsive-menu-open.is-responsive-menu-open {
 	position: fixed;
+	max-width: 100%;
 	top:
 		$admin-bar-height-big + $header-height + $block-toolbar-height +
 		$border-width;
@@ -436,7 +437,7 @@ $color-control-label-height: 20px;
 	}
 }
 
-.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
+.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
 	@include break-medium() {
 		top:
 			$admin-bar-height + $header-height + $block-toolbar-height +
@@ -444,20 +445,20 @@ $color-control-label-height: 20px;
 	}
 }
 
-.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
-.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
+.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
+.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
 	top:
 		$admin-bar-height + $header-height + $block-toolbar-height +
 		$border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
+.is-sidebar-opened .wp-block-navigation.is-responsive-menu-open {
 	right: $sidebar-width;
 }
 
 // When fullscreen.
 .is-fullscreen-mode {
-	.wp-block-navigation__responsive-container.is-menu-open {
+	.wp-block-navigation.is-responsive-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
 		top:
 			$admin-bar-height-big + $header-height + $block-toolbar-height +
@@ -468,21 +469,21 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
+	.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
 		@include break-medium() {
 			top: $header-height + $block-toolbar-height + $border-width;
 		}
 	}
 
-	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
-	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
+	.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
+	.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
 		top: $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 // The iframe makes these rules a lot simpler.
 body.editor-styles-wrapper
-.wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation.is-responsive-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
index 6a59695f97cfd8..fe3b2d555bd2ec 100644
--- a/packages/block-library/src/navigation/index.js
+++ b/packages/block-library/src/navigation/index.js
@@ -11,7 +11,6 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -19,7 +18,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	example: {
 		innerBlocks: [
 			{
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index f51b9949204068..6f52c41c71d7d1 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -295,8 +295,6 @@ function( $block ) {
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 5714a73611aaa7..08c50c74d9dbee 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -9,17 +9,6 @@
 .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 {
 		margin-top: 0;
@@ -315,8 +304,6 @@
 
 // Navigation block inner container.
 .wp-block-navigation__container {
-	// Vertically center child blocks, like Social Links or Search.
-	align-items: center;
 
 	// Reset the default list styles
 	list-style: none;
@@ -327,91 +314,24 @@
 	.is-responsive {
 		display: none;
 	}
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-
-	.items-justified-space-between & {
-		flex-grow: 1;
-	}
-}
-
-// Vertical layout
-.is-vertical .wp-block-page-list, // Page list.
-.is-vertical .wp-block-navigation__container,
-.is-vertical .wp-block-navigation__responsive-container-content {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-// Justification.
-// These target the named container class to work even with the additional mobile menu containers.
-.items-justified-center {
-	.wp-block-page-list,
-	.wp-block-navigation__container,
-	.wp-block-navigation__responsive-container-content {
-		justify-content: center;
-
-		// For the overlay.
-		align-items: center;
-	}
-}
-
-.items-justified-right {
-	.wp-block-page-list,
-	.wp-block-navigation__container,
-	.wp-block-navigation__responsive-container-content {
-		justify-content: flex-end;
-
-		// For the overlay.
-		align-items: flex-end;
-	}
-}
-
-.items-justified-space-between {
-	.wp-block-navigation__container,
-	.wp-block-navigation__responsive-container-content {
-		display: flex;
-		justify-content: space-between;
-		flex: 1;
-	}
-}
-
-// Vertical justification.
-// The vertical variant does not support space-between.
-.is-vertical.items-justified-center {
-	align-items: center;
-
-	.wp-block-navigation-item {
-		justify-content: center;
-	}
-
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		align-items: center;
-	}
-}
-
-.is-vertical.items-justified-right {
-	align-items: flex-end;
-
-	.wp-block-navigation-item {
-		justify-content: flex-end;
-	}
-
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		align-items: flex-end;
-	}
 }
 
-
 /**
  * Mobile menu.
  */
 
+// Override default positioning
+.wp-block-navigation.is-responsive-menu-open {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	// Give it a z-index just higher than the adminbar.
+	z-index: 100000;
+	padding: $grid-unit-40;
+}
+
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -419,15 +339,9 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 1;
-	align-items: flex-start;
-	justify-content: flex-start;
 
 	.wp-block-navigation__responsive-container-content {
-		display: flex;
-
-		// Always vertically align to the top.
-		justify-content: flex-start;
+		display: contents;
 	}
 
 	// Overlay menu.
@@ -436,22 +350,16 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: flex; // Needs to be set to override "none".
-		flex-direction: column;
+		display: contents; // Needs to be set to override "none".
 
 		// Allow modal to scroll.
 		overflow: auto;
 
-		// Give it a z-index just higher than the adminbar.
-		z-index: 100000;
-
 		// Add extra top padding so items don't conflict with close button.
 		padding: 72px 24px 24px 24px;
 		background-color: inherit;
 
 		.wp-block-navigation__responsive-container-content {
-			display: flex;
-			flex-direction: column;
 			padding: 0;
 
 			.wp-block-navigation__submenu-icon {
@@ -474,10 +382,6 @@
 				border: none;
 				padding-left: 32px;
 
-				.items-justified-right & {
-					padding-left: 0;
-					padding-right: 32px;
-				}
 			}
 
 			// Space unfolded items using gap and padding for submenus.
@@ -504,15 +408,6 @@
 				flex-direction: column;
 				justify-content: flex-start;
 				align-items: flex-start;
-
-				// Inherit parent justifications inside the menu.
-				.items-justified-right & {
-					align-items: flex-end;
-				}
-
-				.items-justified-center & {
-					align-items: center;
-				}
 			}
 		}
 
@@ -535,8 +430,7 @@
 	@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
-				display: flex;
-				flex-direction: row;
+				display: contents;
 				width: 100%;
 				position: relative;
 				z-index: 2;
@@ -560,9 +454,11 @@
 // Default menu background and font color.
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
-	background-color: #fff;
 	color: #000;
 }
+.wp-block-navigation:not(.has-background).is-responsive-menu-open {
+	background-color: #fff;
+}
 
 // Menu and close buttons.
 .wp-block-navigation__responsive-container-open,
@@ -588,27 +484,15 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
+	.is-responsive-menu-open & {
+		display: none; // Or do we need this button to still be screen reader accessible?
+	}
+
 	&:not(.always-shown) {
 		@include break-small {
 			display: none;
 		}
 	}
-
-	// Justify the button.
-	.items-justified-left & {
-		margin-left: 0;
-		margin-right: auto;
-	}
-
-	.items-justified-center & {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.items-justified-right & {
-		margin-left: auto;
-		margin-right: 0;
-	}
 }
 
 // Button to close the menus.
@@ -634,3 +518,9 @@
 html.has-modal-open {
 	overflow: hidden;
 }
+
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
+.wp-block-navigation__container {
+	display: contents;
+}
diff --git a/packages/block-library/src/navigation/variations.js b/packages/block-library/src/navigation/variations.js
deleted file mode 100644
index c17813f953211e..00000000000000
--- a/packages/block-library/src/navigation/variations.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-const variations = [
-	{
-		name: 'horizontal',
-		title: __( 'Navigation (horizontal)' ),
-		description: __( 'Links shown in a row.' ),
-		attributes: { orientation: 'horizontal' },
-		scope: [ 'transform' ],
-	},
-	{
-		name: 'vertical',
-		title: __( 'Navigation (vertical)' ),
-		description: __( 'Links shown in a column.' ),
-		attributes: { orientation: 'vertical' },
-		scope: [ 'transform' ],
-	},
-];
-
-export default variations;
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index ff5957d8dd66b7..4a78455cc4a0c3 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -15,6 +15,9 @@ function navigationToggleModal( modal ) {
 	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
 	closeButton.setAttribute( 'aria-expanded', ! isHidden );
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	triggerButton
+		.closest( '.wp-block-navigation' )
+		.classList.toggle( 'is-responsive-menu-open', ! isHidden );
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;
diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
index c51d70852d0c89..e31bafeaf2d585 100644
--- a/packages/block-library/src/page-list/style.scss
+++ b/packages/block-library/src/page-list/style.scss
@@ -1,7 +1,7 @@
 // The Page List block should inherit navigation styles when nested within it
 .wp-block-navigation {
 	.wp-block-page-list {
-		display: flex;
+		display: contents;
 		flex-wrap: wrap;
 		background-color: inherit;
 	}
@@ -12,25 +12,3 @@
 		background-color: inherit;
 	}
 }
-
-.is-vertical .wp-block-navigation__container,
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		display: flex;
-	}
-}
-
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		@include break-mobile() {
-			display: flex;
-		}
-	}
-}
-
-// space-between justification.
-.wp-block-page-list {
-	.items-justified-space-between & {
-		display: contents;
-	}
-}

From 3f6120eb2c197ded6d7fa11c1ed200943f80e6ae Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 4 Nov 2021 12:09:53 +1100
Subject: [PATCH 2/6] Fix justification for overlay menu

---
 lib/block-supports/layout.php                 |  3 ++
 packages/block-editor/src/layouts/flex.js     |  4 ++
 .../block-library/src/navigation/style.scss   | 40 +++++++++++--------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 841252da965229..3ba5aca6a35c6d 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -103,11 +103,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			 */
 			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 				$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
+				// --justification-setting allows children to inherit the value regardless or row or column direction.
+				$style .= "--justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
 			}
 		} else {
 			$style .= 'flex-direction: column;';
 			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 				$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
+				$style .= "--justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
 			}
 		}
 		$style .= '}';
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 9e687f6b7d7904..c929a67440b7a2 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -94,16 +94,20 @@ export default {
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
+		// --justification-setting allows children to inherit the value
+		// regardless or row or column direction.
 		const rowOrientation = `
 		flex-direction: row;
 		align-items: center;
 		justify-content: ${ justifyContent };
+		--justification-setting: ${ justifyContent };
 		`;
 		const alignItems =
 			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
 		const columnOrientation = `
 		flex-direction: column;
 		align-items: ${ alignItems };
+		--justification-setting: ${ alignItems };
 		`;
 		return (
 			<style>{ `
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 08c50c74d9dbee..430857750ddde3 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -329,16 +329,11 @@
 	bottom: 0;
 	// Give it a z-index just higher than the adminbar.
 	z-index: 100000;
-	padding: $grid-unit-40;
+	padding: $grid-unit-40*2 $grid-unit-30 $grid-unit-30;
 }
 
 .wp-block-navigation__responsive-container {
 	display: none;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
 
 	.wp-block-navigation__responsive-container-content {
 		display: contents;
@@ -350,16 +345,20 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: contents; // Needs to be set to override "none".
-
-		// Allow modal to scroll.
-		overflow: auto;
-
-		// Add extra top padding so items don't conflict with close button.
-		padding: 72px 24px 24px 24px;
-		background-color: inherit;
+		display: contents;
+		// Fallback to inheritance in case the --justification-setting variable fails.
+		align-items: inherit;
 
 		.wp-block-navigation__responsive-container-content {
+			// Override the container flex layout settings
+			// because we want overlay menu to always display
+			// as a column.
+			display: flex;
+			flex-direction: column;
+			// Inherit alignment settings from container.
+			align-items: var(--justification-setting, inherit);
+			// Allow menu to scroll.
+			overflow: auto;
 			padding: 0;
 
 			.wp-block-navigation__submenu-icon {
@@ -381,6 +380,7 @@
 				position: static;
 				border: none;
 				padding-left: 32px;
+				padding-right: 32px;
 
 			}
 
@@ -401,13 +401,14 @@
 				padding: 0;
 			}
 
-			// Default justification.
+			// Default column display for overlay menu contents.
 			.wp-block-navigation__container,
 			.wp-block-navigation-item,
 			.wp-block-page-list {
+				display: flex;
 				flex-direction: column;
-				justify-content: flex-start;
-				align-items: flex-start;
+				// Inherit alignment settings from container.
+				align-items: var(--justification-setting, inherit);
 			}
 		}
 
@@ -523,4 +524,9 @@ html.has-modal-open {
 .wp-block-navigation__responsive-dialog,
 .wp-block-navigation__container {
 	display: contents;
+
+	.is-menu-open & {
+		// Fallback to inheritance in case the --justification-setting variable fails.
+		align-items: inherit;
+	}
 }

From 0f2832c71ce810cfe21dfd9eef11e2a7ac4e8c8f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 4 Nov 2021 16:40:14 +1100
Subject: [PATCH 3/6] Add deprecation and update fixtures

---
 .../src/navigation/deprecated.js              | 132 +++++++++++++++++-
 .../fixtures/blocks/core__navigation.json     |   1 -
 .../core__navigation__deprecated-1.json       |   8 +-
 ...__navigation__deprecated-1.serialized.html |   2 +-
 .../core__navigation__deprecated-v4.json      |   8 +-
 ..._navigation__deprecated-v4.serialized.html |   2 +-
 .../core__navigation__deprecated-v5.html      |   1 +
 .../core__navigation__deprecated-v5.json      |  19 +++
 ...ore__navigation__deprecated-v5.parsed.json |  12 ++
 ..._navigation__deprecated-v5.serialized.html |   1 +
 .../blocks/core__navigation__deprecated.json  |   6 +-
 ...re__navigation__deprecated.serialized.html |   2 +-
 12 files changed, 182 insertions(+), 12 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-v5.html
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-v5.json
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-v5.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html

diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js
index aab6a3fed4f82a..64960ac6d37cab 100644
--- a/packages/block-library/src/navigation/deprecated.js
+++ b/packages/block-library/src/navigation/deprecated.js
@@ -21,6 +21,123 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+
+	const { itemsJustification, orientation } = attributes;
+
+	const updatedAttributes = {
+		...attributes,
+	};
+
+	if ( itemsJustification || orientation ) {
+		Object.assign( updatedAttributes, {
+			layout: {
+				type: 'flex',
+				justifyContent: itemsJustification || 'left',
+				orientation: orientation || 'horizontal',
+			},
+		} );
+		delete updatedAttributes.itemsJustification;
+		delete updatedAttributes.orientation;
+	}
+
+	return updatedAttributes;
+};
+
+const v5 = {
+	attributes: {
+		navigationMenuId: {
+			type: 'number',
+		},
+		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,
+		},
+		overlayMenu: {
+			type: 'string',
+			default: 'never',
+		},
+		__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,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		spacing: {
+			blockGap: true,
+			units: [ 'px', 'em', 'rem', 'vh', 'vw' ],
+			__experimentalDefaultControls: {
+				blockGap: true,
+			},
+		},
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+	isEligible: ( { itemsJustification, orientation } ) =>
+		!! itemsJustification || !! orientation,
+	migrate: migrateWithLayout,
+};
+
 const v4 = {
 	attributes: {
 		orientation: {
@@ -101,7 +218,7 @@ const v4 = {
 	save() {
 		return <InnerBlocks.Content />;
 	},
-	migrate: migrateFontFamily,
+	migrate: compose( migrateWithLayout, migrateFontFamily ),
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -142,6 +259,7 @@ const migrateTypographyPresets = function ( attributes ) {
 };
 
 const deprecated = [
+	v5,
 	v4,
 	// Remove `isResponsive` attribute.
 	{
@@ -217,7 +335,11 @@ const deprecated = [
 		isEligible( attributes ) {
 			return attributes.isResponsive;
 		},
-		migrate: compose( migrateFontFamily, migrateIsResponsive ),
+		migrate: compose(
+			migrateWithLayout,
+			migrateFontFamily,
+			migrateIsResponsive
+		),
 		save() {
 			return <InnerBlocks.Content />;
 		},
@@ -287,7 +409,11 @@ const deprecated = [
 			}
 			return false;
 		},
-		migrate: compose( migrateFontFamily, migrateTypographyPresets ),
+		migrate: compose(
+			migrateWithLayout,
+			migrateFontFamily,
+			migrateTypographyPresets
+		),
 	},
 	{
 		attributes: {
diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
index 72db0623ed20b9..f9b63f311bb1cf 100644
--- a/test/integration/fixtures/blocks/core__navigation.json
+++ b/test/integration/fixtures/blocks/core__navigation.json
@@ -4,7 +4,6 @@
 		"name": "core/navigation",
 		"isValid": true,
 		"attributes": {
-			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
 			"overlayMenu": "mobile"
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
index 11b24a32fbe661..fca0c7fb5d2a01 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.json
@@ -4,10 +4,14 @@
 		"name": "core/navigation",
 		"isValid": true,
 		"attributes": {
-			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
-			"overlayMenu": "mobile"
+			"overlayMenu": "mobile",
+			"layout": {
+				"type": "flex",
+				"justifyContent": "left",
+				"orientation": "horizontal"
+			}
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
index 9d9adf3955c3ee..15fcfd3733fe0e 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:navigation -->
+<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"}} -->
 <!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
 <!-- /wp:navigation -->
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json
index af037bc657f3a0..c35ba1a1f995c0 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json
@@ -4,11 +4,15 @@
 		"name": "core/navigation",
 		"isValid": true,
 		"attributes": {
-			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
 			"overlayMenu": "never",
-			"fontFamily": "cambria-georgia"
+			"fontFamily": "cambria-georgia",
+			"layout": {
+				"type": "flex",
+				"justifyContent": "left",
+				"orientation": "horizontal"
+			}
 		},
 		"innerBlocks": [],
 		"originalContent": ""
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html
index b554a52b48b532..fd5a89ce7ec166 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html
@@ -1 +1 @@
-<!-- wp:navigation {"overlayMenu":"never","fontFamily":"cambria-georgia"} /-->
+<!-- wp:navigation {"overlayMenu":"never","fontFamily":"cambria-georgia","layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"}} /-->
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.html
new file mode 100644
index 00000000000000..854256eadbe63a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.html
@@ -0,0 +1 @@
+<!-- wp:navigation {"orientation":"vertical","itemsJustification":"center"} /-->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json
new file mode 100644
index 00000000000000..a7f66f17027c1b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.json
@@ -0,0 +1,19 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/navigation",
+		"isValid": true,
+		"attributes": {
+			"showSubmenuIcon": true,
+			"openSubmenusOnClick": false,
+			"overlayMenu": "never",
+			"layout": {
+				"type": "flex",
+				"justifyContent": "center",
+				"orientation": "vertical"
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.parsed.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.parsed.json
new file mode 100644
index 00000000000000..8d8b810c15f9d1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.parsed.json
@@ -0,0 +1,12 @@
+[
+	{
+		"blockName": "core/navigation",
+		"attrs": {
+			"orientation": "vertical",
+			"itemsJustification": "center"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html
new file mode 100644
index 00000000000000..688b6c199ed9df
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html
@@ -0,0 +1 @@
+<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} /-->
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated.json b/test/integration/fixtures/blocks/core__navigation__deprecated.json
index 7d34ed0001e11f..7b4e691b4e2ce4 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated.json
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated.json
@@ -4,7 +4,6 @@
 		"name": "core/navigation",
 		"isValid": true,
 		"attributes": {
-			"orientation": "horizontal",
 			"showSubmenuIcon": true,
 			"style": {
 				"typography": {
@@ -13,6 +12,11 @@
 					"fontStyle": "italic",
 					"fontWeight": "100"
 				}
+			},
+			"layout": {
+				"type": "flex",
+				"justifyContent": "left",
+				"orientation": "horizontal"
 			}
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html
index 27f10adb73e0fc..2a0269ea2b58b1 100644
--- a/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html
+++ b/test/integration/fixtures/blocks/core__navigation__deprecated.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:navigation {"style":{"typography":{"textTransform":"lowercase","textDecoration":"line-through","fontStyle":"italic","fontWeight":"100"}}} -->
+<!-- wp:navigation {"style":{"typography":{"textTransform":"lowercase","textDecoration":"line-through","fontStyle":"italic","fontWeight":"100"}},"layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"}} -->
 <!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
 <!-- /wp:navigation -->

From 4d82968661d58a412f5d404f1cd9aa8b356c1a9c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 5 Nov 2021 14:28:34 +1100
Subject: [PATCH 4/6] Fix menu position in site editor.

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

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 77cce3485916d0..095e708dbd7de1 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -417,7 +417,7 @@ $color-control-label-height: 20px;
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
-.wp-block-navigation.is-responsive-menu-open.is-responsive-menu-open.is-responsive-menu-open {
+.wp-block-navigation.is-responsive-menu-open {
 	position: fixed;
 	max-width: 100%;
 	top:

From 0f2e9a13968bc31c1d901a0b202fd1387425c935 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 5 Nov 2021 15:31:12 +1100
Subject: [PATCH 5/6] Don't use editor variables in front end styles.

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

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 430857750ddde3..be8a1d57f5c40e 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -329,7 +329,7 @@
 	bottom: 0;
 	// Give it a z-index just higher than the adminbar.
 	z-index: 100000;
-	padding: $grid-unit-40*2 $grid-unit-30 $grid-unit-30;
+	padding: 72px 24px 24px 24px;
 }
 
 .wp-block-navigation__responsive-container {

From e387c627088b8b729b6c22672559ef73d8f53085 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 5 Nov 2021 16:12:49 +1100
Subject: [PATCH 6/6] Move overlay styles back to inner container.

---
 .../src/navigation/edit/index.js              |  1 -
 .../block-library/src/navigation/editor.scss  | 21 ++++++------
 .../block-library/src/navigation/style.scss   | 32 +++++++++----------
 packages/block-library/src/navigation/view.js |  3 --
 4 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index e113a3e3ae8bb2..b44a5ef1427778 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -192,7 +192,6 @@ function Navigation( {
 			[ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification,
 			'is-vertical': orientation === 'vertical',
 			'is-responsive': 'never' !== overlayMenu,
-			'is-responsive-menu-open': isResponsiveMenuOpen,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 095e708dbd7de1..7e5d6708009d08 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -417,9 +417,8 @@ $color-control-label-height: 20px;
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	max-width: 100%;
 	top:
 		$admin-bar-height-big + $header-height + $block-toolbar-height +
 		$border-width;
@@ -437,7 +436,7 @@ $color-control-label-height: 20px;
 	}
 }
 
-.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
+.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
 		top:
 			$admin-bar-height + $header-height + $block-toolbar-height +
@@ -445,20 +444,20 @@ $color-control-label-height: 20px;
 	}
 }
 
-.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
-.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
+.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 	top:
 		$admin-bar-height + $header-height + $block-toolbar-height +
 		$border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation.is-responsive-menu-open {
+.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
 	right: $sidebar-width;
 }
 
 // When fullscreen.
 .is-fullscreen-mode {
-	.wp-block-navigation.is-responsive-menu-open {
+	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
 		top:
 			$admin-bar-height-big + $header-height + $block-toolbar-height +
@@ -469,21 +468,21 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
+	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 		@include break-medium() {
 			top: $header-height + $block-toolbar-height + $border-width;
 		}
 	}
 
-	.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
-	.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
+	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 		top: $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 // The iframe makes these rules a lot simpler.
 body.editor-styles-wrapper
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index be8a1d57f5c40e..8547d420c91b72 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -320,20 +320,13 @@
  * Mobile menu.
  */
 
-// Override default positioning
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container {
+	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	// Give it a z-index just higher than the adminbar.
-	z-index: 100000;
-	padding: 72px 24px 24px 24px;
-}
-
-.wp-block-navigation__responsive-container {
-	display: none;
 
 	.wp-block-navigation__responsive-container-content {
 		display: contents;
@@ -345,7 +338,18 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: contents;
+		display: flex; // Needs to be set to override "none".
+		flex-direction: column;
+
+		// Allow modal to scroll.
+		overflow: auto;
+
+		// Give it a z-index just higher than the adminbar.
+		z-index: 100000;
+
+		// Add extra top padding so items don't conflict with close button.
+		padding: 72px 24px 24px 24px;
+		background-color: inherit;
 		// Fallback to inheritance in case the --justification-setting variable fails.
 		align-items: inherit;
 
@@ -455,10 +459,8 @@
 // Default menu background and font color.
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
-	color: #000;
-}
-.wp-block-navigation:not(.has-background).is-responsive-menu-open {
 	background-color: #fff;
+	color: #000;
 }
 
 // Menu and close buttons.
@@ -485,10 +487,6 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	.is-responsive-menu-open & {
-		display: none; // Or do we need this button to still be screen reader accessible?
-	}
-
 	&:not(.always-shown) {
 		@include break-small {
 			display: none;
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 4a78455cc4a0c3..ff5957d8dd66b7 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -15,9 +15,6 @@ function navigationToggleModal( modal ) {
 	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
 	closeButton.setAttribute( 'aria-expanded', ! isHidden );
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	triggerButton
-		.closest( '.wp-block-navigation' )
-		.classList.toggle( 'is-responsive-menu-open', ! isHidden );
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;