Gutenberg（ブロックエディタ）の登場により、WordPressのコンテンツ編集体験は大きく変化しました。従来のショートコードやメタボックスでは難しかった柔軟なUIを、ブロックを使うことで実現できます。この記事では、Block APIを活用してオリジナルのカスタムブロックをゼロから作成する方法を解説します。
Gutenbergカスタムブロックとは？
カスタムブロックとは、Gutenbergエディタ内で利用できる独自のブロック要素です。テキスト・画像・動画といった汎用的なブロックだけでなく、用途に応じた構造化コンテンツ（例：料金表、レビュー枠、CTAボックスなど）を簡単に作成・編集できます。
開発に必要な準備
カスタムブロックを作成するには、JavaScriptベースのモダンな開発環境が必要です。以下の環境を整えておきましょう。
- Node.js（現在のLTS版を推奨。v14は2023年4月にサポート終了しているため使用しないでください）
- npm または yarn
- WordPress 5.0 以上（ブロックエディタ対応）
@wordpress/create-blockで簡単にスタート
WordPress公式が提供するCLIツール@wordpress/create-blockを使えば、カスタムブロックのひな型を簡単に生成できます。
npx @wordpress/create-block my-custom-block
コマンドを実行すると、必要なファイルが自動生成され、すぐに開発を開始できます。my-custom-blockは任意のブロック名に置き換えてください。
エディタ側の表示を編集（edit関数）
src/edit.jsでは、ブロックエディタ上に表示されるUIを定義します。以下はシンプルなテキスト入力の例です。
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
return (
<div {...useBlockProps()}>
<TextControl
label="入力テキスト"
value={attributes.message}
onChange={(value) => setAttributes({ message: value })}
/>
</div>
);
}
フロント側の出力を定義（save関数）
src/save.jsには、実際に保存されるHTMLの構造を記述します。
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
return (
<div {...useBlockProps.save()}>
<p>{attributes.message}</p>
</div>
);
}
属性（attributes）の定義とスクリプトの紐付け
block.jsonでブロックの属性やメタ情報を定義します。たとえば、以下のようにテキスト属性を持つ定義が可能です。
{
"apiVersion": 3,
"name": "myplugin/my-custom-block",
"title": "カスタムメッセージ",
"category": "text",
"attributes": {
"message": {
"type": "string",
"default": "こんにちは、WordPress！"
}
},
"editorScript": "file:./index.js"
}
block.jsonは
editorScript・script・viewScriptなどスクリプトのハンドル（ファイル）を指定するプロパティは持ちますが、editやsaveを直接ファイルパスとして指定するプロパティは存在しません（WordPress公式リファレンスで確認）。edit・save関数を実際に紐付けるには、editorScriptで指定したJSファイル（下記のsrc/index.js）の中でregisterBlockType()にedit・saveをオブジェクトとして渡す必要があります。src/index.jsで、block.jsonのメタデータとedit・save関数を結びつけます。
import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import save from './save';
import metadata from './block.json';
registerBlockType(metadata.name, {
edit: Edit,
save,
});
ビルドと有効化
生成されたブロックを有効化するには、以下のコマンドでビルドを行い、WordPressのプラグインとして有効にします。
npm run build
その後、WordPressの管理画面「プラグイン」からMy Custom Blockを有効化してください。
よくある質問（FAQ）
まとめ
Gutenbergのカスタムブロックを導入することで、従来よりも表現力が高く、ユーザーにとって直感的な編集体験を提供できます。@wordpress/create-blockを活用すれば、最小構成で効率よく開発をスタートできます。さらに発展的な応用として、動的ブロックやServer Side Rendering（SSR）対応も可能です。
今後のWordPress開発において、ブロックベースの設計はますます重要になります。ぜひ本記事を参考に、オリジナルのGutenbergブロック作成に挑戦してみてください。
