Bringing development work from working branch to trunk (#3608)

While BCB children are under active development a few changes are being
made to BCB.  This branch brings work to-date into trunk for further
testing.

blank-canvas-blocks/assets/ponyfill.css

@@ -114,6 +114,10 @@ img {
 	overflow: auto;
 }
 
+.aligncenter {
+	text-align: center;
+}
+
 ::selection {
 	background-color: var(--wp--custom--color--selection);
 }
@@ -146,12 +150,12 @@ a {
 }
 
 a:hover, a:focus {
-	text-decoration: underline;
+	text-decoration-line: underline;
 }
 
 .block-editor-block-list__layout a,
 .wp-block-post-content a {
-	text-decoration: underline;
+	text-decoration-line: underline;
 }
 
 .block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus,
@@ -401,6 +405,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin: var(--wp--custom--paragraph--dropcap--margin);
 }
 
+.wp-block-post-author__name {
+	font-weight: var(--wp--custom--post-author--font-weight);
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);
@@ -417,6 +425,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-size: 1em;
 	padding: 0;
 	margin: 0;
+	line-height: inherit;
 }
 
 .wp-block-pullquote.is-style-solid-color blockquote .wp-block-pullquote__citation,
@@ -425,8 +434,9 @@ p.has-drop-cap:not(:focus):first-letter {
 .wp-block-pullquote blockquote cite {
 	display: block;
 	font-size: var(--wp--custom--pullquote--citation--typography--font-size);
+	font-family: var(--wp--custom--pullquote--citation--typography--font-family);
 	font-style: var(--wp--custom--pullquote--citation--typography--font-style);
-	margin-top: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--pullquote--citation--spacing--margin--top);
 }
 
 .wp-block-pullquote.is-style-solid-color.is-style-solid-color,
@@ -621,4 +631,40 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin-bottom: unset;
 }
 
+.post-meta {
+	display: flex;
+}
+
+.post-meta .wp-block-post-author,
+.post-meta .wp-block-post-date,
+.post-meta .wp-block-post-tags,
+.post-meta .wp-block-post-hierarchical-terms {
+	display: flex;
+	margin-right: calc(2 * var(--wp--custom--margin--baseline));
+}
+
+.post-meta .wp-block-post-author:before,
+.post-meta .wp-block-post-date:before,
+.post-meta .wp-block-post-tags:before,
+.post-meta .wp-block-post-hierarchical-terms:before {
+	align-self: center;
+	content: '';
+	display: inline-block;
+	margin-right: calc(0.5 * var(--wp--custom--margin--baseline));
+	height: 16px;
+	width: 16px;
+}
+
+.post-meta .wp-block-post-author:before {
+	background: url(svg/post-author.svg) no-repeat;
+}
+
+.post-meta .wp-block-post-date:before {
+	background: url(svg/post-date.svg) no-repeat;
+}
+
+.post-meta .wp-block-post-hierarchical-terms:before {
+	background: url(svg/post-category.svg) no-repeat;
+}
+
 /*# sourceMappingURL=ponyfill.css.map */

blank-canvas-blocks/assets/svg/post-author.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 7.5C15 9.15685 13.6569 10.5 12 10.5C10.3431 10.5 9 9.15685 9 7.5C9 5.84315 10.3431 4.5 12 4.5C13.6569 4.5 15 5.84315 15 7.5ZM16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5ZM19.5 19.5V16.245C19.5 14.729 18.271 13.5 16.755 13.5L7.245 13.5C5.72898 13.5 4.5 14.729 4.5 16.245L4.5 19.5H6L6 16.245C6 15.5574 6.5574 15 7.245 15L16.755 15C17.4426 15 18 15.5574 18 16.245V19.5H19.5Z" fill="currentColor"></path></svg>

