スタティックブロックをダイナミックブロックに変更するときのメモ

Googleマップを埋め込むカスタムブロックを作っている際、APIキーの取り扱いに少し困ってしまい、ほぼ完成していたスタティックブロックを修正し、ダイナミックブロックに変更した。ここでは変更箇所を少なくできるようポイントを整理していく。

ダイナミックブロックの実装方法は2つある

ダイナミックブロックはそのブロックを含んだ投稿が表示されるタイミングで、ブロックの表示内容を生成するブロックである。ダイナミックブロックを実装する方法は次の2つ。

• register_block_type関数の追加パラメータに、ブロックの表示内容を生成するコールバック関数を指定する。
• block.jsonファイルのrenderプロパティに、ブロックの表示内容を直接出力するPHPファイルを指定する。

今回は変更箇所を少なくしたかった（ブロック登録関連を変更したくなかった）ので、後者を採用することにした。

block.jsonのrenderプロパティ

まずはblock.jsonファイルを開き、末尾側に赤字の部分を追加する。

:
	"viewScript": "file:./view.js",
	"render": "file:./render.php"
}

ここではrenderプロパティにPHPファイルの相対パス名として「render.php」を指定している。このファイル名は決まったものではなく、自分がわかりやすい名前でかまわない。

block.jsonファイルを保存する。

block.jsonと同じディレクトリにrender.phpを

次はrender.phpを作成。このファイルは、block.jsonファイルと同じディレクトリに配置する（別ディレクトリの場合は上記renderプロパティを変更）。このPHPファイルの中身は次のような感じになる。

<?php
/**
 * @var array    $attributes
 * @var string   $content
 * @var WP_Block $block
 */

$wrapper_attributes = get_block_wrapper_attributes();
?>
<div <?php echo $wrapper_attributes; ?>>

<!-- ここにブロックの表示内容 -->

</div>

そのブロックを表示するための情報としては、次の変数を参照する。

• $attributes
  block.jsonのattributesプロパティやsupportプロパティの保存内容
• $content
  保存されたコンテンツ（InnerBlocks使用時など）
• $block
  ブロック情報

その中でも変数$attributesが重要で、キーはblock.jsonのattributesプロパティとほぼ同じだが、supportプロパティに指定によってはそれらも追加される。具体的には、alignを指定している場合にはそれも含まれる。

render.phpに表示内容を記述したら保存する。

index.jsのsave関連

最後にブロックの本体であるindex.jsを修正する。青字の部分は不要になるので削除する。これはこのブロックが小要素を含まない（InnerBlocks未使用の）場合の対応であり、ブロックによっては修正する必要はない（というか、してはいけない）。

:

import Edit from './edit';
import save from './save';
import metadata from './block.json';

:

	/**
	 * @see ./save.js
	 */
	save,
} );

index.jsの修正が終わったら、保存してビルドする。

npm run build

buildディレクトリと表示内容の確認

ビルドが終わったら、まずrender.phpファイルがbuildディレクトリ以下にコピーされていることを確認する。render.phpファイルは、ビルドによって内容が書き変わるものではないが、タイムスタンプはビルドされた日時に更新される。

投稿編集画面に移り、ブロックを含んだ投稿を更新。「投稿を表示」ボタンをクリックして、ブロックの表示内容を確認する。

block.jsonのrenderプロパティを使ったダイナミックブロックへの対応は以上の通りで、変更箇所はいたってシンプルだ。

ダイナミックブロックは、表示内容をアップデートする際、edit.jsとrender.phpファイルの更新内容をきちんと同期していく必要がある。場合によっては、REST APIを使ってPHP側で生成した内容をedit.jsで表示される仕組みを考えてもいいかもしれない。

あとrender.phpファイルを修正する際に、buildディレクトリ側のファイルを誤って変更したり、srcディレクトリ側を修正しても再ビルドし忘れたりといったケアレスミスは注意したい。