https://idea-hack.com/blog/34825/
An instant code for creating custom blocks in WordPress Gutenberg

An instant code for creating custom blocks in WordPress Gutenberg

The registerBlockType function is to create an original block in WordPress Gutenberg. It will be easy to understand if you imagine the relationship between Post type “Post / Page” and custom school attendance type.
The Gutenberg documentation site contains a detailed set of settings, which in turn is confusing to the user.
So, in this article, I will focus on the “point” and summarize the parts that should at least be understood.

Add block

Overall creation code

Register your block element with the registerBlockType function.

First, let’s look at the overall creation code. It supplements with a comment out appropriately.

ReactJs
registerBlockType ('my-plugin / my-block', {
    title: 'my-block', // title of block element, (required)
    description: 'this is a my-block description', // description of the block
    category: 'layout', // select from common, formatting, layout, widgets and embed (required)
    icon: 'book-alt', // specified from https://developer.wordpress.org/resource/dashicons/,
    keywords: [image, photo, pics], // tag keywords for block element search
    styles: [
        // set style of block element
        {
            name: 'default', //.is-style-default class is generated
            label: __ ('Rounded'), // Display name in editor
            isDefault: true, // true makes this the default style
        },
        {
            name: 'squared', //.is-style-squared class is generated
            label: __ ('Squared'),
        },
    ],
    attributes: {
        // Specify the attribute of how to display the content in block element (https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-attributes/)
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        align: {
            type: 'string',
        },
    },
    transforms: {
        // Change block type
        from: [
            // which block type to be able to change from
            {
                type: 'block',
                blocks: ['core / paragraph'],
                transform: function (content) {
                    return createBlock ('core / heading', {
                        content,
                    });
                },
            },
        ],
        to: [
            /// Which block type can be changed to
            {
                type: 'block',
                blocks: ['core / paragraph'],
                transform: function (content) {
                    return createBlock ('core / paragraph', {
                        content,
                    });
                },
            },
        ],
    },
    parent: ['core / columns'], // If you want to nest block elements, specify blocks that can be nested
    supports: {
        // Setting for the element returned by the save function
        align: true, // (default: false) block align setting. Individual specification in array is also possible (left, center, right, wide, full)
        alignWide: false, // (default: true) Setting of full width and wide display. Disable with false
        anchor: true, // (default: false) Anchor link setting.
        customClassName: false, // (default: true) Setting of class name. When enabled, a field for entering the original class name is displayed.
        className: false, // (default: true) Setting of the class name automatically generated by .wp-block- [block name] attached when block element is created.
        html: false, // (default: true) HTML editing settings. Usually Gutenberg is visual editing, but true makes HTML editing selectable.
        inserter: false, // (default: true) true makes this block element selectable from the "Add block" button. Hide this block element from the block element selection screen with false.
        multiple: false, // (default: true) true makes it possible to create multiple block elements in one page.
        reusable: false, // (default: true) The setting to add to the reusable block becomes selectable with true.
    },
    edit () {
        // Display setting in editor
        return 'test';
    },
    save () {
        // Display setting in public article
        return 'test';
    },
});

Please check the official site for more detailed explanation.

Block Registration

So let’s talk about “Edit” and “save” that are not explained in the comment out.

Edit function

The edit function sets how to display the block element registered by the registerBlockType function on the editor screen.
This function takes the following arguments:

Attributes

You can get the value set in the attributes of the registerBlockType function.
For example, since the attributes in the above code are set to align and content, you can get their respective values in attributes.align and attributes.content, respectively.

ReactJs
edit( { attributes } ) {
    return <div style={ { textAlign: attributes.align } }>{ attributes.content }</div>;
}

className

You can get the class (.wp-block-) that is automatically added on the published article.
This class name is not applied automatically in the editor, so you can add it to an element if you have added a style to your .wp-block-.

ReactJs
edit( { attributes, className } ) {
    return <div className={ className }>{ attributes.content }</div>;
}

isSelected

You can get whether the block element is currently selected.

setAttributes

If there is user input for the value of each attribute, you can get the updated value.

ReactJs
edit( { attributes, className, setAttributes } ) {
        const { content, align } = attributes;

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        function onChangeAlignment( newAlignment ) {
            setAttributes( { align: newAlignment } );
        }

        return (
            <Fragment>
                <div className={ className }>
                    <RichText
                        key="editable"
                        tagName="p"
                        style={ { textAlign: align } }
                        onChange={ onChangeContent }
                        value={ content }
                    />
                </div>
            </Fragment>
        );
    },

Save function

The save function sets how to display the block element registered by the registerBlockType function on the published article.
This function takes the following arguments:

attributes

As with the edit function, you can get the value set in the attributes of the registerBlockType function.
The settings of the edit function and save function can be viewed here.

Edit and Save

About attributes

The attributes in the registerBlockType function are used to extract the relevant attributes (content, align, etc.) from the stored article markup.
For example, the paragraph block is displayed as follows, with and without the use of the align center (attributes defining text-align) of the attributes:

On the other hand, when this is displayed in Classic editor (text editor of WordPress 5.0 or earlier), it is shown as below.
The block part is represented by , And the content is input inside it.
If there is content that belongs to attributes, the attribute you are using is displayed as an object type like , and the display corresponding to this object is displayed. It takes place in the block editor.

html
<!-wp: paragraph->
<p> This is a paragraph block. This doesn't belong to attributes. </ p>
<!-/ wp: paragraph->
html
<!-wp: paragraph {"align": "center"}->
<p style = "text-align: center"> This is a paragraph block. It belongs to the attributes of align. </ p>
<!-/ wp: paragraph->

Summary

Unfortunately, Gutenberg’s more exceptional settings can not be summarized. There are so many features available that every developer needs to read the official document below.

Block Registration