Fix center aligned images styles (#39422)

WordPress · Mar 15, 2022 · 45c37fb · 45c37fb
1 parent 0ef399d
commit 45c37fb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -62,8 +62,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
-		$style .= "$selector .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
-		$style .= "$selector .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
+		$style .= "$selector > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
+		$style .= "$selector > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
+		$style .= "$selector > .aligncenter { margin-left: auto !important; margin-right: auto !important; }";
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
 			$style    .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -143,6 +143,11 @@ export default {
 				margin-inline-start: 2em;
 				margin-inline-end: 0;
 			}
+
+			${ appendSelectors( selector, '> .aligncenter' ) } {
+				margin-left: auto !important;
+				margin-right: auto !important;
+			}
 		`;
 
 		if ( hasBlockGapStylesSupport ) {

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
@@ -39,6 +39,7 @@
 			"__experimentalDefaultControls": {
 				"padding": true
 			}
-		}
+		},
+		"__experimentalLayout": true
 	}
 }
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -58,6 +58,7 @@
 		margin-bottom: 0.5em;
 	}
 
+	// This is needed for classic themes where the align class is not on the container.
 	.aligncenter {
 		margin-left: auto;
 		margin-right: auto;