blank-canvas-blocks/assets/svg/post-category.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.1979 8.25L11.2098 6.27363C11.1259 6.10593 10.9545 6 10.767 6H4.995C4.72162 6 4.5 6.22162 4.5 6.495V17.505C4.5 17.7784 4.72162 18 4.995 18H19.0005C19.2764 18 19.5 17.7764 19.5 17.5005V8.7495C19.5 8.47363 19.2764 8.25 19.0005 8.25H12.1979ZM13.125 6.75H19.0005C20.1048 6.75 21 7.64521 21 8.7495V17.5005C21 18.6048 20.1048 19.5 19.0005 19.5H4.995C3.89319 19.5 3 18.6068 3 17.505V6.495C3 5.39319 3.89319 4.5 4.995 4.5H10.767C11.5227 4.5 12.2135 4.92693 12.5514 5.60281L13.125 6.75Z" fill="currentColor"></path></svg>

blank-canvas-blocks/assets/svg/post-date.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 7.5H4.5V19.0005C4.5 19.2764 4.72363 19.5 4.9995 19.5H19.0005C19.2764 19.5 19.5 19.2764 19.5 19.0005V7.5ZM3 7.5V4.9995V4.995C3 3.89319 3.89319 3 4.995 3H4.9995H19.0005H19.005C20.1068 3 21 3.89319 21 4.995V4.9995V7.5V19.0005C21 20.1048 20.1048 21 19.0005 21H4.9995C3.89521 21 3 20.1048 3 19.0005V7.5ZM7.5 10.5H9V12H7.5V10.5ZM9 15H7.5V16.5H9V15ZM11.25 10.5H12.75V12H11.25V10.5ZM12.75 15H11.25V16.5H12.75V15ZM15 10.5H16.5V12H15V10.5ZM16.5 15H15V16.5H16.5V15Z" fill="currentColor"></path></svg>

blank-canvas-blocks/block-template-parts/header.html

@@ -1,5 +1,10 @@
+<!-- wp:spacer {"height":90} -->
+<div style="height:90px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 <!-- wp:group -->
-<div class="wp-block-group"><!-- wp:site-title {"textAlign":"center"} /-->
-	<!-- wp:site-tagline {"textAlign":"center"} /-->
+<div class="wp-block-group">
+	<!-- wp:site-logo {"align":"center","width":120} /-->
+	<!-- wp:site-title {"textAlign":"center"} /-->
+	<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
 </div>
 <!-- /wp:group -->

blank-canvas-blocks/block-template-parts/navigation.html

@@ -1,2 +1,5 @@
 <!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center"} -->
-<!-- /wp:navigation -->
+<!-- /wp:navigation -->
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

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

@@ -1,5 +1,5 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-<!-- wp:template-part {"slug":"navigation","tagName":"navigation"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"navigation","tagName":"navigation","layout":{"inherit":true}} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group">
@@ -16,4 +16,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->

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

