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.

[Cyber Week Savings] Unleash the power of managed cloud hosting at 40% OFF for 4 months. GET THE DEAL

How To Create Gutenberg Block Templates in WordPress

Updated on December 8, 2021

4 Min Read
WordPress Gutenberg Block template

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 a 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' ),
        )

Page Builders Let You Develop Websites Without Code

Find out which page builder performs the best and what features you need to create a website.

Create a Gutenberg Plugin

When working with custom templates and Gutenberg templates, the best practice is to create a custom plugin for the 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.

Like all WordPress plugins, this plugin is 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

Gutenberg WordPress Theme – Gutenberry

The new distraction-free editor, Gutenberg, has been a part of the WordPress core for almost a year now. However, it used to be pretty hard to find an accomplished and well-thought Gutenberg theme on the web until Gutenberry came out.

Gutenberry is currently one of the best 100% Gutenberg-ready themes. This clean and minimal theme was created in Gutenberg, bringing you unprecedented editing ease and exemplary speed. For example, Google Speed rates Gutenberry A 97.

This tip-top theme also comes with 5 Homepage designs, all created for modern blogs with rich media integration. Moreover, Gutenberry offers you tons of Blog and Post layouts, more than 10 widgets, working forms, and strong social media integration.

Here are the notable features of the Gutenberg theme:

  • Sample Data Installer
  • Lifelong 24/7 Support
  • Optimized Source Code
  • MailChimp-ready
  • Fully Responsive
  • Alternative Module Layouts
  • 3 Dynamic Blog Layouts

Summary

Customizing Gutenberg templates is a great way of customizing the Gutenberg editor for dealing with customs requirements. As with everything WordPress, the process of creating a 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

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

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 [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW