Learning to Use Global Style Variations Using TT2 Theme

Written by Tinjure WP Posted on

Notes: This post is part of leaning global style variations using full site editing (FSE) interface to create child block themes. This learning post is still in active development and updated regularly.

While announcing WordPress 6.0 roadmap recently, Gutenberg lead engineer Matis Ventura wrote, regarding global style variations:

Embrace style alternates driven by json variations. This was teased in various videos around the new default theme and should be fully unveiled and presented in 6.0. One of the parallel goals is to create a few distinct variations of TT2 made just with styles. (35619) Matias Ventura

Although, the concept of allowing switching global style variation via theme.json was being discussed (##35619) on GitHub for a while, however, it was Kjell Reigstad, TT2 theme lead, who introduced the concept of alternate-theme.json  to the WordPress community with his following tweet.

TT2 child themes variations created by Kjell with alternate theme.json files are available here at the theme experiment GitGub repository.

The recently released Gutenberg v12.5 introduced initial version of global styles switch which would allow theme authors and users quickly and easily switch between different looks in the same theme via different theme.json file stored under /styles folder which “lets users quickly and easily switch between different looks in the same theme“. More detailed on the development of this feature can be found and tracked here at this GitHub ticket #35619.

Maggie  Cabrera of Automattic theme team has created an early version of Skatepark theme variations which is found here on the GitHub.

To test this newly available feature, I just wanted to create a proof-of-concept style variation using alternate /styles/theme.json files.

Objective

The objective of this learning-note post is to create different color variations TT2 theme using styles/theme.json global style switch.

Creating alternate theme.json files

To test this newly available feature, I just wanted to create a proof-of-concept style variation using alternate /styles/theme.json files. For this learning post, I copied and modified kjell’s alternate json files (blue, pink and red) available at the GitHub  and changed just the background colors in the color pellets.

styles/
   blue.json  
   pink.json
   red.json

Because I wanted to have different colors for the header and body, I added header background color, as shown in the following example from styles/red.json file.

"palette": [
	{
		"slug": "foreground",
		"color": "#2E2927",
		"name": "Foreground"
	},
	{
		"slug": "background",
		"color": "#FCF5ED",
		"name": "Background"
	},
	{
	   "slug": "background-header",
		"color": "#7C290F",
		"name": "Background Header"
	},
	{
		"slug": "primary",
		"color": "#7C290F",
		"name": "Primary"
	},
	{
		"slug": "secondary",
		"color": "#FCF5ED",
		"name": "Secondary"
	},
	{
		"slug": "tertiary",
		"color": "#FCF5ED",
		"name": "Tertiary"
	}
	  ]

For the alternate fonts, I modified theme functions.php file and enqueued additional fonts as shown here at Kjell’s GitHub repository.

Proof of Concepts

The following is the GIF demonstration of the results. The concept worked as described.

 

Now that this proof of concept works, the next is to apply this concept to add this feature in my block-theme to include alternate black version of the theme.

Wrapping Up

In this brief learning note post, the concept of alternate global-styles (theme.json) and its use in creating different variations of the same the was explored.

Resources

Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.