@@ -1 +1,18 @@
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"navigation","tagName":"navigation","layout":{"inherit":true}} /-->
+
+<!-- wp:query {"queryId":1,"query":{"perPage":10,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<!-- wp:query-loop -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+<!-- wp:post-title {"textAlign":"center","isLink":true} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+<!-- /wp:query-loop -->
+<!-- /wp:query -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->

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

@@ -1,5 +1,5 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-<!-- wp:template-part {"slug":"navigation","tagName":"navigation"} /-->
+<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"navigation","tagName":"navigation","layout":{"inherit":true}} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group">
@@ -20,4 +20,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->

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

@@ -0,0 +1 @@
+<!-- wp:post-content {"layout":{"inherit":true}} /-->

blank-canvas-blocks/build.js

@@ -1,33 +1,57 @@
-const fs = require('fs');
-const chokidar = require('chokidar');
-const merge = require('deepmerge');
+const fs = require( 'fs' );
+const chokidar = require( 'chokidar' );
+const merge = require( 'deepmerge' );
 const childThemeName = process.argv[ 2 ];
 const watch = 'watch' === process.argv[ 3 ];
 const parentThemeJsonFileName = __dirname + '/experimental-theme.json';
-const childThemeJsonFileName = __dirname + '/../' + childThemeName + '/child-experimental-theme.json';
+const childThemeJsonFileName =
+	__dirname + '/../' + childThemeName + '/child-experimental-theme.json';
+
+const overwriteMerge = ( destinationArray, sourceArray, options ) =>
+	sourceArray;
 
 const buildChildTheme = () => {
 	try {
-		const parentThemeJsonFile = fs.readFileSync( parentThemeJsonFileName, 'utf8' ),
-			childThemeJsonFile    = fs.readFileSync( childThemeJsonFileName, 'utf8' ),
-			parentThemeJson       = JSON.parse( parentThemeJsonFile ),
-			childThemeJson        = JSON.parse( childThemeJsonFile ),
-			mergedThemeJson       = merge( parentThemeJson, childThemeJson );
+		const parentThemeJsonFile = fs.readFileSync(
+				parentThemeJsonFileName,
+				'utf8'
+			),
+			childThemeJsonFile = fs.readFileSync(
+				childThemeJsonFileName,
+				'utf8'
+			),
+			parentThemeJson = JSON.parse( parentThemeJsonFile ),
+			childThemeJson = JSON.parse( childThemeJsonFile ),
+			mergedThemeJson = merge( parentThemeJson, childThemeJson, {
+				arrayMerge: overwriteMerge,
+			} );
 
-		fs.writeFile( '../' + childThemeName + '/experimental-theme.json', JSON.stringify( mergedThemeJson, null, '\t' ), 'utf8', () => {
-			console.log( "\x1b[32m" + childThemeName + "/experimental-theme.json created successfully." );
-		} );
+		fs.writeFile(
+			'../' + childThemeName + '/experimental-theme.json',
+			JSON.stringify( mergedThemeJson, null, '\t' ),
+			'utf8',
+			() => {
+				console.log(
+					'\x1b[32m' +
+						childThemeName +
+						'/experimental-theme.json created successfully.'
+				);
+			}
+		);
 	} catch ( error ) {
-		console.error( "\x1b[41m" + error );
+		console.error( '\x1b[31m' + error );
 	}
 };
 
 if ( ! fs.existsSync( childThemeJsonFileName ) ) {
+	console.log( '\x1b[31m' + childThemeJsonFileName + ' not found :(' );
 	return;
 }
 
-if( watch ) {
-	chokidar.watch( [ parentThemeJsonFileName, childThemeJsonFileName ] ).on( 'all', buildChildTheme );
+if ( watch ) {
+	chokidar
+		.watch( [ parentThemeJsonFileName, childThemeJsonFileName ] )
+		.on( 'all', buildChildTheme );
 } else {
 	buildChildTheme();
 }

blank-canvas-blocks/experimental-theme.json

@@ -112,6 +112,7 @@
 					"selection": "var(--wp--preset--color--almost-white)"
 				},
 				"margin": {
+					"baseline": "10px",
 					"horizontal": "30px",
 					"vertical": "30px"
 				},
@@ -182,7 +183,13 @@
 					"citation": {
 						"typography": {
 							"fontSize": "var(--wp--preset--font-size--tiny)",
+							"fontFamily": "inherit",
 							"fontStyle": "italic"
+						},
+						"spacing": {
+							"margin": {
+								"top": "var(--wp--custom--margin--vertical)"
+							}
 						}
 					}
 				},
@@ -262,6 +269,11 @@
 							"fontSize": "var(--wp--preset--font-size--tiny)"
 						}
 					}
+				},
+				"post-author": {
+					"typography": {
+						"fontWeight": "normal"
+					}
 				}
 			}
 		}

blank-canvas-blocks/functions.php

