In this era of WordPress Block Themes, there are a number of familiar—yet very new—areas of theming that we need to get up to date with. One of those is the concept of block templates. 

You see, themes have been able to provide templates for quite a while, but block templates are very different on two main accounts: 

• Block templates are entirely composed of blocks.
• Block templates are a starting point to build from.

In a world where Gutenberg is slowly taking over more and more of the WordPress experience, that experience is not baked into, nor limited by, a theme. Instead, the WordPress experience is empowered by the theme. And while this is a lot to take in, block templates are an immensely powerful concept that will level-up WordPress publishing.

Getting access to block templates 

To get the latest on block templates and full site editing, you’ll need to activate the Gutenberg WordPress plugin, and have a top-level /block-templates/index.html/ file present within your theme. This activates the new Site Editor, as well as enables block templates and block template parts to function properly. 

Understanding block template hierarchy

Block templates are familiar in the sense that they leverage the same template file hierarchy we already know. At its core, template hierarchy is the choice-structure WordPress uses to determine what file will be used to generate a given view of a WordPress site. This means that an index.html file In the /block-templates/ top-level directory will render the blogroll index, just like the top-level index.php file does for non block-based WordPress themes.

I’m currently working on setting up a block theme for my blog, and I’ve found that singular.html and page.html block templates pretty much suit my needs.

Extending a theme’s block templates

Now with the addition of block templates, WordPress users can not only modify and save new variations of existing templates from the theme — they may now create whole new templates. And even more so, those templates can be assigned to posts/pages individually, or collectively as a whole. I suspect that in time, block templates will become a powerful publishing tool, enabling creators to design and stylize pages at a whole new level.

Modifying an existing block template that came from a theme will save it instantly as a custom block template. Those modified templates, and new ones as well, will show up within the new “Templates” WordPress Admin menu item, under Appearance. So now, if you switch your theme, your block template remains. This is huge. 

These custom block templates are technically entries to a new wp_template Custom Post Type, which means they may also be modified and updated anywhere the template is in use. Once again, another big win.

Building block templates

So to create a new block template from within WordPress, you’d head to either the new Site Editor menu item, or the Templates menu item.

I prefer the latter, just because the Site Editor is still experimental. Once you’re there,  the rest is cake. Just add blocks and template parts to start building out what you want. Below is an example markup of the page.html block template I plan on releasing on my blog here shortly. You’ll notice right off that it’s all HTML, comment driven, and I’m pulling both blocks, and block template parts — core components of block templates.

<!-- wp:template-part {"slug":"header","tagName":"header","layout":{"inherit":true}} /-->

<!-- wp:group {"tagName":"main"} -->
	<main class="wp-block-group post-content">
		<!-- wp:post-content {"layout":{"inherit":true}} /-->
	</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->

<!-- wp:template-part {"slug":"modal"} /-->

Leveraging template parts within block templates

Block template parts are essentially globs of blocks that are meant to be reused throughout the theme within various block templates. I’d say they’re mostly used for headers and footers, but I’m sure folks will be creative with how they leverage block template parts. To add a template part to a block template, use the aptly named Template Part block to choose an existing block template part, or create a new one.

You can pick from any block template part on the site, either those derived from your theme, or custom template parts you may have created yourself. Using template parts ensures that standardized content, such as headers and footers, stay that way across templates.

Blocks for blocking out block templates

Now WordPress includes a number of new blocks that are specifically designed for use within block templates. They’re listed under the “Theme” category within the Block Library, though I wonder if “Template” would be better suited.

Anyhow, these blocks are contextual blocks that are essential for templating. For example, if you’d like a block template that displays the title on the page, you’ll want to use the “Post Title” block. It looks just like a typical Heading block, but it acts very differently.

For one, the block is not editable, other than setting the heading level, alignment, colors and typography choice. But when employed, the Post Title block will pull in the current post or page title to display.

The other blocks in this category pretty much act the same way, i.e. Post Content, Featured Image, Except, Date, Author, Comments, Comments Count, Terms, Previous/Next post, etc. 

Using block templates

Once you’ve created an alternate block template, putting them in place is a familiar experience. Within the Block Editor Sidebar you’ll see a “Template” panel, which lets you select an alternate template, edit the current one, or even create a new template.

In the current Gutenberg experience, you won’t see the template changes within the editor itself — you’ll need to go to the front-end — though in time I suspect we will one day.

The main issue I have with this flow is that any template may be assigned to any page, which includes archival/index templates — which in theory should only exist on those sort of pages. I’m not sure what an appropriate solution would be, but it almost seems like there’s a bit too much flexibility on this front.

Add block templates to themes

Block themes can provide block templates quite easily. All you’d need to do is copy the markup of the block template you’ve created in Gutenberg, and paste it in a template file appropriately named, based on the template hierarchy I mentioned early.

Referring back to my earlier example of the Page block template I built for my blog, I have that markup included in a block-templates/page.html file:

This is the default template assigned to all pages and I’d expect most of this set of template parts and content to be standardized, apart for the modal template part I created for the site.

The dawn of full site editing

Block templates are absolutely how most of us will interface with templated content within WordPress in the future. Having the ability to natively edit a template provided by a theme, plus maintain that template even after switching themes, is honestly a game changer. Not to mention, being able to create templates from scratch, for any part of WordPress (i.e. archives, index views, pages, etc). 

It’s actually happening. We’re on the cusp of having WordPress themes return to being design frameworks, minimizing the negative impact of switching a theme. Sure, it’s rough around the edges right now, but the dawn of full site editing is upon us — and it’s getting brighter every day.