From d4d198cffd1d9fe19b18d10d8dfcc77909e14a7d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 26 May 2021 12:01:58 +0100
Subject: [PATCH 1/4] Alignment styles: Centre blocks using flex not margins

---
 lib/block-supports/layout.php                   | 17 +++++++++++------
 .../src/components/block-list/layout.js         | 14 +++++++++-----
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 1b1eec679c80a..9ef2b219f6797 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -63,15 +63,20 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	$style = '';
 	if ( $content_size || $wide_size ) {
-		$style  = ".wp-container-$id > * {";
-		$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
-		$style .= 'margin-left: auto !important;';
-		$style .= 'margin-right: auto !important;';
+
+		$style  = ".wp-container-$id {";
+		$style .= 'display: flex;';
+		$style .= 'flex-flow: column;';
+		$style .= 'align-items: center;';
+		$style .= '}';
+
+		$style .= ".wp-container-$id > * {";
+		$style .= 'width: ' . esc_html( $all_max_width_value ) . ';';
 		$style .= '}';
 
-		$style .= ".wp-container-$id > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
+		$style .= ".wp-container-$id > .alignwide { width: " . esc_html( $wide_max_width_value ) . ';}';
 
-		$style .= ".wp-container-$id .alignfull { max-width: none; }";
+		$style .= ".wp-container-$id .alignfull { width: 100%; }";
 	}
 
 	$style .= ".wp-container-$id .alignleft { float: left; margin-right: 2em; }";
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index e29fb8ab05cca..a1cd8fd60c8b8 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -41,18 +41,22 @@ export function LayoutStyle( { selector, layout = {} } ) {
 	let style =
 		!! contentSize || !! wideSize
 			? `
+				${ selector } {
+					align-items: center;
+					display: flex;
+					flex-flow: column;
+				}
+
 				${ appendSelectors( selector, '> *' ) } {
-					max-width: ${ contentSize ?? wideSize };
-					margin-left: auto !important;
-					margin-right: auto !important;
+					width: ${ contentSize ?? wideSize };
 				}
 
 				${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
-					max-width: ${ wideSize ?? contentSize };
+					width: ${ wideSize ?? contentSize };
 				}
 
 				${ appendSelectors( selector, '> [data-align="full"]' ) } {
-					max-width: none;
+					width: 100%;
 				}
 			`
 			: '';

From 40d3822e963a40a434f14a56bc170bba96a2fd0d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 26 May 2021 12:19:56 +0100
Subject: [PATCH 2/4] add border-box so that padding doesn't make blocks wider

---
 lib/block-supports/layout.php                             | 1 +
 packages/block-editor/src/components/block-list/layout.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 9ef2b219f6797..ec963427b2beb 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -71,6 +71,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$style .= '}';
 
 		$style .= ".wp-container-$id > * {";
+		$style .= 'box-sizing: border-box;';
 		$style .= 'width: ' . esc_html( $all_max_width_value ) . ';';
 		$style .= '}';
 
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index a1cd8fd60c8b8..789ccf12fe824 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -48,6 +48,7 @@ export function LayoutStyle( { selector, layout = {} } ) {
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
+					box-sizing: border-box;
 					width: ${ contentSize ?? wideSize };
 				}
 

From a1551886fd7cc82ad59632e451ec9b6449903e04 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 26 May 2021 14:02:30 +0100
Subject: [PATCH 3/4] Use grid instead of flex

---
 lib/block-supports/layout.php                        | 12 ++++++------
 .../block-editor/src/components/block-list/layout.js | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index ec963427b2beb..692c99f368352 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -65,19 +65,19 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	if ( $content_size || $wide_size ) {
 
 		$style  = ".wp-container-$id {";
-		$style .= 'display: flex;';
-		$style .= 'flex-flow: column;';
-		$style .= 'align-items: center;';
+		$style .= 'display: grid;';
 		$style .= '}';
 
 		$style .= ".wp-container-$id > * {";
 		$style .= 'box-sizing: border-box;';
-		$style .= 'width: ' . esc_html( $all_max_width_value ) . ';';
+		$style .= 'justify-self: center;';
+		$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
+		$style .= 'width: 100%;';
 		$style .= '}';
 
-		$style .= ".wp-container-$id > .alignwide { width: " . esc_html( $wide_max_width_value ) . ';}';
+		$style .= ".wp-container-$id > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
 
-		$style .= ".wp-container-$id .alignfull { width: 100%; }";
+		$style .= ".wp-container-$id .alignfull { max-width: none; }";
 	}
 
 	$style .= ".wp-container-$id .alignleft { float: left; margin-right: 2em; }";
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index 789ccf12fe824..19ead79ee87ee 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -42,22 +42,22 @@ export function LayoutStyle( { selector, layout = {} } ) {
 		!! contentSize || !! wideSize
 			? `
 				${ selector } {
-					align-items: center;
-					display: flex;
-					flex-flow: column;
+					display: grid;
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
 					box-sizing: border-box;
-					width: ${ contentSize ?? wideSize };
+					justify-self: center;
+					width: 100%;
+					max-width: ${ contentSize ?? wideSize };
 				}
 
 				${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
-					width: ${ wideSize ?? contentSize };
+					max-width: ${ wideSize ?? contentSize };
 				}
 
 				${ appendSelectors( selector, '> [data-align="full"]' ) } {
-					width: 100%;
+					max-width: none;
 				}
 			`
 			: '';

From eb0d79a720bb52260da142ff27fdc860cd53318f Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 27 May 2021 10:50:40 +0100
Subject: [PATCH 4/4] Update lib/block-supports/layout.php

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
---
 lib/block-supports/layout.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 692c99f368352..1f2bdaffa21fb 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -64,9 +64,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	$style = '';
 	if ( $content_size || $wide_size ) {
 
-		$style  = ".wp-container-$id {";
-		$style .= 'display: grid;';
-		$style .= '}';
+		$style  = ".wp-container-$id { display: grid; }";
 
 		$style .= ".wp-container-$id > * {";
 		$style .= 'box-sizing: border-box;';