Implement row gap with margins for backwards compatibility

WordPress · Sep 30, 2021 · 454e445 · 454e445
1 parent 4b941e5
commit 454e445
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -34,7 +34,8 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-.wp-block-button {
+// Increased specificity needed to override margins.
+.wp-block-buttons > .wp-block-button {
 	&.has-custom-width {
 		max-width: none;
 		.wp-block-button__link {

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: 0.5em;
+$blocks-block__margin: 1em;
 
 .wp-block > .wp-block-buttons {
 	display: flex;
@@ -8,8 +8,8 @@ $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
 	// Specificity needed to override editor auto block margins.
-	> .wp-block.wp-block-button {
-		margin: 0;
+	> .wp-block {
+		margin-top: calc(var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5);
 	}
 
 	> .block-list-appender {
@@ -47,6 +47,12 @@ $blocks-block__margin: 0.5em;
 		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;
+		}
 	}
 }
 

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -5,15 +5,25 @@ $blocks-block__margin: 0.5em;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--wp--style--block-gap, $blocks-block__margin);
+	column-gap: var(--wp--style--block-gap, $blocks-block__margin);
 
 	&.is-vertical {
 		flex-direction: column;
+		> .wp-block-button {
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	// 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);
 	}
 
 	&.is-content-justification-left {
@@ -65,6 +75,7 @@ $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%;
 	}
 }