Mayland Blocks: bring up-to-date with GB 10.3 (#3570)

* Overwrite existing array instead of concatenating

* Brought in child build process

* refactored Seedlet Blocks to be a child of Blank-Canvas-Blocks

* Font, template and configuration changes to align with Seedlet.

* inverted font parings to be correct

* Make post titles a link

* Add entry meta in the footer

* Add entry meta to seedlet blocks

* Add post meta to singular

* Add author bio on singular template

* Remove the troublesome 'theme' metadata

* Add author bios and a footer credit

* Added Seedlet Block Dev server deploy action

* Include SB-BCB BCB in deploy action

* Separated names of steps

* make Mayland a bcb child, change typography variables

* rebuilt theme.json file with new build tools

* removed alignments css

* defined layout for the theme

* fixed hover states for buttons on bcb

* updated color variables for mayland

* move the google font definitions to theme.json

* Corrected Button style definitions and removed duplication of collections in child theme.json file

* added new post meta template part

* added template part to json, changed font sizes

* overriden icons

* changed color to meta links

* added post tags to meta

* added template part to index template too

* Adding SCSS build + watch workflow to Seedlet Blocks (#3575)

* Adding SCSS build + watch workflow to Seedlet Blocks

* Fix seedlet-bcb site title (#3576)

* Added site title block themes from original Seedlet theme

* Adjusted links to match Seedlet. (#3578)

* Refactored build scripts to standardize (#3579)

* Refactored build scripts to standardize. 'start' and 'build' script targets.
* Added a start:child script target

Co-authored-by: Ben Dwyer <ben@scruffian.com>

* Changed target of the dev branch

* Update template parts syntax in seedlet blocks

* remove theme slugs from templates

* Make the pony fill a dependency of mayland blocks so that it loads first

* Seedlet Blocks: Update blocks .scss file names to adhere to the SASS naming convention for partials

* Remove _ from the import

* Fix/seedlet bcb pullquote (#3580)

* Adjust styles for Seedlet BCB to match Seedlet
* Added font family to citation custom styles.
* Made margins above citation configurable.
* Inheriting Line Height so it can be set via styles.
* Added ponyfill as theme style dependency so child theme would win CSS specificity battle ties

Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

* rebuilt theme.json and theme.css from last merge

* Blank Canvas Blocks: Remove unnecessary priority parameter from ponyfill css load (#3603)

* Add/bcb index query (#3604)

* Add site-logo to BCB header and centered it
* Add index template (with header and footer) with query loop

Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

* Style seedlet bcb latest post Block (#3597)

* Added latest post block styling
* Register latest post block pattern from Seedlet
* Added latest post block styles
Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

* Fix bad merge.

* Check in compiled styles.

* Fix link colors in the editor.

* removed supports that are on the parent theme (#3594)

* Remove applying the default width. (#3621)

* Mayland Blocks: refactor social links in header (#3630)

* Remove applying the default width.

* Remove social links.

* Add social links to the nav instead.

* center align the header columns

* removed extra column

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: Jeff Ong <jeff.ong@automattic.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

mayland-blocks/assets/alignments.css

@@ -1,78 +0,0 @@
-/*
- * Alignments, loaded in the front-end only.
- */
-
-body {
-	margin: 0;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-.wp-site-blocks {
-	padding: 0 var(--wp--custom--margin--horizontal);
-}
-
-.wp-site-blocks > *:not(.wp-block-post-content),
-.wp-site-blocks .wp-block-post-content > * {
-	max-width: var(--wp--custom--width--default);
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.wp-site-blocks .alignwide {
-	width: var(--wp--custom--width--wide);
-	max-width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.wp-site-blocks .alignfull {
-	transform: translateX(calc(0px - var(--wp--custom--margin-horizontal)));
-	width: calc(100% + (2 * var(--wp--custom--margin-horizontal)));
-	max-width: calc(100% + (2 * var(--wp--custom--margin-horizontal)));
-	margin-left: 0;
-	margin-right: 0;
-	box-sizing: content-box;
-}
-
-.wp-site-blocks .wp-block-template-part.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.wp-site-blocks .wp-block-columns.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.aligncenter {
-	text-align: center;
-}
-
-.wp-site-blocks .alignleft {
-	float: left;
-	margin-right: 2em;
-	max-width: 360px;
-}
-
-.wp-site-blocks .alignright {
-	float: right;
-	margin-left: 2em;
-	max-width: 360px;
-}
-
-@media screen and (min-width: 1290px) {
-
-	.wp-site-blocks,
-	.wp-block-template-part.alignfull {
-		padding: 0;
-	}
-
-	.wp-site-blocks .alignfull {
-		transform: translateX(0px);
-		width: 100% + var(--wp--custom--width-horizontal);
-		max-width: calc(100% + var(--wp--custom--width-horizontal));
-	}
-}

mayland-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" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#666666" fill-opacity="1" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>

mayland-blocks/assets/svg/post-category.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666666" fill-opacity="1" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>

mayland-blocks/assets/svg/post-date.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path fill="#666666" fill-opacity="1" id="a" d="M0 0h24v24H0V0z"></path>
+    </defs>
+    <clipPath id="b">
+        <use xlink:href="#a" overflow="visible"></use>
+    </clipPath>
+    <path clip-path="url(#b)" fill="#666666" fill-opacity="1" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path>
+</svg>

mayland-blocks/assets/svg/post-tag.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path fill="#666666" fill-opacity="1" d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"></path>
+	<path d="M0 0h24v24H0z" fill="none"></path>
+</svg>

mayland-blocks/block-template-parts/header.html

@@ -2,21 +2,13 @@
 <div style="height:14px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:columns {"verticalAlignment":"bottom","align":"full"} -->
-<div class="wp-block-columns alignfull are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom"} -->
-<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:site-title /--></div>
+<!-- wp:columns {"verticalAlignment":null, "align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
 <!-- /wp:column -->
 
-<!-- wp:column {"verticalAlignment":"center","className":"is-vertically-aligned-bottom"} -->
-<div class="wp-block-column is-vertically-aligned-center is-vertically-aligned-bottom">
-	
-<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#000000","align":"right","className":"is-style-logos-only"} -->
-<ul class="wp-block-social-links alignright has-icon-color is-style-logos-only" style="--wp--social-links--icon-color:#000000"><!-- wp:social-link {"url":"https://instagram.com","service":"instagram"} /-->
-
-<!-- wp:social-link {"url":"https://twitter.com","service":"twitter"} /--></ul>
-<!-- /wp:social-links -->
-
-<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
 <!-- wp:navigation-link {"label":"Home","url":"#"} /-->
 
 <!-- wp:navigation-link {"label":"About","url":"#"} /-->
@@ -24,6 +16,12 @@
 <!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
 
 <!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+
+<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","className":"is-style-logos-only"} -->
+<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"instagram.com/wordpress","service":"instagram"} /-->
+
+<!-- wp:social-link {"url":"twitter.com/wordpress","service":"twitter"} /--></ul>
+<!-- /wp:social-links -->
 <!-- /wp:navigation --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->

mayland-blocks/block-template-parts/post-meta.html

@@ -0,0 +1,9 @@
+<!-- wp:group {"textColor":"gray","className":"post-meta"} -->
+<div class="post-meta wp-block-group post-meta has-gray-color has-text-color"><!-- wp:post-author {"showAvatar":false,"showBio":false,"fontSize":"small"} /-->
+
+<!-- wp:post-date {"fontSize":"small"} /-->
+
+<!-- wp:post-hierarchical-terms {"term":"category","fontSize":"small"} /-->
+
+<!-- wp:post-tags {"fontSize":"small"} /--></div>
+<!-- /wp:group -->

mayland-blocks/block-templates/index.html

@@ -1,12 +1,15 @@
 <!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
 
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+
 <!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
 <!-- wp:query-loop -->
 <!-- wp:post-title {"isLink":true} /-->
 
 <!-- wp:post-excerpt /-->
 
-<!-- wp:post-date /-->
+<!-- wp:template-part {"slug":"post-meta"} /-->
 
 <!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
@@ -14,4 +17,7 @@
 <!-- /wp:query-loop -->
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->

mayland-blocks/block-templates/page.html

@@ -1,11 +1,17 @@
 <!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
 
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+
 <!-- wp:spacer {"height":32} -->
 <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:post-title {"level":1} /-->
 
-<!-- wp:post-content /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 <!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->

mayland-blocks/block-templates/single.html

@@ -4,21 +4,29 @@
 <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
 <!-- wp:post-title {"level":1} /-->
 
-<!-- wp:post-date /-->
+<!-- wp:template-part {"slug":"post-meta"} /-->
 
 <!-- wp:spacer {"height":16px} -->
 <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:post-content /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
 
 <!-- wp:spacer {"height":16px} -->
 <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:post-date /-->
+<!-- wp:template-part {"slug":"post-meta"} /-->
 
 <!-- wp:spacer {"height":64} -->
 <div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
@@ -31,5 +39,7 @@
 <!-- /wp:spacer -->
 
 <!-- wp:post-comments /-->
+</div>
+<!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->

mayland-blocks/child-experimental-theme.json

@@ -0,0 +1,236 @@
+{
+	"templateParts": [
+		{
+			"name": "header",
+			"area": "header"
+		},
+		{
+			"name": "footer",
+			"area": "footer"
+		},
+		{
+			"name": "navigation",
+			"area": "navigation"
+		},
+		{
+			"name": "post-meta",
+			"area": "Post Meta"
+		}
+	],
+	"settings": {
+		"defaults": {
+			"color": {
+				"gradients": [ ],
+				"palette": [
+					{
+						"slug": "black",
+						"color": "#000000",
+						"name": "Black"
+					},
+					{
+						"slug": "almost-black",
+						"color": "#1a1a1a",
+						"name": "Almost Black"
+					},
+					{
+						"slug": "white",
+						"color": "#FFFFFF",
+						"name": "White"
+					},
+					{
+						"slug": "gray",
+						"color": "#666666",
+						"name": "Gray"
+					},
+					{
+						"slug": "dark-gray",
+						"color": "#333333",
+						"name": "Dark Gray"
+					}
+				]
+			},
+			"typography": {
+				"customFontSize": true,
+				"customLineHeight": true,
+				"fontSizes": [
+					{
+						"name": "Small",
+						"size": "16.6px",
+						"slug": "small"
+					},
+					{
+						"name": "Normal",
+						"size": "20px",
+						"slug": "normal"
+					},
+					{
+						"name": "Large",
+						"size": "28.8px",
+						"slug": "large"
+					},
+					{
+						"name": "Huge",
+						"size": "34.56px",
+						"slug": "huge"
+					}
+				],
+				"fontFamilies": [
+					{
+						"fontFamily": "\"Poppins\", sans-serif",
+						"slug": "base",
+						"name": "Poppins"
+					},
+					{
+						"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
+						"slug": "system-font",
+						"name": "System Font"
+					},
+					{
+						"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
+						"slug": "helvetica-arial"
+					},
+					{
+						"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
+						"slug": "geneva-verdana"
+					},
+					{
+						"fontFamily": "Cambria, Georgia, serif",
+						"slug": "cambria-georgia"
+					},
+					{
+						"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
+						"slug": "hoefler-times-new-roman"
+					}
+				]
+			},
+			"spacing": {
+				"customPadding": true,
+				"units": [ "px", "em", "rem", "vh", "vw" ]
+			},
+			"layout": {
+				"contentSize": "782px",
+				"wideSize": "1000px"
+			},
+			"custom": {
+				"fontsToLoadFromGoogle": [
+					"family=Poppins:ital,wght@0,400;0,600;1,400"
+				],
+				"color": {
+					"primary": "var(--wp--preset--color--black)",
+					"secondary": "var(--wp--preset--color--almost-black)",
+					"tertiary": "var(--wp--preset--color--gray)",
+					"foreground": "var(--wp--preset--color--black)",
+					"background": "var(--wp--preset--color--white)",
+					"selection": "lightblue"
+				},
+				"line-height": {
+					"body": 1.6,
+					"headings": 1.125
+				},
+				"heading": {
+					"typography": {
+						"fontWeight": 600
+					}
+				},
+				"margin": {
+					"horizontal": "32px"
+				},
+				"width": {
+					"default": "750px",
+					"wide": "1022px"
+				},
+				"button": {
+					"color": {
+						"hoverBackground": "var(--wp--custom--color--tertiary)"
+					}
+				}
+			}
+		}
+	},
+	"styles": {
+		"root": {
+			"color": {
+				"background": "var(--wp--custom--color--background)",
+				"text": "var(--wp--custom--color--foreground)",
+				"link": "var(--wp--custom--color--foreground)"
+			},
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"lineHeight": "var(--wp--custom--line-height--body)",
+				"fontFamily": "var(--wp--preset--font-family--base)"
+			}
+		},
+		"core/heading/h1": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "41.47px",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h2": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h3": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "var(--wp--preset--font-size--large)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h4": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "24px",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h5": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h6": {
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"fontSize": "var(--wp--preset--font-size--small)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/post-title/h1": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/post-date": {
+			"color": {
+				"text": "var(--wp--custom--color--foreground-light)",
+				"link": "var(--wp--custom--color--foreground-light)"
+			},
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--small)"
+			}
+		},
+		"core/site-title": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)"
+			}
+		},
+		"core/navigation": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--small)"
+			}
+		},
+		"core/button": {
+			"color": {
+				"background": "var(--wp--custom--color--primary)"
+			}
+		}
+	}
+}

mayland-blocks/experimental-theme.json

@@ -7,42 +7,45 @@
 		{
 			"name": "footer",
 			"area": "footer"
+		},
+		{
+			"name": "navigation",
+			"area": "navigation"
+		},
+		{
+			"name": "post-meta",
+			"area": "Post Meta"
 		}
 	],
 	"settings": {
 		"defaults": {
 			"color": {
-				"gradients": [ ],
+				"gradients": [],
 				"palette": [
 					{
-						"slug": "primary",
+						"slug": "black",
 						"color": "#000000",
-						"name": "Primary"
+						"name": "Black"
 					},
 					{
-						"slug": "secondary",
+						"slug": "almost-black",
 						"color": "#1a1a1a",
-						"name": "Secondary"
+						"name": "Almost Black"
 					},
 					{
-						"slug": "background",
+						"slug": "white",
 						"color": "#FFFFFF",
-						"name": "Background"
-					},
-					{
-						"slug": "foreground",
-						"color": "#010101",
-						"name": "Foreground"
+						"name": "White"
 					},
 					{
-						"slug": "foreground-light",
+						"slug": "gray",
 						"color": "#666666",
-						"name": "Foreground Light"
+						"name": "Gray"
 					},
 					{
-						"slug": "foreground-dark",
+						"slug": "dark-gray",
 						"color": "#333333",
-						"name": "Foreground Dark"
+						"name": "Dark Gray"
 					}
 				]
 			},
@@ -74,7 +77,7 @@
 				"fontFamilies": [
 					{
 						"fontFamily": "\"Poppins\", sans-serif",
-						"slug": "poppins",
+						"slug": "base",
 						"name": "Poppins"
 					},
 					{
@@ -102,16 +105,192 @@
 			},
 			"spacing": {
 				"customPadding": true,
-				"units": [ "px", "em", "rem", "vh", "vw" ]
+				"units": [
+					"px",
+					"em",
+					"rem",
+					"vh",
+					"vw"
+				]
+			},
+			"layout": {
+				"contentSize": "782px",
+				"wideSize": "1000px"
 			},
 			"custom": {
+				"color": {
+					"primary": "var(--wp--preset--color--black)",
+					"secondary": "var(--wp--preset--color--almost-black)",
+					"tertiary": "var(--wp--preset--color--gray)",
+					"foreground": "var(--wp--preset--color--black)",
+					"background": "var(--wp--preset--color--white)",
+					"selection": "lightblue"
+				},
+				"margin": {
+					"baseline": "10px",
+					"horizontal": "32px",
+					"vertical": "30px"
+				},
+				"alignment": {
+					"alignedMaxWidth": "50%"
+				},
+				"button": {
+					"typography": {
+						"fontWeight": "normal",
+						"fontFamily": "var(--wp--preset--font-family--base)",
+						"fontSize": "var(--wp--preset--font-size--normal)",
+						"lineHeight": 2
+					},
+					"border": {
+						"radius": "4px"
+					},
+					"color": {
+						"text": "var(--wp--custom--color--background)",
+						"background": "var(--wp--custom--color--secondary)",
+						"hoverText": "var(--wp--custom--color--background)",
+						"hoverBackground": "var(--wp--custom--color--tertiary)"
+					}
+				},
+				"form": {
+					"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+					"border": {
+						"radius": "0",
+						"color": "#EFEFEF",
+						"width": "2px",
+						"style": "solid"
+					},
+					"color": {
+						"text": "var(--wp--custom--color--foreground)",
+						"background": "transparent",
+						"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": {
+					"typography": {
+						"textAlign": "left"
+					},
+					"citation": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)",
+							"fontStyle": "italic"
+						}
+					}
+				},
+				"pullquote": {
+					"typography": {
+						"textAlign": "left"
+					},
+					"citation": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)",
+							"fontStyle": "italic"
+						}
+					}
+				},
+				"separator": {
+					"margin": "var(--wp--custom--margin--vertical) auto",
+					"opacity": 1,
+					"width": "150px"
+				},
+				"video": {
+					"caption": {
+						"margin": "var(--wp--custom--margin--vertical) auto",
+						"textAlign": "center"
+					}
+				},
+				"heading": {
+					"typography": {
+						"fontWeight": 600,
+						"lineHeight": 1.125
+					}
+				},
+				"list": {
+					"fontFamily": "var(--wp--custom--font-family--base)",
+					"padding": {
+						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+					}
+				},
+				"navigation": {
+					"mobile": {
+						"menu": {
+							"openLabel": "☰",
+							"closeLabel": "╳",
+							"color": {
+								"text": "var(--wp--custom--color--foreground)"
+							},
+							"typography": {
+								"fontWeight": 500,
+								"fontSize": "24px",
+								"fontFamily": "var(--wp--custom--font-family--base)"
+							}
+						},
+						"padding": "10px",
+						"verticalAlignment": "center",
+						"horizontalAlignment": "center",
+						"typography": {
+							"fontWeight": 200,
+							"fontSize": "20px",
+							"fontFamily": "var(--wp--custom--font-family--base)"
+						}
+					},
+					"padding": "10px",
+					"color": {
+						"text": "var(--wp--custom--color--foreground)",
+						"background": "var(--wp--custom--color--background)",
+						"hoverText": "var(--wp--custom--color--secondary)",
+						"hoverBackground": "var(--wp--custom--color--background)"
+					},
+					"submenu": {
+						"padding": "8px",
+						"shadow": "1px 1px 3px 0px rgba(0,0,0,.2)",
+						"border": {
+							"radius": "0",
+							"color": "0",
+							"width": "1px",
+							"style": "none"
+						},
+						"color": {
+							"text": "var(--wp--custom--color--foreground)",
+							"background": "var(--wp--custom--color--background)",
+							"hoverText": "var(--wp--custom--color--secondary)",
+							"hoverBackground": "var(--wp--custom--color--background)"
+						}
+					}
+				},
+				"table": {
+					"figcaption": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)"
+						}
+					}
+				},
+				"post-author": {
+					"typography": {
+						"fontWeight": "normal"
+					}
+				},
+				"fontsToLoadFromGoogle": [
+					"family=Poppins:ital,wght@0,400;0,600;1,400"
+				],
 				"line-height": {
 					"body": 1.6,
 					"headings": 1.125
 				},
