Go back to using gap instead of margins

WordPress · Oct 5, 2021 · a431d40 · a431d40
1 parent 454e445
commit a431d40
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -1,5 +1,5 @@
 // This variable is repeated across Button, Buttons, and Buttons editor styles.
-$blocks-block__margin: 1em;
+$blocks-block__margin: 0.5em;
 
 .wp-block > .wp-block-buttons {
 	display: flex;
@@ -8,8 +8,8 @@ $blocks-block__margin: 1em;
 
 .wp-block-buttons {
 	// Specificity needed to override editor auto block margins.
-	> .wp-block {
-		margin-top: calc(var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5);
+	> .wp-block.wp-block-button {
+		margin: 0;
 	}
 
 	> .block-list-appender {

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -5,7 +5,7 @@ $blocks-block__margin: 0.5em;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	column-gap: var(--wp--style--block-gap, $blocks-block__margin);
+	gap: var(--wp--style--block-gap, $blocks-block__margin);
 
 	&.is-vertical {
 		flex-direction: column;
@@ -19,11 +19,7 @@ $blocks-block__margin: 0.5em;
 	// Increased specificity to override blocks default margin.
 	> .wp-block-button {
 		display: inline-block;
-		/*rtl:ignore*/
-		margin-left: 0;
-		/*rtl:ignore*/
-		margin-right: 0;
-		margin-bottom: calc(var(--wp--style--block-gap, #{ $blocks-block__margin}) * 0.5);
+		margin: 0;
 	}
 
 	&.is-content-justification-left {
@@ -75,7 +71,6 @@ $blocks-block__margin: 0.5em;
 	/* stylelint-enable indentation */
 		margin-left: auto;
 		margin-right: auto;
-		margin-bottom: calc(var(--wp--style--block-gap, #{ $blocks-block__margin}) * 0.5);
 		width: 100%;
 	}
 }