Twenty Twenty-One Theme for WordPress 5.6

We’ve known for a while that WordPress 5.6 will include a new default theme and today we get our first look! The Twenty Twenty-One theme has a minimalist design – a blank canvas for the block editor – and sets the stage for Full Site Editing.

Twenty Twenty-One Theme Design

At its core, Twenty Twenty-One uses a modified version of the Seedlet theme. This base makes creating child themes easier than ever thanks to nested CSS variables (a simple overview of these terms is provided at the end of this article).

The theme is designed to use a pastel green background with two shades of gray for text. The default color palettes are pastels, which are growing in popularity, but using the color picker you can select any background color you’d like.

What is the theme’s screenshot going to look like? The starter content is still being worked on, so it’s hard to tell, but make sure you follow this ticket to be one of the first to know!

What About Gradient Backgrounds?

According to @carolinan, “The theme currently has no custom gradients, but a placeholder for editor-gradient-presets has been left in functions.php to make them easier to include.”

However if no custom gradients are added, this code will removed for Beta 1, which is scheduled for release on October 20, 2020. These gradients were recently tested by the Mel Choyce, the Default Theme Design Lead, and she had these comments:

• All of them look great when inside a block with the border style
• The lighter colors don’t look as good against the default mint background, without any sort of divider
• The gradients that go from mint to another color, or another color to mint, look good. And, you can do fun things by combining those with a solid color group blocks to get a smooth color transition

Starter Content

While there will be changes to the Twenty Twenty-One starter content, this release gives you an idea of how the theme will look and feel.

Starter Content Improvements

In a recent WordPress.org post, @helen had the following to say:

In a recent #core meeting, the ability to import starter content with existing sites was discussed. Currently, starter content is only available on fresh sites. Once you’ve created or modified a page or post, the theme’s starter content won’t load in your Customizer.

It sounds like the community is on board for trying to get these changes in a future Core release, as the deadline for WordPress 5.6 is approaching too quickly. Here’s what a few users had to say on starter content:

@helen also mentioned that one goal of Twenty Twenty-One is to highlight block patterns, and to do this the theme’s preview needs to do this very well. We’re not sure what changes will come about to help accomplish this, but her wheels are spinning.

New Block Patterns

While support for patterns is currently available in WordPress 5.5, the Twenty Twenty-One theme will include unique patterns perfectly designed to match.

What is a Block Pattern?

A standard WordPress Block is made up of a single element – Paragraph, Heading, List, etc. A Block Pattern is a layout consisting of multiple elements. To access Block Patterns, click the blue + button in the upper left of the editor. Next to the Blocks heading is Patterns, click that to see available Block Patterns.

Below are a few designs, but they have yet to make their way into the Twenty Twenty-One theme itself. Current Block Pattern designs and discussion on new ones are shown in the add initial block patterns ticket. Core is actively looking for more ideas, you can submit a block pattern today!

Block Designs

The “Latest Posts” block is currently under development too. Here’s a preliminary screenshot of what it could look like, but you’ll want to follow this ticket to learn more.

Using Full Site Editing with Twenty Twenty-One

WordPress previously announced there will be an official Full Site Editing version of the WordPress 5.6 default Twenty Twenty-One, called Twenty Twenty-One Blocks. This theme has been renamed to TT1 Blocks to avoid confusion with the Twenty Twenty-One theme once both themes are in the WordPress directory.

Before you get started, it’s important to find a safe testing environment. We recommend using BoldGrid’s Cloud WordPress service to create fully functional free WordPress installations in the cloud within seconds. If your install does something unexpected, simply delete and start fresh!

Start by installing and activating the main Gutenberg plugin, or updating to the latest version.

Then go to https://github.com/wordpress/theme-experiments and download the zip.

Unzip the file, which is called theme-experiments-master, to see everything available. Look for the tt1-blocks folder, and create a new zip archive with ONLY this folder. This will be the theme you upload to your WordPress installation. Now there will be a link for Site Editor (beta) in your WordPress dashboard, like shown below. If you do not see this link, Full Site Editing will not be active.

Now navigate to the front end of your website. Looking at the top of the screen, you will see the Customize link is missing from the top admin bar and has been replaced with an Edit site link.

