【WordPress 7.0以降】JS（React）不要！PHPのみでカスタムブロックを作成する方法
WordPress 7.0から導入された新機能「PHPのみのブロック登録（PHP-only block registration）」では、設定に autoRegister を指定するだけで、JavaScriptやReactのビルド環境（npmなど）を構築することなく、PHPだけでカスタムブロックを作成できます。
従来の仕様ではカスタムブロックの登録にJavaScriptとビルド環境が必要でしたが、WordPress 7.0からはPHP側の設定に『 "autoRegister" => true 』というプロパティを1行追加するだけで、システム側で自動的に登録処理が行われるようになります。
この autoRegister設定を利用すれば、JSファイルやblock.jsonを用意する必要はありません。完全にPHPコードのみでカスタムブロックの登録ができ、functions.php の記述だけで管理画面（サイドバー）の設定UIまで自動生成されます。
実装手順は、有効化しているテーマの functions.php または自作プラグインに登録用のコードを記述するだけのシンプルな構成となります。
仕様上の特徴
ここでご紹介する手法で作成するカスタムブロックは、データの入力や設定のすべてを画面右側のサイドバー（設定パネル）で行う仕様となります。
画面中央のエディター上で直接文字を入力したり、直感的に操作したりすることはできません。中央のエディター側でインライン編集やツールバー操作を実現するには、本来はJavaScript（React）を用いた RichText コンポーネントなどの実装が必要になるためです。
今回の機能ではそうしたフロントエンドの実装を省略する代わりに、サイドバーの自動生成UIに操作を委ね、中央のエディターにはその出力結果がプレビューとして表示される仕組みをとっています。
そのため、中央のエディターで文章を細かく書き換えるようなレイアウト目的には向きませんが、サイドバーで選択した条件に応じてPHP側でデータを処理し、出力を制御するブロックには最適です。
PHPのみでカスタムブロックを作成（基本）
まずは、シンプルな構成でブロックを認識させるための基本コードを見てみます。
functions.php は記述ミスがあるとサイトが表示されなくなる（画面が真っ白になる）恐れがある重要なファイルです。作業を始める前に必ずファイルのバックアップを保存してください。 また、安全のためテスト環境での作業を推奨します。
以下のPHPコードをテーマの functions.php に追記します。
functions.php
function my_register_php_block() {
// ブロックを登録
register_block_type( 'my-plugin/my-custom-block', array(
'title' => __( 'カスタムブロック（PHP）', 'text-domain' ),
'category' => 'widgets',
'icon' => 'smiley', // 管理画面で表示されるDashicon
// 【重要】WordPress 7.0でJSなし登録を有効化する必須フラグ
'supports' => array(
'autoRegister' => true,
),
'render_callback' => 'my_custom_block_render_callback', // 出力内容を処理する関数
) );
}
add_action( 'init', 'my_register_php_block' );
// ブロックのフロントエンドおよびエディターでの出力内容
function my_custom_block_render_callback( $attributes, $content ) {
// WordPress標準のブロック用属性（wp-block-xxx クラスなど）を自動生成
$wrapper_attributes = get_block_wrapper_attributes( array(
'class' => 'my-custom-block-wrap'
) );
// %s の部分に自動生成された属性が展開されます
return sprintf(
'<div %s>
<h2>PHPだけで作成したカスタムブロック</h2>
<p>WordPress 7.0の機能を利用して、PHPのみで出力結果を制御しています。</p>
</div>',
$wrapper_attributes
);
}register_block_type は、カスタムブロックをWordPressシステムに登録するための主要関数です。第1引数には固有のブロック名を指定し、第2引数の配列でブロックの挙動や設定を定義します。この登録処理はWordPressの初期化時に行う必要があるため、add_action( 'init', ... ) を使ってinitアクションフックのタイミングで実行します。
配列内の 'supports' に記述された 'autoRegister' => true は、WordPress 7.0以降における最大のポイントとなる設定です。このフラグを指定するだけで、従来必須だったJavaScriptによるエディター側への登録処理をシステムが自動で行うようになります。これでblock.jsonや外部のJavaScriptファイルを用意することなく、PHPコードのみでエディター上にブロックを追加できます。
render_callback では、ブロックの出力内容を制御するコールバック関数を指定します。この関数には、サイドバーでの入力値が格納される $attributes と、内部に配置された別ブロックのデータが格納される $content の2つの引数が渡されます。関数内では直接 echo で出力せず、最終的なHTMLを文字列として return するのがWordPressの仕様です。
関数内で使われている get_block_wrapper_attributes は、エディターが自動付与する共通クラスや配置設定を含んだ属性文字列を生成する関数です。引数に配列を渡すことで、独自のカスタムクラス（my-custom-block-wrap）を簡単に追加できます。この生成された属性文字列を、sprintf関数を使ってHTML開始タグの %s 部分に流し込むことで、WordPressの仕様に合った正しいマークアップが出力されます。
PHPのみの登録方法では、仕様上、メディアライブラリからの画像選択など複雑なユーザーインターフェース（UI）をインライン（画面中央）で構築するのは難しいため、シンプルな定型コンテンツに向いています。基本的には入力や設定はすべて右側のサイドバーで行い、中央のエディターにはその結果を反映したHTMLをプレビュー表示させるという、動的なパーツや定型ボックスの作成に適しています。
これだとサイドバーに設定がなく使い勝手が悪いので、もう少し設定などを追加した、業務レベルで活用できそうなカスタムブロックのサンプルをご紹介します。
実用的な「補足説明ボックス」の作成（設定パネル＋デザイン適用）
PHPのみのブロック登録機能では、attributes の中に label や type を定義するだけで、設定パネル（サイドバー）のUIが自動生成され、デザインの切り替えやテキスト入力をJSなしで実装できます。
実用的な「シンプル補足ボックス」を例に、設定パネルの追加方法と具体的なデザインの適用方法（CSSの連携） の両方を組み合わせたコードをご紹介します。
以下のコードをテーマの functions.php に記述します。
functions.php
// シンプルな補足説明ボックス
function my_register_simple_alert_block() {
register_block_type( 'my-plugin/simple-alert', array(
'title' => __( 'シンプル補足ボックス', 'text-domain' ),
'category' => 'text',
'icon' => 'info',
// 【重要】WordPress 7.0でPHPのみで登録するためのフラグ
'supports' => array(
'autoRegister' => true,
),
// 入力項目は「テキスト」と「色」の2つ
'attributes' => array(
'alert_text' => array(
'type' => 'string',
'label' => __( '補足テキストを入力（HTML・brタグ対応）', 'text-domain' ),
'default' => 'ここに補足や注意書きテキストを入力します。',
),
'alert_color' => array(
'type' => 'string',
'label' => __( 'ボックスの色', 'text-domain' ),
'default' => 'blue',
'enum' => array( 'blue', 'orange', 'green' ), // 3色から選べる（ドロップダウンを自動生成）
),
),
'style' => 'my-simple-alert-style',
'render_callback' => 'my_simple_alert_render_callback',
) );
// CSSファイルをWordPressに登録
wp_register_style(
'my-simple-alert-style',
get_stylesheet_directory_uri() . '/assets/css/simple-alert-style.css',
array(),
'1.0.0'
);
}
add_action( 'init', 'my_register_simple_alert_block' );
// 画面への出力処理
function my_simple_alert_render_callback( $attributes, $content ) {
$raw_text = isset($attributes['alert_text']) ? $attributes['alert_text'] : '';
$color = isset($attributes['alert_color']) ? esc_attr($attributes['alert_color']) : 'blue';
// 許可するHTMLタグと属性を細かく指定する（target="_blank" も消されず使えます）
$allowed_html = array(
'br' => array(), // <br> を許可
'strong' => array(), // <strong> を許可
'b' => array(), // <b> を許可
'a' => array( // <a> タグと属性を許可
'href' => true,
'target' => true,
'rel' => true,
),
);
// 安全性を保ちつつ、リンクや改行をフル活用できるようにエスケープ
$text = wp_kses( $raw_text, $allowed_html );
// 外枠の属性（クラス名など）を自動生成
$wrapper_attributes = get_block_wrapper_attributes( array(
'class' => 'simple-alert-box alert-color-' . $color
) );
return sprintf(
'<div %s>
<div class="simple-alert-content">%s</div>
</div>',
$wrapper_attributes,
$text
);
}
このコードでは、サイドバーに設定UIを自動生成させるためにattributes配列を使用しています。
attributes内に定義した alert_text と alert_color が、ブロックが保持するデータの属性となります。特に alert_color の設定内にある 'enum' に配列で選択肢を指定すると、WordPressのシステムがそれを検知し、サイドバーにドロップダウンメニューのUIを自動的に生成します。また、'style' => 'my-simple-alert-style' で登録済みのスタイル名を紐付けることで、エディター上とフロントエンドの両方に共通のCSSが自動で読み込まれるようになります。
出力処理をするmy_simple_alert_render_callback関数内では、まず三項演算子を使って各属性のデータを取り出します。サイドバーでテキストに入力されたHTMLタグやリンク（<a>タグの target="_blank" など）を安全かつ有効に機能させるため、wp_kses関数を使って許可する要素を細かくフィルタリングしています。この処理を挟むことで、セキュリティ（XSS対策）を維持したまま、テキスト内での自由な改行やリンク挿入に対応できます。
最後に get_block_wrapper_attributes を使い、選択された色に応じたクラス名（alert-color-blue など）を動的に追加した属性文字列を生成します。これを sprintf関数で外枠の<div>タグに流し込むことで、ユーザーの選択に連動してデザインが切り替わる仕組みになっています。
デザインの適用方法
上記のコードで指定した simple-alert-style.css を、テーマフォルダ内の指定の場所に作成して保存します。このファイルを作成すれば、管理画面のエディターと実際のサイト両方にデザインがそのまま反映されます。
📁 CSSファイルの管理・配置
テーマフォルダ/
┗ assets/
┗ css/ ➔ ここに simple-alert-style.css を配置
以下、CSSのサンプルコードになります。
CSS（assets/css/simple-alert-style.css）
/* ブロックの基本スタイル */
.simple-alert-box {
padding: 0.875rem 1.25rem;
border-radius: 6px;
margin-bottom: 1.25rem;
font-size: 0.95rem;
line-height: 1.6;
}
/* blueを選んだとき */
.alert-color-blue {
background-color: #f0f6fc;
border-left: 4px solid #007cba;
color: #1a365d;
}
/* orangeを選んだとき */
.alert-color-orange {
background-color: #fff9e6;
border-left: 4px solid #dba617;
color: #4a3705;
}
/* greenを選んだとき */
.alert-color-green {
background-color: #edfae1;
border-left: 4px solid #46b450;
color: #1b481f;
}
共通クラスである .simple-alert-box では、内側の余白（padding）や角丸（border-radius）、ブロック下部の余白（margin-bottom）といった、すべての色で共通となるスタイルを定義しています。
各カラー用のクラス（.alert-color-blue など）は、PHP側の get_block_wrapper_attributes によって選択された色に応じて動的に付与されます。それぞれのクラスの中で、背景色（background-color）、ボックス左側のアクセント線（border-left）、および文字色（color）を個別に指定することで、サイドバーのドロップダウンの選択と完全に連動したデザインの切り替えを実現しています。
サイドバーで改行やリンクを有効にするコード
PHPのみで登録する仕様では、サイドバーの入力欄は基本的に1行のテキストボックス（<input>）として生成されます。そのため、Enterキーによる直接的な改行は行えません。
そこで、最も手軽かつ柔軟に入力をコントロールする手段として、サイドバー内に直接HTMLタグを打ち込んでもらう方法を導入しています。
セキュリティと出力関数
通常の文章を出力する esc_html()関数を使用していると、入力された <br> はそのまま画面に文字列として表示されてしまいます。
// NG例1：これだと <br> がそのまま文字で出てしまう
$text = isset($attributes['alert_text']) ? esc_html( $attributes['alert_text'] ) : '';
また、WordPress標準の便利なセキュリティ関数である wp_kses_post() を使えば <br> や <a> タグは有効になりますが、ブログ記事などでよく使う、リンクを新しいタブで開く target="_blank" という属性がセキュリティ仕様によって強制的に消去されてしまうという別の問題が発生します。
// NG例2：<br> やリンクは効くが、target="_blank" が自動消去されてしまう
$text = isset($attributes['alert_text']) ? wp_kses_post( $attributes['alert_text'] ) : '';
そのため、今回は以下の手順で wp_kses() を使用し、安全性を完全に担保しつつ、特定の装飾用HTMLや属性をフルに生かす設計にしています。
- 許可するタグのホワイトリスト化
br（改行）、strong / b（太字）、解釈させたい target や rel 属性を含めた a（リンク）のみをホワイトリストで明示します。 wp_kses()の適用
不正なスクリプトを徹底的に除外しつつ、許可された装飾タグ・属性だけを残して安全なHTMLとしてページに出力します。
実際の使い方（運用イメージ）
実装完了後、投稿画面のブロックエディタ（＋ボタン）から「シンプル補足ボックス」を挿入すると、画面右側のサイドバーに設定用の入力欄が出現します。用意されている項目は、文章を打ち込むための「補足テキストを入力」欄と、ドロップダウンメニューから「blue / orange / green」の3色を選択できる「ボックスの色」欄の2つになります。
サイドバーのテキスト入力欄は、通常のプレーンテキストだけでなく、以下のようにHTMLタグを組み合わせた記述にも対応しています。
【限定イベント開催決定！】<br>来月、ファン感謝祭のオンラインセミナーを開催します！<br>参加方法やスケジュールの詳細は <strong><a href="https://example.com" target="_blank">こちら</a></strong> をご覧ください。このようにタグを記述すると、指定した位置で正しく改行が適用され、「こちら」という文字だけが新しいタブで開くリンクとして画面上に反映されます。サイドバーのドロップダウンから色を変更した場合も、編集画面と実際の公開サイトの両方で、指定した背景色と枠線へと瞬時に切り替わります。
以下、実装後の表示になります。
実際の運用にあたっては、ブルーは通常の補足説明や豆知識、オレンジは見落としてほしくない注意事項、グリーンはイベントやセミナーの告知案内、といった形で用途ごとに色を使い分けることで、記事の読みやすさを大きく向上させることができます。
他にはどんなブロックが作れる？
今回はシンプル補足ボックスを例に解説しましたが、このPHPのみのブロック登録は、中央のエディタで文章を細かく書き換えるようなレイアウト目的には向かない反面、サイドバーで選択した条件に応じてPHP側でデータを処理し、出力を制御するブロックには最適です。
具体的には、以下のようなパーツや機能を構築する際に適しています。
- 最新記事の一覧表示
サイドバーにドロップダウン（enum）や数値入力（integer）のUIを自動生成させ、そこで選択された「特定のカテゴリー」や「表示件数」の条件をもとに、PHP（WP_Query 等）で動的に記事リストを取得して出力するブロックです。 - 要素の表示・非表示切り替え（トグルスイッチ）
真偽値（boolean）の設定を利用してサイドバーにON/OFFスイッチを配置し、お知らせの「アイコンの有無」や「期限付きバッジの表示非表示」を切り替えるコントロールが簡単に行えます。 - デザインパターンの切り替え
今回のサンプルと同様に、サイドバーでスタイル（色や枠線の種類など）をポチポチと選ぶだけで、あらかじめ用意しておいた複数のCSSデザインパターンを瞬時に切り替える定型バナーや案内ボックスなどにも応用可能です。
JavaScriptを一切使わず、PHPの関数を使って裏側でデータを安全・自由に加工できるため、工夫次第でさまざまな動的ブロックを手軽に量産できるようになります。
まとめ
WordPress 7.0以降で利用可能になったPHPのみのブロック登録は、従来のブロック開発で最大の障壁だったJavaScript（React）の実装やビルド環境の構築を省略できる、非常に便利な機能です。
画面中央での高度なインライン編集ができないという仕様上の割り切りは必要ですが、設定をすべてサイドバー（設定パネル）に集約することで、functions.php とCSSだけで実用的なカスタムブロックを手軽に作成できるようになります。
これまで、環境構築が面倒でカスタムブロックの開発に踏み切れなかったという方は、まずは今回のシンプル補足ボックスのような手軽なパーツから、ぜひ自作ブロックの開発を試してみてください。
