https://idea-hack.com/code/en/blog/107226/

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.

.wp-block-ug-code-block-1-8c96cf28-06e0-42b9-b22b-04e67a3547df { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-8c96cf28-06e0-42b9-b22b-04e67a3547df pre code { font-size: 14px !important; }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.

.wp-block-ug-button-block-3-679f75ba-696f-465a-96c4-c0c90543a40f a { margin-top: 0px !important; margin-bottom: 20px !important; color: #74abdc !important; background-color: #ececec; font-size: 16px !important; border-radius: 0px !important; padding: 10px 20px !important; }.wp-block-ug-button-block-3-679f75ba-696f-465a-96c4-c0c90543a40f a:hover { background-color: #74abdc; color: #ffffff !important; } 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.

.wp-block-ug-code-block-1-d224f2a4-55dd-4168-b99c-a8bd09a94f6a { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-d224f2a4-55dd-4168-b99c-a8bd09a94f6a pre code { font-size: 14px !important; }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-.

.wp-block-ug-code-block-1-b5b77ba0-5ba6-43d5-9495-555ffb071cd2 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-b5b77ba0-5ba6-43d5-9495-555ffb071cd2 pre code { font-size: 14px !important; }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.

.wp-block-ug-code-block-1-38703146-a8a9-4561-9b33-b4460d613b09 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-38703146-a8a9-4561-9b33-b4460d613b09 pre code { font-size: 14px !important; }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.

.wp-block-ug-button-block-3-8a53d0eb-3c1c-4a01-adf7-49373b0ac706 a { margin-top: 0px !important; margin-bottom: 20px !important; color: #74abdc !important; background-color: #ececec; font-size: 16px !important; border-radius: 0px !important; padding: 10px 20px !important; }.wp-block-ug-button-block-3-8a53d0eb-3c1c-4a01-adf7-49373b0ac706 a:hover { background-color: #74abdc; color: #ffffff !important; }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.

.wp-block-ug-code-block-1-0a97a4ab-789b-4295-8783-253727ab8fb4 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-0a97a4ab-789b-4295-8783-253727ab8fb4 pre code { font-size: 14px !important; }html
<!-wp: paragraph->
<p> This is a paragraph block. This doesn't belong to attributes. </ p>
<!-/ wp: paragraph->
.wp-block-ug-code-block-1-7a0817ff-c137-40b6-8fa0-3cefd6406ef7 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-7a0817ff-c137-40b6-8fa0-3cefd6406ef7 pre code { font-size: 14px !important; }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.

.wp-block-ug-button-block-3-135991bc-e03d-4fef-aa4c-073be7aebfe5 a { margin-top: 0px !important; margin-bottom: 20px !important; color: #74abdc !important; background-color: #ececec; font-size: 16px !important; border-radius: 0px !important; padding: 10px 20px !important; }.wp-block-ug-button-block-3-135991bc-e03d-4fef-aa4c-073be7aebfe5 a:hover { background-color: #74abdc; color: #ffffff !important; } Block Registration