Picture of wooden pieces arranged in a structured geometric form

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.

14 responses to “How to Create Page Templates with Gutenberg’s Reusable Blocks”

  1. anonymous Avatar
    anonymous

    Thank you so much! That helped a lot!

  2. Beit Avatar
    Beit

    how do you select all blocks in a page? it doesn’t work in Chrome

    1. David Aguilera Avatar

      Hi Beit! Simply click on the first one and drag and drop until the end.

  3. Cheryl Avatar
    Cheryl

    This is very helpful! I was able to save a block I’d created as a reusable block. But now, how do I invoke the entire page as my default event template every time I create a new event please?

    1. David Aguilera Avatar

      Hi Cheryl,

      If you’re interested in creating a template for a custom post type (I assume you’re talking about one because you mentioned “events”), you should probably use the template option when registering the custom post type. You can find more information here.

    2. Ana Avatar
      Ana

      Wow! What a good tip! Thank you very much!

      1. David Aguilera Avatar

        Glad you liked the post, Ana!

  4. Rob Avatar
    Rob

    Good post, I had this idea and was looking for an idea which would be more maintainable in the sense that: If we want to change all the pages which are all using a certain layout, it isn’t possible; its not attached to anything, its just a page of its own blocks.

    Not so bad on a 10 page site, but on a 300 page website if the client wants the contact form moving up above the carousel…on a certain page style we’ve got 100+ pages to change manually!

    I wish WP would just make the template value an array!

    1. David Aguilera Avatar

      Thanks, Rob. To be honest, WordPress (and its block model) is evolving quite fast and some of the ideas you and I are currently discussing have already been addressed.

      For example, we now have block patterns. A block pattern is exactly the same we described in this post: a set of blocks arranged on a predefined way that you can insert in a page as a starting point. These are different from reusable blocks, because the latter are supposed to be a set of blocks that are shared across and whose content can be edited from one single location (and thus change on every page that’s using it).

      The idea you’re asking will come (I believe) once Full Site Editing (FSE) is fully implemented. FSE allow users to define page templates and use them on their site. Blocks that are part of the page’s content will still be “page dependent,” if that makes sense, but the surrounding design (i.e. the “template” in which they’re shown) will be fully customizable with, again, blocks.

      Thanks again for commenting!

      1. Logan Finlay Avatar
        Logan Finlay

        Do you have any idea when the FSE will be fully implemented so that the “page dependent” idea might be used?

        1. David Aguilera Avatar

          If I’m not mistaken, the next release will come with FSE.

  5. Anthony Lehecka Avatar
    Anthony Lehecka

    If you have Kadence or Stackable (pro (yup $’s) on both) or Pods (free) you get dynamic fields. So a CPT of Books, to use the common example, is created with all the book fields I want. The first time I enter a Book, it gets one block and one block only – A single row/column container with nothing in it. Save that as a reusable block (CPT-Book-Template for example). Go back to your CPT’s and enter Books until you get tired of data entry. Then switch over to manage reusable blocks and start customizing your CPT-Book-Template reusable block using dynamic data sourced from the CPT fields. View your CPTs of Books every now and then. You will never again accidently edit one of your reusable blocks while entering a post, cpt or page and every one of your CPT’s using that template will update automagically as you tweak you CPT template. A nice separation of data and formatting with data entry via the CPT. Formatting via a reusable block.

    1. David Aguilera Avatar

      Thanks for the tips, Anthony!

Leave a Reply

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