Add TT1 blocks

tt1-blocks/README.md

@@ -0,0 +1,44 @@
+# TT1 Blocks
+
+Ongoing development for the block theme version of Twenty Twenty-One.
+
+This theme requires the Gutenberg Plugin to be installed (Version 10.6 or later).
+
+For the classic version of this theme, please [visit Twenty Twenty-One in the theme directory](https://wordpress.org/themes/twentytwentyone/).
+
+To contribute to the development of TT1 Blocks, 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. Click the 'Code' button on [the main Theme Experiments Repository GitHub page](https://github.com/wordpress/theme-experiments).
+3. Unzip the resulting download.
+4. Move or upload the "theme-experiments" folder into your site's `wp-content/themes` folder.
+5. Visit `Appearance > Themes` and activate the "TT1 Blocks" theme.
+
+## Copyright
+
+TT1 Blocks WordPress Theme, 2020 WordPress.org
+TT1 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

tt1-blocks/assets/css/blocks.css

@@ -0,0 +1,201 @@
+/*--------------------------------------------------------------
+# Cover
+--------------------------------------------------------------*/
+
+.wp-block-cover.is-style-twentytwentyone-border {
+	border: 3px solid var(--wp--preset--color--dark-gray);
+}
+
+/*--------------------------------------------------------------
+# 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;
+	}
+}
+
+/*--------------------------------------------------------------
+# Image
+--------------------------------------------------------------*/
+
+.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--preset--color--dark-gray);
+}
+
+.wp-block-image.is-style-twentytwentyone-image-frame img {
+	padding: var(--wp--custom--spacing--unit);
+}
+
+/*--------------------------------------------------------------
+# Latest Posts
+--------------------------------------------------------------*/
+
+.wp-block-latest-posts {
+	padding-left: 0;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
+	border-top: 3px solid var(--wp--preset--color--dark-gray);
+	border-bottom: 3px solid var(--wp--preset--color--dark-gray);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
+	padding-bottom: var(--wp--custom--spacing--vertical);
+	border-bottom: 1px solid var(--wp--preset--color--dark-gray);
+	margin-top: var(--wp--custom--spacing--vertical);
+	margin-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
+	box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--dark-gray);
+	border-bottom: 2px solid var(--wp--preset--color--dark-gray);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
+	margin: 0;
+	padding-top: var(--wp--custom--spacing--vertical);
+	padding-right: var(--wp--custom--spacing--horizontal);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
+	padding-bottom: var(--wp--custom--spacing--vertical);
+}
+
+@media screen and (min-width: 600px) {
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
+		width: calc((100% / 2));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
+		width: calc((100% / 3));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
+		width: calc((100% / 4));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
+		width: calc((100% / 5));
+	}
+	.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
+		width: calc((100% / 6));
+	}
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
+	border: 3px solid var(--wp--preset--color--dark-gray);
+	padding: var(--wp--custom--spacing--vertical) var(--wp--custom--spacing--horizontal);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
+	padding-bottom: var(--wp--custom--spacing--vertical);
+}
+
+.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
+	margin-top: var(--wp--custom--spacing--horizontal);
+	margin-bottom: var(--wp--custom--spacing--horizontal);
+}
+
+/*--------------------------------------------------------------
+# Media & Text
+--------------------------------------------------------------*/
+
+.wp-block-media-text.is-style-twentytwentyone-border {
+	border: 3px solid var(--wp--preset--color--dark-gray);
+}
+
+/*--------------------------------------------------------------
+# 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--preset--color--dark-gray);
+	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--preset--color--dark-gray);
+}
+
+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;
+}
+
+/* In Twenty Twenty-One, separators are 100% wide. This replicates that approach */
+.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	width: 100%;
+}
+
+/*--------------------------------------------------------------
+# Site Title
+--------------------------------------------------------------*/
+
+h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
+	text-decoration: none;
+}

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

@@ -0,0 +1,71 @@
+/*--------------------------------------------------------------
+# Defaults
+--------------------------------------------------------------*/
+
+body {
+	font-family: var(--wp--custom--font-primary);
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+/*
+ * 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;
+}
+
+/*
+ * Gutenberg remotes this underline, but Twenty Twenty-One uses it. 
+ */
+.site-header h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
+	text-decoration: underline;
+}
+
+/*
+ * Alignment styles.
+ * These rules are temporary, and should not be relied on or 
+ * modified too heavily by themes or plugins that build on 
+ * Twenty Twenty-Two. These are meant to be a precursor to 
+ * a global solution provided by the Block Editor. 
+ * 
+ * Relevant issues:
+ * https://github.com/WordPress/gutenberg/issues/35607
+ * https://github.com/WordPress/gutenberg/issues/35884
+ */
+
+.wp-site-blocks,
+body > .is-root-container,
+.edit-post-visual-editor__post-title-wrapper,
+.wp-block-group.alignfull,
+.is-root-container .wp-block[data-align="full"] > .wp-block-group {
+	padding-left: var(--wp--custom--spacing--outer);
+	padding-right: var(--wp--custom--spacing--outer);
+}
+
+.wp-site-blocks .alignfull,
+.is-root-container .wp-block[data-align="full"] {
+	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	width: unset;
+}
+
+/* Blocks inside columns don't have negative margins. */
+.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
+.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
+/* We also want to avoid stacking negative margins. */
+.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
+.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
+}

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

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