テンプレート（Templates）

API

テンプレートは、JSまたはPHPでブロックタイプの配列（ブロック名とオプションの属性）として宣言できます。

最初のPHPの例では、画像ブロックを含む投稿用のテンプレートを作成します。必要に応じて、テンプレートにブロックを追加したり削除したりできます。

PHPの例:

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

次のJavaScriptの例では、InnerBlocksとテンプレートを使用して新しいブロックを作成し、挿入時にテンプレートに基づいたブロックのセットを作成します。

const el = React.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const BLOCKS_TEMPLATE = [
   [ 'core/image', {} ],
   [ 'core/paragraph', { placeholder: 'Image Details' } ],
];
registerBlockType( 'myplugin/template', {
   title: 'My Template Block',
   category: 'widgets',
   edit: ( props ) => {
   return el( InnerBlocks, {
   template: BLOCKS_TEMPLATE,
   templateLock: false,
   } );
   },
   save: ( props ) => {
   return el( InnerBlocks.Content, {} );
   },
} );

テンプレートの使用例については、Meta Block Tutorialを参照してください。

Block attributes

テンプレートで定義できるすべてのブロック属性の包括的なリストを見つけるには、ブロックのblock.jsonファイルを参照し、attributesおよびsupportsの値を確認してください。

たとえば、packages/block-library/src/heading/block.jsonは、ブロックにlevel属性があり、anchorパラメータをサポートしていることを示しています。

Gutenbergプラグインがインストールされていない場合は、block.jsonファイルをwp-includes/blocks/heading/block.json内で見つけることができます。

Custom post types

カスタム投稿タイプは、登録中に独自のテンプレートを登録できます:

function myplugin_register_book_post_type() {
   $args = array(
   'public' => true,
   'label'  => 'Books',
   'show_in_rest' => true,
   'template' => array(
   array( 'core/image', array(
   'align' => 'left',
   ) ),
   array( 'core/heading', array(
   'placeholder' => 'Add Author...',
   ) ),
   array( 'core/paragraph', array(
   'placeholder' => 'Add Description...',
   ) ),
   ),
   );
   register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

Locking

時には、UI上でテンプレートをロックして、表示されるブロックが操作できないようにすることが意図される場合があります。これは、template_lockプロパティを使用して実現されます。

function myplugin_register_template() {
   $post_type_object = get_post_type_object( 'post' );
   $post_type_object->template = array(
   array( 'core/paragraph', array(
   'placeholder' => 'Add Description...',
   ) ),
   );
   $post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_template' );

オプション:

• contentOnly — すべての操作を防止します。さらに、コンテンツを持たないブロックタイプはリストビューから隠され、ブロックリスト内でフォーカスを得ることができません。他のロックタイプとは異なり、これは子によってオーバーライドできません。
• all — すべての操作を防止します。新しいブロックを挿入したり、既存のブロックを移動したり、ブロックを削除したりすることはできません。
• insert — ブロックの挿入または削除を防止しますが、既存のブロックを移動することは許可されます。

ロック設定はInnerBlocksによって継承されることがあります。InnerBlocksエリアにtemplateLockが設定されていない場合、親InnerBlocksエリアのロックが使用されます。ブロックがトップレベルのブロックである場合、現在の投稿タイプのロック設定が使用されます。

Individual block locking

テンプレートレベルのロックに加えて、個々のブロックをロックすることもできます。これは、属性レベルでlock属性を使用して行うことができます。ブロックレベルのロックはtemplateLock機能よりも優先されます。現在、ブロックの移動と削除をロックできます。

attributes: {
  // Prevent a block from being moved or removed.
  lock: {
   remove: true,
   move: true,
  }
}

オプション:

• remove — ブロックを削除できないようにロックします。
• move — ブロックを移動できないようにロックします。

これをtemplateLockと組み合わせて、falseをremoveまたはmoveで使用することで、単一のブロックを除くすべてのブロックをロックできます。

$template = array(
   array( 'core/image', array(
   'align' => 'left',
   ) ),
   array( 'core/heading', array(
   'placeholder' => 'Add Author...',
   ) ),
   // Allow a Paragraph block to be moved or removed.
   array( 'core/paragraph', array(
   'placeholder' => 'Add Description...',
   'lock' => array(
   'move'   => false,
   'remove' => false,
   ),
   ) ),
);

Nested templates

カラムブロックのようなコンテナブロックもテンプレートをサポートしています。これは、ブロックにネストされたテンプレートを割り当てることで実現されます。

$template = array(
   array( 'core/paragraph', array(
   'placeholder' => 'Add a root-level paragraph',
   ) ),
   array( 'core/columns', array(), array(
   array( 'core/column', array(), array(
   array( 'core/image', array() ),
   ) ),
   array( 'core/column', array(), array(
   array( 'core/paragraph', array(
   'placeholder' => 'Add a inner paragraph'
   ) ),
   ) ),
   ) )
);