Merge pull request #3688 from Automattic/add/bcb-border-supports

BCB + children: added border supports to buttons

blank-canvas-blocks/assets/ponyfill.css

@@ -452,11 +452,9 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
-	border-radius: var(--wp--custom--button--border--radius);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
 	color: var(--wp--custom--button--color--text);
-	border-color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
 	padding: calc(.667em + 2px) calc(1.333em + 2px);
 }
@@ -575,11 +573,9 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
-	border-radius: var(--wp--custom--button--border--radius);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
 	color: var(--wp--custom--button--color--text);
-	border-color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
 	padding: calc(.667em + 2px) calc(1.333em + 2px);
 }
@@ -654,11 +650,9 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
-	border-radius: var(--wp--custom--button--border--radius);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none;
 	color: var(--wp--custom--button--color--text);
-	border-color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
 	padding: calc(.667em + 2px) calc(1.333em + 2px);
 	display: inline-block;

blank-canvas-blocks/experimental-theme.json

@@ -127,7 +127,10 @@
 						"lineHeight": 2
 					},
 					"border": {
-						"radius": "4px"
+						"radius": "4px",
+						"width": "0",
+						"style": "solid",
+						"color": "var(--wp--custom--button--color--text)"
 					},
 					"color": {
 						"text": "var(--wp--custom--color--background)",
@@ -283,6 +286,12 @@
 						"fontWeight": "normal"
 					}
 				}
+			},
+			"border": {
+				"customColor": true,
+				"customRadius": true,
+				"customStyle": true,
+				"customWidth": true
 			}
 		}
 	},
@@ -319,7 +328,10 @@
 				"lineHeight": "var(--wp--custom--button--typography--line-height)"
 			},
 			"border": {
-				"radius": "var(--wp--custom--button--border--radius)"
+				"radius": "var(--wp--custom--button--border--radius)",
+				"style": "var(--wp--custom--button--border--style)",
+				"width": "var(--wp--custom--button--border--width)",
+				"color": "var(--wp--custom--button--border--color)"
 			}
 		},
 		"core/heading/h1": {

blank-canvas-blocks/sass/blocks/_button.scss

@@ -7,11 +7,9 @@
 	font-weight: var(--wp--custom--button--typography--font-weight);
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
-	border-radius: var(--wp--custom--button--border--radius);
 	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 	color: var(--wp--custom--button--color--text);
-	border-color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
 	padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block 
 	svg {

mayland-blocks/experimental-theme.json

@@ -142,7 +142,10 @@
 						"lineHeight": 2
 					},
 					"border": {
-						"radius": "4px"
+						"radius": "4px",
+						"width": "0",
+						"style": "solid",
+						"color": "var(--wp--custom--button--color--text)"
 					},
 					"color": {
 						"text": "var(--wp--custom--color--background)",
@@ -163,6 +166,14 @@
 						"text": "var(--wp--custom--color--foreground)",
 						"background": "transparent",
 						"boxShadow": "none"
+					},
+					"label": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)"
+						}
+					},
+					"typography": {
+						"fontSize": "var(--wp--preset--font-size--normal)"
 					}
 				},
 				"paragraph": {
@@ -198,7 +209,13 @@
 					"citation": {
 						"typography": {
 							"fontSize": "var(--wp--preset--font-size--tiny)",
+							"fontFamily": "inherit",
 							"fontStyle": "italic"
+						},
+						"spacing": {
+							"margin": {
+								"top": "var(--wp--custom--margin--vertical)"
+							}
 						}
 					}
 				},
@@ -295,6 +312,12 @@
 					"default": "750px",
 					"wide": "1022px"
 				}
+			},
+			"border": {
+				"customColor": true,
+				"customRadius": true,
+				"customStyle": true,
+				"customWidth": true
 			}
 		}
 	},
@@ -331,7 +354,10 @@
 				"lineHeight": "var(--wp--custom--button--typography--line-height)"
 			},
 			"border": {
-				"radius": "var(--wp--custom--button--border--radius)"
+				"radius": "var(--wp--custom--button--border--radius)",
+				"style": "var(--wp--custom--button--border--style)",
+				"width": "var(--wp--custom--button--border--width)",
+				"color": "var(--wp--custom--button--border--color)"
 			}
 		},
 		"core/heading/h1": {

seedlet-blocks/experimental-theme.json

@@ -179,7 +179,10 @@
 						"lineHeight": 2
 					},
 					"border": {
-						"radius": "4px"
+						"radius": "4px",
+						"width": "0",
+						"style": "solid",
+						"color": "var(--wp--custom--button--color--text)"
 					},
 					"color": {
 						"text": "var(--wp--custom--color--background)",
@@ -339,6 +342,12 @@
 					"family=Fira+Sans:ital,wght@0,400;0,500;1,400",
 					"family=Playfair+Display:ital,wght@0,400;0,700;1,400"
 				]
+			},
+			"border": {
+				"customColor": true,
+				"customRadius": true,
+				"customStyle": true,
+				"customWidth": true
 			}
 		}
 	},
@@ -375,7 +384,10 @@
 				"lineHeight": "var(--wp--custom--button--typography--line-height)"
 			},
 			"border": {
-				"radius": "var(--wp--custom--button--border--radius)"
+				"radius": "var(--wp--custom--button--border--radius)",
+				"style": "var(--wp--custom--button--border--style)",
+				"width": "var(--wp--custom--button--border--width)",
+				"color": "var(--wp--custom--button--border--color)"
 			}
 		},
 		"core/heading/h1": {