Merge pull request #57 from WordPress/add/twentytwentyone-blocks

Try: Adding a barebones block-based version of the Twenty Twenty-One Theme

README.md

@@ -14,6 +14,7 @@ This repository is dedicated to exploring how WordPress themes can best leverage
 | [Gutenberg Starter Theme Blocks](https://github.com/WordPress/theme-experiments/tree/master/gutenberg-starter-theme-blocks) | Gutenberg 8.6 |
 | [Twenty Nineteen Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentynineteen-blocks) | Gutenberg 8.6 |
 | [Twenty Twenty Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwenty-blocks) | Gutenberg 8.6 |
+| [Twenty Twenty-One Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwentyone-blocks) | Gutenberg 9.2.1 |
 
 `require-gutenberg` _is a utility for themes to check whether the Gutenberg plugin is installed._
 

twentytwentyone-blocks/README.md

@@ -0,0 +1,47 @@
+# Twenty Twenty-One Blocks
+
+Ongoing development for the block-based version of Twenty Twenty-One, the default WordPress theme slated for 5.6. 
+
+This theme requires the Gutenberg Plugin to be installed, and the "Full Site Editing" experiment to be activated.
+
+For the non-block-based version of this theme, please [visit the Twenty Twenty-One repository](https://github.com/WordPress/twentytwentyone). 
+
+To contribute to TT1 development, please read the [contributor's guide](/CONTRIBUTING.md).
+
+## Installation
+
+1. In your admin panel, Install and Activate [the Gutenberg Plugin](https://wordpress.org/plugins/gutenberg/). 
+2. Visit the Gutenberg -> Experiments settings page and check the "Enable Full Site Editing" box. Save your changes. 
+3. Click the 'Code' button on [the main Theme Experiments Repository GitHub page](https://github.com/wordpress/theme-experiments).
+4. Unzip the resulting download. 
+4. Create a new zip file containing only the "twentytwentyone-blocks" folder. 
+4. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
+5. Click on 'Upload Theme', select the twentytwentyone-blocks zip file, and click on 'Install Now'.
+6. Click on the 'Activate' button to use your new theme.
+
+## Copyright
+
+Twenty Twenty-One Blocks WordPress Theme, 2020 WordPress.org
+Twenty Twenty-One Blocks is distributed under the terms of the GNU GPL.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+Images
+Art by Berthe Morisot 1841-1895. Public domain.
+https://www.wikiart.org/en/berthe-morisot/playing-in-the-sand
+https://www.wikiart.org/en/berthe-morisot/roses-tremieres-hollyhocks-1884
+https://www.wikiart.org/en/berthe-morisot/young-woman-in-mauve
+https://www.wikiart.org/en/berthe-morisot/in-the-bois-de-boulogne
+https://www.wikiart.org/en/berthe-morisot/daffodils
+https://www.wikiart.org/en/berthe-morisot/self-portrait-1885
+https://www.wikiart.org/en/berthe-morisot/the-garden-at-bougival-1884
+https://www.wikiart.org/en/berthe-morisot/villa-with-orange-trees-nice
+https://www.wikiart.org/en/berthe-morisot/reading

twentytwentyone-blocks/assets/css/blocks.css

@@ -0,0 +1,171 @@
+/*--------------------------------------------------------------
+# Cover
+--------------------------------------------------------------*/
+
+.wp-block-cover.is-style-twentytwentyone-border {
+	border: 3px solid var(--wp--custom--color--border);
+}
+
+/*--------------------------------------------------------------
+# Columns
+--------------------------------------------------------------*/
+
+@media screen and (min-width: 652px) {
+	.is-style-twentytwentyone-columns-overlap .wp-block-column {
+		flex-grow: 1;
+	}
+
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
+		margin-left: calc(-2 * var(--wp--custom--spacing--horizontal));
+		margin-top: calc(2.5 * var(--wp--custom--spacing--horizontal));
+		z-index: 2;
+	}
+
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
+		margin-left: calc(-2 * var(--wp--custom--spacing--horizontal));
+		margin-top: calc(2.5 * var(--wp--custom--spacing--horizontal));
+		z-index: 2;
+	}
+
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
+	.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
+		padding-left: calc(2 * var(--wp--custom--spacing--horizontal));
+	}
+
+	.is-style-twentytwentyone-columns-overlap .wp-block-column.is-vertically-aligned-center:nth-child(2n) {
+		margin-top: 0;
+	}
+}
+
+/*--------------------------------------------------------------
+# Group
+--------------------------------------------------------------*/
+
+.wp-block-group.is-style-twentytwentyone-border {
+	border: 3px solid var(--wp--custom--color--border);
+	padding: var(--wp--custom--spacing--vertical) var(--wp--custom--spacing--horizontal);
+}
+
+/*--------------------------------------------------------------
+# Image
+--------------------------------------------------------------*/
+
+.wp-block-image img,
+.wp-block-image img {
+	height: auto;
+}
+
+.wp-block-image.is-style-twentytwentyone-border img,
+.wp-block-image.is-style-twentytwentyone-image-frame img {
+	border: 3px solid var(--wp--custom--color--border);
+}
+
+.wp-block-image.is-style-twentytwentyone-image-frame img {
+	padding: var(--wp--custom--spacing--unit);
+}
+
+/*--------------------------------------------------------------
+# Media & Text
+--------------------------------------------------------------*/
+
+.wp-block-media-text.is-style-twentytwentyone-border {
+	border: 3px solid var(--wp--custom--color--border);
+}
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+
+.wp-block-navigation .wp-block-navigation-link a:hover {
+	text-decoration: underline;
+	text-underline-offset: 3px;
+	text-decoration-style: dotted;
+	text-decoration-skip-ink: none;
+}
+
+/*--------------------------------------------------------------
+# Separator
+--------------------------------------------------------------*/
+
+hr,
+.wp-block-separator {
+	border-bottom: 1px solid var(--wp--custom--color--border);
+	clear: both;
+	opacity: 1;
+}
+
+hr[style*="text-align:right"],
+hr[style*="text-align: right"],
+.wp-block-separator[style*="text-align:right"],
+.wp-block-separator[style*="text-align: right"] {
+	border-right-color: var(--wp--custom--color--border);
+}
+
+hr:not(.is-style-wide):not(.is-style-dots),
+.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: var(--responsive--aligndefault-width);
+}
+
+hr.alignwide:not(.is-style-wide):not(.is-style-dots),
+.wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots),
+hr.alignfull:not(.is-style-wide):not(.is-style-dots),
+.wp-block-separator.alignfull:not(.is-style-wide):not(.is-style-dots) {
+	max-width: inherit;
+}
+
+hr.is-style-twentytwentyone-separator-thick,
+.wp-block-separator.is-style-twentytwentyone-separator-thick {
+	border-bottom-width: 3px;
+}
+
+.wp-block-separator.is-style-dots {
+	border-bottom: none;
+}
+
+.wp-block-separator.is-style-dots > hr {
+	display: none;
+}
+
+/*--------------------------------------------------------------
+# Site Tagline
+--------------------------------------------------------------*/
+
+.wp-block-site-tagline {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/*--------------------------------------------------------------
+# Site Title
+--------------------------------------------------------------*/
+
+h1.wp-block-site-title {
+	font-size: calc(1px * var(--wp--preset--font-size--normal));
+	font-weight: var(--wp--custom--font-weight-normal);
+	text-transform: uppercase;
+}
+
+h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
+	text-decoration: none;
+}
+
+/*--------------------------------------------------------------
+# Social Links
+--------------------------------------------------------------*/
+
+.wp-block-social-links.is-style-twentytwentyone-social-icons-color a {
+	color: var(--wp--custom--color--primary);
+}
+
+.wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link {
+	background: none;
+}

