diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 65f2d0cefd9d2..1eb106d7a609c 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -96,9 +96,6 @@ 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 @@ -106,27 +103,11 @@ 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'] ]};"; - 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 .= '}'; diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 968e7694db634..84125108515ad 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/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 (