Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9.

Last update: Nov 28, 2022

Related tags

Overview

Twenty Twenty-Two

Welcome to the development repository for the default theme that will launch with WordPress 5.9.

About

Twenty Twenty-Two is designed to be the most flexible default theme ever created for WordPress. It's built for full site editing first as a block theme. The theme aims to ship with as little CSS as possible: our goal is for all theme styles to be configured through theme.json and editable through Global Styles. The theme development team will work closely with Gutenberg contributors to build design tools in the block editor that enable this goal.

Contributing

If you would like to contribute code, the list of open issues is a great place to start looking for tasks. Pull requests are preferred when linked to an existing issue.

Contributing is not just for developers! There are many opportunities to help with testing, triage, discussion, design, building patterns and templates, and more. Please look through open issues, and join in wherever you feel most comfortable.

If you'd like to help with triage, let @jffng and @kjellr know here or in WordPress.org's slack instance. We'll help you get set up with the ability to add labels to issues and PRs.

Getting Started

To get started with development:

Set up a WordPress instance, we recommend wp-env or Local as an alternative to docker.
Install the Gutenberg plugin
Clone / download this repository into your /wp-content/themes/ directory

Tips for Contributors

As stated above, a goal for the theme is to have as little CSS as possible. Much of the theme's visual treatments should be handled by the Block Editor and Global Styles. As a general rule, if multiple themes would benefit from the CSS you're considering adding, it might reasonably be provided by Gutenberg instead. Let's include clear code comments for any CSS we do include.
Similarly, let's refrain from building any custom-built PHP or JavaScript-based workarounds for functionality that might reasonably be provided by the Block Editor. Twenty Twenty-Two will be the first widely-distributed block theme, so let's keep its code simple.
In accordance to those last two bullets, this theme has no required build process.
If you've helped contribute to the theme in any way, you deserve credit! Folks will be updating CONTRIBUTORS.md periodically with names of contributors, but feel free to open a PR or issue if we leave someone out.

Requirements

Gutenberg plugin (latest)
WordPress 5.8+
PHP 5.6+
License: GPLv2 or later

Some theme features / PRs may require Gutenberg trunk and will be described or tagged accordingly.

To optionally run tests locally, you will also need:

You can install the test-specific development dependencies by running npm i && composer install. The following test commands are then available:

npm run lint:css lints and autofixes where possible the CSS
composer run analyze [filename.php] statically analyzes PHP for bugs
composer run lint checks PHP for syntax errors
composer run standards:check checks PHP for standards errors according to WordPress coding standards
composer run standards:fix attemps to automatically fix errors

Resources

Demo Site

There is a demo site located at https://2022.wordpress.net. During the theme development process, updates to trunk will be brought onto the demo server within five minutes. After the theme is stable, the site will be switched to automatic updates from the WordPress.org repo.

Timeline

The theme will be released with WordPress 5.9 and follow the key dates / milestones associated with its development schedule.

Comments

Try: add padding CSS rules instead of in the templates

