Gutenberg 9.1 made a backward-incompatible change to its theme.json file (experimental-theme.json while full-site editing is under the experimental flag). This is the configuration file that theme developers will need to create as part of their block-based themes. Staying up to date with such changes can be a challenge for theme authors, but Ari Stathopoulos, a Themes Team representative, wrote a full guide for developers.
Jon Quach, a Principal Designer at Automattic, has also been busy creating a tool to help theme authors transition to block-based themes. He recently built a UI-based project called Theme.json Creator that builds out the JSON code for theme authors. Plus, it is up to date with the most recent changes in the Gutenberg plugin.
Tools like these will be what the development community needs as it gets over the inevitable hump of moving away from the traditional theme development paradigm and into a new era where themes are made almost entirely of blocks and a config file.
While plugin development is becoming more complex with the addition of JavaScript, theme development is taking a sharp turn toward its roots of HTML and CSS. We are barreling toward a future in which far more people will be able to create WordPress themes. Even the possibility of sharing pieces of themes (e.g., template parts and patterns) is on the table. This could not only empower theme designers by lowering the barrier to entry, it could also empower some end-users to make the jump into theme building.
However, the theme.json file is one aspect of future theme authorship that is extremely developer-oriented. JSON is a universal format shared between various programming languages. It is meant to be read by machines and is not quite as human-friendly as other formats. As the theme.json file grows to accommodate more configuration options over time, the less friendly it will become to simply typing keys and values in.
It makes sense to build tools to simplify this part of the theme building process.
That is where the Theme.json Creator tool comes in. Theme authors pick and choose the options they want to support and input custom values. Then, the tool spits out everything in properly-formatted JSON.
One big thing the tool does not yet cover is custom CSS variables. This feature is a recent addition to the theme.json specification. It allows theme authors to create any custom property that WordPress will automatically output as CSS. In his announcement post, Stathopoulos covered how to create a typographic scale with custom properties and use those variables for editor features, such as line-height and font-size values.
Currently, Theme.json Creator’s primary focus is on global styles. However, Gutenberg allows theme authors to configure default styles on the block level. For example, theme designers can set the color or typography options for the core Heading block to be different from the default global styles. This provides theme authors with fine-tuned control over every block.
Theme.json Creator does not yet support configuration at this level. However, it would be interesting to see if Quach adds it in the future.
The focus on setting up global styles is a good start for now. This is still an experimental feature. The great thing about it is that it can help theme authors begin to see how one piece of the block-based themes puzzle fits in. It is a starting point for an entirely new method of adding theme support for features when most are accustomed to adding multiple add_theme_support() PHP function calls.
With the direction that theme development seems to be heading, it is easy to imagine that it could evolve into a completely UI-based affair at some point down the line. If templates are made up of blocks and patterns, which anyone can already build with the block editor, and if styles will essentially boil down to a config file, there will be little-to-no programming required to build a basic WordPress theme.
If someone is not already at least jotting down notes for a plugin that allows users to create and package a block-based theme, I would be surprised. For now, Theme.json Creator is removing the need to write code for at least one part of the theme design process.
Thank you Justin. Your Gutenberg articles, and in particular your focus on block patterns, have been a real life saver. After the relative stability and predictability of WP prior to 5.0, the pace of change in the Gutenberg era is relentless. Breaking changes seem to be the norm, rather than the exception now. Moving to a universal theme.json file for all editor customizations will be huge leap forward (I can finally, definitively remove Dropcaps!!).