Global Styles variations in WordPress 6.0

Theme authors can now create multiple theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. variations and place them into their theme’s /styles folder. From there, users can switch between the various presets to something that suits them best.

Custom JSON files should follow the standard theme.json schema and their filename is going to be used as the variation’s label in the UIUI User interface (example blue.json).

Webfonts handler

A webfonts handler has been included in this release, allowing theme authors to include multiple font options within a single theme.json file or to offer vastly different styles by utilizing different font options in their multiple theme.json variations.

{
  "settings": {
      "typography": {
          "fontFamilies": []
      }
  }
}

Here’s a more robust example of how to implement this new option:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pero\", serif",
					"name": "Source Serif Pero",
					"slug": "source-serif-pero",
					"fontFace": [
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2" ]
						},
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2" ]
						}
					]
				}
			]
		}
	}
}

Right now, there is only support for top level settings and the more granular option of defining fonts per blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is not currently available. For further inspiration, theme authors can review the approach the default Twenty Twenty-Two theme has taken since it will ship with three style variations with different fonts for WordPress 6.0.

Notes

1. The variations require using the version 2 of theme.json.
2. Right now when a variation is applied its contents are still merged with the theme and core theme.json, but it’s not possible to override a single value in an array of items or merge arrays. For example adding a value in settings.color.palette would replace the entire palette.

For more info see #38124.

Props to @annezazu for collaborating on this note.

#6-0, #dev-notes, #dev-notes-6-0