@@ -49,7 +49,7 @@ function blank_canvas_blocks_scripts() {
 	wp_enqueue_script( 'blank-canvas-navigation-script', get_template_directory_uri() . '/assets/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
 	wp_enqueue_style( 'blank_canvas_blocks-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) );
 }
-add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts', 11 );
+add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts' );
 
 /**
  * Add Google webfonts

blank-canvas-blocks/package.json

@@ -33,8 +33,9 @@
     "extends @wordpress/browserslist-config"
   ],
   "scripts": {
-    "start": "npm-run-all --parallel \"build:* -- {@}\" --",
-    "build:ponyfill": "chokidar \"**/*.scss\" -c \"node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/ponyfill.scss assets/ponyfill.css --output-style expanded --indent-type tab --indent-width 1 --source-map true\" --initial",
+    "start": "chokidar \"sass/**/*.scss\" -c \"npm run build\" --initial",
+    "start:child": "run-p start \"build:child -- {@} watch\" --",
+    "build": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/ponyfill.scss assets/ponyfill.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
     "build:child": "node build.js"
   }
 }

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

@@ -19,4 +19,11 @@
 // The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299
 .wp-block-group { 
 	overflow: auto;
+}
+
+// This was added for the 'site-logo' block which centers with an 'align:center' attribute
+// instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
+// class which would do this for us.  I'm not sure why but this centers things appropriately.
+.aligncenter {
+	text-align: center;
 }

blank-canvas-blocks/sass/blocks/_post-author.scss

@@ -0,0 +1,3 @@
+.wp-block-post-author__name {
+	font-weight: var(--wp--custom--post-author--font-weight);
+}

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

@@ -8,14 +8,16 @@
 			font-size: 1em;
 			padding: 0;
 			margin: 0;
+			line-height: inherit;
 		}
 
 		.wp-block-pullquote__citation, // For the editor
 		cite {
 			display: block;
 			font-size: var(--wp--custom--pullquote--citation--typography--font-size);
+			font-family: var(--wp--custom--pullquote--citation--typography--font-family);
 			font-style: var(--wp--custom--pullquote--citation--typography--font-style);
-			margin-top: var(--wp--custom--margin--vertical);
+			margin-top: var(--wp--custom--pullquote--citation--spacing--margin--top);
 		}
 	}
 

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

@@ -6,14 +6,14 @@ a {
 
 	&:hover,
 	&:focus {
-		text-decoration: underline;
+		text-decoration-line: underline;
 	}
 }
 
 //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;
+	text-decoration-line: underline;
 
 	&:hover,
 	&:focus {

blank-canvas-blocks/sass/ponyfill.scss

@@ -15,6 +15,7 @@
 @import "blocks/list";
 @import "blocks/navigation";
 @import "blocks/paragraph";
+@import "blocks/post-author";
 @import "blocks/pullquote";
 @import "blocks/quote";
 @import "blocks/search";
@@ -23,3 +24,5 @@
 @import "blocks/table";
 @import "blocks/video";
 @import "blocks/columns";
+
+@import "post/meta";

blank-canvas-blocks/sass/post/_meta.scss

@@ -0,0 +1,36 @@
+.post-meta {
+	// TODO - needed until https://github.com/WordPress/gutenberg/issues/24473
+	display: flex;
+
+	.wp-block-post-author,
+	.wp-block-post-date,
+	.wp-block-post-tags,
+	.wp-block-post-hierarchical-terms {
+		display: flex;
+		margin-right: calc(2 * var(--wp--custom--margin--baseline) );
+	}
+
+	.wp-block-post-author:before,
+	.wp-block-post-date:before,
+	.wp-block-post-tags:before,
+	.wp-block-post-hierarchical-terms:before {
+		align-self: center;
+		content: '';
+		display: inline-block;
+		margin-right: calc(0.5 * var(--wp--custom--margin--baseline) );
+		height: 16px;
+		width: 16px;
+	}
+
+	.wp-block-post-author:before {
+		background: url(svg/post-author.svg) no-repeat;
+	}
+
+	.wp-block-post-date:before {
+		background: url(svg/post-date.svg) no-repeat;
+	}
+
+	.wp-block-post-hierarchical-terms:before {
+		background: url(svg/post-category.svg) no-repeat;
+	}
+}