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

クライアントが更新しやすいように、かつ少し複雑なレイアウトを組みたい、という要望に答えるために、今まではACF利用してきましたが、ブロックエディターのおかげで新しい選択肢が増えました。それが「カスタムブロックパターン」を作る、です。

カスタムブロックパターンは、アコーディオンやタブといった一般的な形式ならプラグインを使って増やすことも可能ですが、functions.phpに下記のような記述を追加することで、独自に作ることが出来ます。

作成手順

1. 投稿で、パタン化したいブロックを作成する
2. コードエディターに変更してソースをコピーする
3. functions.phpで、ブロックパターンカテゴリーとブロックパターンを追加する
4. ｢$pattern_content = ”｣に、ブロックのソースを貼り付ける

これだけで、ブロックパターンに自分ラベルをつけたカテゴリーがプルダウンに追加され、ブロックパターンを選択できるようになります。おお、便利。

下記はブロック「横並び」をベースに作成した会社沿革表示用のパタンです。

  // ブロックパターンの分類（カテゴリー）追加
add_action( 'init', 'add_block_pattern_category' );
function add_block_pattern_category()
{
  register_block_pattern_category( 'custom_block_pattern_category', array( 'label' => 'カスタムブロックパターン' ) );
}

add_action( 'init', 'add_custom_block_pattern' );
function add_custom_block_pattern()
{
  // ブロックパターンのHTML構造
  $pattern_content = '
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group history"><!-- wp:paragraph -->
<p>西暦</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>和暦</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>月</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>内容</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
  ';

  register_block_pattern(
    'feature/history-pattern', // ブロックパターン名
    array(
      'title' => 'History', // ブロックパターンのタイトル
      'categories' => array( 'custom_block_pattern_category' ), // ブロックパターンカテゴリー
      'content' => $pattern_content, // ブロックパターンのHTML構造
    )
  );
}

あとはJSやCSSでスタイリングすればOKです。