WordPressのカスタムブロックで、子ブロック(InnerBlock)を扱えるようにする覚書

レイアウト系や認証エリアなどの機能を備えたブロックを作りたい場合、「中にブロックを配置できるブロック」を作る必要があります。その場合に利用するInnerBlockについて簡単にまとめました。

ブロックプラグインはcreate-blockで作成する

ブロックプラグインはcreate-blockを使うのが簡単です。

npx @wordpress/create-block@latest inner-test

編集画面にInnerBlockを配置する

まず編集画面にブロックを追加できる機能を実装しましょう。といってもsrc/edit.jsにInnerBlocksコンポーネントを配置するだけです。

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

...

export default function Edit() {
    return (
        <div>
            <p { ...useBlockProps() }>
                { __(
                    'Wp Block Playground – hello from the editor!',
                    'wp-block-playground'
                ) }
            </p>
            <InnerBlocks />
        </div>
    );
}

配置した状態でコードをビルドすると、ブロックの中にブロックが配置できるようになります。

保存処理をInnerBlockに対応する

編集した内容を保存できるようにしましょう。こちらもsrc/save.jsにInnerBlocksコンポーネントを配置するだけです。

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function save() {
    return (
        <div>
            <p { ...useBlockProps.save() }>
                { 'Wp Block Playground – hello from the saved content!' }
            </p>
            <InnerBlocks.Content />
        </div>
    );
}

これで配置した子ブロックも保存されるようになります。

追加できる子ブロックの種類を指定する

ある程度用途を制限したい場合は、src/edit.jsのInnerBlocksでallowedBlocksを指定しましょう。

export default function Edit() {
    return (
        <div>
            <p { ...useBlockProps() }>
                { __(
                    'Wp Block Playground – hello from the editor!',
                    'wp-block-playground'
                ) }
            </p>
            <InnerBlocks
                allowedBlocks={[
                    'core/heading',
                    'core/paragraph',
                ]}
            />
        </div>
    );
}

このサンプルコードでは、ParagraphとHeadingブロックのみ子ブロックとして追加できるようになります。

子ブロックのテンプレートを作る

店舗情報など、ある程度子ブロックの初期配置を決めておきたいケースでは、templateを利用します。次の例ではヘッダー・画像・文章の3ブロックがデフォルトで配置されるように定義しています。

           <InnerBlocks
                allowedBlocks={[
                    'core/heading',
                    'core/paragraph',
                    'core/image',
                ]}
                template={[
                    ['core/heading', { placeholder: 'Title'}],
                    ['core/image', {}],
                    ['core/paragraph', { placeholder: 'text in here'}]
                ]}
            />

ブロックを追加するだけで、指定した3ブロックが出てくるようになりました。

参考記事

Nested Blocks: Using InnerBlocks