Button: Adopt support for border color, style, and width (#44574)

WordPress · Feb 7, 2023 · 3f7e7f9 · 3f7e7f9 · github-actions · Feb 7, 2023
1 parent 53fab10
commit 3f7e7f9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -92,10 +92,16 @@
 			}
 		},
 		"__experimentalBorder": {
+			"color": true,
 			"radius": true,
+			"style": true,
+			"width": true,
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
-				"radius": true
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
 			}
 		},
 		"__experimentalSelector": ".wp-block-button .wp-block-button__link"

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -79,3 +79,39 @@ div[data-type="core/button"] {
 .editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
 	text-decoration: inherit;
 }
+
+.editor-styles-wrapper .wp-block-button .wp-block-button__link {
+	// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
+	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -92,7 +92,6 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0;
 }
 
-
 // the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
@@ -116,3 +115,40 @@ $blocks-block__margin: 0.5em;
 	// background-image is required to overwrite a gradient background
 	background-image: none;
 }
+
+.wp-block-button .wp-block-button__link {
+	// The following styles ensure a default border is applied when the user
+	// selects only a border color or style. This overcomes the zero border
+	// width applied by core's theme.json via the elements API.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}