WordPress 5.5のリリースに伴いGutenbergへ新たに追加されたブロックパターンのカスタマイズで、デフォルトで用意されているブロックパターンやパターンカテゴリで不要なものを削除したり、逆にオリジナルのブロックパターンやパターンカテゴリを追加する方法です。
ブロックパターンを削除する
ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。
それらが不要な場合はunregister_block_pattern()
を用いて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
へ下記のように記述します。
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 );
}
}
ちなみに、カテゴリが存在しない場合はそのブロックパターンは「未分類」カテゴリとなり、例えば「ボタン」カテゴリを削除した場合はデフォルトで登録されている「2ボタン」「3つのボタン」のブロックパターンは「未分類」カテゴリのブロックパターンとして表示されます。
ブロックパターンを追加する
オリジナルのブロックパターンを追加したい場合はregister_block_pattern()
を用いてfunctions.php
へ下記のように記述し、このサンプルコードは「カラム」「画像」「見出し」「段落」の4ブロックを組み合わせた「サンプルパターン」というオリジナルのブロックパターンを追加することができます。
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,
)
);
}
名前やコンテンツ内容などブロックパターンの設定はregister_block_pattern()
の第2引数で指定し、title
はエディタ上で表示されるブロックパターン名、categories
は格納するカテゴリ(未指定の場合は「未分類」カテゴリに登録)、content
は挿入コードをそれぞれ指定します。
また、ここでは割愛していますが説明文を指定するdescription
やブロック検索を容易にするためのkeywords
の指定も可能なので、その辺もしっかりしておきたい場合は併せて指定してください。
パターンカテゴリを追加する
オリジナルのパターンカテゴリを追加したい場合はregister_block_pattern_category()
を用いてfunctions.php
へ下記のように記述し、ブロックパターンの登録やカスタマイズ時に作成したカテゴリを利用したい場合はcategories
に設定したものを第1引数に記述するようにします。
その際、パターンカテゴリはブロックパターンがひとつも属していない場合は表示されないので、作成したパターンカテゴリが表示されない場合はブロックパターンでのカテゴリ指定が問題ないか確認してください。
add_action( 'init', 'add_block_pattern_category' );
function add_block_pattern_category() {
register_block_pattern_category(
'example-category',
array( 'label' => __( 'サンプルカテゴリー', 'ex-editor-plugin' ) ),
);
}