Create A Blockbase Child Theme

We have been working on a plugin to help you create a Blockbase child theme. The idea is that you can use the existing tools to make changes to a Blockbase theme, and then export a bundle of templates and theme.json as a new child theme.

I tried to create a new theme called “Typewriter” using these tools.

Step 1 – Setup

Install and activate Blockbase , and the Create Blockbase Theme plugin.

Step 2 – Global Styles

Make changes to your site using the Global Styles editor. First I chose some new colors:

You can also use the Global Styles editor to update Typography and Layout settings:

Then I changed the fonts, using the Customizer:

I made all my changes using the Global Styles editor and the Customizer, but you might want to make more changes directly to the theme.json file after the theme is created.

Step 3 – Templates

Edit your templates using the Site Editor:

I managed to achieve everything I needed to in this theme using the Site Editor, but for some things you might need to edit the template files directly once the theme is created.

Step 4 – Export

Under Appearance there will be a new page called “Create Blockbase Theme”:

You can add the details for the theme here. These will be used in the style.css file. When you click the “Create Blockbase Theme” button, a zip file will be downloaded, which contains all the files for your theme. Here’s mine:

Step 5 – Test

At this point you should have a zip file containing a working theme. You can upload this to your WordPress and activate it.

The theme contains an screenshot file, which you will need to update manually.

Now when you look at the frontend of your site it should look the same as it did before you activated the new theme. Here’s my new theme:

Further changes

Once the theme has been created you can unzip the theme zip file and make further changes to the theme files. This might be necessary to make more advanced changes to the theme. You can:

  • Modify and add configuration in the theme.json file.
  • Update the html template files in block-templates and block-template-parts
  • Add custom CSS to the file in assets/theme.css

Feedback

We’d love you to try this new tool and let us know how you get on in the comments!

6 responses

  1. After I export the theme, should I first install Blockbase or does the new theme work as a standalone independent theme?

    1. Ben Dwyer Avatar

      The theme requires Blockbase to function. When you install the child theme, the parent, Blockbase, will be installed by WordPress if it’s missing.

  2. […] Wednesday, Ben Dwyer announced a new block-based plugin on the Theme Shaper blog. The Automattic Theme Team had built a child theme creator for its […]

  3. […] of Kadence Conversions to implement popups, modals, slide-ins, banners on WordPress sites. Also, a new plugin to quickly create Blockbase child […]

  4. […] Automattic Theme team has been working on a plugin to help you create a Blockbased child theme. You can use the existing tools to make changes to a Blockbase theme, and then export a bundle of […]

  5. […] Wednesday, Ben Dwyer announced a new block-based plugin on the Theme Shaper blog. The Automattic Theme Team had built a child theme creator for its […]