【WordPress】ブロックパターンを登録する方法

WordPress5.5からブロックパターンという機能が追加されました。

今までの再利用ブロックだと全てが一括で変わってしまいましたが、ブロックパターンだとテンプレート的な使い方ができます。

すごく便利そう！

ブロックパターンの作り方

ブロックパターンはregister_block_patternで追加できます。

プロパティは以下の通り。

title （必須）：ブロックパターンの名前。人間が読めるやつ。日本語可。
content （必須）：ブロックパターンの内容。日本語可。
description：説明文。日本語可。
categories：ブロックパターンが属するカテゴリー。配列。
keywords：検索用のキーワード。
viewportWidth：インサーターで表示する時の横幅。

register_block_pattern(
  'my-plugin/my-awesome-pattern',
  array(
    'title' => 'ブロックパターン名',
    'content' => '<span>Hello!</span>',
  )
);

my-plugin/my-awesome-patternはNamespace(英語)/ブロックパターン名(英語)です。

coreは使われているので、それ以外で自由に命名sしてください。

ブロックパターンカテゴリーの作り方

プロパティは
label(必須)：人間が読めるカテゴリ名。

register_block_pattern_category(
    'example',
    array( 'label' => 'カテゴリ名' )
);

やりたいこと

このサイトにリンクを貼るブロックパターンを作ってみます。インサーターに新しいブロックパターンが表示されたら成功です。

コードを書く

ショートコードというカテゴリの中に、boxというブロックパターンを作ってみます。

// box
function lds_sc_box(){
  register_block_pattern(
    'my-shortcode/box',
    array(
      'title'       => 'box',
      'description' => 'WEBEERにリンクを貼るテスト',
      'content'     => '<a href="https://webeer.tech">WEBEER</a>',
      'keywords'    => 'kanren',
      'categories' => array( 'shortcode' )
    )
  );
  register_block_pattern_category(
    'shortcode',
    array( 'label' => 'ショートコード' )
  );
}
add_action( 'init', 'lds_sc_box' );

'categories' => array( 'shortcode' )カテゴリーは配列で指定してください。

categoriesで指定したカテゴリと、register_block_pattern_categoryのひとつ目の引数で設定したカテゴリが紐づきます。

結果

ブロックパターンの登録はできたけど、クラシックエディタになってしまいました。

ブロックパターンがクラシックエディタになってしまう…

このコードでもブロックパターンは作れるんですが、このままではクラシックエディタになってしまいます。ブロックにするにはどうしたらいいのでしょうか。

そうです。ブロックタイプのコメントで囲ってやらないといけないのですね。

// contentの中身
<a href="https://webeer.tech">WEBEER</a>

// パラグラフのプロックタイプのタグで囲んであげる
<!-- wp:paragraph --><p><a href="https://webeer.tech">WEBEER</a></p><!-- /wp:paragraph -->

結果