twenty-editor-266x500 Twenty Twenty Bundled in Core, Beta Features Overview design tips News|Themes|Twenty Twenty

Twenty Twenty, the upcoming default WordPress theme, was committed to core and shipped with WordPress 5.3 Beta 1 yesterday.

Like most core themes, Twenty Twenty is simple in function. It comes packaged with a handful of custom features and options, but it remains true to the mission of being an easy-to-use default theme.

The theme has personality. Its headings are bold and opinionated. Its pull quotes grab your attention. It’s unafraid of making a splash with its design. This is a blog theme that’s meant to showcase what the block editor is capable of doing. It is a refreshing change of pace from the current slew of themes landing in the directory.

Twenty Twenty is not ideal for every use case. Some users will no doubt dislike the design choices. Others will love everything about it.

Note: Twenty Twenty is still in beta, so its features could change between now and the official release of WordPress 5.3.

Customizer Options

twenty-customize Twenty Twenty Bundled in Core, Beta Features Overview design tips News|Themes|Twenty Twenty
Hue-only picker for the accent color in the customizer.

The theme has a few custom options available within the customizer:

  • A retina logo option, which scales the logo image to half its size to make it sharper on hi-res screens.
  • An option for showing or hiding a search icon in the header.
  • A choice between showing the full post text or summary (excerpt) on archive pages.
  • A header and footer background color.
  • An accent color used for links and other elements.
  • Support for the core custom background feature.

The accent color option is an interesting choice. Rather than providing the full breadth of all colors, the theme includes a hue-only color picker. This feature allows users to select from a more limited set of colors within an accessible color range.

There is also a ticket for removing core custom background image support to help users avoid accessibility issues.

Custom Page Templates

twenty-cover Twenty Twenty Bundled in Core, Beta Features Overview design tips News|Themes|Twenty Twenty
Cover template options in the customizer.

Twenty Twenty has a fresh take on creating a cover page not seen in previous default themes. The “Cover Template” works for both posts and pages. When selecting it, the template displays the post featured image similar to the cover block in core. The featured image spans the full width of the screen and extends behind the header and navigation area. The post title and byline/meta are set over the image.

The theme provides a few options for customizing the output of the cover area and allows the user to:

  • Set a fixed background for a parallax effect.
  • Add an overlay background color that sits over the featured image.
  • Change the color of the text on top of the image.
  • Choose a blend mode for the overlay background color.
  • Alter the overlay background color opacity.

Having a core theme explore this feature is a nice. Ideally, users would be able to create a featured cover area on a per-post basis and adjust the colors for the specific image on that post. However, core has yet to bundle such a feature with the block editor. There is an open Gutenberg ticket for expanding the editor outside of the post content that may help theme authors address this common feature, but we’re likely several releases from seeing that become a reality.

The theme also includes a wide (full width) template, which is a fairly common feature. At the moment, this template doesn’t seem to do anything in particular when assigned to a page. There’s an open GitHub ticket that addresses what it should do at some point. Considering that the theme has no left/right sidebar, it’d be interesting to see how this template functions.

Page Loading Speed

Page load is something to keep an eye on. Twenty Twenty currently ships a 100 kb stylesheet on top of the block editor’s 40 kb CSS file (from the Gutenberg plugin). This number doesn’t include the font and JavaScript files also loaded for the page. This is a far cry from the behemoth 223 kb stylesheet included in Twenty Nineteen, but it’s still concerning because more development time means that more code will likely get added as tweaks are made and bugs are fixed.

To be fair, the block editor has many elements to style with no unified design framework for theme authors to take advantage of. Keeping a Gutenberg-ready stylesheet under 100 kb that also styles each block is a feat of engineering few can master.

Follow Twenty Twenty Development

Theme development is currently happening on the Twenty Twenty GitHub repository. If you want to track its changes as the theme is imported into core, the changes are happening on the Import Twenty Twenty Trac ticket.

The theme still has work to be done before it’s ready for public release. Now would be a great time to start testing it and reporting issues.