Copy Block Template code with 1-click

Just added a nifty little feature in our Chrome Browser Extension that lets you copy the selected block(s) template.

What is Block Template?

Block Template is simply a collection of blocks with predefined attributes and placeholder content. This is quite a powerful feature of Gutenberg API, using this we can create new custom Gutenberg blocks using the built-in core blocks easily.

Read more about Block Templates from the official Gutenberg Handbook.

What does this Copy Block Template feature do?

This simply lets you copy the block template with a click so you can use that in your code while registering custom blocks or working with Block Template API.

For example, here is the code from the Gutenberg handbook that registers a custom block.

const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
 
const BLOCKS_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/paragraph', { placeholder: 'Image Details' } ],
];
 
registerBlockType( 'myplugin/template', {
    title: 'My Template Block',
    category: 'widgets',
    edit: ( props ) => {
        return el( InnerBlocks, {
            template: BLOCKS_TEMPLATE,
            templateLock: false
        });
    },
    save: ( props ) => {
        return el( InnerBlocks.Content, {} );
    },
});

The above code registers a custom block titled “My Template Block” and uses InnerBlocks with a block template.

This is a great way to create some custom Blocks that can easily be created using default Gutenberg blocks. But, how would you know the exact template?

This is where this feature may come handy. If you have our chrome extension installed, you will notice a little icon in the editor’s top bar.

Group your blocks that you wish to use as a block template and then select the main group and click on the icon top copy the block template.

That will give you this part of the code to register a new block using block templates.

[
    [ 'core/image', {} ],
    [ 'core/paragraph', { placeholder: 'Image Details' } ],
]

So this makes it super easier for you to get a block template code with just 1-click.

Get GutenbergHub Chrome Extension

Our GutenbergHub Chrome extension is a great tool for Gutenberg users. It allows you to insert Gutenberg Templates, Unsplash Images, and now this copy Block Template Feature.

GutenbergHub Chrome Extenssion