JSONファイルからパターンを自動登録する方法

はじめに

Gutenbergエディターでは、「パターン」を登録することで、あらかじめデザインされたコンテンツ構造を簡単に再利用できます。

通常は1つずつ手動登録しますが、複数のパターンをJSONファイルとして管理し、自動で一括登録することも可能です。

この記事では、この方法について説明します。

完成イメージ

子テーマ下のフォルダpattern内の拡張子jsonファイルを読み込みます。

• cocoon-child-master
  • pattern
    • ファイル名.josn
    • ファイル名.josn
    • :

実装手順

以下のコードをfunctions.phpに追加します。

add_action('init', function () {
  $pattern_category = 'my_pattern';

  // ブロックパターンカテゴリーを登録
  register_block_pattern_category(
    $pattern_category,
    ['label' => '独自パターン']
  );

  // 子テーマのpatternフォルダー内にあるJSONファイルを取得
  $dir = get_stylesheet_directory() . '/pattern/';
  $files = glob($dir . '*.json');

  // JSONファイルをブロックパターンとして登録
  foreach ($files as $i => $file) {
    $pattern = json_decode(file_get_contents($file), true);

    // JSONを配列として取得できない場合は処理対象外
    if (!is_array($pattern)) {
      continue;
    }

    // categoriesが未指定の場合は独自カテゴリーを設定
    if (empty($pattern['categories'])) {
      $pattern['categories'] = [$pattern_category];
    }

    // ブロックパターンを登録
    register_block_pattern("{$pattern_category}/pattern{$i}", $pattern);
  }
});

さいごに

今回紹介した方法を使えば、テーマやスキンに含まれるJSONファイルを読み込むだけで、複数のブロックパターンを自動登録できます。
テーマやプラグインでパターンを配布する際にも活用できます。