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

Try: A block-based version of Mayland

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));
+	}
+}

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

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

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"} /-->

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"} /-->

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"} /-->

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"} /-->

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)"
+			}
+		}
+	}
+}

mayland-blocks/functions.php

@@ -0,0 +1,74 @@
+<?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' );
+
+		// 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' ),
+		);
+
+		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+	}
+
+	return esc_url_raw( $fonts_url );
+}
+
+/**
+ * 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 );
+}
+add_action( 'wp_enqueue_scripts', 'mayland_blocks_scripts' );

mayland-blocks/style.css

@@ -0,0 +1,67 @@
+/*
+Theme Name: Mayland (Blocks)
+Theme URI: https://github.com/Automattic/themes/tree/master/mayland-blocks
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Make your online portfolio wonderfully uncluttered with Mayland. Gracefully highlight your photography and other projects. Mayland is versatile enough to be your personal site too.
+Requires at least: WordPress 4.9.6
+Version: 1.2.9
+License: GNU General Public License v2 or later
+License URI: LICENSE
+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
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned with others.
+*/
+
+
+/* Smooth out the fonts. */
+
+body {
+	-webkit-font-smoothing: antialiased;
+	-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 {
+	text-decoration: none;
+}
+
+.site-header .wp-block-navigation {
+	margin-bottom: 0;
+}
+
+.site-header .wp-block-social-links.alignright {
+	margin: 0 0 0 1em;
+	transform: translateY(-0.3rem);
+}
+
+@media screen and (min-width: 1290px) {
+	.site-header .wp-block-column,
+	.site-footer .wp-block-column {
+		padding-left: var(--wp--custom--margin--horizontal);
+		padding-right: var(--wp--custom--margin--horizontal);
+	}
+}
+
+/* Adjust heading letter spacing. */
+
+h1, h2, h3 {
+	letter-spacing: -0.015em;
+}