Try cascading nav styles through classnames (#37473)

* Move layout custom properties to filter.

* Try cascading nav styles through classnames

* Improve formatting.

* Remove hook

* Fix PHP lint errors.

* More specific variable names

lib/block-supports/layout.php

@@ -96,37 +96,18 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$style .= "flex-wrap: $flex_wrap;";
 		if ( 'horizontal' === $layout_orientation ) {
 			$style .= 'align-items: center;';
-			if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
-				$style .= '--layout-direction: row;';
-			}
 			/**
 			 * Add this style only if is not empty for backwards compatibility,
 			 * since we intend to convert blocks that had flex layout implemented
 			 * by custom css.
 			 */
 			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 				$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
-				if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
-					// --layout-justification-setting allows children to inherit the value regardless or row or column direction.
-					$style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
-					$style .= "--layout-wrap: $flex_wrap;";
-					$style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};";
-					$style .= '--layout-align: center;';
-				}
 			}
 		} else {
 			$style .= 'flex-direction: column;';
-			if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
-				$style .= '--layout-direction: column;';
-			}
 			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 				$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
-				if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
-					// --layout-justification-setting allows children to inherit the value regardless or row or column direction.
-					$style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
-					$style .= '--layout-justify: initial;';
-					$style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};";
-				}
 			}
 		}
 		$style .= '}';

packages/block-editor/src/layouts/flex.js

@@ -85,10 +85,7 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout } ) {
-		const {
-			orientation = 'horizontal',
-			setCascadingProperties = false,
-		} = layout;
+		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const justifyContent =
@@ -97,36 +94,18 @@ export default {
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
-		let rowOrientation = `
+		const rowOrientation = `
 		flex-direction: row;
 		align-items: center;
 		justify-content: ${ justifyContent };
 		`;
-		if ( setCascadingProperties ) {
-			// --layout-justification-setting allows children to inherit the value
-			// regardless or row or column direction.
-			rowOrientation += `
-			--layout-justification-setting: ${ justifyContent };
-			--layout-direction: row;
-			--layout-wrap: ${ flexWrap };
-			--layout-justify: ${ justifyContent };
-			--layout-align: center;
-			`;
-		}
 		const alignItems =
 			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
-		let columnOrientation = `
+		const columnOrientation = `
 		flex-direction: column;
 		align-items: ${ alignItems };
 		`;
-		if ( setCascadingProperties ) {
-			columnOrientation += `
-			--layout-justification-setting: ${ alignItems };
-			--layout-direction: column;
-			--layout-justify: initial;
-			--layout-align: ${ alignItems };
-			`;
-		}
+
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {

packages/block-library/src/navigation/block.json

@@ -114,8 +114,7 @@
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
-				"type": "flex",
-				"setCascadingProperties": true
+				"type": "flex"
 			}
 		}
 	},

packages/block-library/src/navigation/deprecated.js

@@ -43,7 +43,6 @@ const migrateWithLayout = ( attributes ) => {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				setCascadingProperties: 'true',
 				...( itemsJustification && {
 					justifyContent: itemsJustification,
 				} ),
@@ -135,7 +134,6 @@ const v6 = {
 			allowInheriting: false,
 			default: {
 				type: 'flex',
-				setCascadingProperties: true,
 			},
 		},
 	},

packages/block-library/src/navigation/edit/index.js

@@ -111,7 +111,11 @@ function Navigation( {
 		openSubmenusOnClick,
 		overlayMenu,
 		showSubmenuIcon,
-		layout: { justifyContent, orientation = 'horizontal' } = {},
+		layout: {
+			justifyContent,
+			orientation = 'horizontal',
+			flexWrap = 'wrap',
+		} = {},
 	} = attributes;
 
 	let areaMenu,
@@ -234,6 +238,10 @@ function Navigation( {
 		className: classnames( className, {
 			'items-justified-right': justifyContent === 'right',
 			'items-justified-space-between': justifyContent === 'space-between',
+			'items-justified-left': justifyContent === 'left',
+			'items-justified-center': justifyContent === 'center',
+			'is-vertical': orientation === 'vertical',
+			'no-wrap': flexWrap === 'nowrap',
 			'is-responsive': 'never' !== overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(

packages/block-library/src/navigation/index.php

@@ -452,14 +452,24 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	}
 
+	$layout_justification = array(
+		'left'          => 'items-justified-left',
+		'right'         => 'items-justified-right',
+		'center'        => 'items-justified-center',
+		'space-between' => 'items-justified-space-between',
+	);
+
 	// Restore legacy classnames for submenu positioning.
 	$layout_class = '';
 	if ( isset( $attributes['layout']['justifyContent'] ) ) {
-		if ( 'right' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-right';
-		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-space-between';
-		}
+		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+	}
+	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
+		$layout_class .= ' is-vertical';
+	}
+
+	if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
+		$layout_class .= ' no-wrap';
 	}
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );

packages/block-library/src/navigation/style.scss

@@ -106,6 +106,45 @@ $navigation-icon-size: 24px;
 			height: inherit;
 		}
 	}
