From 705470052c3aa541883c231a03a228a988eeb55e Mon Sep 17 00:00:00 2001
From: Maggie Cabrera <maggie.cabrera@automattic.com>
Date: Fri, 28 May 2021 12:59:37 +0200
Subject: [PATCH] use flexbox to center blocks inside layout

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

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 1b1eec679c80a0..526bb0154ce25b 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -63,7 +63,15 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	$style = '';
 	if ( $content_size || $wide_size ) {
-		$style  = ".wp-container-$id > * {";
+
+		$style  = ".wp-container-$id {";
+		$style .= 'display: flex;';
+		$style .= 'flex-flow: column;';
+		$style .= 'align-items: center;';
+		$style .= '}';
+
+		$style .= ".wp-container-$id > * {";
+		$style .= 'box-sizing: border-box;';
 		$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
 		$style .= 'margin-left: auto !important;';
 		$style .= 'margin-right: auto !important;';
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index e29fb8ab05ccaa..07a513fe8f5c6c 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -41,7 +41,15 @@ export function LayoutStyle( { selector, layout = {} } ) {
 	let style =
 		!! contentSize || !! wideSize
 			? `
+				${ selector } {
+					display: flex;
+					flex-flow: column;
+					align-items: center;
+				}
+
 				${ appendSelectors( selector, '> *' ) } {
+					box-sizing: border-box;
+					width: 100%;
 					max-width: ${ contentSize ?? wideSize };
 					margin-left: auto !important;
 					margin-right: auto !important;