Refactor/bcb custom to styles (#3487)

Refactored "custom" style configuration into "style" configuration for blocks wherever possible. 

This was enabled because Gutenberg recently enabled configuration of styles of blocks even if they don't express support via their block.json.

This also brings alignment configuration in line with recent changes allowing blocks to express "wide/full" configuration individually.

blank-canvas-blocks/assets/ponyfill.css

@@ -11,15 +11,15 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 }
 
-p {
-	margin: 0;
-}
-
 img {
 	height: auto;
 	max-width: 100%;
 }
 
+* {
+	box-sizing: border-box;
+}
+
 /**
  * Required Variables
  */
@@ -64,79 +64,9 @@ img {
 	outline: 0;
 }
 
-/*
- * Alignments
- */
-body {
-	margin: 0;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
-.wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
-.wp-site-blocks .wp-block-post-content > * {
-	max-width: var(--wp--custom--width--default);
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0 var(--wp--custom--margin--horizontal);
-}
-
-.wp-site-blocks *[class*="__inner-container"] > .alignwide,
-.wp-site-blocks .alignwide {
-	width: var(--wp--custom--width--wide);
-	max-width: 100%;
-}
-
-.wp-site-blocks *[class*="__inner-container"] > .alignfull,
-.wp-site-blocks .alignfull {
-	max-width: unset;
-	margin-left: unset;
-	margin-right: unset;
-}
-
-.aligncenter {
-	text-align: center;
-}
-
-@media only screen and (min-width: 482px) {
-	.block-editor-block-list__layout .alignleft,
-	.block-editor-block-list__layout .alignright,
-	.wp-site-blocks .alignleft,
-	.wp-site-blocks .alignright {
-		max-width: calc(var(--wp--custom--width--default) / 2);
-	}
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
-	}
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
-	}
-	.block-editor-block-list__layout > .alignleft,
-	.block-editor-block-list__layout > .alignright,
-	.wp-site-blocks .wp-block-post-content > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
-	}
-	.block-editor-block-list__layout > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--alignment-margin);
-		/*rtl:ignore*/
-		margin-right: var(--wp--custom--margin--horizontal);
-	}
-	.block-editor-block-list__layout > .alignright,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		/*rtl:ignore*/
-		margin-left: var(--wp--custom--margin--horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--alignment-margin);
-	}
+.wp-block-post-content > .alignfull {
+	margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
+	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
 }
 
 ::selection {
@@ -147,15 +77,6 @@ body {
 	background-color: var(--wp--custom--color--selection);
 }
 
-.block-editor-block-list__block {
-	margin-bottom: 0;
-	margin-top: 0;
-}
-
-.block-editor-block-list__block .block-library-spacer__resize-container {
-	margin-bottom: 0;
-}
-
 *[class*="-background-color"]:not(.has-text-color) {
 	color: var(--wp--custom--color--background);
 }
@@ -170,7 +91,7 @@ body {
  */
 a {
 	cursor: pointer;
-	text-underline-offset: 2px;
+	text-underline-offset: 0.15em;
 	text-decoration: none;
 }
 
@@ -181,7 +102,6 @@ a:hover, a:focus {
 .block-editor-block-list__layout a,
 .wp-block-post-content a {
 	text-decoration: underline;
-	transition: border-color 0.1s ease-out;
 }
 
 .block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus,
@@ -251,12 +171,6 @@ input[type=checkbox] + label {
 	line-height: 1em;
 }
 
-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);
-}
-
 /**
  * Button
  */
@@ -265,11 +179,6 @@ h1, h2, h3, h4, h5, h6 {
  */
 .wp-block-button.wp-block-button__link,
 .wp-block-button .wp-block-button__link {
-	font-weight: var(--wp--custom--button--font-weight);
-	font-family: var(--wp--custom--button--font-family);
-	font-size: var(--wp--custom--button--font-size);
-	line-height: var(--wp--custom--button--line-height);
-	border-radius: var(--wp--custom--button--border-radius);
 	text-decoration: none;
 }
 
@@ -298,25 +207,12 @@ h1, h2, h3, h4, h5, h6 {
 	text-align: center;
 }
 
-/*
-	Further gutenberg APPEARS to be defaulting the margin to the same as 
-	the below, however (for reason's that aren't clear to me now) this
-	isn't coming through.
-*/
-.wp-block-column .wp-block-image {
-	margin: 0 0 1em 0;
-}
-
 ul,
 ol {
 	font-family: var(--wp--custom--list--font-family);
 	padding-left: var(--wp--custom--list--padding--left);
 }
 
-p.has-background {
-	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-}
-
 p.has-text-color a {
 	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
 }
@@ -444,20 +340,11 @@ p.has-drop-cap:not(:focus):first-letter {
 	}
 }
 
-.wp-block-quote {
-	border-left: var(--wp--custom--quote--border--width) solid var(--wp--custom--quote--border--color);
-	padding-left: var(--wp--custom--padding--horizontal);
-}
-
 .wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
 	font-size: var(--wp--custom--quote--citation--typography--font-size);
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
-.wp-block-group.has-background:not([class*="block-editor-block"]) {
-	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-}
-
 .wp-block-separator:not(.is-style-dots) {
 	border-bottom: var(--wp--custom--separator--thickness) solid var(--wp--custom--separator--color);
 }

blank-canvas-blocks/block-templates/index.html

@@ -6,4 +6,4 @@
 	<!-- /wp:query-loop -->
 <!-- /wp:query -->
 
-<!-- wp:post-content /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->

blank-canvas-blocks/experimental-theme.json

@@ -84,6 +84,10 @@
 					"vw"
 				]
 			},
