Posted on

Twenty Twenty-One Blocks Theme Launching as a Separate Project

Twenty Twenty-One Blocks theme in the Gutenberg site editor.
Twenty Twenty-One in the Gutenberg site editor.

Last Friday, Themes Team representative Carolina Nymark announced the Twenty Twenty-One Blocks theme project. It is a block-based version of the Twenty Twenty-One default theme that is shipping along with WordPress 5.6. It will work with the site editor available in the Gutenberg plugin. Developers will work on the two themes as separate projects.

The original plan was to explore support for full-site editing after the WordPress Beta 1 release for Twenty Twenty-One. Some had hoped that support would land in the theme itself. However, a second theme could be a better path in the long run.

As I wrote in my original coverage of Twenty Twenty-One, it did not seem likely that full-site editing would be far enough along in development for it to be a primary feature for the theme. Since the feature will not be in WordPress 5.6, it makes sense to develop for it outside of the primary theme for the time being.

“Twenty Twenty-One Blocks is an experimental theme created as an example to highlight what is possible with Full Site Editing,” wrote Nymark in the announcement. “The theme will need Gutenberg and the Full Site Editing experiment to be enabled. It will not be part of Core, but once complete it will be available in the theme directory.”

Currently, there are no plans to integrate the two themes down the road. They will be maintained as separate projects. This sounds like a smart strategy for this theme. It will allow developers to work on the Blocks theme as a separate entity in the coming months without having to worry about potential problems with merging.

I am excited about this project because it means we get a somewhat official, though not technically a default, theme that supports full-site editing. Otherwise, the community would have had to wait another year for the Twenty Twenty-Two theme, which will presumably be 100% built with blocks.

The Q theme by Ari Stathopoulos, a Themes Team representative, is a little farther along at the moment. It is a solid starting point and learning tool. However, there should be a theme project coming from core WordPress developers that is leading the way for other theme authors. There is a sense of trust, particularly for first-time theme authors, when picking apart an officially-supported theme that it is built to current standards. That is why Twenty Twenty-One Blocks is important.

Thus far, little work has gone into the theme, much of it coming from the original pull request to kick off development from Kjell Reigstad. The theme is currently stored in the WordPress Theme Experiments repository. Ideally, the team will split this theme into its own GitHub repository since it will be added to the theme directory and not merely an experiment.

For theme authors who want to cut their teeth on building block-based themes, this would be a good place to begin taking those initial steps. Or, it will at least be a good project to follow because this is as close to an “official” theme that supports full-site editing that we will see for a while.

At this point, the theme does not do a lot. It is minimal and nowhere near a block-based equivalent of Twenty Twenty-One. However, it works as well as most other themes supporting Gutenberg’s site editor.

For now, template parts do not seem to be working on the front end. However, template parts have been hit or miss in my tests for a while, sometimes seemingly working only by some randomly magical force that rears its head when I close in on the limits of my frustration — it will likely begin working immediately after publishing this post. That is often the nature of testing alpha-level software. Nevertheless, I am excited about following the development of this theme in the coming weeks and months.

Posted on

WordPress Contributors Explore Adding Dark Mode Support to Upcoming Twenty Twenty-One Theme via a Plugin

WordPress 5.6 is set to include a new default theme, Twenty Twenty-One, designed to give users a blank canvas for the block editor. The theme doesn’t fall under any particular category and is meant to be suitable for use across different types of websites. One new feature that has very recently come under consideration is support for a dark mode that can be toggled on or off.

Contributors have raised the possibility of including a dark mode in several issues while the theme has been in development. Mel Choyce, who is leading the design on the default theme, published a summary of the team’s recent discussions about which options the theme should make available for site owners and viewers in support of dark mode, or if the feature should simply be scrapped.

“We’ve built in a Customizer setting that lets site owners opt their sites out of supporting Dark Mode, for greater design control,” Choyce said. “Additionally, we’re considering adding a front-end toggle so site viewers can turn Dark Mode on/off, regardless of their OS/Browser preference. This setting would only show if a site allows Dark Mode support.”

Twenty Twenty-One Light and Dark Modes

Choyce outlined five different combinations of options for supporting it, including two options that allow site owners to disable it, regardless of the user’s selection in their OS/browser. Two other options require the site to support dark mode but differ in whether or not the visitor is allowed to toggle it on or off.

Does Twenty Twenty-One Need a Dark Mode?

Dark mode was a late addition to the default theme’s development. Choyce said the idea seems like a good opportunity to explore but ideally the team would have intentionally designed the feature before development started.

In the comments of the post, contributors are discussing the many intricacies of adding this feature to a theme that will be on by default for new WordPress sites. A few commenters noted there might be issues and surprises with logos and transparent images. For this reason, several made the case for shipping it as an opt-in feature and not on by default.

Others did not see the need for users to be able to toggle dark mode on/off for individual websites when they already have controls available through their system or browser preferences.

Kjell Reigstad contends that users’ expectations have not yet translated into demand for this feature.

“As much as I’m a fan of dark mode in general (I use it on all my devices and it definitely helps to reduce eye strain), I think the general public views it as ‘a thing that apps do’ — not something that websites do yet,” Reigstad said. “As mentioned above, this theme could be a step towards changing that perception, but the feature’s novelty is something to keep in mind.”

WordPress 5.6 core tech lead Helen Hou-Sandí suggested it might be better to develop the feature as a plugin, instead of pushing for it to be ready in a short time frame.

“My instinct right now is that it would be best to split dark mode for Twenty Twenty-One out into a plugin as a form of opt-in, primarily because I think that will both ease the burden for meeting the bar for core ship and also gives space for the feature to be iterated on outside of the core development cycle,” Hou-Sandí said. She also noted that users will be doing things with the theme that core contributors cannot anticipate and a plugin is an easier route for responding to those needs.

“By separating it out, I think it has a better chance of reaching a point where it encompasses enough by default to be a theme setting without too much futzing on the user’s part, or even enough of a thing to be a feature for all themes at large,” Hou-Sandí said.

Choyce and Carolina Nymark agreed with this suggestion and announced a decision in the WordPress Slack #core-themes channel this morning, based on feedback on the post.

“Carolina Nymark and I made the decision to move Dark Mode out into a plugin,” Choyce said. “This will allow us to better address all of the edge cases we’ve been encountering without slowing down the progress of bug fixing within the core theme.”

The plugin is being developed on GitHub where contributors will explore how to support the feature moving forward.

Posted on

First Look at Twenty Twenty-One, WordPress’s Upcoming Default Theme

Fashion is ephemeral. Art is eternal. Indeed what is a fashion really? A fashion is merely a form of ugliness so absolutely unbearable that we have to alter it every six months!

Thus wrote Oscar Wilde on Victorian-era fashion in an article titled “The Philosophy of Dress” for the New-York Tribune in 1885.

In many ways, WordPress theming is the same as the ever-changing landscape of fashion. Rounded corners are in one day and out the next. Box shadows are in one year after being frowned up just months earlier. Perhaps web design is so intolerable that we must change it every six months. Or, at least freshen it up every year in the case of WordPress.

If art is eternal, there are only two default, Twenty* themes that I can truly recall from past years: Twenty Ten and Twenty Fourteen — yes, Twenty Twenty is memorable, but it is also still the current default. Twenty Ten was a classic that paid homage to WordPress’s past. Twenty Fourteen was such a leap away from tradition that it is hard to forget. Everything else has seemed to fade to varying degrees.

With WordPress 5.6 and the end of the year looming, it is time to look forward to the latest trend. As Mel Choyce-Dwan noted in the announcement of Twenty Twenty-One, the next default theme, “Pastels and muted colors are pretty in right now.”

She is not wrong. The colors are a refreshing change of pace. Now that we are into the second day of autumn, I am getting the good kind of vibes from some of the more earthy-tones from a couple of the color palettes expected to ship with the theme.

Color palette options for the Twenty Twenty-One WordPress theme.
Potential color palette options for Twenty Twenty-One.

Whether Twenty Twenty-One will be a fashionable theme for the year or art that we can remember a decade from now, only history will be able to judge. For now, let’s enjoy the creation and take a look at what we should expect from the next default WordPress theme.

The Current Twenty Twenty-One

The new default theme is a fork of Automattic’s Seedlet, a project in which I lauded as the next step in the evolution of theming. It is a theme that is focused on WordPress’s future of being completely comprised of blocks. It gives us an ideal insight into where theme development is heading. It makes sense as the foundation for the new default. Few other themes would make for a good starting point right now. With WordPress theme development in flux, Seedlet is simply ahead of the pack in terms of foundational elements.

Homepage view of the Seedlet WordPress theme.
Seedlet WordPress theme screenshot.

“This provides us with a thorough system of nested CSS variables to make child theming easier, and to help integrate with the global styles functionality that’s under development for full-site editing,” wrote Choyce-Dwan of using Seedlet as a starting point.

There are no plans to spin up a Google Web Font for this theme. The design team is going native and sticking with the default system font stack. Choyce-Dwan listed several reasons for the choice, such as keeping a neutral font that allows broad use, speed, and customizability via a child theme.

Despite the neutral font, the default pastel green is a fairly opinionated design decision. It will not be used broadly across industries. However, the team plans to create multiple color palettes that will give it more range. Presumably, these palettes can also be overwritten.

Single post view of the Twenty Twenty-One WordPress theme.
Pastel green color scheme on single post view.

Other than the colors, the design is relatively simple. Choyce-Dwan said that the theme’s block patterns support is where it will be truly unique.

I was initially unhappy with the patterns that were going to ship with WordPress 5.5. However, an 11th-hour update improved the situation so that they did not feel entirely experimental. The foundational Seedlet theme for Twenty Twenty-One has some unique patterns that begin to scratch the surface of what’s possible with this WordPress feature. My hope is that the new default theme steps it up a notch.

Currently, the theme does not register any custom patterns. However, it has a placeholder file and a note that they are a work in progress. Choyce-Dwan shared some patterns the team has already designed in the announcement.

Three block patterns provided by the Twenty Twenty-One WordPress theme.
Currently-designed block patterns.

“We’ll be relying on our talented community designers for more ideas,” she wrote. The team has also created a GitHub template for anyone to contribute pattern design ideas.

Currently, the theme does not support the upcoming full-site editing feature of WordPress. After the Beta 1 release of WordPress 5.6, the team plans to begin exploring the addition of this support. WordPress is expected to ship a public beta of full-site editing in its next major release, but it is unclear whether it will be far enough along to be a headline feature for the Twenty Twenty-One theme.

The team and volunteers have less than a month before the October 20th deadline for committing the new theme to trunk, the core WordPress development branch. At that stage, the theme should be nearly complete and ready for production. Of course, there will be several rounds of patches, bug fixes, and updates before WordPress 5.6 lands in December. Right now is the best time for anyone who wants to get involved with Twenty Twenty-One to do so.

Useful links with more information: