Global WordPress style variations 2022, a feature of block designs, is one of my favorite parts of block designs. The concept of global style variations in WordPress was introduced in Gutenberg 12.5, which would allow theme authors to create alternative variations of a block theme with different combinations of colors, fonts, typography, spacing, etc.

Multiple theme.json files stored in the styles/ folder “allow users to quickly and easily switch between different aspects of the same theme”.

In this article, I will walk through creating a global style variant to prove the concept using alternative /styles/theme.json files and create sub-themes with different color modes just swapping color palettes.

Summary

• Requirements
• Global style Variations
• Section 1: Creating Theme Style Variations
• Section 2: An example use case
• Example of block designs with variations of design styles
• Wrap up
• Resources

Requirements Basic Understanding of WordPress Style Variations 2022:

This article is intended for those who have a basic understanding of WordPress block designs and are familiar with using the Full Site Editor (FSE) interface. If you’re new to block themes and the FSE, get started with CSS tricks here with this in-depth introduction to WordPress block themes and website editor documentation.

This comprehensive site modification website is one of the most up-to-date guides to learning all the features of FSE, including the block themes and style variations discussed in this article.

Global Style Variations:

For a little background, let’s briefly look at the general style variation. Twenty Twenty-Two (TT2) Theme Manager and Automattic Design Director Kjell Reigstad introduced global style variations with this tweet and GitHub ticket #. 292 as subtopics. On paper, Kjell notes that they were originally intended as alternative color patterns and font combinations, but can be used to create simple children’s themes.

This example from Kjell shows how different combinations of styles can be selected from the options available in the sidebar.

Since then, Automattic’s theme team has pioneered the concept of creating variable child themes (variable colors and fonts only), including the following:

• Geologist with blue, cream, slate, yellow variations
• Square with black, green, red, white and yellow versions

Global Style Change:

Gutenberg version 12.5 introduced a global style selector that allows users to quickly. Easily switch between different aspects of the same theme via different theme.json files stored in a /styles folder.

The concept of modifying global style variations via theme.json has been discussed on GitHub for a while. Matias Ventura, chief engineer at Gutenberg, gave it new meaning by recently including it in the WordPress 6.0 roadmap.

The latest development iteration of the theme variation selector is available with Gutenberg 13.0 and included with WordPress 6.0. In this WordPress 6.0 introductory video, Anne McCarthy, Automated Product Contact, provides an overview of the key features discussed in this article. Including style variations and the Webfonts API (starting at 5:18).

WordPress Style Variations 2022 Related To The Child Theme:

In my previous article, I briefly touched on the sub-topics of building blocks. Global style variations have blurred the line between alternative-theme.json and child themes. For example, the only difference between a recently released alante-dark child theme and its parent theme is an alternative.json file in the child theme that overrides the global theme’s styles as follows:

Likewise, the two most recent Alara child themes in the WordPress directory – Framboise and Richmond – differ only in their unique theme.json file.

Section 1: Create Theme Design Variations:

In the root of the theme’s child folder, create a / styles folder containing style variations as a JSON file. For this demo example, I’ve created three variations of Twenty Twenty-Two’s theme.json color palettes: blue.json, maroon.json, and pink.json, swapping the foreground and background colors:Here is the final result after clicking the Styles icon in the admin dashboard (found under Appearance → Editor):

Click the More Styles button (recently changed to Browser Styles), which displays icons for the Blue, Brown, and Pink color styles in addition to the original styles.

To edit and select a style, select your preferred variant and click the Save button (top right) that appears on the front-end of your browser.

Step 1: Installation And Installation:

Install and set up a WordPress site with some dummy content. For this demo, I ran a fresh install of WordPress, enabled the Twenty Twenty-Two theme, and added the Gutenberg test data.

The style variations of the theme and the WebFonts API discussed in this article require the installation and activation of the Gutenberg 13.0 or WordPress 6.0 plugin.

Step 2: Create a TT2 Child Theme:

In this demo child theme example, we deviate the body color slightly from the header and footer color with all website content centered:

Step 3: Create JSON Files:

Create / styles in your child theme’s root folder with blue, brown and pink.json files.

Step 4: Create JSON Files for Alternate Themes:

Then, create your alternative-theme.json files with the desired color palettes in the / styles folder. For this demo example, I’ve created three color palettes (blue, brown, and pink). Here is the code for maroon.json.

Section 2: An Example Use Case:

As I said in my previous article, I worked on block themes and used them for my personal project page. Inspired by the style variations of the theme and the functionality of the webfonts API in the Gutenberg plugin, I started tweaking the theme of the ongoing block with an alternate dark color mode and configuring the webfonts API.

In this section, I will walk you through the creation of TT2 Gopher Blocks, a demo sibling of my work-in-progress blocks project created for this article. The theme includes brown, dark and light color modes created using variations on the theme style and the Webfonts API that became available with the release of Gutenberg 12.8.
Highlights of TT2’s Gopher theme include a single column-centered content view, a unique header and footer, and more intuitive search and archive pages.

A copy of TT2 Gopher Blocks is available in the GitHub repository which you can fork and customize.

Create Dark Mode in WordPress Style Variations 2022:

First, some dark mode background. Dark mode is a personal preference and the developers provide it or other modes alternate like on this page. Which is not an easy task for most regular developers. Creating dark mode is covered in depth here on CSS Tricks. Including this complete guide on dark mode and dark mode typography.

On a WordPress site, we can add a dark mode switch using the WP Dark Mode plugin. Erin Myers of WP Engine describe how to use the WP Dark Mode plugin. While Brenda Barron lists other Dark Mode plugin options in this WPExplorer post.

Creating Dark Mode in WordPress Block:

Themes without a plugin involves several steps. Over a year ago, Ari Stathopoulos created obscure support for the TT1 Blocks theme on GitHub. So Looking at the example here, some JavaScript knowledge is required to create assets (eg Toggler, customization, editor mode support), dark color CSS variables, and advanced functions.php files.

In this short video, Automattic’s Anne McCarthy demonstrates how easy it is to create. TT2 block theme in dark mode with global style variation by adding JSON kllejrs snippets in the TT2 / styles folder.

Creation of the TT2 Demo Theme for Gopher Blocks:

The TT2 Gopher is a very simple and modified version of the standard Twenty Twenty-Two theme. However, It includes three design variants: brown, dark and white.

• The description of each Customization: A quick overview of the color and font combinations of the TT2 Gopher theme includes:
• light Mode
  Thus header is white and the footer has a smoky body background color.
  Open Sans is the main font.
• Dark Mode
  The header and footer are black with lighter dark colors for the body backgrounds.
  Source Serif Pro is the main font.
• Brown Mode
  Thus header and footer are both dark brown with a lighter yellowish body background.
  So Work Sans is the main font.

Let me briefly explain how I created the theme’s style variations.

Adding And Configuring Web Fonts Style Variations 2022:

The Gutenberg 12.8 plugin introduced a new Webfonts API. That allows authors to upload local (grouped) characters “in a performance-friendly, privacy-friendly, and future-proof manner.” Hence, this function can be implemented in a block theme in PHP mode or in theme.json mode.

Currently, this feature only works with fonts bundled with block themes and does not support Google-hosted fonts due to privacy concerns. More details on the current state of webfonts because API development are cover in this WordPress main article and in this article by WP Tavern.

Step 1: Download And Add The Fonts In The Block Theme:

The TT2 theme adds the Source Serif Pro font files to the theme’s resources/fonts folder. Two other fonts are also provided in the GitHub repository, Work Sans and Public Sans.

Step 2: Registering Web Fonts:

In the TT2 theme, local Source Serif Pro webfonts are registered with PHP in the functions.php file:

So, Gutenberg 12.8 introduced the ability to register local webfonts with the theme.json file. The following snippets of theme.json from the Gopher TT2 demo theme show. How local Web Work Sans fonts are register in the brown theme style variant.

For more information on registering and using local webfonts in block projects. However, See this tutorial and this article from WP Tavern.

Creating Style Variations Of The Theme:

Following the steps described in the previous section. I created two alternative versions of the theme.json file – white.json and black.json – with different color and font combinations in the child theme’s /styles folder.

This feature requires theme.json version 2. As of Gutenberg 12.5, the title can also be added in theme.json to show the style label in the site editor, or the filename (without extension) is shown by default.

Here is an example for white.json.

This code exchanges color palettes from theme.json and also registers and defines local Public Sans font files.

Block Design Example With Variations Of Design Styles:

• Twenty Twenty-Two: The first default theme to include style variations. The updated 1.2 version bundled with WordPress 6.0 comes with three style variants: Blue, Pink, and Swiss, So which allows users to quickly switch between visual styles.
• Frost: An experimental block theme with style variations on the dark theme.
• Alara: has over 100 active installations and includes 7 style variations.
• Wabi: which powers Rich Tabor’s website, So contains 3 style variations and over 300 active installations.
• Brisky: has more than 600 installations and a dark-themed style variant.
• Trailer: An Automattic Theme Team theme being develop on GitHub comes with 3 variations of theme style.

In this WP Tavern article, Justin speculates that this new feature could use by theme authors, tying it to site visitor preferences. While some users prefer to change their site to give it a seasonal or event-based theme to lend. It’s probably still early days. But only time will tell how this powerful feature will use by both theme authors and users.

Wrapping WordPress Style Variations 2022:

Creating style variations 2022 of a block theme with different typography and color scheme has been greatly simplified without the use of plugins. Then it’s one of my favorite block editor features that I love to use in my personal projects.

In my opinion, theme style variations 2022 are definitely a game changer for block themes and with this handy feature. You might not need the child theme or even many cookie cutter block themes. Therefore, Some well-design base block themes. Thus, Similar to block-canvas or blockbase by the Automattic design team (base block themes you are working on on GitHub), can be customize with the theme style variation.