WordPress:Gutenbergで新規追加時に予めブロックを挿入しておく方法

WordPress:Gutenbergで新規追加時に予めブロックを挿入しておく方法

Gutenbergを利用している投稿タイプでの新規追加時に予め任意のブロックを挿入しておく方法です。
毎回決まった文章やレイアウトを使うときに便利です。

特定の投稿タイプにブロック挿入する

クラシックエディタで同じように予めコンテンツを挿入したい場合は「投稿エディタに予めテキストなどを挿入しておく」で紹介している方法などで可能ですが、Gutenbergではこの方法だとクラシックブロックを利用した形で挿入されます。
これをGutenbergらしくそれぞれブロックとして挿入したい場合は、functions.phpへ下記のように記述することで実装でき、下記サンプルコードの場合は「投稿」に見出しが2パターン・段落が2パターン・ボタン・グループ・カラムが初期ブロックとして挿入されるようになります。

functions.php

add_action( 'init', 'add_default_template' );
function add_default_template() {
  $post_type_object = get_post_type_object( 'post' );
  $post_type_object->template = [
    [ 'core/heading', [
      'level'     => '2',
      'className' => 'heading-primary',
      'content'   => 'Heading 2',
    ] ],
    [ 'core/heading', [
      'level'       => '3',
      'placeholder' => 'Heading 3',
    ] ],
    [ 'core/paragraph', [
      'className' => 'prologue-text',
      'textColor' => 'light-green-cyan',
      'content'   => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    ] ],
    [ 'core/paragraph', [
      'placeholder' => 'align right text',
      'align'       => 'right',
    ] ],
    [ 'core/button', [
      'className' => 'button01',
      'gradient'  => "cool-to-warm-spectrum",
    ] ],
    [ 'core/group', [
      'className' => 'group-contents',
    ], [
      [ 'core/heading', [
        'className' => 'group-contents-heading',
        'level'     => '2',
        'content'   => 'group title',
      ] ],
      [ 'core/paragraph', [
        'className' => 'group-contents-text',
        'content'   => 'group text',
      ] ],
    ] ],
    [ 'core/columns', [
      'className' => 'columns-contents',
    ], [
      [ 'core/column', [], [
        [ 'core/image' ],
      ] ],
      [ 'core/column', [], [
        [ 'core/paragraph', [
          'placeholder' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ] ],
      ] ],
    ] ],
  ];
}

ブロック挿入は投稿タイプのtemplateで指定する形で設定します。
上記サンプルコードは「投稿」に対しての内容になるので、他の投稿タイプに適用したい場合はget_post_type_object( 'post' )の部分を任意の投稿タイプに変更してください。

挿入するブロック指定はざっくりにはなりますが[ ブロック名, 各種パラメータ ]のような記述が基本になり、グループやカラムのようにブロックを入れ子にしたい場合は各種パラメータの後に続けて記述します。

ブロック名は見出しならcore/heading、段落ならcore/paragraphのように記述していきます。
ちなみに、方法はいくつかありますが各ブロック名を手っ取り早く確認する方法のひとつとして、投稿画面の「ビジュアルエディタ」でブロック挿入後にエディタタイプを「コードエディタ」に切り替えると、見出しなら<!-- wp:heading -->、段落なら<!-- wp:paragraph -->という形でコメントアウト内でwp:の後に続く文字列で確認することができます。

各種パラメータの部分では、そのブロックに設定しておきたいclass名・文字色・背景色などを指定でき、予めテキストを挿入しておきたい場合もここでcontentを用いて指定します。
パラメータはclassを指定するclassNameや予めテキストを入れておくcontentなどのように多くのブロックで指定できるものもあれば、core/headingの見出しレベルを表すlevelのように特定のブロックのみに指定するものもあります。
また、各種パラメータをどのように記述すべきかも、ブロック名確認と同じようにエディタタイプを切り替えて確認できるコメントアウト内の内容でどのように記述するかの目安にできます。

投稿タイプ作成時にブロック挿入を指定する

上で紹介した方法は既にある投稿タイプに対してブロック挿入指定をしましたが、下記のように投稿タイプ作成時にブロック挿入を指定することもできます。
下記サンプルコードの場合は「お知らせ」という投稿タイプを新たに追加する際に、同時にデフォルトブロックとして見出し(h2)・画像・段落が挿入されるようにしたものになります。

functions.php

add_action( 'init', 'register_info_post_type' );
function register_info_post_type() {
  register_post_type( 'info',
    [
      'label'        => 'お知らせ',
      'public'       => true,
      'has_archive'  => true,
      'show_in_rest' => true,
      'template'     => [
        [ 'core/heading', [
          'level'   => '2',
          'content' => 'Info sub title',
        ] ],
        [ 'core/image' ],
        [ 'core/paragraph', [
          'placeholder' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ] ],
      ],
    ],
  );
}

Close the search window,
please press close button or esc key.