My Account

My Account

WordPress’s Gutenberg Block editor is perhaps one of the best options currently among visual editors, especially since it is free and packed full of user-friendly features. One of these amazing features is block templates. Today we’ll be taking a look at Gutenberg Block templates. We’ll be discussing how block templates work, why you should use them and, most importantly, How to create Gutenberg block templates on your own.

But first, let’s talk about Gutenberg Block templates and why they are so amazing!

What Are Gutenberg Block Templates?

Gutenberg is designed around the idea of using ‘blocks.’ These are little components to your page/posts’ content that you can individually customize, re-arrange, group together and much more.

You have a wide array of blocks to choose from: Paragraphs, lists, headings, media content, custom widgets and much more. Of course, developers can also program and code their blocks and submit it for others to use, just like blocks plugins or widgets.

With regard to this, Gutenberg also introduced the idea of using block templates. Block templates are simply a group of predefined blocks that you can add to any post or page and have a complete content template from the get-go. Each block in the template is predefined, which means you can customize it to serve as a placeholder or add content to the template by default.

Why Create Block Templates in Gutenberg?

So you might ask, why create block templates? The answer is reusability and time-saving. Both are key factors in Gutenberg’s design, which extends to block templates. A great idea to consider here is creating a custom block template for yourself to use. This way, you can have a consistent content design that you can reuse to save time and effort.

For example, if you’re running a blog or building a knowledge base for your website, you can easily define a custom block template for the entire page of content, so you have a rigid content template that fits your website perfectly.

Or, if you want to create multiple pages with the same pattern, you can easily do it using your own block template. The possibilities are simply endless!

After creating a block template you’re comfortable with, you can easily place it using the block editor and customize it to your heart’s extent. Each block in the template can be customized to look a certain way or have a specific type of content in it. This removes the need to create pages or posts from scratch every time you create a new one.

How to Create Gutenberg Block Templates

There are three major ways to create Gutenberg block templates:

  • Using Reusable Blocks
  • Manually/Programmatically creating your own blocks
  • Using a dedicated WordPress plugin

Using and creating a reusable block is much easier than creating one programmatically or using a plugin since you’ll need a bit of coding and WordPress knowledge to manually create your own blocks. So first, we’ll be taking a look at how you can create reusable blocks.

1) How to use and create reusable blocks

As the name implies, a Gutenberg reusable block is simply a block that can be reused multiple times; in the same posts/pages or multiple ones. Using these, we can easily create a single block that can be reused, like a defined heading, a list of reference links for your posts, or a cover image designed specifically for your blog.

But the great thing is that you can also define block templates using multiple reusable blocks instead. First, let’s take a look at how you can create a single reusable block.

For this, let’s open a WordPress post/page using the block editor, create a simple heading block, and style it the way we want.

A heading Block in Gutenberg

Now we can turn this into a reusable block by simply clicking on the three-dotted drop-down button and clicking on Create Reusable block.

Creating a reusable block in gutenberg

Then, name your reusable block and click on Save.

Naming the reusable block

Now, this reusable block will show up on your blocks under Reusable. Now, let’s use this to create block templates instead.

Reusable block available for use in the editor

How to create Gutenberg Block Templates using reusable blocks

First, let’s arrange a few blocks that you’d like to serve as a template. For our demo, we’ll add an image block, a heading and a paragraph block together.

Once you’re done with your template design, select all your blocks. You can do this by holding shift and clicking on your first block and then the last block.

Select multiple blocks

Next, similar to above, click on the three-dotted drop-down menu button and click on Create Reusable block.

Creating a block template in gutenberg from reusable blocks

Name your block template and click on Save to finish.

Name the reusable block

Now, when you add this reusable block, you will see an entire block template instead of a single block.

Reusable block as a block template in gutenberg

Of course, there are no limits to how many blocks you can set using this method, and you can create as many block templates as you like using this method. However, if you want more control over your block templates, you can create them programmatically or using a plugin.

2) How to create Gutenberg Block Templates Manually/Programmatically

The easiest way to programmatically create Gutenberg block templates is to register them using the functions.php file. Simply put, we’re going to register a unique post type for your block templates using custom block templates.

Editing Functions.php File

First, open your functions.php file by Appearance > Theme File Editor on your WordPress Admin sidebar.

navigating to the functions.php file

You’ll find this under Tools > Theme File Editor instead if you’re using a block theme.

Navigating to functions.php via Theme file editor

Click on Theme Functions(functions.php) on the Theme Files sidebar, and the functions.php file will open in your editor.

functions.php file

Add Custom Code SNippet to Functions.php File

Now, you’ll need to add the following code to add a custom block template to your website. However, we do suggest editing it as you need.

