Rebase make/bcb.

blank-canvas-blocks/assets/ponyfill.css

@@ -15,6 +15,11 @@ p {
 	margin: 0;
 }
 
+img {
+	height: auto;
+	max-width: 100%;
+}
+
 /**
  * Required Variables
  */
@@ -60,7 +65,7 @@ p {
 }
 
 /*
- * Alignments, loaded in the front-end only.
+ * Alignments
  */
 body {
 	margin: 0;
@@ -80,6 +85,19 @@ body {
 	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
+.wp-block {
+	max-width: var(--wp--custom--width--default);
+}
+
+.wp-block[data-align=wide] {
+	max-width: var(--wp--custom--width--wide);
+}
+
+.wp-block[data-align=full] {
+	max-width: none;
+}
+
+.wp-block-group .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);
@@ -103,14 +121,10 @@ body {
 	box-sizing: content-box;
 }
 
-.wp-site-blocks .wp-block-template-part.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.wp-site-blocks .wp-block-columns.alignfull {
+.wp-site-blocks *[class*="__inner-container"] .alignfull {
+	box-sizing: border-box;
+	transform: unset;
 	width: 100%;
-	max-width: 100%;
 }
 
 .aligncenter {
@@ -118,29 +132,36 @@ body {
 }
 
 @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 {
-		--content-width: min( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		--alignment-margin: calc( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
-		max-width: var(--wp--custom--width--default);
+		max-width: calc(var(--wp--custom--width--default) / 2);
 	}
-}
-
-@media only screen and (min-width: 482px) {
 	.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);
 	}
-}
-
-@media only screen and (min-width: 482px) {
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
+	.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*/
@@ -212,7 +233,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);
@@ -255,17 +275,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--fonts--primary);
+	font-family: var(--wp--custom--heading--typography--font-family);
+	font-weight: var(--wp--custom--heading--typography--font-weight);
 }
 
 /**
@@ -292,6 +305,37 @@ h1, h2, h3, h4, h5, h6 {
 	border-color: var(--wp--custom--button--color--hover-background);
 }
 
+.wp-block-gallery .blocks-gallery-image figcaption,
+.wp-block-gallery .blocks-gallery-item figcaption {
+	font-size: var(--wp--custom--gallery--caption--font-size);
+}
+
+.wp-block-image {
+	/* 
+	From what I can tell the below are styles regularly used by themes
+	to fix the image block.  I believe these should go into the block's
+	default styles.  It's difficult to say how this will land, however 
+	based on discussion found in (many) related issues here: 
+	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;
+}
+
+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);
 }
@@ -300,6 +344,13 @@ p.has-text-color a {
 	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
 }
 
+p.has-drop-cap:not(:focus):first-letter {
+	font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
+	font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
+	font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
+	margin: var(--wp--custom--paragraph--dropcap--margin);
+}
+
 .wp-block-navigation a {
 	border-bottom: none;
 }
@@ -355,6 +406,10 @@ p.has-text-color a {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
+.wp-block-group.has-background {
+	padding: unset;
+}
+
 .wp-block-group.has-background .wp-block-group__inner-container {
 	padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 }

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"
 					}
 				]
 			},
@@ -92,10 +97,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"
@@ -132,6 +133,21 @@
 						"boxShadow": "none"
 					}
 				},
+				"paragraph": {
+					"dropcap": {
+						"margin": ".1em .1em 0 0",
+						"typography": {
+							"fontFamily": "var(--wp--preset--font-family--base)",
+							"fontSize": "110px",
+							"fontWeight": "400"
+						}
+					}
+				},
+				"gallery": {
+					"caption": {
+						"fontSize": "var(--wp--preset--font-size--small)"
+					}
+				},
 				"quote": {
 					"border": {
 						"color": "var(--wp--custom--color--secondary)",
@@ -154,6 +170,19 @@
 						"margin": "var(--wp--custom--margin--vertical) auto",
 						"textAlign": "center"
 					}
+				},
+				"heading": {
+					"typography":{
+						"fontWeight": 400,
+						"lineHeight": 1.125,
+						"fontFamily": "var(--wp--preset--font-family--headings)"
+					}
+				},
+				"list": {
+					"fontFamily": "var(--wp--custom--font-family--base)",
+					"padding": {
+						"left": "calc( 2 * var(--wp--custom--padding--horizontal) )"
+					}
 				}
 			}
 		}
@@ -167,7 +196,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)"
 			}
 		},
@@ -179,44 +208,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/base/_alignment.scss

@@ -1,6 +1,6 @@
 
 /*
- * Alignments, loaded in the front-end only.
+ * Alignments
  */
 
 body {
@@ -23,7 +23,20 @@ body {
 	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
+.wp-block { // For the editor.
+	max-width: var(--wp--custom--width--default);
+}
+
+.wp-block[data-align=wide] { // For the editor.
+	max-width: var(--wp--custom--width--wide);
+}
+
+.wp-block[data-align=full] { // For the editor.
+	max-width: none;
+}
+
 // This is the default with of blocks on the page with not assign alignwide or alignfull
+.wp-block-group .wp-block-group, // When a group is in a group return alignment to default
 .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);
@@ -49,14 +62,12 @@ body {
 	box-sizing: content-box;
 }
 
-.wp-site-blocks .wp-block-template-part.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.wp-site-blocks .wp-block-columns.alignfull {
+// If a block is inside of a container and set to alignfull
+// then it should be as wide as the container it's in, however wide that is.
+.wp-site-blocks *[class*="__inner-container"] .alignfull {
+	box-sizing: border-box;
+	transform: unset;
 	width: 100%;
-	max-width: 100%;
 }
 
 // Align Center
@@ -66,36 +77,52 @@ body {
 
 // 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( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
+		--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( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
-		max-width: var(--wp--custom--width--default);
+		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
 	}
-}
 
-// Align Left
-@include media(mobile) {
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
+	// 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
-@include media(mobile) {
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
+	// 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*/

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

@@ -12,4 +12,10 @@ body {
 
 p {
   margin: 0;
+}
+
+// Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged.
+img {
+	height: auto;
+	max-width: 100%;
 }

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

@@ -0,0 +1,8 @@
+.wp-block-gallery {
+	.blocks-gallery-image,
+	.blocks-gallery-item {
+		figcaption {
+			font-size: var(--wp--custom--gallery--caption--font-size);
+		}
+	}
+}

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

@@ -1,7 +1,9 @@
-.wp-block-group {
-	&.has-background {
-		.wp-block-group__inner-container {
-			padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
-		}
+// NOTE: Gutenberg sets a padding value by default for groups with a background.
+// However when this top level element has padding applied it mucks up the alignment
+// calculations, so it's removed and set instead (to a configurable value) on the inner-container instead.
+.wp-block-group.has-background {
+	padding: unset;
+	.wp-block-group__inner-container {
+		padding: var(--wp--custom--margin--vertical) var(--wp--custom--margin--horizontal);
 	}
 }

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

@@ -1,5 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
-	font-family: var(--wp--custom--fonts--primary);
-
+	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

@@ -0,0 +1,19 @@
+.wp-block-image {
+	/* 
+	From what I can tell the below are styles regularly used by themes
+	to fix the image block.  I believe these should go into the block's
+	default styles.  It's difficult to say how this will land, however 
+	based on discussion found in (many) related issues here: 
+	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/_list.scss

@@ -0,0 +1,5 @@
+ul,
+ol {
+	font-family: var(--wp--custom--list--font-family);
+	padding-left: var(--wp--custom--list--padding--left);
+} 

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

@@ -9,4 +9,11 @@ p {
 	&.has-text-color a {
 		color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
 	}
+
+	&.has-drop-cap:not(:focus):first-letter {
+		font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
+		font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
+		font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
+		margin: var(--wp--custom--paragraph--dropcap--margin);
+	}
 }

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";

blank-canvas-blocks/sass/ponyfill.scss

@@ -11,6 +11,9 @@
 //   spacing with CSS-variables overrides
 @import "blocks/heading";
 @import "blocks/button";
+@import "blocks/gallery";
+@import "blocks/image";
+@import "blocks/list";
 @import "blocks/paragraph";
 @import "blocks/navigation";
 @import "blocks/quote";