Converting a Classic theme to a Block theme

Welcome to this lesson which explores the possibilities of converting a classic theme into a hybrid theme or a complete block theme.

Converting a classic theme

What do you need in order to start converting a classic theme into a block theme?

If you opt to not add theme.json, which you would have learned in the previous lesson, you’ll need to take a look at the various options for adding theme support using the functions.php file.

Just a quick note here within the WordPress dashboard, end users will know that they’re either working with a classic theme or a hybrid theme when they’re in appearance and they don’t have access to the Site Editor.

Hybrid vs Block theme

Let’s now take a look at the difference between a hybrid theme and a block theme.

Let’s first take a look at a classic theme.

The classic theme here, Twenty Twenty, if we open up a sample page, we see that the end user has available to them quite a few settings for the blocks under typography.

They also have the option of changing the color for the text and the background by either selecting a custom color or choosing one of the colors provided by the theme.

By clicking the “Inserter”, the end user can choose blocks, patterns, and media.

Under Patterns, they have access to patterns that are shipped with the theme.

Also within Widgets, end users can use blocks in order to build out their widgets.

A hybrid theme is still a classic theme, however, the theme author has chosen to add theme support for things like block template parts.

Steps to converting a classic theme

Let’s now take a look at the steps to take in order to convert a classic theme into a block theme.

Your first step is to take a look at settings and styles.

You can bridge the gap between a classic theme and a block theme by simply adding theme.json to your theme.

You can learn more about that in the previous lesson within this module. Or you can choose to add theme support for blocks within functions.php.

Your next step is to take a look at the editing experience.

WordPress Core ships with many options for the end users. However, this can be overwhelming.

We just saw how even under patterns that were offering the end user a choice of patterns that are available on the patterns directory. You can choose to remove that and just include the patterns that you want the end user to have for your theme.

The goal here is to start reducing the amount of CSS in your style sheets and use theme.json instead.

Here’s a great blog post to inspire you. It’s giving 15 ways to curate the WordPress editing experience. This is available on the WordPress developer blog and it starts off by providing you with how to do so using theme.json. But there are many ways you can do so by using JavaScript or PHP.

Your next step is to start building out your pages by using the Block Editor, also known just simply as the editor now. You don’t have access to the site editor yet, so you can’t develop your HTML templates using the Site Editor, but you can build out pages using the editor.

Your final step is to add the Site Editor to your theme and start building out all of your templates using the Site Editor, which essentially means that you’ll no longer have PHP templates and you’ll replace those with HTML ones.

You do not need to convert your classic theme to a block theme. You can just stop at the hybrid theme stage and make the decision based on your budget.

If you’re interested in converting your classic theme to a hybrid theme, you may want to start off by adding support within functions.php for block template parts.

Do check out this tutorial on how to do so available to you on Learn WordPress.