From fb7cb485b48bd021c8010785ca838837edfc520c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 27 May 2021 11:22:21 +0100 Subject: [PATCH] Alignment styles: Centre blocks using grid not margins (#32231) * Alignment styles: Centre blocks using flex not margins * add border-box so that padding doesn't make blocks wider * Use grid instead of flex * Update lib/block-supports/layout.php Co-authored-by: Ari Stathopoulos Co-authored-by: Ari Stathopoulos --- lib/block-supports/layout.php | 10 +++++++--- .../block-editor/src/components/block-list/layout.js | 9 +++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 1b1eec679c80a0..1f2bdaffa21fb5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -63,10 +63,14 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $style = ''; if ( $content_size || $wide_size ) { - $style = ".wp-container-$id > * {"; + + $style = ".wp-container-$id { display: grid; }"; + + $style .= ".wp-container-$id > * {"; + $style .= 'box-sizing: border-box;'; + $style .= 'justify-self: center;'; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; - $style .= 'margin-left: auto !important;'; - $style .= 'margin-right: auto !important;'; + $style .= 'width: 100%;'; $style .= '}'; $style .= ".wp-container-$id > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js index e29fb8ab05ccaa..19ead79ee87eee 100644 --- a/packages/block-editor/src/components/block-list/layout.js +++ b/packages/block-editor/src/components/block-list/layout.js @@ -41,10 +41,15 @@ export function LayoutStyle( { selector, layout = {} } ) { let style = !! contentSize || !! wideSize ? ` + ${ selector } { + display: grid; + } + ${ appendSelectors( selector, '> *' ) } { + box-sizing: border-box; + justify-self: center; + width: 100%; max-width: ${ contentSize ?? wideSize }; - margin-left: auto !important; - margin-right: auto !important; } ${ appendSelectors( selector, '> [data-align="wide"]' ) } {