March 20, 2023
WP’s shiny new toy

The discharge of WordPress 6.1 on Nov. 1, 2023, launched a brand new inventory theme: TwentyTwentyThree. As with every inventory theme, the aim is to point out off the shiny new toys

that ship with the most recent model of WordPress. TwentyTwentyThree offers us a great have a look at what 6.1 can do and lets us think about the close to way forward for WordPress because it continues its evolution towards a no-code design system.

TwentyTwentyThree is actually prepared in your consideration whether or not you utilize it in manufacturing or want to consider it for future use.

TwentyTwentyThree: Block theme for makers

TwentyTwentyThree couldn’t be a greater instance of how one can construct each factor of a WordPress website solely with blocks. That’s the hallmark of a block theme.

This theme is taken into account a stripped-down model of its latest predecessor, TwentyTwentyTwo. That theme had a well-defined artwork path. In distinction, TwentyTwentyThree is so design-agnostic that, in contrast to its predecessor default WordPress themes, it comes with no inventory photos. And it’s very light-weight. And that’s the level.

This places you — content material creator, designer or website developer — in command.


Let’s take a look at TwentyTwentyThree’s distinct options.

Fashion variations

This characteristic, part of the Website Editor, simply is perhaps ushering in a brand new Childless Theme period. For those who’ve ever wanted to make wholesale modifications to a theme, you would possibly know of the ache required to create a toddler theme the place your customized kinds and features reside.

The concept that you would be able to now change the model of a theme with out truly utilizing a special theme is in full show with the model choices that TwentyTwentyThree affords.

Along with the default model, these 10 model variations are simple to pick in your website. Notably, every model variation was created by a member of the WordPress group.

Twentytwentythree style variations example

Every model is outlined by its colour palette and typography. Consider these as beginning factors that you would be able to change to fit your wants.

Colour palettes

Every of the 11 model variations has a five-set (start line) colour palette. The default model variation makes use of the next:

You may at all times change any colour from the default model or to any of its different 10 variations.


The TwentyTwentyThree theme comes with font households which is perhaps new to you. Choose the typeface title to see extra data.

System font 

These draw upon the fonts already put in on a person’s system.

IBM Plex Mono 

IBM Plex Mono



Source Serif Pro

Source Serif Pro

DM Sans

DM Sans

All of those fonts are packaged with TwentyTwentyThree, which means you aren’t pulling them from third-party sources resembling Google the place privateness points have been raised earlier final yr within the EU. Plus, a font is simply loaded if used, which is an actual efficiency increase (however this isn’t new to most WordPress block themes).

You may at all times stray from the built-in fonts if you happen to desire.


And, as with all block theme, you possibly can assign colour or typeface to a single block, resembling a heading, to use to all the website.

You continue to can’t set properties resembling letter spacing, phrase spacing, or line peak on a sitewide foundation however anticipate that to alter with the discharge of WordPress 6.2 in March 2023.

Fluid typography and spacing

You’re in all probability questioning, “I assumed most WP themes have been responsive already. What’s this?”

TwentyTwentyThree focuses in your content material and also you don’t have to stress as a lot as you probably did earlier than as as to whether your typeface and surrounding house would optimally render on all units.

How does it work?

Conventional responsive design makes use of CSS media queries to focus on desktop, laptop computer and cellular machine widths. The issue with that strategy is that designers can’t set breakpoints for every sort of machine. This accounts for some design points that have to be resolved on a case-by-case foundation.

Fluid typeface doesn’t goal a tool’s width. Quite, utilizing the three values of the clamp property (a minimal, a most popular, and a most measurement) it really works with the viewport of the machine and scales accordingly.

That is a chic resolution, significantly for headings and huge textual content sizes.


For smaller sizes, resembling physique copy, the standard media question strategy continues to be the way in which to go.

For added particulars and among the technical specs, see Adding Fluid Typography Support to WordPress Block Themes from CSS-Tricks. In that article, you’ll see among the technical specs which account for the way fluid typography works.

Summing up

Typically it’s exhausting to inform what new options any theme can convey. I discover myself asking, “Is that this characteristic theme-specific, or is that this a part of WordPress core?”

The one approach to discover out — in need of studying via documentation — is to check it by attempting completely different themes. So I did a number of testing and, because it turned out, what’s constructed into TwentytwentyThree particularly (and never WordPress core) have been the options described above.

Whereas TwentyTwentyThree doesn’t look dazzling, that’s simply the place its energy lies.

Consider it as a robust clean slate the place you could have a variety of design potentialities at your fingertips. This theme asks, “What’s the way forward for WP themes if we will begin with a clean web page?”