David Gwyer has teased ThemeGen for the past two weeks. This is his next block theme generator app. Piece by piece, it seemed to come together and could prove invaluable to theme developers. Currently it is in beta testing.
He provided me with a link to a first preview to get my feedback on the tool. This is also available to anyone who signs up to access through the ThemeGen website.
Currently, the application only generates
theme.json files. The feature was first released in WordPress 5.8 for classic and block themes. This can have a certain learning curve for first-time theme authors. In addition, it is easy to make mistakes when manually encoding JSON files.
The dream goes beyond
theme.json. This is the obvious starting point for such a project as it helps in the development of current and future themes. However, Gwyer wants to take this to another level as the project evolves.
“It’s not 100% functional yet, but I add functionality daily,” he said. “I hope designers and non-coders alike can create block themes visually, independent of WordPress, soon. And be able to manage all their themes in a centralized location via the app. This opens up the possibility for a community of theme creators to share and contribute to a resource of templates, styles, designs, etc.
These goals correspond directly to my hopes for WordPress and its block system. I want to see designers actively involved in a give and take design community. The perfect place for this to happen is WordPress.org, but third parties can often develop these things faster without any potential obstacles from the platform’s official site. They can also push the WordPress project in a specific direction if they are successful on their own.
Using the app
To generate a
theme.json file, the application works fine. Currently, it allows creators to configure parameters, models and model parts. The missing piece is the construction of styles, which will arrive soon.
There is also an “Other” section. It has a single parameter to support the theme’s JSON schema. This is handy for developers who like built-in validation, tooltips, and autocomplete if their code editors support it.
The most extensive area of the application is the generation of global parameters. It covers border, color, layout, spacing, and typography options. As far as I know, it has most of the available metrics that a theme author can set. It’s hard to remember all of them at first glance, which is one of the reasons tools like this are useful.
I noticed that a way was missing to enter font families. There could be a lot that could be done with this in the future, especially if a web fonts API is ever integrated into the core of WordPress.
The “Custom” settings section is still not complete. This will probably take some time to implement as theme authors can add any type of data with multiple levels of nesting. Unsurprisingly, it’s not ready yet, but I can’t wait to see how Gwyer tackles the UI for it.
Creators can import colors from Twenty Twenty-Two, Blockbase, or Tove themes. Implementing such a feature so early tells me that Gwyer is probably already envisioning this shared resource future. How cool would it be to embed any element from one existing block theme into another with the click of a button?
It’s missing a configuration option that I’d like to see in colors, gradients, and two-tone filters. Currently, creators can add a name. However, they cannot manually add a slug, which is generated automatically.
There are scenarios where some designers can use developer friendly slugs like
primary-500. Then they would use names that make more sense to end users, such as “Primary Lightest”, “Primary Light” and “Primary Medium”, respectively.
The function of automatically generated slugs is nice. However, this should also allow manual entry.
ThemeGen will likely be a welcome resource for theme authors as they navigate the world of block themes over the next few months. With enough interest, he could also become that community of like-minded creators who are open to sharing with each other. The first step is to get more testers and feedback during this beta period.