From fb92cf4399a18c5bf8a9f2a7be6aca68948d4ee1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 8 Feb 2022 10:33:37 +0100
Subject: [PATCH] Add the left/right margins properly

---
 lib/block-supports/layout.php             | 6 ++++--
 packages/block-editor/src/layouts/flow.js | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

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;
 			}
 
 		`;