【WordPress】Gutenbergに見出しテンプレートやショートコードを挿入できるカスタムブロックを追加する方法

/your-theme/
├── functions.php
└── block-template/
    └── block.js

<?php
function register_custom_gutenberg_block() {
    wp_register_script(
        'custom-template-block',
        get_template_directory_uri() . '/block-template/block.js',
        array( 'wp-blocks', 'wp-element', 'wp-data' ),
        filemtime( get_template_directory() . '/block-template/block.js' )
    );

    register_block_type( 'mytheme/template-button', array(
        'editor_script' => 'custom-template-block',
    ) );
}
add_action( 'init', 'register_custom_gutenberg_block' );
?>

(function (blocks, element, data) {
    var el = element.createElement;
    var createBlock = blocks.createBlock;

    blocks.registerBlockType('mytheme/template-button', {
        title: 'テンプレート挿入',
        icon: 'editor-insertmore',
        category: 'widgets',
        edit: function (props) {
            return el(
                'button',
                {
                    className: 'components-button is-primary',
                    onClick: function () {
                        var headingBlock = createBlock('core/heading', {
                            content: '見出しタイトル',
                            level: 2
                        });
                        var paragraphBlock = createBlock('core/paragraph', {
                            content: 'ここに本文を入力してください。'
                        });

                        // このブロック自身を、生成した実ブロックに置き換える
                        data.dispatch('core/block-editor').replaceBlock(
                            props.clientId,
                            [headingBlock, paragraphBlock]
                        );
                    }
                },
                'テンプレートを挿入'
            );
        },
        save: function () {
            return null; // クリック後に実ブロックへ置き換わるため出力不要
        }
    });
})(
    window.wp.blocks,
    window.wp.element,
    window.wp.data
);