@wordpress/block-editor 8.0.0 → 8.0.4

package/src/layouts/flex.js

@@ -85,7 +85,10 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout } ) {
-		const { orientation = 'horizontal' } = layout;
+		const {
+			orientation = 'horizontal',
+			setCascadingProperties = false,
+		} = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const justifyContent =
@@ -94,21 +97,36 @@ 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 = `
+		let rowOrientation = `
 		flex-direction: row;
 		align-items: center;
 		justify-content: ${ justifyContent };
-		--justification-setting: ${ 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;
-		const columnOrientation = `
+		let columnOrientation = `
 		flex-direction: column;
 		align-items: ${ alignItems };
-		--justification-setting: ${ alignItems };
 		`;
+		if ( setCascadingProperties ) {
+			columnOrientation += `
+			--layout-justification-setting: ${ alignItems };
+			--layout-direction: column;
+			--layout-justify: initial;
+			--layout-align: ${ alignItems };
+			`;
+		}
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {