Creating a Child Theme Using Create Blockbase Theme Plugin

Note: This post is part 1 of 2-part leaning series to understand and create child themes of block-based themes using full site editing (FSE) features. This learning post is still in active development and updated regularly.

The development of block themes has upended the current theme development landscape with much different HTML markup based templating theme structure with fewer files and global styles.

The Gutenberg 11.6 plugin added basic support for block-based child themes which have been much simplified in the forthcoming WordPress 5.9 scheduled to be released in 2022 January.

Though building child themes for block themes is still in infancy, however, slowly new approach and necessary tools for creating child themes are also emerging. There are currently two emerging approaches to create block-based child themes.

In this learning-note post, I will explore Create Block Theme plugin being currently developed by the Automattic theme team and the child-theming approach taken by Twenty Twenty-Two theme, first block-based theme to be released with WordPress 5.9.

Learning Goals
Part 1: Creating Blockbase child theme using a plugin (this post)
Part 2: Creating Child theme with alternate theme.json file

Before using the plugin, lets briefly overview how Blockbase child-theming development iteration evolved into the current Create Blockbase Theme plugin.

A Brief Overview of Blockbase Child Theme Development
  • The initial child theming approach recommended by Blockbase involved to all parent theme assets and then copy them to the child theme and make customization in child-theme theme.json file and other template files.
  • Then a child themes didn’t inherited the parent’s theme.json settings and it needed to be copied to a child theme. It also included a script-based build process. According to this GitHub ticket, the approach was simplified and replaced with the Create Blockbase Theme plugin.
  • Then maintaining updates was a hassle, and came with a burden of updating any new changes in parent theme manually and running the build tools whenever changes are made to Blockbase, but sometimes it was also necessary to update the format of the child-theme.json file, as well.
  • is currently hassle and comes with a burden of updating any new changes manually and running the build tools whenever changes are made to Blockbase, but sometimes it might also be necessary to update the format of the child-theme.json file, as well.

With the new to create Blockbase theme plugin tool, a blockbase child theme can be created from admin dashboard itself. Once the brief form is filled and pressed “create Blockbase theme” button, that will generate a child theme with all necessary files which then can be uploaded like any other child theme.

Using Create Blockbase Theme Plugin

Automattic theme team has been working on a theme building tool,  which now been called Create Blockbase Theme plugin which allows to build child themes of Blockbase universal theme. Ben Dwyer, lead of the plugin has recently announced that the plugin is ready for testing and outlines how theme authors can build Blockbase child themes with simple six steps and without writing a line of code.

I though to give it a spin and see how it works?

Creating a Blockbase Child Theme

I tested the Create Blockbase Theme plugin under my following local development environment:

  • WordPress Site: local by flywheel
  • WordPress: 5.8.2
  • Gutenberg: 12.1
  • PHP: 7.4.1
  • Create Blockbase Plugin: 0.0.1 (from trunk)
  • Blockbase: 2.0.0

Step 1: Install latest Blockbase from theme directory n an existing local site or install a fresh site and activate it.

Step 2: Download the Create Blockbase Theme plugin from the GitHub, install and activate in our WordPress site.

Step 3: Make changes to Blockbase theme

In the plugin announcement post, Ben Dwyer has outlined steps to make changes in color patterns, typography and layout using Global Styles editor.

  • Global Styles editor: allows to customize color scheme, update typography and layout.
  • Theme customizer: allows to select fonts from 30 fonts available to choose from.
  • Editor: It allows to edit theme templates as desired.

To test the plugin, I thought to make only small changes and create a child theme.

For this test demo, I made some changes in color pattern and choose DM Sans (body) and Source Sans Pro (heading) fonts for my site. Rest I left as it is.

The customized changes in color scheme palette and fonts (left panel) are instantly reflected in the preview (right panel).

Step 3: Export the theme filling out Create Blockbase Theme form.

From dashboard select Appearance > Create Blockbase Theme which opens a Create Blockbase theme form.

Fill out the form which will populate the style.css file our child theme. Then clickCreate Blockbase theme” button which will create and download a zip file containing all the customized files and folders of our child theme.

I was wondering a simple success/failure message would have been useful for user experience and it appears that there is a GitHub ticket to add the message.

Step 4: Testing the Newly Created Theme

Upload the newly created myblockbasechild theme was activate it.

Because the myblockbasechild is a child theme, it requires parent Blockbase theme to function. However, if found missing, WordPress will install parent theme automatically, according to the announcement post.

Screenshot showing active Myblockbasechild theme and Blockbase parental theme installed in our site.

