Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Create Gutenberg Block Templates for a Better Experience

May 2, 2019

3 Min Read
WordPress Gutenberg Block template
Reading Time: 3 minutes

WordPress 5.x is the latest version of the world’s most popular CMS. An interesting feature of the new version is the Gutenberg Editor that is poised to revolutionize the way WordPressers create content on the platform. At least that is the official version!

Regardless of what you feel about the Gutenberg editor, it is important to realize that this editor is not going away in the coming WordPress releases. The reason is simple: The “Classic” WordPress editor has started to show its age. In addition, the new generation of users who are familiar with editors available on other similar platforms, are more comfortable with the Gutenberg style editor than the classic editor.

Customizing Gutenberg Blocks

Gutenberg editor is based on the idea of ‘blocks’, discrete components that can be used at will to add the desired functionality to the content.  Through these Gutenberg blocks, the user can add adjustable and independently manageable sections that add value for the readers.

Since customization lies at the core of WordPress, Gutenberg editor supports customized block templates that help users add custom blocks to their CMS.

There are two ways of going about creating customized Gutenberg block templates. Note that both methods require some WordPress development knowledge.

Register Gutenberg Blocks

The first method involves creating custom blocks templates that can be used to build pre-populated blocks. For this, add the following code to the functions.php file

add_action( 'init', function() {
    $args = array(
        'public' => true,
        'label'  => 'News',
        'show_in_rest' => true,
        'template_lock' => 'all',
        'template' => array(
            array( 'core/paragraph', array(
                'placeholder' => 'Breaking News',
            ) ),
            array( 'core/image', array(
                'align' => 'right',
            ) ),
        ),
    );

    register_post_type( 'news', $args );
} );

Here is how this custom template for Gutenberg block would look like in action:  

Gutenberg block template

In the code snippet above, the array parameter ‘core/paragraph’ is responsible for the content of the block. Similarly, the array parameter ‘core/image’ allows you to upload images in three ways: Direct upload, Selecting from the Media Library and Embedding using a URL.

The ‘show_in_rest’ parameter indicates to the WordPress core that this custom block should be able to be fetched through the WordPress REST API.

The ‘template_lock’ argument, when set to ‘all’, prevents the custom blocks from being added (or removed) to the template.  

When it comes to adding custom block to this template, use the ‘template’ sub-array. For instance, consider the following snippet:

'template' => array(
            array( 'core/heading', array( 'level' => '4', 'content' => 'Heading' ) ),
            array( 'core/paragraph' ),
        )

Create a Gutenberg Plugin

When working with custom template and Gutenberg templates, the best practice is to create a custom plugin for custom Gutenberg Editor plugin.

Like all plugins, this plugin will be located in the wp-content/plugins directory that contains separate folders for all the plugins installed on the website.

To create the plugin, go to the wp-content/plugins directory and create a new folder. The name of the folder should be the name of the custom Gutenberg template plugin. For the purpose of this tutorial, I have named my plugin ‘Gutenberg Blocks’. Thus, the name of the folder would be ‘Gutenberg-Blocks’.

In this folder, create a file named Gutenberg-blocks.php and the following code to it:

/**
 * Plugin Name: Gutenberg Blocks
 * Author: Muhammad Owais Alam
 * Description: This plugin allows users to add a WordPress Gutenberg custom template for the Gutenberg editor
 * Version: 1.0.0
 */

add_action( 'init', function() {
    $args = array(
        'public' => true,
        'label'  => 'News',
        'show_in_rest' => true,
        'template_lock' => 'all',
        'template' => array(
            array( 'core/paragraph', array(
                'placeholder' => 'Breaking News',
            ) ),
            array( 'core/image', array(
                'align' => 'right',
            ) ),
        ),


    );

    register_post_type( 'news', $args );
} );

Note that this code is intended as a guide only and you can change the details to fit your requirements. When installed, this plugin would appear in the available plugin list.

Gutenberg block template using plugin

Wrapping up!

Customizing Gutenberg templates is a great way of customizing the Gutenberg editor for dealing with custom requirements. As with everything WordPress, the process of creating custom Gutenberg template is a simple matter of adding inline code or setting up a custom plugin.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!