Merge pull request #3704 from Automattic/fix/bcb-code-font-family

Blank Canvas Blocks: Make Code block's font-family overwritable

blank-canvas-blocks/assets/ponyfill.css

@@ -256,6 +256,10 @@ input[type=checkbox] + label {
 	margin-bottom: 0;
 }
 
+.wp-block-code code {
+	font-family: var(--wp--custom--code--typography--font-family);
+}
+
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption {
 	font-size: var(--wp--custom--gallery--caption--font-size);

blank-canvas-blocks/experimental-theme.json

@@ -176,6 +176,11 @@
 						"fontSize": "var(--wp--preset--font-size--small)"
 					}
 				},
+				"code": {
+					"typography": {
+						"fontFamily": "monospace"
+					}
+				},
 				"quote": {
 					"typography": {
 						"textAlign": "left"

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

@@ -0,0 +1,4 @@
+// TODO: This can be removed when Gutenberg applies fontFamily correcly to .wp-block-code code (https://github.com/WordPress/gutenberg/issues/31135)
+.wp-block-code code {
+	font-family: var(--wp--custom--code--typography--font-family);
+}

blank-canvas-blocks/sass/ponyfill.scss

@@ -10,6 +10,7 @@
 // - These styles replace key Gutenberg Block styles for fonts, colors, and
 //   spacing with CSS-variables overrides
 @import "blocks/button";
+@import "blocks/code";
 @import "blocks/gallery";
 @import "blocks/image";
 @import "blocks/list";