diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 784b3b86523223..b5efb8b9565168 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -55,6 +55,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( $content_size || $wide_size ) { $style = "$selector > * {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; + $style .= '}'; + $style = "$selector > :not(.alignleft):not(.alignright) {"; $style .= 'margin-left: auto !important;'; $style .= 'margin-right: auto !important;'; $style .= '}'; @@ -63,8 +65,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector .alignfull { max-width: none; }"; } - $style .= "$selector .alignleft { float: left; margin-right: 2em; }"; - $style .= "$selector .alignright { float: right; margin-left: 2em; }"; + $style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }"; + $style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }"; if ( $has_block_gap_support ) { $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )'; $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }"; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 1e4c199c48e556..87f1b22521454d 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -117,6 +117,9 @@ export default { ? ` ${ appendSelectors( selector, '> *' ) } { max-width: ${ contentSize ?? wideSize }; + } + + ${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } { margin-left: auto !important; margin-right: auto !important; } @@ -135,11 +138,13 @@ export default { ${ appendSelectors( selector, '> .alignleft' ) } { float: left; margin-right: 2em; + margin-left: 0; } ${ appendSelectors( selector, '> .alignright' ) } { float: right; margin-left: 2em; + margin-right: 0; } `;