add_action( 'init', function() {
$args = array(
'public' => true,
'label' =>' Message of the day',
'show_in_rest' => true,
'template_lock' => 'all',
'template' => array(

        array( 'core/heading', array(
       'level' => '4',
            'placeholder' => 'Today's Message of the Day'.',
         ) ),
        array( 'core/paragraph', array(
            'placeholder' => 'Demo Text Here',
        ) ),

        array( 'core/image', array(
            'align' =>' right',

        ) ),
    ),
);
register_post_type( 'MOTD', $args );

} );

To explain the code:

  • This defines a custom block template as the post type’ Message of the day.
  • The attributes of the template are defined using template;=> array().
  • The core/heading array parameter defines the heading for your template, while the core/paragraph array defines your paragraph text.
  • The core/image array lets you add an image to the template either by direct upload from the media library or directly using a URL.
  • The template_lock line of code is used to define that no block can be removed or added to this block template to further edit it.
  • Similarly, the show_in_rest line lets WordPress know that the custom block should be fetched using the REST API.

You can find additional instructions on customizing this code and managing different template blocks in the WordPress Developer resource for block templates.

Adding custom code snippet

Once you’re done, click on Update File on the Theme File Editor, and you should be done.

Add New Post Using The Block Template

Now, on your Admin sidebar, you should see a new post type based on the label text you’ve added. For our demo, we’ve added ‘Message of the day.’ Click on it and click on Add New post, and you will see your custom block template already added to the post.

Creating a new post using the block template in gutenberg

3) How to create Gutenberg Block Templates using a plugin

Now, an easier method of creating a Gutenberg block template is to use a dedicated WordPress plugin. This method removes the need for you to code the block yourself, and instead, you can use the plugin and the block editor to create your templates.

If you’re trying to create custom block designs and templates, then this method is the one we recommend to most users as it is more user-friendly and easy to use. This method allows you to add and remove blocks using the block editor and use the template for any post, page or post type.

Install The Plugin

First, let’s start by installing and activating the plugin. Click on Plugins > Add New on your WP Admin sidebar.

Then, use the search bar on the top right to search for Custom Blocks Templates by Sirvelia.

Click on Install on the plugin and then click on Activate once the button changes.

Custom blocks plugin installation

This should install and activate the plugin on your WordPress website. You can also manually activate/deactivate the plugin using the Plugins page on your WP Admin sidebar.

activate custom blocks plugin

Creating your block template using the plugin

To create your own block template, go to your Admin Sidebar and click on Block Templates > Create Template.

create a block template in Gutenberg using the plugin

This will open the block editor, where you can add as many blocks and edit them as you want. We’ve built these test blocks for our demo for our block template.

We have a simple template with a heading, image, and paragraph blocks. But you can go all out with the template with Gutenberg’s amazing editing options. You could even consider adding block patterns and grouped blocks.

testing the block template in the Gutenberg editor

Once you’re done, Publish the template as you would do for a post. This will add a new template you can find if you click Blocks Template on your admin sidebar.

Find the block template in the plugin options

Assign Templates

To add this to posts/pages, you’ll have to assign this template. For this, click on Blocks Template > Assign templates.

Assign templates

Here you can assign the template to your post, pages or specific post types. This means that your posts/pages will have your custom template by default. We recommend creating your own post type and assigning the block template to it instead. This lets you create a specific type of post type that uses your block template exclusively.

To assign the template, simply click on Post, Page or your specific Post type and click your created template under the Template option.

Assign block templates to a post or a page

You can also use the Edit option, which allows/denies the block template from being edited.

Once you’re done, you’ll see your custom block template when you create a new post/page to which your template is assigned.

Use the block template to create content in gutenberg editor

Conclusion

And that ends our guide on How to Create Gutenberg Block Templates. For summarization’s sake, let’s take a look at all the points we’ve covered in today’s article:

  • Creating block templates using Reusable blocks
  • Creating block templates programmatically using the Theme Functions file
  • Using a dedicated WordPress plugin to create and assign custom block templates

Ideally, you want a template that can easily adapt to the content you want to publish on your website. All of these methods are fairly easy once you understand how blocks and block templates work. However, we recommend using either the reusable blocks or the plugin method, as it is much more beginner-friendly.

If you want to learn more about the block editor and all its features designed around to help you create attractive and enjoyable content, why not check out some of our other articles on the blog like:

Gutenberg Image Gallery Block: Everything You Need to Know!

Gutenberg can do magic with the images uploaded to the…

Gutenberg Embed Block: Ultimate Guide

Do you want to use an embed block to display…

Related posts

Wowmall Blocks < Beta > release is coming!

Subscribe to our beta teters program and get a free premium license!

Our beta testers programs allows you to receive the latest Wowmall Blocks releases. Beta versions includes the latest experimental features before they arraive to the market.