From 86edbeb361f371bb6b16d8e04706d203842ce6b8 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 26 Jan 2021 10:41:48 +0100
Subject: [PATCH] Try: Fix buttons faux space-between.

---
 packages/base-styles/_variables.scss           |  2 +-
 packages/block-library/src/button/style.scss   |  9 ++++++---
 packages/block-library/src/buttons/editor.scss |  6 +++++-
 packages/block-library/src/buttons/style.scss  | 13 ++++++++-----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index e0c2a409028bd..74d8042cae306 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -3,6 +3,7 @@
  *
  * Please use variables from this sheet to ensure consistency across the UI.
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
 
 @import "./colors";
@@ -43,7 +44,6 @@ $grid-unit-60: 6 * $grid-unit;		// 48px
  */
 
 $icon-size: 24px;
-$button-margin: 0.5em;
 $button-size: 36px;
 $button-size-small: 24px;
 $header-height: 60px;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 591f6a0fc7349..eca481ce34bf2 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -1,5 +1,8 @@
 $blocks-button__height: 3.1em;
 
+// This variable is repeated across Button, Buttons, and Buttons editor styles.
+$blocks-block__margin: 0.5em;
+
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
@@ -43,15 +46,15 @@ $blocks-button__height: 3.1em;
 	}
 
 	&.wp-block-button__width-25 {
-		width: calc(25% - #{ $button-margin });
+		width: calc(25% - #{ $blocks-block__margin });
 	}
 
 	&.wp-block-button__width-50 {
-		width: calc(50% - #{ $button-margin });
+		width: calc(50% - #{ $blocks-block__margin });
 	}
 
 	&.wp-block-button__width-75 {
-		width: calc(75% - #{ $button-margin });
+		width: calc(75% - #{ $blocks-block__margin });
 	}
 
 	&.wp-block-button__width-100 {
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index e08d9923bb772..0a5cc537c0f82 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -1,3 +1,6 @@
+// This variable is repeated across Button, Buttons, and Buttons editor styles.
+$blocks-block__margin: 0.5em;
+
 .wp-block > .wp-block-buttons {
 	display: flex;
 	flex-wrap: wrap;
@@ -7,7 +10,8 @@
 	> .wp-block {
 		// Override editor auto block margins.
 		margin-left: 0;
-		margin-top: $button-margin;
+		margin-top: $blocks-block__margin;
+		margin-right: $blocks-block__margin;
 	}
 	> .block-list-appender {
 		display: inline-flex;
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 64bac05b155b8..f1bac7c8b8be7 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -1,3 +1,6 @@
+// This variable is repeated across Button, Buttons, and Buttons editor styles.
+$blocks-block__margin: 0.5em;
+
 .wp-block-buttons {
 	display: flex;
 	flex-direction: row;
@@ -18,8 +21,8 @@
 	> .wp-block-button {
 		display: inline-block;
 		/*rtl:ignore*/
-		margin-right: $button-margin;
-		margin-bottom: $button-margin;
+		margin-right: $blocks-block__margin;
+		margin-bottom: $blocks-block__margin;
 
 		&:last-child {
 			/*rtl:ignore*/
@@ -46,7 +49,7 @@
 
 		> .wp-block-button {
 			/*rtl:ignore*/
-			margin-left: $button-margin;
+			margin-left: $blocks-block__margin;
 			/*rtl:ignore*/
 			margin-right: 0;
 
@@ -69,7 +72,7 @@
 		/*rtl:ignore*/
 		margin-left: 0;
 		/*rtl:ignore*/
-		margin-right: $button-margin;
+		margin-right: $blocks-block__margin;
 
 		&:last-child {
 			/*rtl:ignore*/
@@ -80,7 +83,7 @@
 		/*rtl:ignore*/
 		margin-right: 0;
 		/*rtl:ignore*/
-		margin-left: $button-margin;
+		margin-left: $blocks-block__margin;
 
 		&:first-child {
 			/*rtl:ignore*/