Gutenberg InnerBlocks 入れ子のブロックを作る

こんにちは。ましじめの田村です。

Gutenbergで入れ子のブロックを作りたい場合がありました。
a-blog cmsで言う所のカスタムユニットグループの枠といったところでしょうか。

マニュアルを確認してみると次の方法で作成可能でした。
Nested Blocks

基本はこちら

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

edit :
 <InnerBlocks />

save: 
<InnerBlocks.Content />

入れ子にしたいブロックを指定できる。

入れ子の要素は「テキスト」と「画像」だけにしたいなど可能です。

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
    allowedBlocks={ ALLOWED_BLOCKS }
/>

選択時の入れ子の初期表示を指定できる。

入れ子の要素を選択した時「テキスト + 画像」などを準備した形にできます。
templates

    const BLOCKS_TEMPLATE = [
      ['core/image', {}],
      ['core/paragraph', { placeholder: 'Image Details' }],
    ];

<InnerBlocks template={BLOCKS_TEMPLATE} templateLock={all} />

特定の親ブロックから呼び出せる子ブロックを指定できる。

グリッドでrowとcolのような関係のでしょうか、
親が「rowブロック」である場合だけ「colブロック」という形で作成可能です。

const settings = {
    title: __( 'Column' ),
    parent: [ 'core/columns' ],
    .
    .
    .

以上「Gutenberg InnerBlocks 入れ子のブロックを作る」でした。
Gutenbergで入れ子のブロックを作る場合参考にしてみてください。

---