-				"margin": {
-					"horizontal": "32px"
-				},
 				"width": {
 					"default": "750px",
 					"wide": "1022px"
@@ -120,52 +299,87 @@
 		}
 	},
 	"styles": {
+		"core/post-content": {
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)",
+					"right": "var(--wp--custom--margin--horizontal)"
+				}
+			}
+		},
 		"root": {
 			"color": {
-				"background": "var(--wp--preset--color--background)",
-				"text": "var(--wp--preset--color--foreground)",
-				"link": "var(--wp--preset--color--foreground)"
+				"background": "var(--wp--custom--color--background)",
+				"text": "var(--wp--custom--color--foreground)",
+				"link": "var(--wp--custom--color--foreground)"
 			},
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
 				"lineHeight": "var(--wp--custom--line-height--body)",
-				"fontFamily": "var(--wp--preset--font-family--poppins)"
+				"fontFamily": "var(--wp--preset--font-family--base)"
+			}
+		},
+		"core/button": {
+			"color": {
+				"text": "var(--wp--custom--button--color--text)",
+				"background": "var(--wp--custom--color--primary)"
+			},
+			"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": "41.47px",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h2": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--huge)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h3": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--large)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h4": {
 			"typography": {
 				"fontSize": "24px",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h5": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/heading/h6": {
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--small)",
-				"lineHeight": "var(--wp--custom--line-height--headings)"
+				"fontFamily": "var(--wp--preset--font-family--base)",
+				"lineHeight": "var(--wp--custom--line-height--headings)",
+				"fontWeight": "var(--wp--custom--heading--typography--font-weight)"
 			}
 		},
 		"core/post-title/h1": {
@@ -176,8 +390,8 @@
 		},
 		"core/post-date": {
 			"color": {
-				"text": "var(--wp--preset--color--foreground-light)",
-				"link": "var(--wp--preset--color--foreground-light)"
+				"text": "var(--wp--custom--color--foreground-light)",
+				"link": "var(--wp--custom--color--foreground-light)"
 			},
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--small)"
@@ -185,7 +399,11 @@
 		},
 		"core/site-title": {
 			"typography": {
-				"fontSize": "var(--wp--preset--font-size--large)"
+				"fontSize": "var(--wp--preset--font-size--large)",
+				"fontWeight": 700
+			},
+			"color": {
+				"link": "black"
 			}
 		},
 		"core/navigation": {
@@ -193,10 +411,65 @@
 				"fontSize": "var(--wp--preset--font-size--small)"
 			}
 		},
-		"core/button": {
+		"core/code": {
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)",
+					"right": "var(--wp--custom--margin--horizontal)",
+					"top": "var(--wp--custom--margin--vertical)",
+					"bottom": "var(--wp--custom--margin--vertical)"
+				}
+			},
+			"border": {
+				"radius": "0px",
+				"color": "#CCCCCC",
+				"style": "solid",
+				"width": "2px"
+			}
+		},
+		"core/quote": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"fontStyle": "normal"
+			},
+			"border": {
+				"color": "var(--wp--custom--color--secondary)",
+				"style": "solid",
+				"width": "0 0 0 1px"
+			},
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)"
+				}
+			}
+		},
+		"core/pullquote": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"fontStyle": "italic"
+			},
+			"border": {
+				"style": "solid",
+				"width": "1px 0"
+			},
+			"spacing": {
+				"padding": {
+					"left": "var(--wp--custom--margin--horizontal)",
+					"right": "var(--wp--custom--margin--horizontal)",
+					"top": "var(--wp--custom--margin--horizontal)",
+					"bottom": "var(--wp--custom--margin--horizontal)"
+				}
+			}
+		},
+		"core/separator": {
 			"color": {
-				"background": "var(--wp--preset--color--primary)"
+				"text": "var(--wp--custom--color--foreground)"
+			},
+			"border": {
+				"color": "currentColor",
+				"style": "solid",
+				"width": "0 0 1px 0"
 			}
 		}
 	}
