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.
WordPress · Nov 5, 2021 · 051cd54 · 051cd54
1 parent 2599d51
commit 051cd54
Show file tree

Hide file tree

Showing 21 changed files with 224 additions and 222 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -11,15 +11,13 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
-import variations from './variations';
 
 const { name } = metadata;
 
 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
@@ -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()
 	);