Kick off Block-Based WordPress Theme Development With the Theme.json Creator

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.

Screenshot of the Theme.json Creator web page.
Using the Theme.json Creator tool.

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.

5 responses to “Kick off Block-Based WordPress Theme Development With the Theme.json Creator”

  1. 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!!).

  2. 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.

    Isn’t this already what the Full Site Editor is for?

    It allows theme files to be exported, so you wouldn’t need an extra plugin. Just start with an empty theme, build it out using the Site Editor, and then export it.

    • Adding to this a bit. In my mind, I see WP itself or either a plugin giving end-users the ability to create a full theme ZIP package. Then, they could share it with friends or even do something like upload it to the official theme directory.

      This is actually a bit more complex than what the site editor can currently do. There are things like copyright and licensing to take into account — we really need a standard here. The theme.json file would be needed. There are some other files like the style.css and index.php that would need to be included (as far as I know, the theme system still requires these). Of course, there’d need to be a screenshot.

      I really think this starts getting into plugin territory, but the block system would greatly simplify the whole thing.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: