As WordPress pushes forward in the Full Site Editing era, it’s inevitable that it becomes even more seen as a “no-code” or “low code” tool. And as with every iteration of WordPress core, the community innovates around this and comes up with some new ideas.

One of those ideas centers on code generation of Block Themes.

WordPress the IDE

To me, WordPress is now able to be a theme developers IDE, and this wasn’t truly possible with the Classic Themes era in my view – and I’ve built a lot of themes 🙂

So…

• Why shouldn’t you be able to build a theme inside of WordPress?
• Why should you have to use separately hosted tools?
• If you’re building the site with WordPress and the site editor, surely that visual editing experience could translate into code output?

These are the things that I think about a lot 🙂

But what is it that theme developers are really looking for when building block themes?

1. Are they looking for a starter theme to begin coding from?
2. Are they looking at a starting set of theme.json presets?
3. Are they looking for a way to visually create themes?

Let’s explore these questions…

1. Starter Block Themes

Well, there are several options here, emptytheme is the natural example to point to, as it has been the basis for several experiments in Block Theming. There are several minimal examples in the .org theme directory, but others to point to are my teams work on Blockbase, as well as Block Canvas which we’ve been using to start most of our latest themes on.

All of these are open source and welcome contributions in Github.

2. Theme.json Generators

There have been several attempts at this, including one on FullSiteEditing.com which has some more advanced options that essentially make it a Starter Theme generator with patterns and template examples.

These are mostly independently hosted solutions in the community.

3. Visually Create Themes

The first 2 thoughts bring me back to my original thoughts on using WordPress as your IDE. Can it really be done?

I’d argue yes.

A colleague of mine that leads the designing of themes at Automattic wrote a wonderful example of how to Design a Theme in the WordPress Editor. This shows the design part of our workflow from a few months ago, and we’ve since refined that even more.

Think of the Site Editor as the way you create your design system, using global styles as one part. A non WordPress example of this is what the CodyHouse team have done with their UI Framework. You can set all your variables inside their editor and export the results and build from there.

But how to apply this thinking inside of WordPress?

One of the tools that my very talented team, along with 2 other teams at Automattic, have ingeniously created is the Create Block Theme plugin. This started out as a plugin to create child themes for our Blockbase theme, but we further abstracted it to not be tied to an individual theme, and it’s now a core WordPress project.

This is an open source project and we welcome contributions in Github.

A Workflow Example

Think of this as a workflow for building themes visually;

1. Design and build your site inside of WordPress using the Site Editor and any theme as a starting point.
2. Any additional features or functions that WordPress core or the Gutenberg plugin doesn’t provide, get those features from a plugin, like Create Block Theme.
3. You can then export your theme, ready to share with the world!

An optional further step is to tweak your exported theme using an IDE of your choice.

Getting Involved

I’d encourage the community to contribute to WordPress core, the Gutenberg plugin, and the Create Block Theme plugin if you’re interested in furthering this effort.