Experimenting with a WordPress Block Child Theme

Intention

To me and maybe to other WordPress users, Block Themes are a different species from what we used to work with. They are even scary to me, but I want to get along with them without too much fuss.

Before the Block Themes came out, I used to create a stand-alone custom theme or sometimes made a child theme for a lightweight parent theme. WordPress Handbook – Child Theme was my guide.

Since I am new to the block themes, I wanted to have the parent theme as a guide and create a child theme. I tried to use the same method with some adjustments.

Challenge

The usual procedure seemed to work OK at first, but it showed an ugly side when I turned the debug mode. The Block Editor itself is still in beta today (May 18, 2022), so error notes sometimes sneak up if the debug mode is on. But my point here is to have the cleanest solution possible without creating a whole set of new files from scratch.

Solution

I am all in trying whatever makes it easy and faster for me to start customizing a theme. I found there is a plugin to create a new theme or overwrite an existing theme.

Tools

Steps

Using Create Blockbase Theme plugin

  1. Install and activate a parent theme such as Twenty Twenty-Two

  2. Install and activate the Create Blockbase Theme plugin

  3. Go to Appearance > Create Blockbase Theme, then select a suitable option from “Export“, “Clone” or “Overwrite” the current theme, or “Create a child” of the current theme. If you choose “Create” or “Clone“, you can enter minimum information.

    Screenshot - Create Block Theme Plugin - options

  4. Once the customization is done, you can export it using this same plugin.

Visit Create A Blockbase Child Theme for detailed instruction.

I believe many significant developments are still coming to Block Editing / Full Site Editing. I created a child theme for the Twenty Twenty Two (WordPress default theme) so that I can benefit from the latest code.

What I like about this

  • The child theme generating procedure is straightforward.
  • It gives different options: create a new theme, override a theme, or create a child theme.
  • The generated theme is minimum, but that’s exactly what I wanted.

What I am confused about

theme.json file was included in the generated child theme. It’s basically a copy from the parent theme. I thought whatever I make changes in this file would override the parent theme, but I found some parts do override, but some don’t.

This overrides 😇

"settings": {
	"layout": {
		"contentSize": "960px",
		"wideSize": "1040px"
	}
}

This somehow doesn’t 🥲

"custom": {
	"typography": {
		"font-size": {
			"huge": "clamp(2.25rem, 4vw, 2.75rem)",
			"gigantic": "clamp(2.75rem, 5vw, 3.25rem)",
			"colossal": "clamp(3.25rem, 6vw, 6.25rem)"
		}
	}
}

Workaround

I had to address this by a combination of theme.json and stylesheet. I removed everything except the version information in the theme.json file in the child theme, then entered code only for what I wanted to change if it worked in the front-end. If not, I put styles in the child theme stylesheet. There is a case I have to use my evil friend, !important, but well, it’s an experiment…

Another Possible Solution

Many websites come up when you google “block theme generator.” I found WordPress Full SIte Editing by Carolina Nymark has tons of good information and has a Block theme generator.

You can generate a theme and download it with more options with this. However, I found the generated theme seems a bit overloaded even with the basic option. I got lost while cleaning up extra files I don’t need, but maybe it’s just me. Still, the site is a good place to learn the fundamentals of Block Themes and Full Site Editing.


Updates

May 23, 2022

The block editor always gives me slight anxiety because it’s a bit slow to show up. After I uploaded the website to the live server, the block editor became blank. Yikes! The old school solution: clearing browser cache and re-start the browser worked, phew.