+			"layout": {
+				"contentSize": "620px",
+				"wideSize": "1000px"
+			},
 			"custom": {
 				"color": {
 					"primary": "var(--wp--preset--color--black)",
@@ -97,20 +101,19 @@
 					"horizontal": "20px",
 					"vertical": "20px"
 				},
-				"padding": {
-					"horizontal": "20px",
-					"vertical": "20px"
-				},
-				"width": {
-					"default": "620px",
-					"wide": "1000px"
-				},
 				"button": {
-					"fontWeight": "normal",
-					"fontFamily": "var(--wp--preset--font-family--base)",
-					"fontSize": "var(--wp--preset--font-size--small)",
-					"borderRadius": "4px",
+					"typography": {
+						"fontWeight": "normal",
+						"fontFamily": "var(--wp--preset--font-family--base)",
+						"fontSize": "var(--wp--preset--font-size--small)",
+						"lineHeight": 2
+					},
+					"border": {
+						"radius": "4px"
+					},
 					"color": {
+						"text": "var(--wp--custom--color--background)",
+						"background": "var(--wp--custom--color--secondary)",
 						"hoverText": "var(--wp--custom--color--secondary)",
 						"hoverBackground": "var(--wp--custom--color--primary)"
 					}
@@ -145,10 +148,6 @@
 					}
 				},
 				"quote": {
-					"border": {
-						"color": "var(--wp--custom--color--secondary)",
-						"width": "1px"
-					},
 					"citation": {
 						"typography": {
 							"fontSize": "var(--wp--preset--font-size--small)",
@@ -162,22 +161,21 @@
 					"width": "150px"
 				},
 				"video": {
-					"caption":{
+					"caption": {
 						"margin": "var(--wp--custom--margin--vertical) auto",
 						"textAlign": "center"
 					}
 				},
 				"heading": {
-					"typography":{
+					"typography": {
 						"fontWeight": 400,
-						"lineHeight": 1.125,
-						"fontFamily": "var(--wp--preset--font-family--headings)"
+						"lineHeight": 1.125
 					}
 				},
 				"list": {
 					"fontFamily": "var(--wp--custom--font-family--base)",
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
 					}
 				},
 				"navigation": {
@@ -231,6 +229,14 @@
 		}
 	},
 	"styles": {
+		"core/post-content": {
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)",
+					"right": "var(--wp--custom--margin--horizontal)"
+				}
+			}
+		},
 		"root": {
 			"color": {
 				"background": "var(--wp--custom--color--background)",
@@ -239,50 +245,71 @@
 			},
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
-				"lineHeight": "1.6",
+				"lineHeight": 1.6,
 				"fontFamily": "var(--wp--preset--font-family--base)"
 			}
 		},
 		"core/button": {
 			"color": {
-				"text": "var(--wp--custom--color--background)",
-				"background": "var(--wp--custom--color--secondary)"
+				"text": "var(--wp--custom--button--color--text)",
+				"background": "var(--wp--custom--button--color--background)"
+			},
+			"typography": {
+				"fontWeight": "var(--wp--custom--button--typography--font-weight)",
+				"fontFamily": "var(--wp--custom--button--typography--font-family)",
+				"fontSize": "var(--wp--custom--button--typography--font-size)",
+				"lineHeight": "var(--wp--custom--button--typography--line-height)"
+			},
+			"border": {
+				"radius": "var(--wp--custom--button--border--radius)"
 			}
 		},
 		"core/heading/h1": {
 			"typography": {
 				"fontSize": "48px",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h2": {
 			"typography": {
 				"fontSize": "32px",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h3": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--huge)",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h4": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--large)",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h5": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h6": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--small)",
-				"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+				"fontFamily": "var(--wp--preset--font-family--headings)",
+				"lineHeight": "var(--wp--custom--heading--typography--line-height)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/post-title/h1": {
@@ -309,6 +336,25 @@
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--small)"
 			}
+		},
+		"core/code": {
+			"border": {
+				"radius": "0px",
+				"color": "#CCCCCC",
+				"style": "solid",
+				"width": "2px"
+			}
+		},
+		"core/quote": {
+			"border": {
+				"color": "var(--wp--custom--color--secondary)",
+				"width": "1px"
+			},
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)"
+				}
+			}
 		}
 	}
 }

