WordPress 7.0の新機能を活用してPHPのみでカスタムブロックを作成する方法

はじめに

これまで、WordPressで独自のカスタムブロックを作成するには、ReactやJavaScript（Gutenberg API）の習得がほぼ必須でした。
そのため、PHPをメインに扱う開発者にとっては、学習コストや環境構築の面でハードルが高いと感じることが少なくありませんでした。

しかし、WordPress 7.0からは「PHPによるブロック定義の簡略化」がさらに進み、今回紹介するコード例のように、なじみのあるPHPの書き方だけでブロックの登録からレンダリングまでを完結できるようになっています。

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

パターンとの棲み分

WordPress 7.0の「PHPのみによるブロック開発」は、標準UIしか使えず入れ子（インナーブロック）もできないため、作れるものが限られます。

しかし、「既存のパターンでは不可能な、複雑なデータ処理や動的描画（レンダリング）を伴うブロック」で真価を発揮します。

簡易的なレイアウトや標準UIの組み合わせで済むものは、既存ブロックを並べた「ブロックパターン」で十分であり、わざわざPHPで開発する必要はありません。
一方で、PHP限定ブロックの最大の強みは、JavaScriptのビルド環境なしで、サーバーサイドからHTMLやSVGを動的に出力できる点にあります。

その最適例が、今回紹介する「レーダーチャート」です。
ユーザーが入力した数値をPHPで座標計算し、SVGとしてグラフィカルに描き出す。
こうしたパターンの組み合わせでは絶対に実現できない「データに基づく複雑な描画」に特化させてこそ、この手法は活きます。

レイアウトは「パターン」に任せ、特殊な描画とデータ処理は「PHP限定ブロック」で行う。
このように、目的に応じた適切な使い分けが重要になります。

PHPによるブロック作成

WordPress 7.0以降の新方式における変更点について、利点と制約を表1に示します。

完成イメージ

実装手順

レーダーチャートを例に、以下のコードをfunctions.phpに追加します。
render_callbackを介して、設定パネルから入力された値を以下のmy_rader_chartショートコードに渡し、レーダーチャートを描画するカスタムブロックを実現します。

レーダーチャートを表示する方法

「WordPressでレーダーチャートを表示する方法」を解説。独自ショートコードでCocoonのレーダーチャートを表示する方法や、アニメーションを追加する方法、「レーダーチャート」ブロックやChart.jsを活用して描画する方法を分かりやすく紹介します。

chuya.s239.xrea.com

// ブロックを登録
add_action('init', function () {
  register_block_type('custom/radar-chart', [
    'title'       => 'レーダーチャート',
    'category'    => 'widgets',
    'icon'        => 'chart-pie',
    'attributes'  => [
      'title' => [
        'type'    => 'string',
        'default' => '攻撃, 防御, 素早さ, 知性, 体力',
        'label'   => 'タイトル',
      ],
      'score' => [
        'type'    => 'string',
        'default' => '3, 4, 2, 5, 3',
        'label'   => 'スコア',
      ],
    ],
    'supports'        => [
      'autoRegister'  => true,
    ],
    'render_callback' => 'render_radar_chart',
  ]);
});


/**
 * ブロックのフロントエンド表示をレンダリング
 *
 * @param array $attributes ブロックの属性
 * @param string $content ブロックのコンテンツ
 * @param WP_Block $block ブロックのインスタンス
 * @return string レンダリングされたHTML
 */
if (!function_exists('render_radar_chart')):
function render_radar_chart($attributes, $content, $block) {
  $title = isset($attributes['title']) ? $attributes['title'] : '';
  $score = isset($attributes['score']) ? $attributes['score'] : '';

  return do_shortcode('[my_radar_chart title="' . esc_attr($title) . '" score="' . esc_attr($score) . '"]');
}
endif;

参考：PHPだけの設定パネル例

このサンプルは、PHPだけを使ってブロックの設定パネルを作成する方法です。

完成イメージ

実装方法

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

// ブロックを登録
add_action('init', function () {
  register_block_type('custom/php-form', [
    'title'           => 'PHPフォームサンプル',
    'description'     => 'フロントでは値だけを表示するシンプルフォームブロック。',
    'category'        => 'widgets',
    'icon'            => 'admin-page',
    'attributes'      => [
      'text_field'    => [
        'type'        => 'string',
        'default'     => '',
        'label'       => 'テキスト',
      ],
      'number_field'  => [
        'type'        => 'number',
        'default'     => 0,
        'label'       => '数値',
      ],
      'boolean_field' => [
        'type'        => 'boolean',
        'default'     => false,
        'label'       => 'チェック',
      ],
      'enum_field'    => [
        'type'        => 'string',
        'enum'        => ['A', 'B', 'C'],
        'default'     => 'A',
        'label'       => '選択肢',
      ],
    ],
    'supports'        => [
      'autoRegister'  => true,
    ],
    'render_callback' => 'render_php_form',
  ]);
});


/**
 * ブロックのフロントエンド表示をレンダリング
 *
 * @param array $attributes ブロックの属性
 * @param string $content ブロックのコンテンツ
 * @param WP_Block $block ブロックのインスタンス
 * @return string レンダリングされたHTML
 */
if (!function_exists('render_php_form')):
function render_php_form($attributes, $content, $block) {
  $output = [];

  foreach ($attributes as $key => $value) {
    if (is_bool($value)) {
      $value = $value ? 'true' : 'false';
    }

    if (is_array($value) || is_object($value)) {
      $value = wp_json_encode($value);
    }

    $output[] = esc_html($value);
  }

  return implode(', ', $output);
}
endif;

参考：カテゴリーを追加する方法

作成したカスタムブロックを整理するために、ブロック一覧に独自のカテゴリーを追加する方法です。

実装手順

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

add_filter('block_categories_all', function ($categories, $post) {
  return array_merge(
    $categories,
    [
      [
        'slug'  => 'my-category',      // カテゴリーの識別子
        'title' => 'オリジナルブロック', // エディター上の表示名
      ],
    ]
  );
}, 10, 2);

さいごに

今回紹介した方法を使えば、Reactや複雑なビルド環境に頭を悩ませることなく、慣れ親しんだPHPだけでWordPressのカスタムブロックを構築できます。

特に、レーダーチャートのような数値入力型のデータ表示パーツは、この手法と非常に相性が良いです。
まずは小さなブロックから作成してみて、サイドパネルからの設定値がフロントエンドに反映される感動をぜひ体験してみてください。
サーバーサイドレンダリングをマスターすれば、WordPress開発の可能性はさらに大きく広がります。