Add configurable header styles to Blank Canvas Blocks (#3439)

Added configurable Header settings to BCB

blank-canvas-blocks/assets/ponyfill.css

@@ -221,7 +221,6 @@ textarea {
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border-radius);
 	color: var(--wp--custom--form--color--text);
-	line-height: var(--wp--custom--line-height--body);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);
 	box-shadow: var(--wp--custom--form--color--box-shadow);
@@ -264,16 +263,10 @@ input[type=checkbox] + label {
 	line-height: 1em;
 }
 
-/*
- * I had REALLY thought that font-family was a theme.json supported thing for headers
- * but it doesn't seem to be working at the moment so here's the ponyfill.
- */
-h1, h2, h3, h4, h5, h6 {
-	font-family: var(--wp--preset--font-family--headings);
-}
-
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
+	font-family: var(--wp--custom--heading--typography--font-family);
+	font-weight: var(--wp--custom--heading--typography--font-weight);
 }
 
 /**

blank-canvas-blocks/experimental-theme.json

@@ -66,6 +66,11 @@
 						"fontFamily": "var(--font-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif)",
 						"slug": "base",
 						"name": "Base"
+					},
+					{
+						"fontFamily": "var(--font-headings, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif)",
+						"slug": "headings",
+						"name": "Headings"
 					}
 				]
 			},
@@ -88,10 +93,6 @@
 					"background": "var(--wp--preset--color--white)",
 					"selection": "var(--wp--preset--color--almost-white)"
 				},
-				"lineHeight": {
-					"body": 1.6,
-					"headings": 1.125
-				},
 				"margin": {
 					"horizontal": "20px",
 					"vertical": "20px"
@@ -150,6 +151,13 @@
 						"margin": "var(--wp--custom--margin--vertical) auto",
 						"textAlign": "center"
 					}
+				},
+				"heading": {
+					"typography":{
+						"fontWeight": 400,
+						"lineHeight": 1.125,
+						"fontFamily": "var(--wp--preset--font-family--headings)"
+					}
 				}
 			}
 		}
@@ -163,7 +171,7 @@
 			},
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
-				"lineHeight": "var(--wp--custom--line-height--body)",
+				"lineHeight": "1.6",
 				"fontFamily": "var(--wp--preset--font-family--base)"
 			}
 		},
@@ -175,44 +183,44 @@
 		},
 		"core/heading/h1": {
 			"typography": {
-				"fontSize": "var(--wp--preset--font-size--huge)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontSize": "48px",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/heading/h2": {
 			"typography": {
-				"fontSize": "var(--wp--preset--font-size--huge)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontSize": "32px",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/heading/h3": {
 			"typography": {
-				"fontSize": "var(--wp--preset--font-size--large)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/heading/h4": {
 			"typography": {
-				"fontSize": "24px",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontSize": "var(--wp--preset--font-size--large)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/heading/h5": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/heading/h6": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--small)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/post-title/h1": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--huge)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
 			}
 		},
 		"core/post-date": {

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

@@ -1,3 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
-}
+	font-family: var(--wp--custom--heading--typography--font-family);
+	font-weight: var(--wp--custom--heading--typography--font-weight);
+}

blank-canvas-blocks/sass/elements/_forms.scss

@@ -17,7 +17,6 @@ textarea {
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border-radius);
 	color: var(--wp--custom--form--color--text);
-	line-height: var(--wp--custom--line-height--body);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);
 	box-shadow: var(--wp--custom--form--color--box-shadow);

blank-canvas-blocks/sass/elements/_headers.scss

@@ -1,7 +0,0 @@
-/*
- * I had REALLY thought that font-family was a theme.json supported thing for headers
- * but it doesn't seem to be working at the moment so here's the ponyfill.
- */
-h1,h2,h3,h4,h5,h6 {
-	font-family: var(--wp--preset--font-family--headings);
-}

blank-canvas-blocks/sass/elements/_style.scss

@@ -4,5 +4,4 @@
  */
 
 @import "links";
-@import "forms";
-@import "headers";
+@import "forms";