Fix legacy button center alignments inside the buttons block (#29281)

* Fix buttons > button alignments in the editor * Move style to the right place in stylesheet * Fix typo * Apply change in front-end too and adjust editor styles to match * Adjust margins * Add some more commentary
WordPress · Feb 25, 2021 · 57342da · 57342da
1 parent 8ab2453
commit 57342da
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -27,6 +27,34 @@ $blocks-block__margin: 0.5em;
 			box-shadow: none;
 		}
 	}
+
+	// Back compat: Inner button blocks previously had their own alignment
+	// options. Forcing them to 100% width in the flex container replicates
+	// that these were block level elements that took up the full width.
+	//
+	// This back compat rule is ignored if the user decides to use the
+	// newer justification options on the button block, hence the :not.
+	//
+	// Disable the stylelint rule, otherwise this selector is ugly!
+	/* stylelint-disable indentation */
+	&:not(
+		.is-content-justification-space-between,
+		.is-content-justification-right,
+		.is-content-justification-left,
+		.is-content-justification-center
+	) .wp-block[data-align="center"] {
+	/* stylelint-enable indentation */
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 0;
+		width: 100%;
+
+		.wp-block-button {
+			// Some margin hacks are needed, since margin doesn't seem to
+			// collapse in the same way when a parent layout it flex.
+			margin-bottom: 0;
+		}
+	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -66,7 +66,11 @@ $blocks-block__margin: 0.5em;
 		}
 	}
 
-	// Kept for backward compatibiity.
+	&.is-content-justification-space-between {
+		justify-content: space-between;
+	}
+
+	// Kept for backward compatibility.
 	&.aligncenter {
 		text-align: center;
 	}
@@ -93,7 +97,25 @@ $blocks-block__margin: 0.5em;
 		}
 	}
 
-	&.is-content-justification-space-between {
-		justify-content: space-between;
+	// Back compat: Inner button blocks previously had their own alignment
+	// options. Forcing them to 100% width in the flex container replicates
+	// that these were block level elements that took up the full width.
+	//
+	// This back compat rule is ignored if the user decides to use the
+	// newer justification options on the button block, hence the :not.
+	//
+	// Disable the stylelint rule, otherwise this selector is ugly!
+	/* stylelint-disable indentation */
+	&:not(
+		.is-content-justification-space-between,
+		.is-content-justification-right,
+		.is-content-justification-left,
+		.is-content-justification-center
+	) .wp-block-button.aligncenter {
+	/* stylelint-enable indentation */
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: $blocks-block__margin;
+		width: 100%;
 	}
 }