I started exploring block themes building using Carolina Nymark’s No-Code theme generator as a starting point, and then built upon it in the Site Editor. I appreciated the generator’s simple setting options, which didn’t overwhelm me with too many choices, as I am still learning the many elements of theme.json. The generated theme only consisted of an index template without any template parts, but its theme.json had automatically enabled useRootPaddingAwareAlignments, which allowed full-width sections/elements to be stretched outside of the group’s constraint. During the building process, I used the overwrite function of Create Block Theme (CBT) to save all the changes to the theme.json file to make it the single source of truth for the final theme.

Since I’m not a designer but would love to have a proper spacing layout, good hierarchy of headings, and a harmonious color palette, I then copied some of those elements from a couple of themes. For spacing values (spacing.spacingSizes and styles.spacing.blockGap), I copied them from the Frost theme and adopted the predefined font size values of headings & paragraphs from the Beaumont theme. As for the color palette, I sought a monochromatic color scheme, which I generated from W3School’s color schemes.

I previously wrote custom CSS to set the site-title & post-title’s text-decoration to none, but later found out that it can be done in theme.json. So my theme doesn’t use custom CSS anymore.

For this theme, I created the following templates & template parts:

Templates:
1. Home template
2. Single template
3. Page template
4. No Title (custom template, need to be manually registered in theme.json)
5. Category template

Template parts:
1. header (applied to single & page templates)
2. footer (applied to single & page templates)
3. centered-header-with-logo (applied to home template)
4. left-aligned-footer (applied to home template)
5. post-meta (applied to single template)

For font, I used Inter variable font Inter-VariableFont_slnt,wght.ttf which I uploaded using Create Block Theme plugin.

One particularly confusing or frustrating about the experience is when using CBT to overwrite some templates (front page, home, custom template). I summarized the process in the following steps.

1. Adding Custom template named Home
2. Overwrote the theme via CBT. Noticed that it created wp-custom-template-home template instead of home. I understand that this problem has been reported, and I have commented on the issue there https://github.com/WordPress/create-block-theme/issues/184#issuecomment-1442778292
3. Renamed wp-custom-template-home.html to home.html via Visual Studio Code.
4. Adding a block paragraph and cover block
5. Overwrote the theme via CBT
6. The blocks codes are now saved to home.html
7. Now add a pattern from core’s pattern collections.
8. Overwrote the theme via CBT
9. Observe how the home.html now consists only a reference to home.php pattern in which the blocks code are now reside.
10. Upon editing the home template, the image referenced in the pattern is gone. Attempting to recover the block effort is failed.

The aforementioned problem also happened if I added and overwrote a front-page template, but without the template renaming effort (it correctly named front-page.html), but there were some additional error messages showed up. Although the errors didn’t fail the overwriting process.

The error messages

( ! ) Warning: rename() expects parameter 1 to be a valid path, object given in …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php on line 147

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-admin\includes\misc.php on line 1431

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-includes\functions.php on line 6896

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-admin\admin-header.php on line 9

Interestingly, I found the above problem does not happen if I added and overwrote single or page templates via CBT.

Besides templates, I experimented with pattern creation. With the help of Pattern Manager plugin, I managed to copy one of the core’s patterns named Quote and renamed it as quote-with-circle-image.php. The process went smoothly until I inserted the pattern at the home template and overwrote the theme using CBT. The following error messages appears after the overwriting process and the referenced image disappeared.

The error messages

( ! ) Warning: rename() expects parameter 1 to be a valid path, object given in …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php on line 147

( ! ) Warning: rename() expects parameter 1 to be a valid path, object given in …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php on line 147

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-admin\includes\misc.php on line 1431

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-includes\functions.php on line 6896

( ! ) Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\plugins\create-block-theme\admin\create-theme\theme-media.php:147) in …\wp-admin\admin-header.php on line 9

After examining the troubled templates and patterns, I found that the image path was going to the theme’s root assets/images folder. Copying the required images to the said folder solved the problem. Learning from this, I wondered if the image copying could be done during the CBT overwriting process and whether the overwriting process of templates that used core’s patterns could output the result to the HTML template only instead of the HTML + PHP pattern to minimize confusion.

For the interested folks, I put the codes here.

Notes:

It turns out that

If the template contains media, the content of the template is automatically moved to a pattern in order to serve the assets locally when the theme is exported / used in another site or environment.

There is a good case to be made that overwriting the theme should not necessarily trigger this feature to move the template contents to a pattern. I opened an issue here.

Jeff Ong

*This report was made during an FSE Program Exploration: Build a block theme. Re-posted here for educational purpose.