Global style variations, “skins” for themes, have landed in Gutenberg – WP Tavern

It’s been a busy week, and I almost missed landing one of my most wanted components in Gutenberg 12.5 RC 1. The global style variations feature quietly slipped away as everyone got to grips with it. with WordPress 5.9. The official release of version 12.5 is not expected until next week, but that hasn’t stopped me from testing it.

What are the overall style variations? I guess you missed my post praising the idea last November.

Essentially, a global style variation is a user-selectable skin for their currently active theme. For example, a theme with a default blue color scheme might group green, purple, or red alternatives. The idea is not limited to colors. Everything that can be modified through the global style system is in play, such as typography, layout, borders, etc.

Style variations in the site editor.

From a theme developer’s perspective, they would remove stylename.json folders under a /styles folder in their themes. Gutenberg and, optionally, WordPress will automatically register them in the system.

The feature was intended to ship with WordPress 5.9, and the Twenty Twenty-Two theme was meant to be its unveiling. However, it was not complete and is now on the slate for WordPress 6.0.

It didn’t take long for me to create a few more variations for my custom theme. I could change my color scheme and fonts with a click.

If this sounds suspiciously like another feature that already exists in WordPress, you’re not alone in that feeling. The child theme was born from this same idea of ​​offering design variations for the same theme.

Child themes were not always possible in WordPress. They gained popularity through a grassroots effort and a third-party plugin, and their first uses were to provide a different design through the standard style.css to file. Users could keep everything about their site intact and add a fresh coat of paint whenever they wanted.

In the late 2000s, there was a period when the children’s theme industry was booming. The Sandbox theme was among the first to use the feature, and others like Thematic have continued to push the idea forward. Genesis has become one of the best known for employing child themes over time.

However, the children’s theme has become a beast in its own right. It moved away from that initial idea of ​​skinning a website to creating full-fledged themes as big – sometimes bigger than – their parents.

The overall style variations take us back to that initial foundation. This brings us back to something closer to CSS Zen Garden’s beauty of designing with CSS, one of the core promises of child theme.

There is a difference. Variants are hosted in a JSON file rather than style.css. The first is a standards-based configuration file that allows users to further customize their design through the site editor.

Child themes will always have their place in the world of WordPress. There are times when developers and DIY end users will need to customize beyond what is possible through the site editor. However, the overall style variations will offer an alluring alternative in many cases.

It’s promising to see this ground early in the WordPress 6.0 release cycle. The feature will still need some work before it’s ready for kernel, such as determining how best to save user style variation customizations.

Notes for theme authors

The Block Editor manual already has documentation on global style variations. It’s short, but custom JSON files should follow the standard theme.json diagram. What is not mentioned in the documentation is that you need to add the version key of each file:

{
        "verson": 2,
}

If I didn’t add it, none of my variants worked in testing. I don’t know if it’s a bug or intentional. I expected it to revert to the primary setting theme.json to file.

You also cannot overwrite a single value in an array of elements. For example, if you add a settings.colors.palette value, it replaces the entire palette.

Comments are closed.