Wednesday, May 18th, 2022

Universal Themes – Themeshaper

Since our last post about Universal Themes we have put forward this idea and are using it to create all our themes.

Problem

WordPress is introducing the full site editor along with new ways to create themes. These themes are called “Block” themes and integrate deeply with Gutenberg Blocks. This type of theme requires the use of the new (and still in development) full site editor.

The site editor is still being built, and block themes are in their infancy; They do not yet offer all the features that will be available in the future. Block themes also require the latest version of WordPress. How do we create themes that work with the classic Dashboard to date and will continue to work with the site editor when it is fully featured? This is the problem that Universal Subjects is seeking to solve.

What is Universal Theme?

Universal theme is an attempt to bridge the gap between classic theme and block theme, by adding a few layers to the block theme to make it work.

A universal theme is a block theme that can do Use the full site editor, but it can also be configured in a more classic way. This means that you can use classic WordPress tools, such as the customizer, menu and widget dashboard, as well as the site editor.

Templates

load template from block theme block-templates directory. However classic themes load them from the root. To make sure we don’t eliminate duplicate 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, it is not possible to translate any copies inside them. In most cases we can avoid putting copy inside our template, but there are some cases where it is impossible, for example 404 page.

In these cases we are providing a classic template to translate strings instead of just a block template. We can avoid any code duplication issues 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 and colors

Global Styles allows themes to customize their font and color options through themes. It gives Universal Themes a way to modify fonts and colors in a theme, by modifying theme.json. In Blockbase we’ve attached some hooks to the font and color controls in the customizer so that changes are made to the theme when you modify them.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 the Universal theme. You can learn more about Blockbase at Blockbasetheme.com.

coda

Universal subjects are a temporary measure. As the site editor continues to improve and more features are added, the need for universal themes will decrease. These wrappers would become obsolete and would become Universal Theme Block Themes over time.

Source link