The new MyBlockbasechild theme contains a blank screenshot (left), which needs to be replaced and populated theme header (right) from the contains of the Create Blockbase Theme form (step 3).

Next, when the site is viewed in a browser, the changes made earlier are taken into effect (see below).

Screenshot showing front end of our site with changed dark background and typography with customized fonts.

Step 5: Child Theme File Structure

If we look at file structure our MyBlockbasechild theme folder (see below, left panel), it inherited only the customized files (eg. block-template-parts/header.html), and theme.json file with only customized color pallet section.

It also includes a blank theme.css file (where custom theme-specific styles could be added later), block-templates folder (currently empty), and a blank screenshot file which needs to be updated manually.

The theme.json file of the child theme inherits only the customized changes – in this case color palette and font families.

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#9fd3e8",
                    "name": "Primary",
                    "default": "#007cba"
                },
                {
                    "slug": "secondary",
                    "color": "#fbe6aa",
                    "name": "Secondary",
                    "default": "#006ba1"
                },
                {
                    "slug": "foreground",
                    "color": "#ffffff",
                    "name": "Foreground",
                    "default": "#333333"
                },
                {
                    "slug": "background",
                    "color": "#1f2527",
                    "name": "Background",
                    "default": "#ffffff"
                },
                {
                    "slug": "tertiary",
                    "color": "#364043",
                    "name": "Tertiary",
                    "default": "#FAFAFA"
                }
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "\"DM Sans\", sans-serif",
                    "slug": "body-font",
                    "name": "Body (DM Sans)",
                    "google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700\"",
                    "fontSlug": "dm-sans"
                },
                {
                    "fontFamily": "\"Source Sans Pro\", sans-serif",
                    "slug": "heading-font",
                    "name": "Heading (Source Sans Pro)",
                    "google": "family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900",
                    "fontSlug": "source-sans-pro"
                }
            ]
        }
    }
}

Because the Navigation Menus was customized, the block-template-parts/header.html file structure contains the modified styled.

<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"80px"}}},"className":"site-header","layout":{"type":"flex"}} -->
<div class="wp-block-group site-header" style="padding-bottom:80px"><!-- wp:site-logo /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:site-title /-->

<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dfont-sizes\u002d\u002dtiny)"}}} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"navigationMenuId":149,"__unstableLocation":"primary","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /--></div>
<!-- /wp:group -->
Further Changes

The MyBlockbasechild theme can be further customized using Global styles and block editor to make desired changes in color, typography as well as changes in theme templates, including:

  • 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
Manually Creating Blockbase Child Theme

Of course, a Blockbase child theme can also created manually using your preferred editor like VS Code or Atom. This documentation describes necessary files, folders and steps to to create Blockbase child theme manually.

The steps described below is taken from the Blockbase documentation.

Step 1: Create a theme folder and add necessary files

The following files and folders are essential in a Blockbase child theme:

  • style.css file
  • theme.json file
  • Block templates and block template parts.

These files and folders are required to function a child theme, even if no changes are made in the parent theme.

Step 2: The styles.css file should contain required theme header.

To make Blockbase the parent theme it is important to set the “Template” property to blockbase.

/*
Theme Name: {newtheme}
Theme URI:
Author:
Author URI:
Description:
Requires at least: 5.7
Tested up to: 5.8
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI:
Template: blockbase
Text Domain: {newtheme}
Tags:
*/

Step 2: Define theme.json file

In block themes, all global styles are defined in theme.json file. In addition, Blockbase also defines many custom properties in theme.json to plug the gaps in block themes. These values can be overridden in here in child theme theme.json file. Only the customized properties are added here, rest of the values would be inherited from the parent theme.json.

Step 3: Customize Block templates and block template parts

To make any desired changes to display of the site content, only the desired templates (eg. index.htmlpage.htmlsingle.html etc.) should be copied from parent theme and make changes only in child theme. Template customization can be done using template editor.

Please note that for simple themes, the above listed files are enough. However, for more complex themes, additional styles could be added which Blockbase allows via assets/theme.css.

Note: Blockbase theme allows use of SCSS for which Blockbase uses node to compile SCSS files. A child theme also could take advantage of the same utilities, but not essential.

Step 5: Additional functions.php and theme.css files

Blockbase loads a theme.css file for each of its children. This file lives at childtheme/assets/theme.css. A functions.php file can be added to child theme to add block styles or patterns, but it’s not necessary.

Wrapping Up

In this learning-note post, a simple demo child theme of Blockbase theme was created by just filling out a simple short form and without writing a line of code. The child theme contains only the files and folders with changed contains and the rest is inherited from the parent Blockbase theme.

NEXT: Creating Child theme with alternate theme.json file

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.