How to Create Page Templates with Gutenberg’s Reusable Blocks

Published in WordPress.

If you take a look at, for example, the different types of tests that you can perform with Nelio A/B Testing, you will see that all the pages where we explain each test follow the same pattern: there is an initial description, an explanation of how to create a new test, a section with its results…

What if we want to create a new type of test? Should we recreate this page from scratch? Or can we create a template and use it whenever we need to create a page of this type? In this post we teach you how to create a page template easily with Gutenberg—no plugins required.

What Are Reusable Blocks?

A few months ago, Ruth shared with us a post explaining how to create a reusable block in Gutenberg. A reusable block is, as the name implies, a block that can be reused as is in multiple posts.

By default, adding a new block in a post creates a new, empty instance of that block. For example, if you were to insert a Cover block, this is what you’d see:

Inserting a Cover block in Gutenberg.
Inserting a Cover block in Gutenberg.

Cover blocks expect a background image and some content. If we start by assigning this background image, we can then tune the block by adding, for instance, some text and a button:

Tuning a Cover block in Gutenberg
Tuning a Cover block in Gutenberg.

which results in a beautiful call-to-action block.

If I want to use this call-to-action in a single post, I simply need to follow the previous steps to create it. But what if I wanted to use the same CTA in multiple posts? Is it possible to create a “banner block” and use it in as many posts as possible?

Creating a reusable block
Creation of a reusable block.

The answer is obviously “yes!” and it simply requires you to create the block once and save it as a reusable block. As I said, this is something we explained in depth in a previous post.

How to Create a Page Template with Gutenberg’s Reusable Blocks

Let’s consider a different scenario. A scenario similar to the one I presented at the beginning of this post. Suppose we have a website with multiple pages that share a common layout—their contents are different, but the layout is the same. If I now want to create a new page with that style, do I need to recreate the page from scratch? As it turns out, I don’t.

Some time ago, I read this posty by Jeff Chandler, in WP Tavern, where he commented on the possibility of using reusable Gutenberg blocks as the basis for creating page templates. And it seemed like an excellent idea!

This is how the trick works.

First, we have to create the page skeleton we want. For example, I might want to create a page with an introduction, a background image and a couple of sections. Creating this is quite straight-forward in Gutenberg:

Page Template
A page template is basically a “blank” page with the blocks we are interested in.

Once I have the skeletton ready, all I have to do is create a reusable block that includes them all.

“Wait, what? Can you create a reusable ‘block’ that’s actually a set of blocks?”

Yup! That’s exactly what I’m saying. Simply select all the blocks in your template:

Multiple block selection
Multiple block selection.

click on the ellipsis icon and choose the option “Add to reusable blocks:”

Creating a reusable template
Creation of a reusable template. Actually, it’s just a “reusable block” that contains more than one block.

Name the template as you please and you’re done! I recommend you use a name such as “Page Template – Whatever”, so that you can quickly identify “regular reusable blocks” from “page templates:”

List of reusable blocks
List of reusable blocks. Notice that there is one with the prefix “Page Template”, which allows us to quickly identify it as such.

How to Use a Page Template Created with Reusable Blocks

In order to use the new template on a new page, we simply have to choose it from the Reusable section and insert it in our page:

Inserting a reusable block
Inserting a reusable block.

Do this and you’ll see the template we just created is now part of our new page. Unfortunately, though, there’s a catch: the reusable block can’t be edited:

Non-editable reusable block
By default, reusable blocks are not editable, because they are supposed to be the same on every page where they appear.

To overcome this annoyance, just click on the ellipses icon in your template and select “Convert to Regular Block:”

Converting a reusable block to a normal block
If we convert a reusable block into a normal block, the resulting block (or blocks) is no longer linked to the original reusable block and, therefore, we can edit it.

And that’s it! You now have all the blocks you wanted as independent blocks—they’re completely unlinked from the original block and can be tweaked and used as you please.

Summary

With Gutenberg it is possible to create page templates easily. All you have to do is create the skeleton you want on a blank page, select all the blocks that are part of that skeleton, and save the selection as a “reusable block.” Then, insert this reusable block into a new page and convert it to “regular blocks” to edit their content.

Featured image by Marcello Gennari on Unsplash.

PoorNot badGoodGreatExcellent (1 votes, average: 5.00 out of 5)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.