タグアーカイブ Gutenberg

WordPress開発の転換点：PHPのみでGutenbergブロックを構築する方法

WordPressのブロックエディタ（Gutenberg）が登場して以来、カスタムブロックの開発にはReactやNode.jsといったJavaScriptベースの技術習得が不可欠だった。しかし、最新のアップデートにより、PHPコードのみでブロックを構築・管理できる手法が確立された。この変更は、従来のPHP中心のWordPress開発者にとって、学習コストを劇的に下げる重要な転換点となる。

Gutenberg 21.8以降で導入されたこの機能により、サーバーサイドのJavaScript環境を構築することなく、PHPの関数だけでエディタとフロントエンドの両方にブロックを表示できる。ビルドプロセスの複雑さを排除し、保守性の高いサイト制作を可能にするのが「PHP-onlyブロック」だ。

本記事では、PHPのみでブロックを登録する具体的な手順から、管理画面UIの自動生成、さらには既存のショートコードをブロック化する実践的なテクニックまでを詳しく解説する。この記事を読むことで、最新のWordPress標準に準拠した効率的な開発手法を習得できるはずだ。

PHP-onlyブロックの概要と導入のメリット

これまで、カスタムブロックを作成するには、Reactの知識に加え、WebpackやNPM（Node Package Manager）を用いたビルド環境の構築が必須であった。これは、主にサーバーサイドのPHPでサイトを構築してきた開発者にとって、非常に高い参入障壁となっていた。PHP-onlyブロックは、この障壁を取り払うために設計された仕組みだ。

なぜPHPだけでブロックが作れるようになったのか

WordPress開発チームは、ブロックエディタの普及をさらに加速させるため、従来のPHP開発者が慣れ親しんだ手法でブロックを作成できる環境を整えた。具体的には、サーバー側で登録されたメタデータをエディタ（JavaScript側）へ自動的に受け渡す「auto_register」機能が実装されたことが大きい。これにより、エディタ用のJSファイルを手動で記述する必要がなくなったのだ。

開発者にとっての3つの主要な利点

第一の利点は、学習コストの圧倒的な低減だ。ReactやNode.jsの複雑なエコシステムを学ぶ時間を、サイトの機能向上やデザインのブラッシュアップに充てることができる。第二に、フロントエンドのパフォーマンス向上が挙げられる。不要なJavaScriptの読み込みを削減できるため、ページの読み込み速度を最適化しやすい。第三に、保守性の向上だ。PHPコード一箇所でブロックの定義と出力（レンダリング）を管理できるため、コードの可読性が高まり、バグの混入を防ぎやすくなる。

基本的なPHP-onlyブロックの作り方

PHP-onlyブロックの作成は、従来の「動的ブロック（Dynamic Blocks）」の登録方法と似ているが、最大の違いはエディタ用のスクリプトを指定せずに、特定のフラグを有効にする点にある。元記事の著者は、最小限のコードでブロックを動作させる手法を示している。

register_block_type と auto_register の役割

ブロックの登録には、WordPress標準の `register_block_type` 関数を使用する。この関数の `supports` 配列内に `’auto_register’ => true` を含めることが、PHP-onlyブロックとして動作させるための鍵となる。このフラグが有効な場合、WordPressは `ServerSideRender` というコンポーネントを自動的に使用し、管理画面上でもPHPで生成されたHTMLをプレビュー表示する。

最小構成のコード例

以下は、プラグインやテーマの `functions.php` に記述することで動作する、最もシンプルなPHP-onlyブロックのコードだ。

/**
 * レンダリング用コールバック関数
 */
function my_simple_php_block_render( $attributes ) {
    return '<div style="padding: 20px; background: #f0f0f0; border: 2px solid #0073aa;">
        <h3>🚀 PHP-only ブロック</h3>
        <p>このブロックはPHPのみで生成されています。</p>
    </div>';
}

/**
 * ブロックの登録
 */
