From 57342da8a3596b0b54c04e31e505833fa4bf7227 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 25 Feb 2021 15:14:14 +0800
Subject: [PATCH] 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
---
 .../block-library/src/buttons/editor.scss     | 28 +++++++++++++++++++
 packages/block-library/src/buttons/style.scss | 28 +++++++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 0a5cc537c0f823..29b381ac794650 100644
--- 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
index 0c85049e1e4f17..568a44824f53e3 100644
--- 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%;
 	}
 }