いよいよ自作ブロック学習のDay1です。今日はコードを書く日ではなく、ブロックの仕組みを理解する日にしました。
これまで私は、「ブロック＝HTMLが保存されるもの」だと思っていました。でも実際は違いました。
ブロックの正体はHTMLではない
Gutenbergブロックは、見た目のHTMLをそのまま保存しているわけではありません。
実際に投稿データに保存されているのは、次のようなコメント形式のデータです。
<!-- wp:my/link-card {"url":"https://example.com","label":"あわせて読みたい"} /-->ここに保存されているのはJSON形式のデータです。HTMLそのものではなく、「どう表示するかのための情報」が記録されています。
保存されているのは attributes
ブロックで入力したテキストやURLは、attributes（属性）として保存されます。
つまり、保存されているのは「見た目」ではなく「設定値」です。
dynamic blockの場合、最終的なHTMLは表示時にPHPによって生成されます。
editとrenderの役割
ここで重要なのが、editとrenderの役割の違いです。
- edit：管理画面での入力UIを作る（React）
- render：フロント側でHTMLを生成する（PHP）
この流れを図にすると、次のようになります。
edit → JSON保存 → render → HTML生成「save.jsがなくてもブロックが表示できる理由」も、ここを理解すると腑に落ちました。
今日の気づき
ブロックは「HTMLを保存する仕組み」ではなく、設計と表示ルールを分離する仕組みでした。
だからこそ、後からデザインを変更しても柔軟に対応できるし、OGP取得のような動的処理も可能になるのだと理解しました。
まとめ
Day1では、ブロックの正体を知ることができました。
ブロックはHTMLではない。保存されているのはJSONデータ。
次回は、実際にblock.jsonを書いて最小ブロックを作ってみます。