Build a Block Series – Part 3: Anatomy of a Block

The third part in my series walking through building a Gutenberg block for the WordPress editor. This lesson covers the anatomy of a block.

Previous casts:

Anatomy of a Gutenberg Block

At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties. Here is the complete code for registering a block:


import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'mkaz/qrcode-block', {
    title: 'QRCode Block',
    icon: 'visibility',
    category: 'widgets',
    edit: ( ) => {
        return (
            <div> Hello in Editor. </div>
        );
    },
    save: ( ) => {
        return (
            <div> Hello in Save.</div>
        );
    }
});

The first parameter in the registerBlockType function is the block name, this should match exactly to the name registered in the PHP file.

The second parameter to the function is the block object. See the block registration documentation for full details.

The title is the title of the block shown in the Inserter.

The icon is the icon shown in the Inserter. The icon property expects any Dashicon name as a string, see list of available icons. You can also provide an SVG object, but for now it’s easiest to just pick a Dashicon name.

The category specified is a string and must be one of: “common, formatting, layout, widgets, or embed”. You can create your own custom category name, see documentation for details. For this tutorial, I specified “widgets” as the category.

The last two block object properties are edit and save, these are the key parts of a block. Both properties should be defined as functions.

The results of the edit function is what the editor will render to the editor page when the block is inserted.

The results of the save function is what the editor will insert into the post_content field when the post is saved. The post_content field is the field in the WordPress database used to store the content of the post.

A similar lesson is published at the Gutenberg Examples repository, see Basic Step 1 example.