Context

In the late summer of 2021, I began designing the next default theme for the open source WordPress project.

The core of this work was very familiar to me. For the past couple years, the majority of my professional time had been spent designing and developing the future of WordPress themes. A good portion of that work involved being involved and present in the open source community. I’d led a default theme before (Twenty Nineteen), and advised on two others (Twenty Twenty and Twenty Twenty-One).

But even so, this theme felt significantly different than themes I was used to designing. Twenty Twenty-Two would be launched alongside with the WordPress 5.9 release, which would mark the public unveiling of “Full Site Editing.”

In prior versions of WordPress, each individual theme’s code defined the entire website’s appearance. Users could choose which theme to install, but beyond that their site’s design and layout were generally dictated by the theme author. In most cases you needed to be a developer to modify something as simple as the page header’s font size. End users were only responsible for adding content.

But that began changing in late 2018, when the “Gutenberg” block editor landed in WordPress 5.0. This marked a drastic change to the way users built their posts and pages. In contrast to a Microsoft Word-style text editor, users were presented with the concept of “Blocks” — little bite-sized pieces of functionality or visual patterns that they could move around and customize to their liking. If the user wanted to customize colors inside their post, or if they wanted to add responsive columns full of multimedia content, they could now create that without the need to write (or even think about) any code whatsoever.

The 5.9 release that would accompany the Twenty Twenty-Two theme sought to expand that block editor concept to the entire website. Changing your header layout would be as simple as dragging and dropping a few blocks around.

This change would irrevocably change the concept of a WordPress theme. Themes would no longer be an all-encompassing website design, and would instead be a starting point that the user could modify heavily to suit their vision.

Process

Allowing for (and encouraging) this flexibility drastically impacted the design process for the theme. Instead of designing an overarching layout for the user’s site, I approached the theme design by envisioning a wide range of different layouts that the user might create.

From there, I refined the typography and colors down into a system that we could apply using the new Global Styles feature. These would be the defaults for the site, but every single style here would be editable by the user.

I leveraged that system to create page templates which would form the foundation of the user’s site when they installed the theme. In these templates, the design choices around layout and typography were intentionally subtle, leaving lots of room for customization.

Once those default templates were in place, I pivoted to designing “Patterns”. In WordPress, patterns are pre-designed groups of blocks that users can insert in a couple of clicks. In the case of Twenty Twenty-Two, patterns would provide easy access to many of those exploratory layouts I created in my first explorations for the theme:

The exercise of extracting patterns from the initial visual explorations resulted in around 60 patterns. They included full page layouts, small in-page patterns, headers, footers, and more.

Jeff Ong (the development lead for the theme) and I had been building these out a bit during the design process above, but once we had the theme’s basic styles, templates, and patterns feeling stable, we were ready to put our primary focus on development.

After a public announcement on October 16th, 2021, we spent many months working alongside other community members building, testing, fixing bugs, and iterating on the theme’s design. I could write a whole separate case study on the development process for the theme, but I’ll save that for another time. Alongside our day to day work building the theme, the two of us worked to engage community contributors interested in helping with the theme and collaborated closely with the development teams working on the editor itself to ensure the theme delivered the best possible experience for WordPress’ hundreds of thousands of users.

The theme was released to users on January 25, 2022. It is installed by default with each WordPress 5.9 installation, and is available for individual download from the WordPress Theme Directory.

(Oh, and if you’re wondering why there are so many random birds in the theme, I wrote about that here. 🙂)