-}
+}

mayland-blocks/functions.php

@@ -1,74 +1,23 @@
 <?php
 
 if ( ! function_exists( 'mayland_blocks_support' ) ) :
-	function mayland_blocks_support()  {
-
-		// Alignwide and alignfull classes in the block editor.
-		add_theme_support( 'align-wide' );
-
-		// Adding support for core block visual styles.
-		add_theme_support( 'wp-block-styles' );
-
-		// Adding support for responsive embedded content.
-		add_theme_support( 'responsive-embeds' );
-
-		// Add support for experimental link color control.
-		add_theme_support( 'experimental-link-color' );
-
-		// Add support for editor styles.
-		add_theme_support( 'editor-styles' );
+	function mayland_blocks_support() {
 
 		// Enqueue editor styles.
-		add_editor_style( array( 
-			'style.css',
-			mayland_blocks_fonts_url()
-		) );
-    }
-    add_action( 'after_setup_theme', 'mayland_blocks_support' );
-endif;
-
-/**
- * Add Google webfonts, if necessary.
- *
- * - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
- */
-function mayland_blocks_fonts_url() {
-
-	$fonts_url = '';
-
-	/* Translators: If there are characters in your language that are not
-	* supported by Poppins, translate this to 'off'. Do not translate
-	* into your own language.
-	*/
-	$poppins = esc_html_x( 'on', 'Poppins font: on or off', 'mayland' );
-
-	if ( 'off' !== $poppins ) {
-		$font_families = array();
-
-		$font_families[] = 'Poppins:400,400i,600,600i';
-
-		$query_args = array(
-			'family' => urlencode( implode( '|', $font_families ) ),
-			'subset' => urlencode( 'latin,latin-ext' ),
+		add_editor_style(
+			array(
+				'style.css',
+			)
 		);
-
-		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
 	}
-
-	return esc_url_raw( $fonts_url );
-}
+	add_action( 'after_setup_theme', 'mayland_blocks_support' );
+endif;
 
 /**
  * Enqueue scripts and styles.
  */
 function mayland_blocks_scripts() {
 	// Enqueue front-end styles.
-	wp_enqueue_style( 'mayland-blocks-styles', get_stylesheet_uri() );
-
-	// Enqueue front-end styles.
-	wp_enqueue_style( 'mayland-blocks-block-styles', get_stylesheet_directory_uri() . '/assets/alignments.css' );
-
-	// Enqueue Google fonts, if necessary.
-	wp_enqueue_style( 'mayland-blocks-fonts', mayland_blocks_fonts_url(), array(), null );
+	wp_enqueue_style( 'mayland-blocks-styles', get_stylesheet_uri(), array( 'blank_canvas_blocks-ponyfill' ), wp_get_theme()->get( 'Version' ) );
 }
 add_action( 'wp_enqueue_scripts', 'mayland_blocks_scripts' );

mayland-blocks/style.css

@@ -8,6 +8,7 @@ Requires at least: WordPress 4.9.6
 Version: 1.2.9
 License: GNU General Public License v2 or later
 License URI: LICENSE
+Template: blank-canvas-blocks
 Text Domain: mayland-blocks
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
@@ -23,20 +24,6 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 }
 
-/* Set editor widths. */
-
-.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: inherit;
-}
-
 /* Adjust header spacing. */
 
 .site-header .wp-block-site-title a {
@@ -74,3 +61,26 @@ img {
 	height: auto;
 	max-width: 100%;
 }
+
+/* Post Meta */
+
+.post-meta a {
+	color: currentColor;
+}
+
+.post-meta .wp-block-post-author:before {
+	background: url(assets/svg/post-author.svg) no-repeat;
+}
+
+.post-meta .wp-block-post-date:before {
+	background: url(assets/svg/post-date.svg) no-repeat;
+}
+
+.post-meta .wp-block-post-hierarchical-terms:before {
+	background: url(assets/svg/post-category.svg) no-repeat;
+}
+
+.post-meta .wp-block-post-tags:before {
+	background: url(assets/svg/post-tag.svg) no-repeat;
+}
+