twentytwentyone-blocks/assets/css/style-shared.css

@@ -0,0 +1,35 @@
+/*--------------------------------------------------------------
+# Defaults
+--------------------------------------------------------------*/
+
+body {
+	font-family: var(--wp--custom--font-primary);
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+h1,
+.has-huge-font-size,
+.has-gigantic-font-size {
+	font-weight: var(--wp--custom--font-weight-light);
+}
+
+h2, h3, h4, h5, h6 {
+	font-weight: normal;
+}
+
+/*
+ * text-underline-offset doesn't work in Chrome at all 👎
+ * But looks nice in Safari/Firefox, so let's keep it and
+ * maybe Chrome will support it soon.
+ */
+a {
+	cursor: pointer;
+	text-underline-offset: 3px;
+	text-decoration-skip-ink: all;
+}
+
+a:hover {
+	text-decoration-style: dotted;
+	text-decoration-skip-ink: none;
+}

twentytwentyone-blocks/assets/js/unregister-block-style.js

@@ -0,0 +1,6 @@
+/**
+ * Unregister "Wide" Separator Style
+ */
+wp.domReady( function() {
+	wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' );
+} );

twentytwentyone-blocks/block-template-parts/footer.html

@@ -0,0 +1,19 @@
+<!-- wp:spacer {"height":70} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
+<hr class="wp-block-separator alignwide is-style-twentytwentyone-separator-thick"/>
+<!-- /wp:separator -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"align":"right"} -->
+<p class="has-text-align-right">Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->

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

@@ -0,0 +1,27 @@
+<!-- wp:spacer {"height":70} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:site-title /-->
+
+<!-- wp:site-tagline /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Work","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:spacer {"height":70} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

twentytwentyone-blocks/block-templates/front-page.html

@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header","theme":"twentytwentyone-blocks","align":"full"} /-->
+
+<!-- wp:post-content /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"twentytwentyone-blocks","align":"full"} /-->

twentytwentyone-blocks/block-templates/index.html

@@ -0,0 +1,8 @@
+<!-- wp:template-part {"slug":"header","theme":"twentytwentyone-blocks","align":"full"} /-->
+
+<!-- wp:query-loop -->
+<!-- wp:post-title /-->
+<!-- wp:post-content /-->
+<!-- /wp:query-loop -->
+
+<!-- wp:template-part {"slug":"footer","theme":"twentytwentyone-blocks","align":"full"} /-->

twentytwentyone-blocks/block-templates/page.html

@@ -0,0 +1,6 @@
+<!-- wp:template-part {"slug":"header","theme":"twentytwentyone-blocks","align":"full"} /-->
+
+<!-- wp:post-title /-->
+<!-- wp:post-content /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"twentytwentyone-blocks","align":"full"} /-->

twentytwentyone-blocks/block-templates/single.html

@@ -0,0 +1,7 @@
+<!-- wp:template-part {"slug":"header","theme":"twentytwentyone-blocks","align":"full"} /-->
+
+<!-- wp:post-title /-->
+<!-- wp:post-content /-->
+<!-- wp:post-comments /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"twentytwentyone-blocks","align":"full"} /-->