ネストしたブロック: InnerBlocks の使用

他のブロックをネストするブロックを作成するには InnerBlocks コンポーネントを使用します。このコンポーネントは「カラム」ブロックや「ソーシャルリンク」ブロックなど、他のブロックを含むブロックで使用されています。

注意: 単一のブロックは、1つの InnerBlock コンポーネントのみを含むことができます。

基本的な InnerBlocks の使用方法

ESNext

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

registerBlockType( 'gutenberg-examples/example-06', {
    // ...

    edit: () => {
        const blockProps = useBlockProps();

        return (
            <div { ...blockProps }>
                <InnerBlocks />
            </div>
        );
    },

    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <div { ...blockProps }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

ES5

( function( blocks, element, blockEditor ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var useBlockProps = blockEditor.useBlockProps;

    blocks.registerBlockType( 'gutenberg-examples/example-06', {
        title: 'Example: Inner Blocks',
        category: 'design',

        edit: function() {
            var blockProps = useBlockProps();

            return el(
                'div',
                blockProps,
                el( InnerBlocks )
            );
        },

        save: function() {
            var blockProps = useBlockProps.save();

            return el(
                'div',
                blockProps,
                el( InnerBlocks.Content )
            );
        },
    } );
} (
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor,
) );

許可されるブロック

ALLOWED_BLOCKS プロパティを使用すると、InnerBlock 内で許可されるブロックの集合を定義できます。インサーターに含まれるブロックはリストされたブロックのみに制限され、その他のすべてのブロックは表示されません。

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

orientation

InnerBlocks はデフォルトでは縦のリストとしてブロックが表示されることを期待していますが、横に並べて使用することもできます。ブロックを横に並べる場合は、horizontal レイアウトを示すために orientation プロパティを使用してください。

<InnerBlocks
    orientation="horizontal"
/>

このプロパティを指定するとブロックの移動ハンドルは水平に表示され、ドラッグアンドドロップが正しく動作することが保証されます。

テンプレート

template プロパティを使用して、InnerBlocks コンポーネントが挿入された際にデフォルトで含まれるブロックの集合を定義できます。ブロックの属性を設定して使用例を定義できます。次の例は InnerBlocks コンポーネントを使用した本のレビューのテンプレートです。placeholder 値を設定してブロックの使用例を示しています。

ESNext

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];

//...

    edit: () => {
        return (
            <InnerBlocks
                template={ MY_TEMPLATE }
                templateLock="all"
            />
        );
    },

ES5

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];

//...

    edit: function( props ) {
        return el(
            InnerBlocks,
            {
                template: MY_TEMPLATE,
                templateLock: "all",
            }
        );
    },

templateLock プロパティを使用するとテンプレートをロックできます。テンプレートを完全にロックするには all を使用します。insert は追加ブロックのインサートを禁止しますが、既存のブロックは並べ替えられます。詳細については templateLock のドキュメントを参照してください。

投稿テンプレート

InnerBlocks とは関連しませんが、ちょうどよいのでここで触れますが、投稿タイプごとに投稿テンプレートを作ることができます。ブロックエディターをブロックの集合と共にプリロードします。

InnerBlocks テンプレートは、作成する単一ブロック内のコンポーネントのためのものであり、投稿のそれ以外の箇所ではユーザーが好きなブロックを含めることができます。投稿テンプレートを使用すれば投稿全体をロックし、定義したテンプレートのみに制限できます。

add_action( 'init', function() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
        array( 'core/heading' )
    );
} );

親子 InnerBlocks

InnerBloks を使用する一般的なパターンは InnerBlocks のみに含まれるカスタムブロックの作成です。この例として「カラム」ブロックがあります。「カラム」ブロックでは単一の親ブロック columns とその子ブロック column を作成します。親ブロックは子ブロックのみを許可するとして定義されます。Column のコードを参照してください。

子ブロックを定義する際に parent ブロック設定を使用して親ブロックを定義します。こうすると定義された InnerBlock の外側ではインサーターに表示されません。

export const settings = {
    title: __( 'Column' ),
    parent: [ 'core/columns' ],
    icon,
    description: __( 'A single column within a columns block.' ),
    //...
}

原文

最終更新日: