diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 980e1aec186f40..3b4f2b5a9bd4b5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -62,8 +62,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector .alignfull { max-width: none; }"; } - $style .= "$selector .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }"; - $style .= "$selector .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }"; + $style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }"; + $style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }"; + $style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }"; if ( $has_block_gap_support ) { $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )'; $style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }"; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 8ef689d7a36d3d..a66b03547126cb 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -143,6 +143,11 @@ export default { margin-inline-start: 2em; margin-inline-end: 0; } + + ${ appendSelectors( selector, '> .aligncenter' ) } { + margin-left: auto !important; + margin-right: auto !important; + } `; if ( hasBlockGapStylesSupport ) { diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index 164b60a3d536ee..ce80a69901cf5b 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -39,6 +39,7 @@ "__experimentalDefaultControls": { "padding": true } - } + }, + "__experimentalLayout": true } } diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 637f924678a1d9..cbbe939c2425b4 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -58,6 +58,7 @@ margin-bottom: 0.5em; } + // This is needed for classic themes where the align class is not on the container. .aligncenter { margin-left: auto; margin-right: auto;