From 7169054f103ffac27c1d8eb1901217e79ea576b5 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell.reigstad@automattic.com>
Date: Tue, 11 May 2021 11:44:45 -0400
Subject: [PATCH] Try: Use column gap for button blocks (#31386)

* Use column gap for button blocks

* Update style.scss
---
 packages/block-library/src/button/style.scss  | 34 +++++++++++++++++++
 packages/block-library/src/buttons/style.scss |  1 +
 2 files changed, 35 insertions(+)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 65df1b3f0d504..fb85a6cdd6ce2 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -71,6 +71,40 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
+// 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 });
+			}
+
+			&.wp-block-button__width-75 {
+				width: calc(75% - #{ $blocks-block__margin * 0.25 });
+			}
+
+			&.wp-block-button__width-100 {
+				width: auto;
+				flex-basis: 100%;
+			}
+		}
+	}
+}
+
 // the first selector is required for old buttons markup
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index f51f2787d22bb..c293130a32409 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -5,6 +5,7 @@ $blocks-block__margin: 0.5em;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	column-gap: $blocks-block__margin;
 
 	&.is-vertical {
 		flex-direction: column;