Clicking the Edit site link will reload the page in an editing view that looks very similar to the core WordPress editor. Now simply click on any element you want to change, or click a + icon to add a new element. At the bottom of the screen you will see what you are editing and how it’s added to your site, in our example we’ve clicked on the Site Title.

WordPress Core Call for Testing

WordPress Core is actively looking for feedback on the Full Site Editing functionality. There are several ways you can leave feedback. Before January 13, 2021, you can comment on this Core post. You can always create new issues in github on either the Gutenberg or theme experiments repo.

Twenty Twenty vs Twenty Twenty-One

Twenty Twenty and Twenty Twenty-One are very different themes meant for different use cases. On the WordPress Core blog, Mel Choyce-Dwan described Twenty Twenty-One as “a fresh canvas, waiting to be painted.” There are no bold colors or fonts to be found, which is a stark contrast from Twenty Twenty’s big bold fonts and bright pink. See our in-depth analysis of Twenty Twenty-One from a design standpoint here.

Impressive Speed Improvements

The Twenty Twenty-One theme boasts significant speed improvements over Twenty Twenty as well. We set up two websites on a Shared WordPress web host environment, with no extra caching, and with identical content generated by the FakerPress plugin, including pages, posts, and images, and then tested the blog archive page. Here were the striking results:

As you can see, Twenty Twenty-One loaded over a full second faster, with a PageSpeed Score improvement of 16%, scoring an eye-opening 96% out of the box. At a glance, Twenty Twenty-One handled serving scaled images better, and made fewer requests since it uses native system fonts rather than the custom Inter font that was bundled with Twenty Twenty.

Google PageSpeed Insights shows similar results:

Overall, here were the statistics:

Accessibility

It looks like Accessibility is also an important feature of the Twenty Twenty-One theme. You can see various questions and tasks within the Twenty Twenty-One GitHub Accessibility project.

All of the current 16 cards in this project were created by the wonderful Carolina Nymark (shout out to her themes site!), so you can tell she’s taking Accessibility in Twenty Twenty-One very seriously.

Languages

Looking at GitHub, we can also see a change in the languages used between Twenty Twenty and Twenty Twenty-One. As you can see there’s a new language used this year – SCSS – which is how we utilize nested CSS. In Twenty Twenty-One almost 85% of the code is CSS or SCSS.

What is SCSS?

SCSS, or Sass, is CSS on the next level and the official documentation can be found here. In this article we will go over the specific features of SCSS used in the Twenty Twenty-One theme – Variables and Nesting.

What Are SCSS Variables?

Using consistent fonts and colors is easier than ever before with variables. When writing your own code you won’t have to remember the exact hex of a color or how to spell a font. You can declare a variable once and use the variable in place of the hex or font name.

Variables also makes design changes significantly easier – since the font name and color only appear one time in the stylesheet, they only need to be changed one time. This one change will cause everywhere the variable is used across your site to update accordingly.

Nesting

When using CSS it’s up to the author to group similar code together, like in the example below on the right. There are 3 elements related to nav that are being styled but they need to be completely separate.

This same code is written in SCSS on the left. Notice nav only appears once and the styling for the 3 elements is nested inside. This provides cleaner, easier to read code.

Frequently Asked Questions

Will There Be a Dark Mode?

The Twenty Twenty-One theme will include a Dark Mode, however we are unsure how this functionality will be implemented. A recent Core post is asking for user feedback on whether Dark Mode should be included with the theme itself, or if moving the feature to a plugin makes more sense.

The WordPress 5.6 Beta 4 has a new Colors & Dark Mode panel. Here you can decide if your site will opt-in to Dark Mode Support, which uses the visitor’s device setting. When using Dark Mode, a button appears on the front end of your website and in the Customizer to turn Dark Mode on or off. When Dark Mode is enabled, the background will be a dark grey with light text and images have a lower contrast.

How Does Dark Mode Work?
Here is a video showing how enabling Dark Mode changes the front end design:

Can the Twenty Twenty-One Theme be Translated?

Recently the translatable strings were pushed to GlotPress, so Twenty Twenty-One can now be translated.