Fix: Button block does not centers on the editor (#17063)

WordPress · Aug 29, 2019 · c153ccd · c153ccd
1 parent ebe779e
commit c153ccd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -33,10 +33,6 @@ import {
 const { getComputedStyle } = window;
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
-	if ( node ) {
-		node.classList.add( 'wp-block-button-wrapper' );
-	}
-
 	const { textColor, backgroundColor } = ownProps;
 	const backgroundColorValue = backgroundColor && backgroundColor.color;
 	const textColorValue = textColor && textColor.color;

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -1,6 +1,10 @@
 .block-editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
+		div[data-block] {
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	&[data-align="right"] {
@@ -76,6 +80,7 @@
 	}
 }
 
-.wp-block-button-wrapper {
+// Display "table" is used because the button container should only wrap the content and not takes the full width.
+div[data-type="core/button"] div[data-block] {
 	display: table;
 }