+
+	// Custom properties for layout style cascade: default values.
+	--navigation-layout-justification-setting: flex-start;
+	--navigation-layout-direction: row;
+	--navigation-layout-wrap: wrap;
+	--navigation-layout-justify: flex-start;
+	--navigation-layout-align: center;
+
+	&.is-vertical {
+		--navigation-layout-direction: column;
+		--navigation-layout-justify: initial;
+	}
+
+	&.no-wrap {
+		--navigation-layout-wrap: nowrap;
+	}
+
+	&.items-justified-center {
+		--navigation-layout-justification-setting: center;
+		--navigation-layout-justify: center;
+
+		&.is-vertical {
+			--navigation-layout-align: center;
+		}
+	}
+
+	&.items-justified-right {
+		--navigation-layout-justification-setting: flex-end;
+		--navigation-layout-justify: flex-end;
+
+		&.is-vertical {
+			--navigation-layout-align: flex-end;
+		}
+	}
+
+	&.items-justified-space-between {
+		--navigation-layout-justification-setting: space-between;
+		--navigation-layout-justify: space-between;
+	}
 }
 
 // Styles for submenu flyout.
@@ -351,10 +390,10 @@ button.wp-block-navigation-item__content {
 // Navigation block inner container.
 .wp-block-navigation__container {
 	display: flex;
-	flex-wrap: var(--layout-wrap, wrap);
-	flex-direction: var(--layout-direction, initial);
-	justify-content: var(--layout-justify, initial);
-	align-items: var(--layout-align, initial);
+	flex-wrap: var(--navigation-layout-wrap, wrap);
+	flex-direction: var(--navigation-layout-direction, initial);
+	justify-content: var(--navigation-layout-justify, initial);
+	align-items: var(--navigation-layout-align, initial);
 
 	// Reset the default list styles
 	list-style: none;
@@ -388,10 +427,10 @@ button.wp-block-navigation-item__content {
 
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
-		flex-wrap: var(--layout-wrap, wrap);
-		flex-direction: var(--layout-direction, initial);
-		justify-content: var(--layout-justify, initial);
-		align-items: var(--layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
 	}
 
 	// If the responsive wrapper is present but overlay is not open,
@@ -435,7 +474,7 @@ button.wp-block-navigation-item__content {
 			flex-wrap: nowrap;
 
 			// Inherit alignment settings from container.
-			align-items: var(--layout-justification-setting, inherit);
+			align-items: var(--navigation-layout-justification-setting, inherit);
 
 			// Always align the contents of the menu to the top.
 			&,
@@ -489,7 +528,7 @@ button.wp-block-navigation-item__content {
 				display: flex;
 				flex-direction: column;
 				// Inherit alignment settings from container.
-				align-items: var(--layout-justification-setting, initial);
+				align-items: var(--navigation-layout-justification-setting, initial);
 			}
 		}
 

test/integration/fixtures/blocks/core__navigation__deprecated-1.json

@@ -9,7 +9,6 @@
 			"overlayMenu": "mobile",
 			"layout": {
 				"type": "flex",
-				"setCascadingProperties": "true",
 				"orientation": "horizontal"
 			}
 		},

test/integration/fixtures/blocks/core__navigation__deprecated-1.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"}} -->
+<!-- wp:navigation {"layout":{"type":"flex","orientation":"horizontal"}} -->
 <!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
 <!-- /wp:navigation -->

test/integration/fixtures/blocks/core__navigation__deprecated-v4.json

@@ -10,7 +10,6 @@
 			"fontFamily": "cambria-georgia",
 			"layout": {
 				"type": "flex",
-				"setCascadingProperties": "true",
 				"orientation": "horizontal"
 			}
 		},

test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html

@@ -1 +1 @@
-<!-- wp:navigation {"overlayMenu":"never","fontFamily":"cambria-georgia","layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"}} /-->
+<!-- wp:navigation {"overlayMenu":"never","fontFamily":"cambria-georgia","layout":{"type":"flex","orientation":"horizontal"}} /-->

test/integration/fixtures/blocks/core__navigation__deprecated-v5.json

@@ -9,7 +9,6 @@
 			"overlayMenu": "never",
 			"layout": {
 				"type": "flex",
-				"setCascadingProperties": "true",
 				"justifyContent": "center",
 				"orientation": "vertical"
 			}

test/integration/fixtures/blocks/core__navigation__deprecated-v5.serialized.html

@@ -1 +1 @@
-<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":"true","justifyContent":"center","orientation":"vertical"}} /-->
+<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} /-->

test/integration/fixtures/blocks/core__navigation__deprecated.json

@@ -15,7 +15,6 @@
 			},
 			"layout": {
 				"type": "flex",
-				"setCascadingProperties": "true",
 				"orientation": "horizontal"
 			}
 		},

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"}},"layout":{"type":"flex","setCascadingProperties":"true","orientation":"horizontal"}} -->
+<!-- wp:navigation {"style":{"typography":{"textTransform":"lowercase","textDecoration":"line-through","fontStyle":"italic","fontWeight":"100"}},"layout":{"type":"flex","orientation":"horizontal"}} -->
 <!-- wp:navigation-link {"label":"WordPress","url":"https://www.wordpress.org/"} /-->
 <!-- /wp:navigation -->