Try: Fix buttons faux space-between.

WordPress · Jan 28, 2021 · 86edbeb · 86edbeb
1 parent 79505ea
commit 86edbeb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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*/