Add the left/right margins properly

WordPress · Feb 8, 2022 · fb92cf4 · fb92cf4
1 parent 67b1282
commit fb92cf4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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;
 			}
 
 		`;