[Buttons block]: Add gap and vertical margin support (#34546)

* Add gap support to Buttons * Use css var and remove additional top and bottom margin * Remove unneeded CSS and account for gap in width calculations * Support center alignment for legacy buttons * Fix 100% width for center-aligned vertical buttons * Do not factor in gap when calculating width for vertical buttons * Clean up margin-based width calculations now that we're using gap * Interpolate vars and remove unneeded selector * Add top/bottom margin support to Buttons * Override block editor margins in non-blocks themes * Implement row gap with margins for backwards compatibility * Go back to using gap instead of margins * Override margins for the block appender as well as the button * Further increase specificity to fix TT1 editor styles
WordPress · Oct 14, 2021 · 89deab1 · 89deab1
1 parent 94bba4b
commit 89deab1
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 93 deletions.
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -63,7 +63,6 @@
 	.is-selected & {
 		height: auto;
 		overflow: visible;
-		margin-top: $grid-unit-20;
 	}
 }
 

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -34,7 +34,7 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// Increased specificity needed to override margins
+// Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {
 		max-width: none;
@@ -50,58 +50,35 @@ $blocks-block__margin: 0.5em;
 	}
 
 	&.wp-block-button__width-25 {
-		width: calc(25% - #{ $blocks-block__margin });
+		width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
 	}
 
 	&.wp-block-button__width-50 {
-		width: calc(50% - #{ $blocks-block__margin });
+		width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
 	}
 
 	&.wp-block-button__width-75 {
-		width: calc(75% - #{ $blocks-block__margin });
+		width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
 	}
 
 	&.wp-block-button__width-100 {
-		width: calc(100% - #{ $blocks-block__margin });
-
-		&:only-child {
-			margin-right: 0;
-			width: 100%;
-		}
+		width: 100%;
+		flex-basis: 100%;
 	}
 }
 
-// If the browser supports column-gap, use that instead of the margins above.
-@supports ( column-gap: #{ $blocks-block__margin } ) {
-	.wp-block-buttons {
-
-		> .wp-block-button,
-		&.is-content-justification-right > .wp-block-button, {
-			// Added (duplicate) specificity needed to override the default button margin.
-			&.wp-block-button {
-				margin-right: 0;
-				margin-left: 0;
-			}
-		}
-
-		> .wp-block-button {
-			&.wp-block-button__width-25 {
-				width: calc(25% - #{ $blocks-block__margin * 0.75 });
-			}
-
-			&.wp-block-button__width-50 {
-				width: calc(50% - #{ $blocks-block__margin * 0.5 });
-			}
+// For vertical buttons, gap is not factored into width calculations.
+.wp-block-buttons.is-vertical > .wp-block-button {
+	&.wp-block-button__width-25 {
+		width: 25%;
+	}
 
-			&.wp-block-button__width-75 {
-				width: calc(75% - #{ $blocks-block__margin * 0.25 });
-			}
+	&.wp-block-button__width-50 {
+		width: 50%;
+	}
 
-			&.wp-block-button__width-100 {
-				width: auto;
-				flex-basis: 100%;
-			}
-		}
+	&.wp-block-button__width-75 {
+		width: 75%;
 	}
 }
 

diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -18,7 +18,14 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
-		"__experimentalExposeControlsToChildren": true
+		"__experimentalExposeControlsToChildren": true,
+		"spacing": {
+			"blockGap": true,
+			"margin": ["top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -7,12 +7,16 @@ $blocks-block__margin: 0.5em;
 }
 
 .wp-block-buttons {
+	// Override editor auto block margins for button as well as the block appender.
 	> .wp-block {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $blocks-block__margin;
-		margin-right: $blocks-block__margin;
+		margin: 0;
 	}
+
+	// Specificity needed in some themes to override editor auto block margins for the button.
+	> .wp-block-button.wp-block-button.wp-block-button.wp-block-button.wp-block-button {
+		margin: 0;
+	}
+
 	> .block-list-appender {
 		display: inline-flex;
 		align-items: center;

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -5,13 +5,11 @@ $blocks-block__margin: 0.5em;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	column-gap: $blocks-block__margin;
+	gap: var(--wp--style--block-gap, $blocks-block__margin);
 
 	&.is-vertical {
 		flex-direction: column;
 		> .wp-block-button {
-			/*rtl:ignore*/
-			margin-right: 0;
 			&:last-child {
 				margin-bottom: 0;
 			}
@@ -21,16 +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: $blocks-block__margin;
-		margin-bottom: $blocks-block__margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
+		margin: 0;
 	}
 
 	&.is-content-justification-left {
@@ -50,18 +39,6 @@ $blocks-block__margin: 0.5em;
 	&.is-content-justification-right {
 		justify-content: flex-end;
 
-		> .wp-block-button {
-			/*rtl:ignore*/
-			margin-left: $blocks-block__margin;
-			/*rtl:ignore*/
-			margin-right: 0;
-
-			&:first-child {
-				/*rtl:ignore*/
-				margin-left: 0;
-			}
-		}
-
 		&.is-vertical {
 			align-items: flex-end;
 		}
@@ -75,28 +52,6 @@ $blocks-block__margin: 0.5em;
 	&.aligncenter {
 		text-align: center;
 	}
-	&.alignleft .wp-block-button {
-		/*rtl:ignore*/
-		margin-left: 0;
-		/*rtl:ignore*/
-		margin-right: $blocks-block__margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-	&.alignright .wp-block-button {
-		/*rtl:ignore*/
-		margin-right: 0;
-		/*rtl:ignore*/
-		margin-left: $blocks-block__margin;
-
-		&:first-child {
-			/*rtl:ignore*/
-			margin-left: 0;
-		}
-	}
 
 	// Back compat: Inner button blocks previously had their own alignment
 	// options. Forcing them to 100% width in the flex container replicates
@@ -116,7 +71,6 @@ $blocks-block__margin: 0.5em;
 	/* stylelint-enable indentation */
 		margin-left: auto;
 		margin-right: auto;
-		margin-bottom: $blocks-block__margin;
 		width: 100%;
 	}
 }