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 (