There are quite a few advantages of building pages and posts with Gutenberg Blocks. One of them is the ability to save them as templates. You can create templates for Gutenberg, which is a great way to help speed up the publishing process. There are several ways to create them.
Today we are going to show you how to use template page in Gutenberg. We will illustrate how to create a template page using reusable blocks. So, let’s get started without further ado.
The Definition of Reusable Blocks
By default, when you add a new block in a post, it creates a new, empty instance of that block. For instance, if you were to insert a Cover block, this is what you will see:
Cover blocks have a background image and usually some content. If we start by assigning this background image, we can then customize the block by adding, for instance, some text and a button:
As you can see it results in a beautiful call-to-action block.
However, If we want to use this call-to-action button in any of the single posts, we have to follow the previous steps to create that CTA button. But when do you want 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. This is the definition of reusable blocks.
How to Use a Template Page in Gutenberg Using Reusable Blocks?
Let’s say you have a website with multiple pages that share a common design—while their contents are different, the layout is the same. If you now want to create a new page with that style, do you need to recreate the page from scratch? No, you don’t have to create that page from scratch.
First, you have to create the page structure as you want. For example, you might want to create a page with an introduction, a background image, and a couple of sections.
Creating this is quite straightforward in Gutenberg as you can see from the image below.
A page template is basically a “blank” page with the blocks we are interested in.
Once you have the structure ready, all you need to do is create a reusable block that includes them all.
“Yes, you can create a reusable ‘block’. That is actually called a set of blocks”
That’s exactly what we are saying. You need to simply select all the blocks in your template:
Now you need to click on the ellipsis icon and choose the option “Add to reusable blocks:”
Creation of a reusable template. Actually, it’s just a “reusable block” that contains more than one block.
Now you need to name the template as you please and you’re done!
We 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
When you want to use the new template on a new page, you simply have to choose it from the Reusable section and insert it on your selected page:
Do this and you’ll see the template you just created is now part of your new page. Unfortunately, though, there’s a catch: you can’t edit the reusable block.
By default, reusable blocks are not editable, because they are supposed to be the same on every page where they appear.
However, you can overcome this problem. You just need to click on the ellipses icon in your template and select “Convert to Regular Block:”
And that’s it! As you can see you now have all the blocks you wanted as independent blocks. But they’re completely unlinked from the original block and You can easily tweak and use them as you please.
This is how to use template page in Gutenberg with reusable blocks. Hope you can do that easily.
Final Thoughts
So as you can see with Gutenberg, it is very much possible to create page templates easily.
All you need to do is create the structure you want on a blank page, select all the blocks that are part of that structure, and save the selection as a “reusable block.” Next, insert this reusable block into a new page and convert it to “regular blocks” to edit the content.
If you face any obstacles during the process feel free to leave your issue in the comment section below.