This PR provides an interim solution to the padding problem that eventually will be solved in Gutenberg (https://github.com/WordPress/gutenberg/issues/35607). This leverages a custom outer spacing variable that will be absorbed with the future variable implemented for the editor plus a series of CSS rules that will eventually disappear as the editor provides a global solution instead.

To test this check that the full width blocks all over the theme go all the way to the borders of the viewport while the rest of the site maintains a padding on mobile to stop content from extending. The editor should show the same as the frontend does.

Alternative to https://github.com/WordPress/twentytwentytwo/pull/289

Addresses https://github.com/WordPress/twentytwentytwo/issues/234

opened by MaggieCabrera 23
Template part vs block pattern, establishing best practices

This is not indented as criticism.

I think it would be a good idea to have a discussion about best practices when it comes to deciding if something should be a template part or a block pattern (like how the community has discussed the naming of colors and font sizes).

Currently many parts in the theme are patterns. But it is actually more difficult -and a much larger number of clicks- for a user to replace existing content in a header or footer with a pattern than it is to use the replace functionality that is available in the template part*. Because with patterns, the user has to select and delete all the existing content, then add a new pattern via the block inserter. -And they need to do this on every page, and it means they can't take advantage of making changes to all headers or footers at once.

It makes sense to have patterns ready for sharing in the pattern directory. -But it also makes sense to turn header and footer patterns into template parts, because they are designed to be used in the header and footer template areas.

*Assuming this bug will be fixed.
[Component] Block Templates [Component] Block Patterns [Type] Discussion

opened by carolinan 22
Question: OK to have multiple H1 headings per page?

Description I noticed the Site Title in the header is a H1 heading, and also the Query Title in the index template is also a H1 heading.

When viewing an archive/category/author etc there are two H1 headings on the page.

The Post Title blocks within the Query loop in the archive are H2. If the Query Title was changed to H2, then the Query Loop Post Title's should be changed to H3?

This would be OK for viewing archives, but then the main home index would be missing a H2 Query Title, and would go from Site Title H1 to the Query Loop Post Title's H3.

Hope I've managed to explain my thinking okay here, and not sure whether I'm fussing over something that should not really be of concern?

The Site Title could be changed to paragraph but I guess that would not be deemed correct?
[Type] Bug [Type] Discussion

opened by Sandstromer 14
Reconsider adding a search template

In the site editor, when adding a new template, the user has the option to select between search and front page:

If they select search, they are met with a blank template. I think it would be easier for users to edit an existing template, if users want to make changes to the search results page.

opened by carolinan 13
Questions and feedback: Downloading and installing the theme.

I made a new local site with Desktop Server to test out WP 5.9.

I downloaded Twenty Twenty Two version 0.4.0 from: https://github.com/WordPress/twentytwentytwo/releases/ (Please add the link directly to the readme.)

I see this:

I click "Live Preview" to check out the site in the Customizer.

The above feels a bit strange. One is able to click the Live Preview link, make modifications, but one is not able to activate the theme.

I clicked X to exit. Went back to the Themes page. Activated Twenty Twenty Two. Noticed this message:

Clicked the back arrow.

Went to install and activate the Gutenberg plugin. (12.0.1)

Went back to activate the theme. Theme activated. I clicked Live Preview. The Customizer opened and I saw this:

The Appearance menu shows this:

I deactivate the Gutenberg plugin.

View the frontend. See a blank screen. I open the Chrome tools to see if I notice any error, but nothing is showing up here.

Going to Appearance -> Editor screen I see this: (There are also errors in Chrome console)

GET https://5-9.dev.cc/wp-json/wp/v2/templates/twentytwentytwo-0.4.0//home?context=edit&_locale=user 404 (Not Found)

Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null. at Ke (index.min.js?ver=a8059c1a29b45793bbdfc1b5f0e8932f:15) at Ke.next () at Ze (index.min.js?ver=a8059c1a29b45793bbdfc1b5f0e8932f:15) at Ze.next () at index.min.js?ver=4fef26db4a0ead06ae75996d4e680a4e:1

I assume the blank screen has something to do with the cache.

I checked another site where I also have Twenty Twenty Two activated, and it seems to now finally be coming up correctly.

That was a pretty bumpy experience.

opened by paaljoachim 12
Add CSS reset

I know we're trying to keep CSS mostly out of the theme, but likely a reset will be necessary. Unless we want to try to do something more upstream: Gutenberg or WordPress core integration?

I would recommend Andy Bell's (@andy-piccalilli) modern-css-reset.

Thoughts? Feedback?
[Status] Needs Decision

opened by colorful-tones 12
Add padding to post content in the editor
Description

This PR adds padding to the title and content in the post editor, so it matches the front-end. It partially addresses #234.

The main issue (aside from the fact that we are inlining the CSS in order to target the .editor-styles-wrapper class) with this approach is that it will apply padding even if you have the Blank template selected, which has no padding by default.

Screenshots

Editor | Front-end ------- | ------- |

Testing Instructions

Create / edit a post or page that uses the default template. Verify content doesn't touch the edges of the screen.

Verify the padding matches the front-end.

Go to the site editor, verify no padding is applied.
opened by jffng 11
Add the bird image to the homepage header

Fixes #92.

This PR uses the new pattern block to place the header-large-dark pattern in the homepage's header. Like #182, this PR relies on https://github.com/WordPress/gutenberg/pull/36090 to get it to appear correctly.

Before|After ---|--- |
[Type] Enhancement [Component] Block Templates

opened by kjellr 11
Related Gutenberg Issues and PRs
Let's use this issue to track and prioritize issues that are needed for the theme.

Must have

[ ] https://github.com/WordPress/gutenberg/issues/35607

[x] https://github.com/WordPress/gutenberg/issues/35525

[x] https://github.com/WordPress/gutenberg/issues/36084

[x] https://github.com/WordPress/gutenberg/pull/33217

[x] https://github.com/WordPress/gutenberg/issues/26901 https://github.com/WordPress/gutenberg/pull/35593

[x] https://github.com/WordPress/gutenberg/issues/34648

[x] https://github.com/WordPress/gutenberg/issues/35522

[x] https://github.com/WordPress/gutenberg/issues/26865

[x] https://github.com/WordPress/gutenberg/issues/35732

Nice to have

[ ] https://github.com/WordPress/gutenberg/issues/35680

[ ] https://github.com/WordPress/gutenberg/issues/4543 https://github.com/WordPress/gutenberg/issues/27075

[ ] https://github.com/WordPress/gutenberg/issues/35591

[ ] https://github.com/WordPress/gutenberg/issues/35364

[ ] https://github.com/WordPress/gutenberg/issues/35267

[ ] https://github.com/WordPress/gutenberg/issues/35524

[ ] https://github.com/WordPress/gutenberg/issues/34762

[ ] https://github.com/WordPress/gutenberg/issues/35558

[ ] https://github.com/WordPress/gutenberg/issues/12997 https://github.com/WordPress/gutenberg/pull/31823

[ ] https://github.com/WordPress/gutenberg/issues/35735

[ ] https://github.com/WordPress/gutenberg/issues/29167

[ ] https://github.com/WordPress/gutenberg/issues/31815

[x] https://github.com/WordPress/gutenberg/issues/35934 (Will not be included)

[x] https://github.com/WordPress/gutenberg/issues/34783

Some of these are already associated to issues in this repo. It would be great to get more folks contributing to these issues.
[Type] Gutenberg [Type] Overview
opened by jffng 11
Homepage content & user experience

Perhaps I'm not familiar enough with Block Theme/FSE, but as an everyday editor I would be confused by the following dilemma. I created a new empty WordPress site in Local. I have TwentyTwentyTwo theme activated and latest Gutenberg.

I already have 44 posts I've generated using FakerPress plugin. I visit my site's homepage and see: "Welcome to WordPress. This is your first post. Edit or delete it, then start writing!" Here, the confusion begins.

My first instinct is to check my Settings > Reading and verify that "Your homepage displays: Your latest posts". This is contradicting what I'm seeing on the homepage though. 😕

It is likely this is a user experience improvement for Gutenberg Full Site Editing experience, and just wondering if I'm missing something?

opened by colorful-tones 11
Remove inline styles from templates
Describe the bug

A block theme can by definition not use any feature that isn't available to end users. Hardcoded CSS is such a feature, and therefore a no go.

To Reproduce

Steps to reproduce the behavior:

Go to the Site Editor

Open the Single template.

Inspect the Group block that contains the Post (the one immediately below the header).

See padding being applied to the Group block.

Check block settings, check theme.json. No trace of where this originates from.

Check the template HTML, see that this is hardcoded.

Expected behavior

All paddings or margins should either be added through the Site Editor interface. If the available UI is not a good fit, then a block style should be used.
[Type] Bug
opened by fklein-lu 10
⚠️ NEW ISSUES SHOULD BE CREATED ON TRAC

From this point on any new issues should be opened on the WordPress Core Trac instead of at GitHub to save them needing to be transitioned over there manually at a later point.

Please prefix tickets with Twenty Twenty-Two: so that they are easy to find and collect with a search or filters. Thank you!

https://core.trac.wordpress.org/newticket?component=Bundled+Theme

https://core.trac.wordpress.org/search?q=twenty+twenty-two%3A

opened by kjellr 0

Releases(v1.0)

v1.0(Jan 25, 2022)
Version of the theme released with WordPress 5.9.

What's Changed

Having an h1 on single posts by @SGr33n in https://github.com/WordPress/twentytwentytwo/pull/249

Having h1 titles on pages by @SGr33n in https://github.com/WordPress/twentytwentytwo/pull/250

Change paths in patterns to use the template not the stylesheet by @scruffian in https://github.com/WordPress/twentytwentytwo/pull/283

Use get_theme_file_path to load block patterns by @jffng in https://github.com/WordPress/twentytwentytwo/pull/277

Try adding a hover state for navigation items by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/279

Try using the default categories by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/284

Stop using H1 tags for the Site Title when it's in a footer pattern. by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/293

Remove unnecessary font weight rule font-weight rule from index and home templates by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/290

Fix alignment in footer blog pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/296

Try: add padding CSS rules instead of in the templates by @MaggieCabrera in https://github.com/WordPress/twentytwentytwo/pull/291

Fix font size variable names for buttons by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/297

Fix query padding by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/300

Try updated font sizes by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/298

Add static analysis to GitHub Actions workflows by @schlessera in https://github.com/WordPress/twentytwentytwo/pull/305

Fix: Quote block border issue with right align settings by @delowardev in https://github.com/WordPress/twentytwentytwo/pull/312

Adjust padding to better support theme.json and outer padding by @richtabor in https://github.com/WordPress/twentytwentytwo/pull/310

Add menu container padding by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/301

Use --wp--custom--spacing--small instead of hard-coded spacing styles by @richtabor in https://github.com/WordPress/twentytwentytwo/pull/316

Add a search template by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/320

Change Site Title in the footer to a paragraph instead of an H1 by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/322

Try a static spacer underneath the header by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/327

Update copyright year to match core. by @jffng in https://github.com/WordPress/twentytwentytwo/pull/328

Fix typo in readme by @ndiego in https://github.com/WordPress/twentytwentytwo/pull/334

Add negative margins to top-level group and cover blocks by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/336

Remove extra wrappers from patterns and header templates by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/337

Update required WordPress version to 5.9. by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/326

Update readme with archive info. by @jffng in https://github.com/WordPress/twentytwentytwo/pull/347

New Contributors

@SGr33n made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/249

@schlessera made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/305

@delowardev made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/312

@ndiego made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/334

Full Changelog: https://github.com/WordPress/twentytwentytwo/compare/v0.5.0...v1.0
Source code(tar.gz)
Source code(zip)
v0.5.0(Dec 8, 2021)
What's Changed

Changes to directory names by @mburridge in https://github.com/WordPress/twentytwentytwo/pull/265

Improve twentytwentytwo_preload_webfonts docs by @sabernhardt in https://github.com/WordPress/twentytwentytwo/pull/271

Try a subtle opacity change on button hovers by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/275

Update birds video by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/276

New Contributors

@sabernhardt made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/271

Full Changelog: https://github.com/WordPress/twentytwentytwo/compare/v0.4.0...v0.5.0
Source code(tar.gz)
Source code(zip)
v0.4.0(Nov 30, 2021)
Description

This version of the theme was packaged with WordPress 5.9 Beta 1.

What's Changed

Adjust the background dim on "Header with image background" pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/237

Update theme description by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/242

Preload main web font to improve LCP performance by @felixarntz in https://github.com/WordPress/twentytwentytwo/pull/240

Rework the default template for a better first experience by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/243

Rename homepage template by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/244

Add filters for block patterns and block pattern categories by @desrosj in https://github.com/WordPress/twentytwentytwo/pull/238

Update padding on subscribe pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/245

Fix header.html markup by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/247

add missing props to CONTRIBUTORS.md by @jeffpaul in https://github.com/WordPress/twentytwentytwo/pull/246

Tidy up patterns that use the "bird on salmon" images by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/252

Add about page on solid color background pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/257

Fix duplicate block pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/258

Add the remaining header template part to theme.json by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/253

Bump tested up to 5.9 by @jffng in https://github.com/WordPress/twentytwentytwo/pull/259

Add missing text domains and minor related adjustments by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/254

Try new navigation block markup by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/260

Add appearanceTools to theme.json by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/263

Experimental: Remove styles from template parts by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/262

New Contributors

@felixarntz made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/240

@jeffpaul made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/246

Full Changelog: https://github.com/WordPress/twentytwentytwo/compare/v0.3.0...v0.4.0
Source code(tar.gz)
Source code(zip)
v0.3.0(Nov 15, 2021)
What's Changed

Adds support for block borders to theme.json by @mburridge in https://github.com/WordPress/twentytwentytwo/pull/203

Don't inline style.css, but enqueue it. by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/207

Add additional block patterns by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/204

Add more colorful header patterns, fix dark footer pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/211

Update contributors list. by @jffng in https://github.com/WordPress/twentytwentytwo/pull/216

Update theme.json to v2 by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/217

Add font smoothing + text link styles by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/220

Sync with WP trunk by @desrosj in https://github.com/WordPress/twentytwentytwo/pull/223

Fix date wrapping for Image Grid Posts Query Pattern by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/232

Try adding simple search + file button styles by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/235

New Contributors

@desrosj made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/223

Full Changelog: https://github.com/WordPress/twentytwentytwo/compare/v0.2.0...v0.3.0
Source code(tar.gz)
Source code(zip)
v0.2.0(Nov 3, 2021)
What's Changed

Update Dark Header to use Heading instead of Site Tagline by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/173

Add .nvmrc by @ribaricplusplus in https://github.com/WordPress/twentytwentytwo/pull/149

Further compress images by @colorful-tones in https://github.com/WordPress/twentytwentytwo/pull/176

README.md enhancements by @colorful-tones in https://github.com/WordPress/twentytwentytwo/pull/175

Fix typo in Footer Pattern Name by @nielslange in https://github.com/WordPress/twentytwentytwo/pull/186

Remove dropCap support by @nielslange in https://github.com/WordPress/twentytwentytwo/pull/187

Add sidebar patterns by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/164

Replace template strings with translatable patterns by @jffng in https://github.com/WordPress/twentytwentytwo/pull/182

Tidies up functions.php to aid readability by @mburridge in https://github.com/WordPress/twentytwentytwo/pull/195

Hide 404 pattern from inserter by @jffng in https://github.com/WordPress/twentytwentytwo/pull/196

Add the bird image to the homepage header by @kjellr in https://github.com/WordPress/twentytwentytwo/pull/183

[Pattern] Update Footer with query, title, and citation by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/199

[Pattern] Update Footer with query, featured images, title, and citation by @carolinan in https://github.com/WordPress/twentytwentytwo/pull/200

Add schema support by @mburridge in https://github.com/WordPress/twentytwentytwo/pull/197

Add changelog and bump versions by @jffng in https://github.com/WordPress/twentytwentytwo/pull/201

New Contributors

@ribaricplusplus made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/149

@colorful-tones made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/176

@nielslange made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/186

@mburridge made their first contribution in https://github.com/WordPress/twentytwentytwo/pull/195

Full Changelog: https://github.com/WordPress/twentytwentytwo/compare/v0.1.0...v0.2.0
Source code(tar.gz)
Source code(zip)
v0.1.0(Oct 27, 2021)

Source code(tar.gz)
Source code(zip)

Owner

GitHub

Wordless is a junction between a WordPress plugin and a theme boilerplate that dramatically speeds up and enhances your custom theme creation

Wordless is a junction between a WordPress plugin and a theme boilerplate that dramatically speeds up and enhances your custom theme creation. Some of

1.4k Dec 9, 2022

A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.

WP Bootstrap Navwalker This code in the main repo branch is undergoing a big shakeup to bring it in line with recent standards and to merge and test t