My experience creating a full site editing theme for the WordPress theme directory

photo of a computer screen showing code for a WordPress full site editing theme

In early June 2022, I released my first WordPress block theme, Semplice Monospazio, into the WordPress theme directory. Roughly a week later, it was live and available for anyone to download.

The release represented a couple of months long process of learning more about full site editing and how developers can create block themes in this new world we have in WordPress.

The results were quite interesting. While there is a lot to learn about when it comes to the theme.json file and getting used to how things are done with full site editing, once you get going and really understand how things run, it becomes so much easier and quicker to create a block theme versus a traditional PHP theme.

So here’s my full experience of creating a full site editing/block theme for the WordPress theme directory.

Why create a block theme for the WordPress theme directory?

Okay, so first things first: why did I want to create a block theme for the WordPress theme directory?

Well, it wasn’t exactly my first plan. Originally, I was going to just jump right in by creating a premium portfolio block theme. But as I started to dive into that project, it was obvious that it was going to be a bit ahead of WordPress in terms of features (i.e. not being able to use the featured image in a cover block).

So I went back to the basics. Just like I did when I got into WordPress theme development back in 2014, the first thing I did was create a theme (in this case, Nuovo) for the WordPress theme directory so I could really understand what it’s takes to create a theme for other people.

Technically, I did first create FSE themes for my marketing website and the Sports Bench WP website, but with those I could counter any issues by using Advanced Custom Fields blocks.

But this time I had to do things within WordPress and create things for people who don’t know any code. So it felt like a great way to wade into block themes and learn how to create these types of themes for users and do things the WordPress way.

The design process

The design process for the theme, Semplice Monospazio, was pretty simple.

For the most part it was inspired by me wanting to have a tech blog (AKA this site) to separate my technical blog posts from blog posts about helping business owners learn how to create and manage their own website.

So I figured that utilizing a monospace font and minimalist design would be the best way to go forward.

That made everything else pretty easy to create. I kept things super simple with the header and footer. And I added a couple of simple block patterns that users can use to highlight a call to action or call attention to something (like another blog post or page).

I did decide to get a little bit fancy by creating a list-view type query block group and a grid-view type query block group that the user can change between for their index and archive templates.

But if you’ve seen the theme, you know that it’s pretty simple looking. And that’s just the way I wanted it to be.

The build process

The build process is where things started to get complicated.

For starters, diving into the theme.json file was a chore. There is so much that you can do in that file that will make everything else so much easier (and also cut down on the CSS that you need to write).

But understanding it can be a challenge. Fortunately, I was able to use the theme.json file from the Frost WP theme by Brian Gardner to get by bearings straight. I could start to see how each of the settings could control how the theme looked on the front end.

After that file was finished, I moved on to covering anything style related through CSS. This was primarily a lot of hover and focus states, which aren’t quite included in the site editor in WordPress yet. Still, it was a ton less CSS than I would need for a “normal” PHP theme.

Finally, it was time to build out the various templates and create those block patterns. This was were the fun really began.

This was the easiest time I’ve ever had building a header and footer. I could just build theme in the block editor and then copy them over into their respective files in the theme.

Block patterns and the variations were also fun to create. It was just creating a block group and then adding the blocks that were needed for that pattern and taking that code and placing it in a file in the theme.

All told, once I got to the templates and block patterns, it took me just a week or so to have it ready for the WordPress theme directory. It was just that first hurdle of creating the theme.json file that was the hard part.

What I learned while building the theme

So what did I learn during this process?

Well for starters, I love creating block themes now. They are so much quicker and easier to create versus PHP theme, err, well, they are once you understand the theme.json file.

I mean, normally creating a header is a big challenge when building a new theme. There’s PHP that needs to be placed and styling to be done and then you need to make sure you also think about responsiveness.

But that’s not necessarily the case with block themes. You can create the header right in the block editor (my preference is to just create a new page and build it there). You can lay things out and set a lot of the styling right there at the same time as well. And responsiveness is built in the theme.

I also think that they are going to be a great tool for users. It’s going to be easier for them to take these prebuilt themes and customize them to meet their needs and to make them unique to themselves, organization or business. Will some people go too far and mess things up? Yeah, probably. But trust me, that was already a thing with PHP themes.

And finally, I’m excited to see where things go from here with full site editing and block themes. There’s a lot of potential here. And as things go forward and we get more iterations on the site editor, I think it’s going to turn into a great tool for developers and users alike.

Pain points in creating a full site editing theme

The biggest problem I ran into with creating the block theme was understanding the theme.json file.

It is a very powerful tool … once you get a chance to fully grasp it. But getting to that point is a challenge. There are a lot settings you can define there — from fonts to colors to typography to styling for various elements and more.

And it’s already changing. There are already a number of changes to what you can set in the theme.json file from WordPress 6.0 to the latest release of the Gutenberg plugin. And keeping up with that feels like it’s a full time job itself.

(And I would like to state for the record that I’m keeping the Semplice Monospazio theme updated with the latest WordPress release, not Gutenberg, so I have some time to worry about those changes.)

Another pain point I came across is taking any elements, patterns or groups of block you create in the block editor and putting it into an HTML or PHP file in the theme is not a one-step process.

I learned this one the hard way early on in the process. I simply copied a block group I created for the header and pasted it into a PHP file for a block pattern. The result wasn’t what I thought it would be.

As it turned out, you need to unescape that code first and then copy that into the HTML or PHP file in your theme. Then everything fell into place after that. I’ve been using Code Beautify to do this process and have run into no issues with it.

It’s a small thing, but it can be a frustrating thing if you’re not expecting it.

Final thoughts

So, what’s the final verdict in creating a full site editing theme for the WordPress theme directory?

Well, I think at the end of the day I really enjoy creating block themes.

Yes, there is a learning curve. And yes, it is frustrating with how fast things change with Gutenberg and full site editing that it’s really hard to keep up with all of those changes. And I’m still not an expert in the theme.json file (thank you again Brian Gardner!).

But it really makes the build process so much easier once you get through those pain points. And there are so many things and features you can include in themes now that give users a lot more control over how their websites look.

For example, I love that with the Semplice Monospazio theme, I’m able to give users the option to have their blog posts in a vertical list option with a featured photo or in a three-across grid. And they can pick which one they want to use. And creating the color variations is insanely easy now too.

So I will be creating full site editing/block themes from here on out, both free and premium. It’s the way of the future for WordPress, and think it’s the perfect time to jump on that train and see where it takes me and the WordPress project as a whole.

Leave a Reply

Your email address will not be published. Required fields are marked *