A smooth transition from Classic to Block Themes?


(This newsletter uses terms like classic, hybrid, and block theme. If you're unsure about what these words mean, please check out this video.)

Hello – It’s Fränk.

The first time that I checked out Full-Site Editing, it was super rough. This was an early prototype available through the Gutenberg plugin.

But I immediately saw how this could solve many of the issues I faced building client sites. So I got started early with Block-Based Bosco. And after the WordPress 5.8, I converted my website to a Hybrid theme.

Now with 5.9 out, and Full-Site Editing in Core, it was time to take the last step. And with that convert the WP Development Courses website to use Full-Site Editing.

The planned transition to Full-Site Editing

Hybrid themes—a theme with PHP templates using theme.json— were always meant to be a temporary step. The final step would be to convert the templates into block templates.

So this was the journey from Classic to block theme that I imagined:

Now I wasn't the only one that thought this was the right way. The Gutenberg project itself embraced this approach. Even going so far as talking about Universal themes.

But the reality showed that this was the wrong assumption.

There's no conversion to block templates

When we talk about "converting" a PHP templates to blocks, that means starting from scratch. Because there is no tool that can do this for you. You got to open the Site Editor, and rebuild everything.

In my Building Block Themes course I show how to build the Twenty Twenty-Two theme from scratch. So I know how much time this process would take for my WP Development Courses website.

And so I shelved the project for later, and focussed on other aspects of building the business.

Until I wanted to fine tune a few things, and got frustrated fiddling around with markup and CSS. And I thought to myself "This would be so much easier if this were a block theme!"

Inspiration strikes

This got me thinking. How could I get to what I want, meaning block templates, without redoing everything?

Because I haven't touched the header or footer since the website's creation a few years ago. While I would enjoy them being all blocks, the time investment is not worth it at this point.

Especially because creating headers can be quite hard. And I wasn't looking forward to fighting with the navigation block.

I mulled over this for a while. Until last week when I was working on a dynamic block for a client project.

A dynamic block means that you use PHP to render the display. In this case all I did was wrap a shortcode in a block. And this way users could preview the shortcode output in the block editor.

If it works for a shortcode, why shouldn't it work for the header template part? After all it's PHP that generates the header of a Classic theme.

With that idea in my head, I went back to the WP Development Courses website. I created one block with the existing classic header, and one with the footer. Then I threw a quick single template together in the Site Editor.

And it worked great.

So within the space of half an hour, I had the foundations of the single post template completed.

And this experience got me thinking: What if we had gone about the transition to Full-Site Editing all wrong?

A better, pragmatic approach

What if instead of promising a smooth on-ramp, we would be open about the need for a rebuild?

Because that way you start with the desired end result: a block theme.

And for features that you cannot build with the current system, you add legacy blocks.


Like the custom header and footer blocks I built. Or Justin Tadlock's Legacy Widget block.

The result would still be a hybrid theme, because there would be PHP-rendered parts. But it would be a much better experience than only using PHP templates.

Because this small adaptation to my WP Development Courses theme has enabled block template building. And redoing the rest of the PHP templates will be quick and easy.

The Full-Site Editing rebuild isn't yet done, so I can't point you to a finished website yet. But I'll continue on this project during the next week or two. I will let you know about how it progresses, and share any lessons learned.

What do you think? Could you see yourself using a similar approach for one of your projects?

Feel free to reply to this email, happy to get your input on this.

Thanks for reading!
Fränk

Fränk Klein from WP Development Courses

Every Sunday, I send out tips, strategies, and case studies designed to help agencies and freelancers succeed with modern WordPress. My goal is to go off the beaten path, and focus on sharing lessons learned from what I know best: building websites for clients. 100% free and 100% useful.

Read more from Fränk Klein from WP Development Courses

Hi Reader, This week, I stumbled upon this post on X: I was prepared to scroll past, as it just seemed to be yet another attempt at bashing modern WordPress. But then I saw this follow up: So, really, it's not about WordPress; it's about the customers of this particular plugin. But I found this fascinating because it gave me insight into the thinking of a plugin author. I've wondered for a long time why plugin authors are not more proactive with adding proper block editor support to their...

Hi Reader, summer time in Europe means holiday season. And that means lots of time spent traveling. So why not benefit from all that time you need to sit in a car, bus, train or plane, and learn something? Which is why I'm sharing four podcast episodes I recently listened to, and enjoyed a lot. A Deep Dive into Block Bindings, APIs, and the LSX Tour Operator Plugin with Ash Shaw In this episode of Woo DevChat, hosts Zach Stepek and Carl Alexander chat with Ash Shaw from Lightspeed about the...

Hi Reader, what you are reading now took me a long time to write. In fact I started over three times. The question I'm trying to answer is simple: What's it like to be a WordPress developer in 2024? And by extension of course trying to deduct the future from that. The challenge here is that I want to: Warn about the dangers for your career without wanting to create panic. Encourage you to grow your skills without sounding too negative about your current situation. It's not about Full-Site...