blank-canvas-blocks/functions.php

@@ -12,9 +12,6 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
 		// https://github.com/WordPress/gutenberg/issues/26901
 		add_theme_support( 'responsive-embeds' );
 
-		// Add support for "reasonable default" block styles
-		add_theme_support( 'wp-block-styles');
-
 		// Add support for editor styles.
 		add_theme_support( 'editor-styles' );
     }

blank-canvas-blocks/sass/base/_alignment.scss

@@ -1,98 +1,5 @@
-
-/*
- * Alignments
- */
-
-body {
-	margin: 0;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-
-// This is the default with of blocks on the page with not assign alignwide or alignfull
-.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
-.wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
-.wp-site-blocks .wp-block-post-content > * {
-	max-width: var(--wp--custom--width--default);
-	margin-left: auto;
-	margin-right: auto;
- 	padding: 0 var(--wp--custom--margin--horizontal);
+.wp-block-post-content > .alignfull {
+	margin-left: calc(-1 * var(--wp--custom--margin--horizontal));
+	margin-right: calc(-1 * var(--wp--custom--margin--horizontal));
 }
 
-// Align the block to be on the "wider" side of things
-.wp-site-blocks *[class*="__inner-container"] > .alignwide,
-.wp-site-blocks .alignwide {
-	width: var(--wp--custom--width--wide);
-	max-width: 100%;
-}
-
-// The block should span the full width of the page
-.wp-site-blocks *[class*="__inner-container"] > .alignfull,
-.wp-site-blocks .alignfull {
-	max-width: unset;
-	margin-left: unset;
-	margin-right: unset;
-}
-
-// Align Center
-.aligncenter {
-	text-align: center;
-}
-
-// Align Left and Right
-@include media(mobile) {
-	.block-editor-block-list__layout .alignleft,
-	.block-editor-block-list__layout .alignright,
-	.wp-site-blocks .alignleft,
-	.wp-site-blocks .alignright {
-		max-width: calc(var(--wp--custom--width--default) / 2);
-	}
-
-	// Align Left
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
-	}
-
-	// Align Right
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
-	}
-
-	// When alignments are applied to top level blocks
-	// we need to add more left/right margin as the block is full width.
-	.block-editor-block-list__layout > .alignleft, // For the editor.
-	.block-editor-block-list__layout > .alignright, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignleft,
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		// Content width is the lesser of the viewport width (subtracting margins)
-		// or the default site width.
-		// This variable is only used for this element.
-		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		// The alignment margin is the viewport, subtract the content and divide by two
-		// Then subtract the block padding
-		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
-	}
-
-	// Align Left
-	.block-editor-block-list__layout > .alignleft, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignleft {
-		/*rtl:ignore*/
-		margin-left: var(--alignment-margin);
-		/*rtl:ignore*/
-		margin-right: var(--wp--custom--margin--horizontal);
-	}
-
-	// Align Right
-	.block-editor-block-list__layout > .alignright, // For the editor.
-	.wp-site-blocks .wp-block-post-content > .alignright {
-		/*rtl:ignore*/
-		margin-left: var(--wp--custom--margin--horizontal);
-		/*rtl:ignore*/
-		margin-right: var(--alignment-margin);
-	}
-}

