registerBlockVariationで、WordPressのコアブロックを拡張したブロックを作ってみる

WordPressには、デフォルトでさまざまなブロックが用意されています。しかし案件によっては、「このブロックをすこしカスタマイズしたブロックが欲しい。ただ、そのためにReactとかを書くのもなぁ・・・」というケースが稀によくあります。そんな時に使える、「ブロックの拡張方法」をまとめました。

registerBlockVariationで、既存のブロックをカスタマイズする

create-blockコマンドなどでブロックプラグインをセットアップした後、src/index.jsにregisterBlockVariation関数を追加しましょう。editやsaveは必要ありませんので、Reactなどを書く必要はありません。

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

registerBlockVariation(
    'core/query', 
    {
        name: "custom-plugin/custom-posts",
        title: "Custom Posts",
        description: "Custom post query",
    }
)

とてもシンプルなコードですが、これを保存してビルドするだけで新しいブロックが増えています。

ブロックの設定値をカスタマイズする

デフォルトのブロックの値をコードでカスタマイズできます。例えば固定ページのデータを取得するブロックにしたい場合は、attributes.query.postTypeをpageに設定しましょう。

registerBlockVariation(
    'core/query', 
    {
        name: "custom-plugin/custom-posts",
        title: "Custom Posts",
        description: "Custom post query",
        attributes: {
            namespace: "custom-plugin/custom-posts",
            query: {
                postType: 'page',
            }
        }
    }
)

この状態でブロックを追加すると、デフォルトで表示するデータが固定ページになっています。

エディタ内で追加できるようにする

scopeにinserterを設定してみましょう。

registerBlockVariation(
    'core/query', 
    {
        name: "custom-plugin/custom-posts",
        title: "Custom Posts",
        description: "Custom post query",
        attributes: {
            namespace: "custom-plugin/custom-posts",
            query: {
                postType: 'page',
            }
        },
        scope: ['inserter']
    }
)

するとコマンドや本文内からも追加できるようになります。

子ブロックの内容も指定する

innerBlocksを利用して、クエリーブロックで追加する子ブロックも指定できます。

registerBlockVariation(
    'core/query', 
    {
        name: "custom-plugin/custom-posts",
        title: "Custom Posts",
        description: "Custom post query",
        attributes: {
            namespace: "custom-plugin/custom-posts",
            query: {
                postType: 'page',
            }
        },
        scope: ['inserter'],
        innerBlocks: [
            [
                'core/post-template',
                {},
                [ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
            ],
            [ 'core/query-pagination' ],
            [ 'core/query-no-results' ],
        ],
    }
)

この設定では、次のようなブロックがデフォルトで設定されています。

触ってみて

カスタムブロックを作ることで、自由にエディタや表示をカスタマイズできます。ただし作れば作るほどブロックの保守コストが発生するため、カスタマイズ内容によっては、registerBlockVariationで対処できるものかどうかをまず検討するフローで進行した方がよいかもしれません。

参考にした記事

クエリーループブロックの拡張