Try: Adding a barebones block-based version of the Twenty Twenty-One Theme #57
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) { | ||
|
There was a problem hiding this comment. could this be simplified to? There was a problem hiding this comment. I don't think so unfortunately — we don't want it to add additional padding to a Group or Cover block for example. The rules are only targeting text-based blocks. There was a problem hiding this comment. This is also a good candidate to figure out how to declare it better in theme.json @jorgefilipecosta @nosolosw There was a problem hiding this comment. It seems like this comes up quite a lot. Could we add a class to all text based blocks? There was a problem hiding this comment. Yeah, themes frequently want to add padding to only-text-based blocks when they're inside of fullwide columns too. A single class would come in handy for that. There was a problem hiding this comment. We don't know what a text based block is, though There was a problem hiding this comment. We could add that to Gutenberg though.. There was a problem hiding this comment. I suggested it here: WordPress/gutenberg#26407 There was a problem hiding this comment.
Theme.json is very far from being able to select a selector like this. In order to do so we would need:
There was a problem hiding this comment. We should not be attempting to replicate that exact CSS code but understand what is it trying to accomplish. Why is the margin necessary? Why the z-index? Can it be absorbed in the way columns lay out content? |
||
| 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; | ||
|
There was a problem hiding this comment. I wonder if this should live in the image block itself There was a problem hiding this comment. Yeah, I thought it did, but it doesn't seem to. 😕 There was a problem hiding this comment. Image blocks don't seem to stretch to full width: There was a problem hiding this comment. That's odd — I haven't been able to reproduce. 🤔 I just modified that code because it needs to apply to all images, not just those that are alignwide/alignfull. Mind giving it another try? |
||
| } | ||
|
|
||
| .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); | ||
|
There was a problem hiding this comment. Could we make this border apply to everything with this class?: There was a problem hiding this comment. It only applies to a few blocks, and a couple of them need to be slightly different. The image block for instance needs to be applied to We could declare these all in one place (or define a variable for |
||
| } | ||
|
|
||
| /*-------------------------------------------------------------- | ||
| # 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)); | ||
|
There was a problem hiding this comment. Could we use theme.json for the font-szie rule? |
||
| 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; | ||
| } | ||
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /** | ||
| * Unregister "Wide" Separator Style | ||
| */ | ||
| wp.domReady( function() { | ||
| wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!-- wp:spacer {"height":70} --> | ||
| <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div> | ||
|
There was a problem hiding this comment. Would you say this should be better expressed as top padding on the There was a problem hiding this comment. That would certainly be one way to do it — it would come in handy for the header too. At the moment, those template parts are truly just empty wrappers with no settings (other than alignment, I guess). But I could see them being a little more full-featured: padding, background color, etc. There was a problem hiding this comment. An additional, traditional .site-footer class name with styles works too ;) There was a problem hiding this comment. Template parts (at least these two) should be more "robust" — output a semantic tag, have style attributes, and yes, a class :) It might be nice to conceptualize template parts as |
||
| <!-- /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 --> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"} /--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"} /--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"} /--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"} /--> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is cumbersome but I get why it has to be this way for now: because @scruffian's template resolution fix did not make it in 9.2.1, you'll still get a "Template Part Not Found" error if the theme exists in a subdirectory (e.g. if you clone the theme experiments repo into your themes directory)
But I don't think this should be a blocker for merging the PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool, we can revise this README once that's merged in. 👍