Merge pull request #2802 from Automattic/try/mayland-blocks

Try: A block-based version of Mayland
Automattic · Feb 26, 2021 · 0196fe5 · 0196fe5
2 parents 5754068 + 09dbe87
commit 0196fe5
Show file tree

Hide file tree

Showing 12 changed files with 524 additions and 0 deletions.
diff --git a/mayland-blocks/assets/alignments.css b/mayland-blocks/assets/alignments.css
@@ -0,0 +1,78 @@
+/*
+ * 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));
+	}
+}
diff --git a/mayland-blocks/block-template-parts/footer.html b/mayland-blocks/block-template-parts/footer.html
@@ -0,0 +1,21 @@
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
+<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title {"textColor":"foreground-light","fontSize":"small"} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small"} -->
+<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Services","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Portfolio","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
diff --git a/mayland-blocks/block-template-parts/header.html b/mayland-blocks/block-template-parts/header.html
@@ -0,0 +1,29 @@
+<!-- wp:spacer {"height":14} -->
+<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: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:navigation-link {"label":"Home","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"About","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
diff --git a/mayland-blocks/block-templates/front-page.html b/mayland-blocks/block-templates/front-page.html
@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+
+<!-- wp:post-content /-->
+
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
diff --git a/mayland-blocks/block-templates/index.html b/mayland-blocks/block-templates/index.html
@@ -0,0 +1,17 @@
+<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+
+<!-- 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:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+<!-- /wp:query-loop -->
+<!-- /wp:query -->
+
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
diff --git a/mayland-blocks/block-templates/page.html b/mayland-blocks/block-templates/page.html
@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+
+<!-- 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 /-->
+
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
diff --git a/mayland-blocks/block-templates/single.html b/mayland-blocks/block-templates/single.html
@@ -0,0 +1,35 @@
+<!-- wp:template-part {"slug":"header","align":"full", "tagName":"header","className":"site-header"} /-->
+
+<!-- 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-date /-->
+
+<!-- wp:spacer {"height":16px} -->
+<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-content /-->
+
+<!-- wp:spacer {"height":16px} -->
+<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-date /-->
+
+<!-- wp:spacer {"height":64} -->
+<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-author {"showAvatar":false,"showBio":true,"byline":"Published by","fontSize":"huge"} /-->
+
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-comments /-->
+
+<!-- wp:template-part {"slug":"footer","align":"full","tagName":"footer","className":"site-footer"} /-->
diff --git a/mayland-blocks/experimental-theme.json b/mayland-blocks/experimental-theme.json
@@ -0,0 +1,187 @@
+{
+	"settings": {
+		"defaults": {
+			"color": {
+				"gradients": [ ],
+				"palette": [
+					{
+						"slug": "primary",
+						"color": "#000000",
+						"name": "Primary"
+					},
+					{
+						"slug": "secondary",
+						"color": "#1a1a1a",
+						"name": "Secondary"
+					},
+					{
+						"slug": "background",
+						"color": "#FFFFFF",
+						"name": "Background"
+					},
+					{
+						"slug": "foreground",
+						"color": "#010101",
+						"name": "Foreground"
+					},
+					{
+						"slug": "foreground-light",
+						"color": "#666666",
+						"name": "Foreground Light"
+					},
+					{
+						"slug": "foreground-dark",
+						"color": "#333333",
+						"name": "Foreground Dark"
+					}
+				]
+			},
+			"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": "poppins",
+						"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" ]
+			},
+			"custom": {
+				"line-height": {
+					"body": 1.6,
+					"headings": 1.125
+				},
+				"margin": {
+					"horizontal": "32px"
+				},
+				"width": {
+					"default": "750px",
+					"wide": "1022px"
+				}
+			}
+		}
+	},
+	"styles": {
+		"root": {
+			"color": {
+				"background": "var(--wp--preset--color--background)",
+				"text": "var(--wp--preset--color--foreground)",
+				"link": "var(--wp--preset--color--foreground)"
+			},
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"lineHeight": "var(--wp--custom--line-height--body)",
+				"fontFamily": "var(--wp--preset--font-family--poppins)"
+			}
+		},
+		"core/heading/h1": {
+			"typography": {
+				"fontSize": "41.47px",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h2": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--huge)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h3": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h4": {
+			"typography": {
+				"fontSize": "24px",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h5": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"lineHeight": "var(--wp--custom--line-height--headings)"
+			}
+		},
+		"core/heading/h6": {
+			"typography": {
+				"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--preset--color--foreground-light)",
+				"link": "var(--wp--preset--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)"
+			}
+		}
+	}
+}