add_action( 'init', function() {
    register_block_type( 'my-custom/php-block', array(
        'title'           => 'シンプルなPHPブロック',
        'icon'            => 'admin-plugins',
        'category'        => 'text',
        'render_callback' => 'my_simple_php_block_render',
        'supports'        => array(
            'auto_register' => true,
        ),
    ) );
});

このコードを有効にすると、ブロックエディタの追加メニューに「シンプルなPHPブロック」が表示され、設置すると即座にグレーの枠線で囲まれたプレビューが表示される。これがPHP-only開発の第一歩だ。

属性（Attributes）を活用した管理画面UIの自動生成

単にHTMLを出力するだけでなく、ユーザーがエディタ上でテキストを変更したり、オプションを選択したりできるようにするには「属性（Attributes）」を定義する必要がある。最新のGutenbergでは、PHPで定義した属性に基づいて、サイドパネル（インスペクター）の入力フィールドを自動生成する機能が追加されている。

属性の定義と入力フィールドの対応関係

属性のデータ型（type）を指定することで、WordPressは適切なUIコンポーネントを割り当てる。著者によれば、現在のところ以下のマッピングがサポートされている。

• string: テキスト入力フィールド
• number / integer: 数値入力フィールド
• boolean: チェックボックス（またはトグル）
• enum（string内）: セレクトボックス（ドロップダウン）

実践的な属性付きブロックのコード

以下の例では、タイトル、表示数、有効/無効の切り替え、サイズ選択の4つの属性を持つブロックを定義している。これらはすべて、JavaScriptを一行も書かずに管理画面のサイドバーに表示される。

register_block_type( 'my-plugin/advanced-php-block', array(
    'title'      => '設定付きPHPブロック',
    'attributes' => array(
        'blockTitle'  => array( 'type' => 'string', 'default' => 'デフォルトタイトル' ),
        'itemCount'   => array( 'type' => 'integer', 'default' => 5 ),
        'isEnabled'   => array( 'type' => 'boolean', 'default' => true ),
        'displaySize' => array(
            'type' => 'string',
            'enum' => array( 'small', 'medium', 'large' ),
            'default' => 'medium',
        ),
    ),
    'render_callback' => 'my_advanced_render_func',
    'supports' => array( 'auto_register' => true ),
) );

この仕組みの導入により、複雑なReactコンポーネント（TextControlやSelectControlなど）を組み合わせて `edit.js` を作成する手間が省ける。ただし、現時点ではリッチテキストエディタ（RichText）や高度なカラーピッカーなど、一部の複雑なコントロールはJS側での定義が必要な場合がある点には注意が必要だ。

実践例：カスタマイズ可能な価格表ブロックの構築

より実用的な例として、Web制作の現場で頻繁に求められる「価格表（料金テーブル）」ブロックをPHPのみで作成する手法を解説する。ここでは、WordPress標準のスタイル機能（色、間隔、タイポグラフィ）を統合する方法が重要となる。

get_block_wrapper_attributes によるネイティブ機能の統合

PHP-onlyブロックで最も強力な武器となるのが `get_block_wrapper_attributes()` 関数だ。この関数は、ユーザーがエディタのサイドバーで設定した背景色、文字色、パディング、マージンなどのスタイル情報をクラス名やインラインスタイルとして一括生成してくれる。これをメインの `div` タグに出力するだけで、自作ブロックがWordPressの標準デザインツールに完全対応する。

価格表ブロックのレンダリング設計

著者が提案する「Smart Pricing Widget」の例では、プラン名、価格、ボタンテキストなどの属性に加え、`supports` 配列で `color`, `spacing`, `typography`, `shadow`, `border` を有効にしている。これにより、エンジニアがCSSを細かく調整しなくても、運用者がエディタ上で自由に見た目をカスタマイズできるようになる。

