WordPress:Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法

WordPress:Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法

WordPress 5.5がリリースされたのに伴い、Gutenbergへ新たにブロックパターンという機能が追加されましたが、デフォルトで用意されているパターン・カテゴリで不要なものを削除したり、逆にオリジナルのパターン・カテゴリを追加する方法です。

ブロックパターン選択部分のイメージ

ブロックパターン選択部分のイメージ

ブロックパターンを削除する

ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。
それらが不要な場合はunregister_block_pattern()を用いてfunctions.phpへ下記のように記述します。

functions.php

add_action( 'init', 'remove_default_block_pattern' );
function remove_default_block_pattern() {
  $patterns = [
    'core/two-buttons',                  // 2ボタン
    'core/three-buttons',                // 3つのボタン
    'core/text-two-columns',             // 2カラムのテキスト
    'core/text-two-columns-with-images', // 画像を含む2カラムのテキスト
    'core/text-three-columns-buttons',   // ボタンを含む3カラムのテキスト
    'core/two-images',                   // 2つ並べて表示された画像
    'core/large-header',                 // 見出しを含む大きなヘッダー
    'core/large-header-button',          // 見出しとボタンを含む大きなヘッダー
    'core/heading-paragraph',            // 見出しと段落
    'core/quote',                        // 引用
  ];
  foreach ( $patterns as $pattern ) {
    unregister_block_pattern( $pattern );
  }
}

パターンカテゴリを削除する

ブロックパターンのカテゴリはデフォルトで「ボタン」「カラム」「ギャラリー」「ヘッダー」「テキスト」の5種類が用意されていますが、不要なカテゴリがある場合はunregister_block_pattern_category()を用いてfunctions.phpへ下記のように記述します。
ちなみに、カテゴリが存在しない場合はそのブロックパターンは「未分類」カテゴリとなり、例えば「ボタン」カテゴリを削除した場合はデフォルトで登録されている「2ボタン」「3つのボタン」は「未分類」カテゴリのブロックパターンとしてエディタに表示されます。

functions.php

add_action( 'init', 'remove_default_block_pattern_category' );
function remove_default_block_pattern_category() {
  $categories = [
    'buttons', // ボタン
    'columns', // カラム
    'gallery', // ギャラリー
    'header',  // ヘッダー
    'text',    // テキスト
  ];
  foreach ( $categories as $category ) {
    unregister_block_pattern_category( $category );
  }
}

ブロックパターンを追加する

オリジナルのブロックパターン追加後のイメージ

オリジナルのブロックパターンを追加したい場合は、register_block_pattern()を用います。
例としてfunctions.phpへ下記のように記述することで、「カラム」「画像」「見出し」「段落」の4ブロックを組み合わせた「サンプルパターン」というオリジナルのブロックパターンを追加することができます。

functions.php

add_action( 'init', 'add_block_pattern' );
function add_block_pattern() {
  $examplePattern_content = '
<!-- wp:columns {"className":"example-column"} -->
<div class="wp-block-columns example-column"><!-- wp:column {"width":40} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":60} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:heading -->
<h2>大見出し</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
  ';

  register_block_pattern(
    'ex-editor-plugin/example-pattern',
    array(
      'title' => __( 'サンプルパターン', 'ex-editor-plugin' ),
      'categories' => array( 'example-category' ),
      'content' => $examplePattern_content,
    )
  );
}

titleはエディタ上で表示されるブロックパターン名、categoriesは格納するカテゴリ(未指定の場合は「未分類」カテゴリに登録)、contentは挿入コードをそれぞれ指定し、ここでは割愛していますが説明文を指定するdescriptionやブロック検索を容易にするためのkeywordsの指定も可能です。

パターンカテゴリを追加する

オリジナルのパターンカテゴリを追加したい場合は、register_block_pattern_category()を用いてfunctions.phpへ下記のように記述します。
第1引数に記述したカテゴリ名をブロックパターンの登録・カスタマイズ時に'categories'へ指定し、作成したパターンカテゴリはブロックパターンが未登録の場合は表示されないので、エディタ上にカテゴリが表示されないという場合はブロックパターンのカテゴリ指定が問題ないか確認してみてください。

functions.php

add_action( 'init', 'add_block_pattern_category' );
function add_block_pattern_category() {
  register_block_pattern_category(
    'example-category',
    array( 'label' => __( 'サンプルカテゴリー', 'ex-editor-plugin' ) )
  );
}

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