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:
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:
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?
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:
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:
click on the ellipsis icon and choose the option “Add to reusable blocks:”
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:”
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:
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:
To overcome this annoyance, just click on the ellipses icon in your template and select “Convert to Regular Block:”
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.
Nelio A/B Testing
I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.
Josette Millar
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.
Leave a Reply