function render_smart_pricing_block( $attributes ) {
    // 属性の取得
    $plan_name = esc_html( $attributes['planName'] );
    $price     = intval( $attributes['price'] );
    
    // スタイル属性の生成
    $wrapper_attributes = get_block_wrapper_attributes( array(
        'class' => 'my-pricing-card',
    ) );

    return sprintf(
        '<div %s>
            <h3>%s</h3>
            <div class="price">¥%d</div>
            <a href="#" class="btn">申し込む</a>
        </div>',
        $wrapper_attributes,
        $plan_name,
        $price
    );
}

PHPのみで作成され、エディタの色設定が反映される価格表ブロックのイメージ

既存のショートコードをブロックへ変換する方法

PHP-onlyブロックの最も現実的かつ即効性のある活用シーンは、古いサイトで多用されている「ショートコード」のブロック化だ。ショートコードは入力が煩雑でプレビューも困難だが、PHP-onlyブロックでラップすることで、直感的な操作感へとアップグレードできる。

ショートコードをラップするメリット

ショートコードをそのまま使い続けるのではなく、ブロックとして再定義することで、ユーザーは「`[my_shortcode type=”info”]`」のような文字列を打ち込む必要がなくなる。代わりに、サイドバーのドロップダウンから「情報」「警告」「エラー」を選択するだけで済むようになる。内部的には既存のショートコード関数を呼び出すため、ロジックを書き直す必要もない。

do_shortcode を使ったレンダリング手法

実装方法は非常にシンプルだ。ブロックの `render_callback` 内で、受け取った属性を基にショートコード文字列を組み立て、WordPress標準の `do_shortcode()` 関数に渡すだけである。記事によれば、これにより管理画面上でもショートコードの実行結果がリアルタイムにプレビューされ、編集体験が劇的に向上するという。

function render_shortcode_wrapper_block( $attributes ) {
    $type = esc_attr( $attributes['alertType'] );
    $msg  = esc_attr( $attributes['message'] );
    
    // 既存のショートコードを動的に生成
    $shortcode = sprintf( '[my_alert type="%s"]%s[/my_alert]', $type, $msg );
    
    return sprintf(
        '<div %s>%s</div>',
        get_block_wrapper_attributes(),
        do_shortcode( $shortcode )
    );
}

WordPress開発の未来とPHP-onlyブロックの立ち位置

PHP-onlyブロックは現在、非常に強力なツールとして進化を続けているが、すべてのJavaScript開発を置き換えるものではない。高度なインタラクションや、複雑な状態管理が必要なUI（例：ドラッグ＆ドロップを伴う高度なレイアウトエディタなど）には、依然としてReactによる開発が適している。

しかし、中小規模のWebサイト制作や、社内向けのカスタム機能の実装においては、PHP-onlyブロックで十分なケースが大半だ。著者も指摘するように、この機能は「ブロックエコシステムを、高度なJavaScriptを操る層以外にも広げる」ための重要な架け橋となるだろう。今後は、より多くの管理画面コントロールがPHPから定義可能になり、JSを書く必要性はさらに低下していくと予想される。

我々Web制作に携わる者にとって、技術の選択肢が増えることは歓迎すべきことだ。プロジェクトの予算、納期、そして保守を担当するチームのスキルセットに合わせて、ReactベースのブロックとPHP-onlyブロックを適切に使い分ける「ハイブリッドな開発スタイル」が、これからのスタンダードになると考えられる。

この記事のポイント

• React/Node.js不要: 複雑なビルド環境なしでカスタムブロックが作成可能。
• auto_registerフラグ: PHPで定義した属性から管理画面のUIを自動生成できる。
• 保守性の向上: PHPコード一箇所で定義と出力を管理でき、コードの可読性が高い。
• ショートコードの進化: 既存のショートコードを簡単に、プレビュー可能なブロックへ変換できる。
• ネイティブ機能の統合: `get_block_wrapper_attributes` でWordPress標準のスタイル設定に即座に対応可能。

出典

• Kinsta Blog「How to build PHP-only Gutenberg blocks」（2026年3月19日）

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp