What are style variations?
Style variations are a new feature of block themes, recently landing in WordPress 6.0. They’re just one part of the new era of WordPress theming that we’re looking at, with the introduction of Full Site Editing.
These style variations are alternate design pre-sets for a theme, enabling you to quickly apply a new look and feel to your site — all within a single theme.
Too good to be true? Actually, no.
Because block themes are configured with a theme.json specification, there’s a semi-standardized approach to styling a WordPress block theme — and even setting up the editing experience of a site.
Aside:
I say “semi-standardized” because there are some nuances block themes are working out to improve standardization, particularly around colors and fonts. Carolina Nymark has conducted an analysis of how block themes are currently working these out — really interesting.
This doesn’t mean themes will start looking the same. Nor does it force a CSS Zen Garden type approach to theming.
Just take a look at Twenty Twenty Two, Skatepark, or my theme Wabi — they have very different looks, although they are each theme.json driven. Just because a method of defining styles is standardized, doesn’t mean the styles themselves are.
Adding style variations
Before we dive full-on in adding style variants, we need to know how they work. When a style variant is applied to the site, its JSON is merged with the top-level theme.json file.
This means that style variants only need to define the deviant objects from the theme’s theme.json file — not every specification.
Adding variants is as easy as including a JSON file within a theme’s /styles/ top-level directory.
Here’s how I added four style variants to Wabi:
It’s actually rather easy to add new styles. If you’d like to dive into Wabi’s styles, check them out on Github.
Style variations you can try today
The release of WordPress 6.0 updated Twenty Twenty Two with three style variations: Swiss, Pink and Blue:
And my theme Wabi has three style variations as well: Dark, Aoi, Pinku. Combined with the accent color functionality I added, you can have quite few looks, all from the one theme:
A future of styles
At the State of the Word 2021, I asked Matt Mullenweg if we may see a directory of styles one day. A place to share and download alternate theme.json files for a site.
I don’t know that we’ll see that exactly, but themes are certainly moving in that direction. If a theme is defined by a JSON spec, and a style is an alternate JSON spec, aren’t style variants essentially mini-themes? If it weren’t for the inheritance of the theme’s theme.json file, they’d be full on separate “themes”.
So if block themes are designed to be so interchangeable, perhaps we should have a separate directory, or classification, on the WordPress Themes Directory — at least. 🤔