From 051cd5485ea7f1ad4aae4cec690c9060430a9071 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Fri, 5 Nov 2021 22:31:47 +1100
Subject: [PATCH] Try using flex layout on the Navigation block (#36169)

* Try using flex layout on the Navigation block

* Fix justification for overlay menu

* Add deprecation and update fixtures

* Fix menu position in site editor.

* Don't use editor variables in front end styles.

* Move overlay styles back to inner container.
---
 lib/block-supports/layout.php                 |   3 +
 packages/block-editor/src/layouts/flex.js     |   4 +
 .../block-library/src/navigation/block.json   |  14 +-
 .../src/navigation/deprecated.js              | 132 ++++++++++++++-
 .../src/navigation/edit/index.js              |  20 ---
 .../block-library/src/navigation/index.js     |   2 -
 .../block-library/src/navigation/index.php    |   2 -
 .../block-library/src/navigation/style.scss   | 160 +++---------------
 .../src/navigation/variations.js              |  23 ---
 .../block-library/src/page-list/style.scss    |  24 +--
 .../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 +-
 21 files changed, 224 insertions(+), 222 deletions(-)
 delete mode 100644 packages/block-library/src/navigation/variations.js
 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/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/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/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/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 294ee51835942d..b44a5ef1427778 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,
@@ -300,11 +298,6 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	const justifyAllowedControls =
-		orientation === 'vertical'
-			? [ 'left', 'center', 'right' ]
-			: [ 'left', 'center', 'right', 'space-between' ];
-
 	return (
 		<EntityProvider
 			kind="postType"
@@ -331,19 +324,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/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..8547d420c91b72 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,87 +314,8 @@
 	.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.
  */
@@ -419,15 +327,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.
@@ -448,10 +350,19 @@
 		// 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;
 
 		.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 {
@@ -473,11 +384,8 @@
 				position: static;
 				border: none;
 				padding-left: 32px;
+				padding-right: 32px;
 
-				.items-justified-right & {
-					padding-left: 0;
-					padding-right: 32px;
-				}
 			}
 
 			// Space unfolded items using gap and padding for submenus.
@@ -497,22 +405,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 parent justifications inside the menu.
-				.items-justified-right & {
-					align-items: flex-end;
-				}
-
-				.items-justified-center & {
-					align-items: center;
-				}
+				// Inherit alignment settings from container.
+				align-items: var(--justification-setting, inherit);
 			}
 		}
 
@@ -535,8 +435,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;
@@ -593,22 +492,6 @@
 			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 +517,14 @@
 html.has-modal-open {
 	overflow: hidden;
 }
+
+.wp-block-navigation__responsive-close,
+.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;
+	}
+}
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/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;
-	}
-}
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 -->