Universal Themes

Since our last post about Universal Themes we have fleshed out this idea and are using it to build all our themes.

The Problem

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.

What is a Universal Theme?

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.

Templates

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>

Internationalization

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&rsquo;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();

Fonts & Colors

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.

Blockbase

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.

Coda

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.