Hey, everyone! After sharing a proposal for a new approach to this year’s default theme that would emphasize a diverse collection of style variations, there were a lot of positive replies and notes from folks who’d like to be involved in the process. With the help of @mikachan, we now have a repository for a stripped-back and minimal version of Twenty Twenty-Two, which can serve as our base theme. I wanted to use this post to outline some of the process and timeline details around the collaborative format we’ll use to create style variations for the TT3 theme.

First, a look at the base theme

Figma link: https://www.figma.com/community/file/1139275543113752375

@beafialho made a few changes to TT2 in order to strip it down to a bare, unopinionated canvas:

• The largest heading sizes have been scaled down
• Different color styles have been applied
• The serif font for headings has been replaced by system sans serif font
• Images have been removed
• GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ fluid typography and spacing presets functionality have been added

Bea also made four style variations to demonstrate how dramatically different the look & feel of each of the variations can be:

One important note is that we are limited in the number of fonts we can include with the theme and should aim to use 3–4 different typefaces across all variations (in addition to systems fonts). Bea has selected a couple of fonts, used in the variations above, that seem like a good starting point to use because of their simplicity and variety:

• System sans serif font
• IBM Plex Mono
• DM Sans
• Source Serif Pro

This is just a starting point, rather than the final list of fonts that will be included with the theme. If anyone feels strongly about using a different font, please speak up because this list can certainly evolve based on what folks would like to use! We can also suggest changes to the base theme as needs arise.

How to create and submit a style variation

Get Twenty Twenty-Three

View the repository for TT3 and follow the instructions to get started: https://github.com/WordPress/twentytwentythree

You’ll need to set up a local WordPress instance and clone/download the repository into your /wp-content/themes/ directory.

Join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel

We can collaborate throughout this process in a dedicated channel on the Making WorkPress Slack: #core-themes-projects. If you replied on the original post or reached out in DMs, you’ve already been added to the channel. This can be a place for folks to ask questions and share work in progress through screenshots or videos. The more we work together, the more we can ensure all the variations feel as different, opinionated, and unique as possible!

Design a style variation

This can be done a few different ways, including:

• Create an alternate theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file to the one provided by the theme and change values directly in the code.
• Make changes in the Global Styles panel in the Site Editor. You can save these changes as a new style variation using the Create Block Theme plugin.
• Design static mockups in Figma or a similar program.

Submit your style variation

When you’re ready to submit, please create a new issue on the TT3 repository and share your designs:

• Theme.json files can be submitted as code or as zip files. 
• Add images that showcase the look & feel of the variation.
• Include a style guide with design specifications — this should include details on typography, colors, spacing, etc. Here’s an example.

Project timeline

Aug 10: Project kickoff

Aug 31: Style variation submissions close

Sept 7: Final curated set of style variations announced

Sept 20: Theme and all variations are committed to Gutenberg trunk in time for WordPress 6.1 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1

Gutenberg considerations

There are a few open issues and PRs that would benefit this project and may be able to be moved forward in the next few weeks, including:

• Improve Image Blocks Placeholders: #41142
• Post Featured Image: Add border support applied to inner image: #42847
• Further enhancements on Add duotone to placeholders for site logo and featured image: #40085

We appreciate any efforts by Gutenberg contributors to help move these issues forward! Let’s plan to keep in touch in the channel about any significant changes in functionality that happen after the project kickoff.

Props

Huge thanks to everyone who’s contributed and shared ideas for this project so far!

Design lead: @beafialho
Development lead: @mikachan

+make.wordpress.org/themes/