ネストしたブロック: InnerBlocks の使用
他のブロックをネストするブロックを作成するには InnerBlocks コンポーネントを使用します。このコンポーネントは「カラム」ブロックや「ソーシャルリンク」ブロックなど、他のブロックを含むブロックで使用されています。
注意: 単一のブロックは、1つの InnerBlock
コンポーネントのみを含むことができます。
基本的な InnerBlocks の使用方法
JSX
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>
);
},
} );
Plain
( function ( blocks, element, blockEditor ) {
var el = element.createElement;
varInnerBlocks = blockEditor.InnerBlocks;
var useBlockProps = blockEditor.useBlockProps;
blocks.registerBlockType( 'gutenberg-examples/example-06', {
title: 'Example: Inner Blocks',
category: 'design',
edit: function () {
var blockProps = useBlockProps();
returnel( 'div', blockProps, el( InnerBlocks ) );
},
save: function () {
var blockProps = useBlockProps.save();
returnel( '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
は、縦のリストとしてブロックが表示されることを期待しています。また、内部ブロックのラッパーに CSS flex や grid プロパティを追加して、横に並べて表示するようスタイリングすることもできます。ブロックを横に並べる場合は、horizontal レイアウトが使用されることを示すために orientation
プロパティを使用してください。
<InnerBlocks orientation="horizontal" />
このプロパティを指定しても、内側のブロックのレイアウトには影響しませんが、子ブロックのブロック移動アイコンが水平に表示され、また、ドラッグアンドドロップが正しく動作するようになります。
テンプレート
template プロパティを使用して、InnerBlocks コンポーネントが挿入された際にデフォルトで含まれるブロックの集合を定義できます。ブロックの属性を設定して使用例を定義できます。次の例は InnerBlocks コンポーネントを使用した本のレビューのテンプレートです。placeholder 値を設定してブロックの使用例を示しています。
JSX
const MY_TEMPLATE = [
[ 'core/image', {} ],
[ 'core/heading', { placeholder: 'Book Title' } ],
[ 'core/paragraph', { placeholder: 'Summary' } ],
];
//...
edit: () => {
return (
<InnerBlocks
template={ MY_TEMPLATE }
templateLock="all"
/>
);
},
Plain
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 の外側ではインサーターに表示されません。
{
"title": "Column",
"name": "core/column",
"parent": [ "core/columns" ],
// ...
}
他の例としては、ancestors
ブロック設定を使用して、あるブロックが先祖として存在しなければならないが、parent
のように、直接の親である必要はないブロックを定義できます。これにより、先祖がツリーに存在しない場合、インサーターにブロックは表示されず、一方で、カラムやグループブロックのように、他のブロックを間に追加できます。コメント作者名のコードを参照してください。
{
"title": "Comment Author Name",
"name": "core/comment-author-name",
"ancestor": [ "core/comment-template" ],
// ...
}
最終更新日: