WordPressで自作ブロックを作るとき、まずは最小構成で動くブロックを作って全体像を理解することが大切です。この記事では、block.jsonを中心に、editとrenderの役割やファイル構成までを丁寧に解説します。
最小ブロックを作るという考え方
Gutenbergブロックは、一見複雑に見えますが、本質はシンプルです。以下の3つの役割を押さえることで、ブロック開発の基本が理解できます。
- block.json：ブロックの設計図
- edit.js：編集画面（UI）
- render.php：フロント表示（HTML出力）
これらを分離して考えることが、Gutenberg開発の基本です。
最小ブロックのファイル構成
まずは今回作成した最小ブロックのファイル構成を示します。
wp-content/themes/f-obachan/
├ functions.php
├ libs/
│ └ create_original_blocks.php
└ blocks/
└ test-block/
├ block.json
├ edit.js
└ render.php
このように、オリジナルブロックはテーマフォルダの中にまとめて配置します。
block.json の役割と中身
block.json はブロックの設計図です。ブロック名、カテゴリー、属性（attributes）、読み込むスクリプト、フロント表示用ファイルなどを定義します。WordPressはこれを読み込んでブロックを登録します。
{
"apiVersion": 2,
"name": "foblocks/test-block",
"title": "テストブロック",
"category": "widgets",
"icon": "smiley",
"description": "自作ブロックの最小構成テストです。",
"attributes": {
"message": {
"type": "string",
"default": ""
}
},
"editorScript": "file:./edit.js",
"render": "file:./render.php"
}ここでは、次のような内容を定義しています。
- name：ブロックの一意識別子（namespace/slug形式）
- title：管理画面で表示される名前
- category：ブロックカテゴリ
- attributes：編集データの状態設計
- editorScript：編集画面用スクリプト
- render：フロント表示用PHP
edit.js の役割と中身
edit.js は、管理画面の編集UIを定義します。ここで入力された内容がattributes（状態）として保存されます。
(function (blocks, element, components) {
const el = element.createElement;
const TextControl = components.TextControl;
blocks.registerBlockType('foblocks/test-block', {
edit: function (props) {
const { attributes, setAttributes } = props;
return el(
'div',
{},
el(TextControl, {
label: 'メッセージ',
value: attributes.message,
onChange: function (value) {
setAttributes({ message: value });
}
})
);
}
});
})(
window.wp.blocks,
window.wp.element,
window.wp.components
);
このコードでは、TextControl を使用してユーザー入力を受け取り、setAttributes で状態を更新しています。
今回は build（ビルド）をしていません
通常、Gutenbergブロック開発では @wordpress/scripts を使い、React（JSX）で記述してビルド（トランスパイル）を行います。しかし今回の最小構成では、あえてビルド工程を使っていません。
その理由は、ブロックの仕組みを理解することを最優先にしているからです。
- Node環境の準備が不要
- webpackやBabelの理解が不要
- 仕組みを純粋に理解できる
今回のedit.jsは、WordPressがすでに読み込んでいる window.wp.blocks や window.wp.element を直接利用しています。そのため、ビルドなしでも動作します。
実務レベルの開発ではビルド環境を使うことが一般的ですが、まずは「ブロックがどう登録され、どう動いているのか」を理解することが重要です。
最小構成で仕組みを理解したあとに、React + ビルド環境へ進むと、構造がクリアに見えるようになります。
render.php の役割と中身
render.php はフロント表示を担当します。保存された attributes を受け取り、HTMLを生成します。
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
$message = isset( $attributes['message'] ) ? $attributes['message'] : '';
if ( $message ) {
echo '<p>' . esc_html( $message ) . '</p>';
}ここでは、attributesの「message」を受け取り、存在する場合にHTMLとして出力しています。
create_original_blocks.php の中身
次に、ブロックをWordPressに登録するPHPファイルを見てみましょう。functions.phpから読み込む形にしています。
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* オリジナルブロックを登録する
*/
function foblocks_register_blocks() {
register_block_type( __DIR__ . '/../blocks/test-block' );
}
add_action( 'init', 'foblocks_register_blocks' );register_block_type() に block.json のあるディレクトリ を指定するだけで、WordPressがblock.jsonを読み込んで必要な処理を行います。
functions.phpでは、次のように読み込んでいます。
<?php
require_once get_template_directory() . '/libs/create_original_blocks.php';この読み込みによって、initフック時にブロックが登録されます。
attributes とは「ブロックの状態」
attributes は、ブロックが保存する「状態」を定義する場所です。今回は message という文字列のみですが、複数の状態を定義することができます。
- 入力値（URLやテキストなど）
- 取得データ（将来的にOGPのタイトルや画像など）
- 表示フラグ（ハイライトON/OFFなど）
attributes に保存された状態は、render.php に渡されて表示に使われます。これが「取得と表示は分離される」という設計です。
まとめ
ここまでで、Gutenbergブロックの最小構成と、各ファイルの役割を理解することができました。block.json が設計図となり、edit.js で状態を編集し、render.php で表示を生成する流れが把握できるはずです。
次回は、ここに外部OGP取得などの機能を追加していく準備として、REST APIを使った実装設計に進んでいきます。