blank-canvas-blocks/sass/base/_normalize.scss

@@ -10,12 +10,12 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 }
 
-p {
-  margin: 0;
-}
-
 // Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged.
 img {
 	height: auto;
 	max-width: 100%;
+}
+
+* {
+	box-sizing: border-box;
 }

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

@@ -10,7 +10,6 @@
 
 @import "alignment";
 @import "text-selection";
-@import "vertical-margins";
 
 //Colors
 

blank-canvas-blocks/sass/base/_vertical-margins.scss

@@ -1,9 +0,0 @@
-// Remove editor margins
-.block-editor-block-list__block {
-	margin-bottom: 0;
-	margin-top: 0;
-
-	.block-library-spacer__resize-container {
-		margin-bottom: 0;
-	}
-}

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

@@ -1,15 +1,18 @@
 /**
  * Button
  */
+
+// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 @mixin button-main-styles {
-	font-weight: var(--wp--custom--button--font-weight);
-	font-family: var(--wp--custom--button--font-family);
-	font-size: var(--wp--custom--button--font-size);
-	line-height: var(--wp--custom--button--line-height);
-	border-radius: var(--wp--custom--button--border-radius);
+	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--border--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 }
 
+// NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
 @mixin button-hover-styles {
 	&:hover,
 	&:focus,
@@ -24,11 +27,9 @@
  * Block Options
  */
 .wp-block-button {
-
 	&.wp-block-button__link,
 	.wp-block-button__link {
-		@include button-main-styles;
 		@include button-hover-styles;
+		text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 	}
-
 }

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

@@ -1,6 +0,0 @@
-// NOTE: Gutenberg sets a padding value by default for groups with a background.
-// However this isn't customizable so that's being overwritten here.
-// Unfortunately it borks up the editor padding so the :not() is for the editor.
-.wp-block-group.has-background:not([class*="block-editor-block"]) {
-	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-}

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

@@ -1,5 +0,0 @@
-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/blocks/_image.scss

@@ -7,13 +7,4 @@
 	https://github.com/WordPress/gutenberg/issues/28923
 	*/
 	text-align: center;
-}
-
-/*
-	Further gutenberg APPEARS to be defaulting the margin to the same as 
-	the below, however (for reason's that aren't clear to me now) this
-	isn't coming through.
-*/
-.wp-block-column .wp-block-image {
-	margin: 0 0 1em 0;
 }

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

@@ -1,9 +1,5 @@
 p {
 
-	// inherits general font style set at <body>
-	&.has-background {
-		padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-	}
 
 	// Override `color: inherit` from Core styles.
 	&.has-text-color a {

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

@@ -1,6 +1,4 @@
 .wp-block-quote {
-	border-left: var(--wp--custom--quote--border--width) solid var(--wp--custom--quote--border--color);
-	padding-left: var(--wp--custom--padding--horizontal);
 	cite, .wp-block-quote__citation {
 		font-size: var(--wp--custom--quote--citation--typography--font-size);
 		font-style: var(--wp--custom--quote--citation--typography--font-style);

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

@@ -1,7 +1,7 @@
 // Default link styles
 a {
 	cursor: pointer;
-	text-underline-offset: 2px;
+	text-underline-offset: 0.15em;
 	text-decoration: none;
 
 	&:hover,
@@ -10,7 +10,7 @@ a {
 	}
 }
 
-// Links that appear in the main content area
+//Links that appear in the main content area
 .block-editor-block-list__layout a, // Needed for the post area
 .wp-block-post-content a {
 	text-decoration: underline;

blank-canvas-blocks/sass/ponyfill.scss

@@ -9,7 +9,6 @@
 // Blocks
 // - These styles replace key Gutenberg Block styles for fonts, colors, and
 //   spacing with CSS-variables overrides
-@import "blocks/heading";
 @import "blocks/button";
 @import "blocks/gallery";
 @import "blocks/image";
@@ -17,6 +16,5 @@
 @import "blocks/paragraph";
 @import "blocks/navigation";
 @import "blocks/quote";
-@import "blocks/group";
 @import "blocks/separator";
 @import "blocks/video";