When building block themes there is often more than one way to achieve the same thing. It’s often not clear which of these options is preferable. Below I outline some tips and guidelines that I find helpful. The guiding principle here is to remove as much complexity as possible from the theme; instead block themes should be using the affordances provided by Gutenberg.
As much as possible, block themes should avoid providing CSS. Gutenberg increasingly offers design tools which allow theme builder to control the design of the theme without using CSS. If it is not possible to achieve a particular design without CSS please create an issue for it on Gutenberg so we can consider adding a design tool to achieve the design.
As the number of block themes we build grows we will have an ever increasing number of templates and template parts in each theme. In practice there are a small number of patterns which can be reused on many themes. We should be aiming to reuse existing patterns rather than implementing new templates. This means we need clever patterns which are able to reuse settings from theme.json.
Connected to the point above, when we want to change the appearance of a block in a template or a pattern it is usually better to do so in the theme.json file than in the block template. This means that the design will be used for all instances of the block, not just the edited instance. It also keeps templates design agnostic, so that they be reused (see above).
What other tips do you have for building block themes?
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.
Install and activate Blockbase , and the Create Blockbase Theme plugin.
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.
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.
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:
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:
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:
Login
block-templates and block-template-partsassets/theme.cssWe’d love you to try this new tool and let us know how you get on in the comments!
Since our last post about Universal Themes we have fleshed out this idea and are using it to build all our themes.
WordPress is introducing the Full Site Editor and with it new ways to build themes. These themes are called “Block” themes and integrate deeply with Gutenberg Blocks. These types of themes require the use of the new (and still in development) Full Site Editor.
The Site Editor is still being built, and block themes are in a nascent stage; they don’t yet offer the full gamut of features that will be available in the future. Block themes also require a very recent version of WordPress. How can we build themes which work with the classic dashboard to today and will continue to work with the Site Editor when it is more fully featured? This is the problem Universal themes are seeking to solve.
Universal themes are an attempt to bridge the gap between the classic themes and block themes, by adding some layers to a block theme to make it work.
A Universal theme is a block theme that can use the Full Site Editor but can also be configured in a more classic way. That means that you can use classic WordPress tools, like the Customizer, Menus and Widgets dashboards as well as the Site Editor.
Block themes load templates from the block-templates directory. However classic themes load them from the root. To ensure that we don’t end up duplicating code and that users can move between the Classic Dashboard and the Site Editor, we use the function gutenberg_block_template_part inside our classic templates. For example header.php:
<header class="wp-block-template-part">
<?php echo gutenberg_block_template_part( 'header' ); ?>
</header>Because block themes use html templates, its not possible to translate any copy inside them. In most cases we can avoid putting copy inside our templates, but there are some cases where it is impossible, for example the 404 page.
In these cases we are simply providing a classic template instead of a block template so that the strings can be translated. We can avoid any issues of code duplication by using the approach described above for templates. Here’s the 404.php from Blockbase:
<?php
/**
* The template for displaying 404 pages (not found)
*
* @package Blockbase
* @since 1.1.1
*/
get_header();
?>
<main class="container-404">
<h1 class="has-text-align-center has-medium-font-size"><?php _e( 'Oops! That page can’t be found.', 'blockbase' ); ?></h1>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'blockbase' ); ?></p>
<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
</main>
<?php
get_footer();Global Styles allows themes to customize their font and color options via theme.json. This gives universal themes a way to modify the fonts and colors in a theme, by modifying theme.json. In Blockbase we have attached some hooks to the font and color controls in the Customizer so that when you modify them the changes are made in theme.json. This gives us a single source of truth for these settings.
We have created a universal theme called Blockbase, which can be used as a parent theme; any child themes created with Blockbase will automatically be universal themes. You can learn more about Blockbase at blockbasetheme.com.
Universal themes are a temporary measure. As the Site Editor continues to improve and more features are added, the need for universal themes will diminish. These wrappers will be made obsolete and in time universal themes will become block themes.
