WordPress:Gutenbergのブロック操作を制限する方法

WordPress:Gutenbergのブロック操作を制限する方法

Gutenbergの大きな特徴のひとつとして、コードがわからない人でも自由且つ簡単に好きな見栄え・レイアウトを実装できるというものがありますが、それを何らかの理由で制限したいときに使える方法です。
特に毎回決められた項目のみ入力するような作りの投稿タイプやページがある場合に便利だと思います。

ブロックの操作はtemplate_lockというプロパティで制限することができます。
template_lockを指定しないデフォルトの状態ではブロックの追加・削除・移動など自由に操作することができますが、allでそれらを完全に制限し、insertはブロックの追加・削除はできませんが移動はできるという制限をかけます。

具体的な使用例として、例えばとあるサイトで「イベント」という投稿タイプを作成し、そこでは基本的に下記内容の情報しか入力しないので他のブロックは必要ないという仕様だったとします。

  • キャッチコピー(見出しブロックでh2を使用し、.event-copyのclassを付与)
  • イメージ(.event-imagesのclassを付与したギャラリーブロック)
  • テキスト(.event-textのclassを付与した段落ブロック)

上記のような仕様だった場合、functions.phpへ下記のように記述することで実装できます。

functions.php

// 「イベント」投稿タイプを作成
add_action( 'init', 'register_event_post_type' );
function register_event_post_type() {
  register_post_type( 'event',
    [
      'label'        => 'イベント',
      'public'       => true,
      'has_archive'  => true,
      'show_in_rest' => true,
    ],
  );
}

// 「イベント」投稿タイプにデフォルトブロックを挿入し、ブロック操作も制限する
add_action( 'init', 'event_template_settings' );
function event_template_settings() {
  $post_type_object = get_post_type_object( 'event' );
  $post_type_object->template = [
    [ 'core/heading', [
      'className'   => 'event-copy',
      'level'       => '2',
      'placeholder' => 'イベントのキャッチコピーを入れてください。',
    ] ],
    [ 'core/gallery', [
      'className'   => 'event-images',
    ] ],
    [ 'core/paragraph', [
      'className'   => 'event-text',
      'placeholder' => 'イベントの概要・紹介文を入れてください。',
    ] ],
  ];
  $post_type_object->template_lock = 'all';
}

記述後に「イベント」投稿タイプで新規追加しようとするとイメージのように予めブロックが挿入された状態になっており、ブロックの追加・削除だけでなく移動についてもできなくなっているのが確認できます。

コード適用後の新規追加画面

また、上で紹介したように投稿タイプ作成とブロック設定を別々にせずまとめて実装することもできます。
その場合は下記のようにregister_post_type()templatetemplate_lockを指定します。

functions.php

add_action( 'init', 'register_event_post_type' );
function register_event_post_type() {
  register_post_type( 'event',
    [
      'label'        => 'イベント',
      'public'       => true,
      'has_archive'  => true,
      'show_in_rest' => true,
      'template'     => [
        [ 'core/heading', [
          'className'   => 'event-copy',
          'level'       => '2',
          'placeholder' => 'イベントのキャッチコピーを入れてください。',
        ] ],
        [ 'core/gallery', [
          'className'   => 'event-images',
        ] ],
        [ 'core/paragraph', [
          'className'   => 'event-text',
          'placeholder' => 'イベントの概要・紹介文を入れてください。',
        ] ],
      ],
      'template_lock' => 'all',
    ],
  );
}

実際の案件だと決め打ちとはいえある程度は操作できるようにしたりで結局別途カスタマイズが必要になったりすることがほとんとですが、冒頭に書いたように毎回決められた項目のみ入力するようなガチガチな作りであれば、template_lockは容易に制限できて便利だと思います。

ちなみに、新規追加に予めブロックを挿入する方法については簡単にですが下記で紹介しているので、気になる方は参考にしてみてください。

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