WordPress.org

WordPress Developer Blog

Mixing and matching styles, colors, and typography in WordPress 6.6

Mixing and matching styles, colors, and typography in WordPress 6.6

WordPress 6.6 offers a slew of features for those who build block themes for distribution or clients. One of the most exciting of those features is the ability to register custom color and typography variations for users to choose from.

And the best part? You don’t need to learn any new methods to create these variations. They work on top of the existing style variations system you’re likely already familiar with.

In this tutorial, you will learn how to modify the Twenty Twenty-Four theme to create these color and typography variations, giving your users the ability to mix and match styles. Then you can begin applying these techniques to your own theme.

What are color and typography style variations?

Color and typography variations are subsets of the existing global style variations system that WordPress has had for several releases. Previously, theme (or “global”) style variations let you define theme.json alternatives that could overwrite anything, including colors, typography, spacing, and more.

But color and typography variations are limited in scope to—as their names imply—colors and typography.

When registered, these variations appear as new options in the Appearance > Editor > Styles sidebar panel and elsewhere:

Basically, this is the block-based way of creating curated color and typography presets for your users to choose from. It’s not a new concept by any means (themers have been building such options for years), but it is a standard approach to offering these theme options.

This addition to global styles presents your theme users with far greater flexibility based on your theme’s design system. Color and typography variations can also be mixed and matched with theme style variations.

A note on organizing style variations

Prior to WordPress 6.6, you could only register full theme style variations in your theme’s /styles folder. But with the introduction of section styles and the new color and typography style variations, that number has increased to four different types of style variations.

This could suddenly become tough to manage if you drop everything at the same level in a single folder.

Fortunately, WordPress supports subfolders when organizing your /styles folder. The organizational structure of these subfolders can be entirely custom, but I recommend a structure similar to the following:

  • /styles
    • /block or /section
    • /color
    • /global or /theme
    • /typography

This tutorial focuses on color and typography variations, so it will use the /styles/color and /styles/typography folders.

How to register color variations

When WordPress finds a style variation that only contains color settings or styles, it automatically recognizes it as a color style variation. Basically, this means it creates an option in the UI for users to choose a specific color design that’s been defined by the variation.

Technically, you don’t really “register” anything. You just create a variation and stick it in your theme. 

So let’s build an emerald color palette and make it available to users. To do this, create a new file named /styles/color/emerald.json inside the Twenty Twenty-Four theme (or in a child theme if you prefer):

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Emerald",
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ecfdf5",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#d1fae5",
					"name": "Base / Two",
					"slug": "base-2"
				},
				{
					"color": "#022c22",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#064e3b",
					"name": "Contrast / Two",
					"slug": "contrast-2"
				},
				{
					"color": "#065f46",
					"name": "Contrast / Three",
					"slug": "contrast-3"
				},
				{
					"color": "#34d399",
					"name": "Accent",
					"slug": "accent"
				},
				{
					"color": "#10b981",
					"name": "Accent / Two",
					"slug": "accent-2"
				},
				{
					"color": "#0f766e",
					"name": "Accent / Three",
					"slug": "accent-3"
				}
			]
		}
	}
}

In this case, the code only changes the color palette. You could also take this further and apply specific colors to elements or blocks.

Based on my experience thus far with the feature, it’s best to have a well-rounded design system set up in theme.json where you only make changes to settings.color.palette for your color variations. This way, you have far less JSON code to manage.

Aside from the Site Editor sidebar, registered color variations will also appear in the Styles UI under the Color > Palette option. From there, you will see the variations appear below the Palettes panel:

When you or a user selects the Emerald color variation, it will apply the variation’s color palette, overwriting the palette defined in theme.json (or a chosen theme style variation).

How to register typography variations

Similar to color variations, WordPress will recognize typography variations if they contain only typography settings or styles. When it finds such a variation JSON file, it will automatically create an option in the UI for users to choose a typography set from.

Since we’re using Twenty Twenty-Four for this exercise, let’s build a typography variation named “Instrument + Mono.” It will use the Instrument Sans web font bundled with the theme for headings and a monospace font stack for body copy.

Create a new file named /styles/typography/instrument-mono.json in your theme and copy the following JSON into it:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Instrument + Mono",
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Instrument Sans",
							"fontStyle": "normal",
							"fontWeight": "400 700",
							"src": [
								"file:./assets/fonts/instrument-sans/InstrumentSans-VariableFont_wdth,wght.woff2"
							]
						},
						{
							"fontFamily": "Instrument Sans",
							"fontStyle": "italic",
							"fontWeight": "400 700",
							"src": [
								"file:./assets/fonts/instrument-sans/InstrumentSans-Italic-VariableFont_wdth,wght.woff2"
							]
						}
					],
					"fontFamily": "\"Instrument Sans\", sans-serif",
					"name": "Instrument Sans",
					"slug": "heading"
				},
				{
					"fontFamily": "ui-monospace, 'Fira Code', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",
					"name": "Monospace",
					"slug": "body"
				},
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
					"name": "System Sans-serif",
					"slug": "system-sans-serif"
				},
				{
					"fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
					"name": "System Serif",
					"slug": "system-serif"
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/pullquote": {
				"typography": {
					"fontSize": "var:preset|font-size|large",
					"fontStyle": "normal",
					"fontWeight": "normal",
					"lineHeight": "1.2"
				}
			},
			"core/quote": {
				"typography": {
					"fontFamily": "var:preset|font-family|heading",
					"fontSize": "var:preset|font-size|large",
					"fontStyle": "normal"
				}
			},
			"core/site-title": {
				"typography": {
					"fontWeight": "400"
				}
			},
			"core/navigation": {
				"typography": {
					"fontWeight": "400"
				}
			}
		},
		"elements": {
			"button": {
				"typography": {
					"fontFamily": "var:preset|font-family|heading",
					"fontSize": "var:preset|font-size|small",
					"fontStyle": "normal"
				}
			}
		}
	}
}

As you can see, this code takes the styles a step further than the earlier color variation. Instead of only defining the presets under settings.typography.fontFamilies, it also applies specific typography changes to some elements and blocks.

Registered typography variations will appear in the Styles UI under the Typography > Presets panel, as shown in the screenshot below:

When a typography variation is selected, its JSON settings and styles will overrule those from theme.json or the selected theme style variation.

There is an ongoing issue where web fonts are not correctly loaded in the Site Editor unless the user saves a style variation and refreshes their screen. The only known workarounds are to register every font face via the primary theme.json or to inject the @font-face CSS rules via custom code.

Mix, match, and make many variations

Color and typography variations are very similar to options that were available in many classic themes. Theme authors would create curated presets to let users quickly make changes without the need to pick and choose individual colors or fonts on their own. This made it easy to mix and match with confidence that nothing would break.

This new technique brings this capability to block themes, creating parity and standards for this long-used theme feature.

The more variations you create, the less work your users need to do to get the design they’re after. So go wild and create lots of them and have some fun while doing it.

Props to @bph and @ironnysh for feedback and reviewing this post.

Categories: , ,

2 responses to “Mixing and matching styles, colors, and typography in WordPress 6.6”

  1. Grégoire Noyelle Avatar

    Hi Justin
    That’s awesome. For color variations, do you recommend to use the same slug (with different valies) and the same number of colors.

  2. karneaud Avatar

    You mention specific folders like “global” or “theme” can we go as far as “page/ post”?

    Can one apply style variations to a specific “page or post” instead of the global site?

Leave a Reply

Your email address will not be published. Required fields are marked *