Gutenberg（ブロックエディタ）の登場により、WordPressのコンテンツ編集体験は大きく変化しました。従来のショートコードやメタボックスでは難しかった柔軟なUIを、ブロックを使うことで実現できます。この記事では、Block APIを活用してオリジナルのカスタムブロックをゼロから作成する方法を解説します。
Gutenbergカスタムブロックとは？
カスタムブロックとは、Gutenbergエディタ内で利用できる独自のブロック要素です。テキスト・画像・動画といった汎用的なブロックだけでなく、用途に応じた構造化コンテンツ（例：料金表、レビュー枠、CTAボックスなど）を簡単に作成・編集できます。
開発に必要な準備
カスタムブロックを作成するには、JavaScriptベースのモダンな開発環境が必要です。以下の環境を整えておきましょう。
- Node.js（v14以上を推奨）
- 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": 2,
"name": "myplugin/my-custom-block",
"title": "カスタムメッセージ",
"category": "common",
"attributes": {
"message": {
"type": "string",
"default": "こんにちは、WordPress！"
}
},
"edit": "src/edit.js",
"save": "src/save.js"
}ビルドと有効化
生成されたブロックを有効化するには、以下のコマンドでビルドを行い、WordPressのプラグインとして有効にします。
npm run buildその後、WordPressの管理画面「プラグイン」から My Custom Block を有効化してください。
まとめ
Gutenbergのカスタムブロックを導入することで、従来よりも表現力が高く、ユーザーにとって直感的な編集体験を提供できます。@wordpress/create-blockを活用すれば、最小構成で効率よく開発をスタートできます。さらに発展的な応用として、動的ブロックやServer Side Rendering（SSR）対応も可能です。
今後のWordPress開発において、ブロックベースの設計はますます重要になります。ぜひ本記事を参考に、オリジナルのGutenbergブロック作成に挑戦してみてください。
