WordPressのブロックエディタ（Gutenberg）では、静的なコンテンツだけでなく、PHPで処理した動的なデータをブロック内に表示することも可能です。この記事では、Block APIの render_callback を活用して、投稿情報やカスタムフィールド、外部APIから取得したデータをブロックに埋め込む方法を解説します。
サーバーサイドレンダリングとは
通常のGutenbergブロックはJavaScriptでレンダリングされる「静的ブロック」ですが、サーバーサイドレンダリングを活用すると、PHPで処理した内容をそのままブロックとして出力できます。これにより、最新の投稿情報やカスタムフィールドの値など、リアルタイムに変化する情報も扱えます。
ブロックの登録処理（PHP側）
以下のように、register_block_type() 関数を使ってPHP側でブロックを登録し、render_callback を指定します。
// functions.php またはプラグインファイル内
function register_dynamic_block() {
register_block_type( __DIR__ . '/my-block', array(
'render_callback' => 'render_dynamic_block',
));
}
add_action( 'init', 'register_dynamic_block' );
function render_dynamic_block( $attributes, $content ) {
$latest_post = get_posts( array(
'numberposts' => 1,
'post_type' => 'post'
) );
if ( empty( $latest_post ) ) return '投稿が見つかりませんでした。
';
$post = $latest_post[0];
$title = esc_html( $post->post_title );
$link = get_permalink( $post->ID );
return "<div class='latest-post'><a href='{$link}'>最新記事: {$title}</a></div>";
}
ブロックのメタ情報とJSファイル
my-block/block.json には以下のように記述します。editorScript は必要に応じてエディターUIを設定しますが、出力はPHPで行われます。
{
"apiVersion": 2,
"name": "mytheme/dynamic-latest-post",
"title": "最新記事（動的）",
"category": "widgets",
"icon": "megaphone",
"description": "最新の投稿タイトルを動的に表示します。",
"editorScript": "file:./index.js",
"supports": {
"html": false
}
}
JavaScript側の最小コード
index.js では、特別なUIを設けない場合、registerBlockType() で空の edit 関数と save: null を定義します。
import { registerBlockType } from '@wordpress/blocks';
registerBlockType('mytheme/dynamic-latest-post', {
edit: () => {
return '最新記事を表示（フロントで確認）';
},
save: () => null, // サーバー側で出力するためJSでは保存しない
});
出力結果の例
ブロックを設置したページをフロントエンドで表示すると、以下のように動的な内容が出力されます。
<div class="latest-post">
<a href="https://example.com/post-slug">最新記事: サンプル記事タイトル</a>
</div>
まとめ
Block APIのrender_callbackを活用すれば、最新記事・カスタムフィールド・ログイン情報などをリアルタイムで反映できる強力なカスタムブロックが実装可能です。情報の自動更新や複雑なロジックを必要とするブロック設計において、PHPとJSをうまく組み合わせて動的出力を行うのがベストプラクティスです。
