テンプレート

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

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

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

予定されている追加機能

  • 「ページテンプレート」として固定ページへ保存、割り当て
  • template.phpファイル内で定義するか、サイト特有のカスタム投稿タイプ ( wp_templates) から読み込む
  • テーマ階層に相当するもの

API 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 = wp.element.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' );

オプション

  • 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つのブロックを除いてすべてのブロックをロックできます。

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

原文

最終更新日: