テンプレート

Topics

  • API
  • ブロック属性
  • カスタム投稿タイプ
  • ロック
  • 個別のブロックのロック
  • ネストしたテンプレート

ブロックテンプレートはブロックアイテムのリストとして定義されます。定義済みの属性やプレースホルダーコンテンツを含めることができ、静的にも動的にもできます。ブロックテンプレートを使用して、エディターセッションのデフォルトの初期状態を指定できます。

テンプレートの範囲は次のとおりです

  • クライアント側で初期状態を動的に設定 (defaultBlock のように)
  • 特定の投稿タイプのデフォルトとして登録

予定されている追加機能

  • 「ページテンプレート」として固定ページへ保存、割り当て
  • template.phpファイル内で定義するか、サイト特有のカスタム投稿タイプ ( wp_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, {} );
	},
} );

テンプレートを使用する完全なサンプルは メタブロックのチュートリアル を参照してください。

Top ↑

ブロック属性

テンプレートで定義可能な、すべてのブロック属性の網羅的なリストが必要であれば、ブロックの block.json ファイルの attributes と supports の値を調べてください。

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

Gutenberg プラグインをインストールしていなければ、block.json ファイルは wp-includes/blocks/heading/block.json で見つかります。

Top ↑

カスタム投稿タイプ

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

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' );

Top ↑

ロック

ブロックを操作できないように 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 によって継承できます。templateLock が InnerBlocks 領域で設定されていなければ、親の InnerBlocks 領域のロックが使用されます。ブロックが最上位レベルのブロックであれば、現行の投稿タイプのロック構成が使用されます。

Top ↑

個別のブロックのロック

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

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

オプション:

  • remove — ブロックの削除をロック
  • move — ブロックの移動をロック

この機能を templateLock と一緒に使用して、remove や move に false を指定することで、1つのブロックを除いてすべてのブロックをロックできます。

$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,
		),
	) ),
);

Top ↑

ネストしたテンプレート

「カラム」ブロックのようなコンテナブロックもテンプレートをサポートします。実装にはブロックにネストしたテンプレートを割り当てます。

$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'
			) ),
		) ),
	) )
);

原文

最終更新日: