The November 1, 2023 release of WordPress 6.1 introduced a new stock theme, TwentyTwentyThree.Like other stock themes, the purpose is to show off shiny new toys
It ships with the latest version of WordPress. TwentyTwentyThree gives us a good look at what’s possible with 6.1 and gives us a glimpse into the near future of WordPress as it continues to evolve towards a no-code design system.
TwentyTwentyThree is ready to be considered for production use or evaluation for future use.
TwentyTwentyThree: Block Theme for Makers
TwentyTwentyThree isn’t a great example of how to build every element of a WordPress site out of blocks only.
This theme is considered a simplified version of its recent predecessor, TwentyTwentyTwo. The theme had a clear art direction. In contrast, TwentyTwentyThree is design agnostic, so unlike the previous default WordPress themes, it doesn’t come with stock images. And it’s very light. And that’s the point.
This puts content creators, designers, or site developers in control.
Let’s take a look at the distinctive features of TwentyTwentyThree.
style variations
Part of the site editor, this feature could usher in a new era for childless themes. If you’ve ever had to make extensive changes to a theme, you may know the effort required to create a child theme with custom styles and functions.
The idea of being able to change the style of a theme without actually using another theme is perfectly expressed in the styling options provided by TwentyTwentyThree.
In addition to the default style, you can easily choose from these 10 style variations for your website. Notably, each style variation was created by a member of the WordPress community.
Each style is defined by a color palette and typography. Think of them as a starting point that you can modify to suit your needs.
color palette
Each of the 11 style variations has 5 sets (starting points) of color palettes. The default style variations use:
You can always change any color from the default style or to one of the other 10 variations.
typeface
The TwentyTwentyThree theme comes with the first font family. Select a typeface name to see details.
system font
They make use of fonts already installed on the user’s system.
All these fonts are packaged in TwentyTwentyThree. In other words, we don’t get our fonts from third-party sources like Google, which raised privacy issues in the EU last year. Additionally, fonts are only loaded when they are used, which actually improves performance (although this is nothing new for most WordPress block themes).
You can always change the built-in fonts according to your needs.
And like any other block theme, you can assign a color or typeface to a single block, such as a heading, and apply it to your entire site.
Properties like letter spacing, word spacing, and line height aren’t configurable site-wide, but that’s expected to change with the release of WordPress 6.2 in March 2023.
Fluid typography and spacing
“I thought most WP themes were already responsive. What is this?”
TwentyTwentyThree is content-focused, so you don’t have to worry as much about whether your typeface and surrounding space renders optimally on all devices.
how does that work?
Traditional responsive design uses CSS media queries to target the width of desktops, laptops, and mobile devices. The problem with this approach is that the designer cannot set breakpoints for each device type. This explains some design issues that have to be resolved on a case-by-case basis.
Fluid typefaces do not target the width of the device. Instead, it uses her three values for the clamp property (minimum, preferred, and maximum) to work with the device’s viewport and scale accordingly.
This is a great solution, especially for headings and large text sizes.
For small sizes such as body copy, the traditional media query approach still works.
For more details and some of the technical specifications, please see: Adding Fluid Typography support to WordPress block themes from CSS-TricksIn that article, I’ll walk you through some of the technical specs that explain how fluid typography works.
summary
It can be difficult to determine what new features a theme brings. “Is this feature theme-specific or part of WordPress core?”
The only way to find out, other than reading the docs, is to try and test different themes. So I did a lot of testing and it turns out that it’s the functionality above that is built into TwentytwentyThree (not the WordPress core).
The TwentyTwentyThree may not look dazzling, but its strength is right there.
Think of it as a powerful blank slate with a wide range of design possibilities at your fingertips. This theme asks, “What would the future of WP themes look like if we could start with a blank page?”