Gutenbergブロック開発の基礎知識 — 制作者が押さえるべき5つのポイント

WordPress 5.0 以降、ブロックエディタ(Gutenberg)が標準エディタになりました。テーマやプラグインの開発者にとって、ブロック開発の知識は避けて通れないスキルです。本記事では、実務で役立つ5つの要点を解説します。

1. block.jsonを使ったブロック登録

WordPress 6.0以降、block.json ファイルでブロックのメタデータを宣言するのが標準的な方法です。名前、カテゴリ、属性、サポートする機能を1つのJSONファイルに集約でき、PHPとJavaScriptの両方から参照できます。register_block_type()にblock.jsonのパスを渡すだけでブロックが登録されるため、コード量も大幅に削減できます。

2. useBlockPropsを活用する

React側のコンポーネントでは useBlockProps() フックを使うことで、ブロックの属性やクラス名を自動的に適用できます。手動でclassNameを組み立てるよりも保守性が高く、テーマとの親和性も担保されます。エディタ上での見た目とフロントエンドの見た目を一致させるためにも、このフックの利用は必須と言えます。

3. InnerBlocksでネスト構造を実現

レイアウト系ブロック(セクション、カード等)を作る場合は InnerBlocks コンポーネントが必須です。allowedBlocksで挿入可能なブロックを制限すれば、クライアントの操作ミスも防げます。templateプロパティで初期構造を定義しておくと、ユーザーがゼロから組み立てる手間も省けます。

4. theme.jsonとの連携

ブロックのスタイルバリエーションやカラーパレットは theme.json で制御できます。CSSを直接書くのではなく、theme.jsonのデザイントークンを活用することで、サイト全体の統一感を維持しやすくなります。カスタムプロパティとして出力されるため、ブロック内のCSSからも参照可能です。

5. サーバーサイドレンダリング (SSR) の選択

動的なデータ(最新記事一覧など)を表示するブロックは、render_callback によるPHP側でのSSRが必要です。静的なレイアウト系ブロックとは設計アプローチが異なるので、用途に応じて使い分けましょう。SSRブロックはsave関数がnullを返し、フロントエンドの描画を完全にPHPに委ねます。

まとめ

ブロック開発は学習曲線がありますが、一度基礎を押さえればテーマ開発・プラグイン開発の両方で大きなアドバンテージになります。まずはblock.json + useBlockPropsの組み合わせから始めてみてください。公式ハンドブックとCreate Block Toolの活用も忘れずに。

WordPress制作を、もっと速く。

1案件で元が取れる投資を、今すぐ。

今すぐ導入する

買い切り ¥7,800(税込)・サイト数無制限・受託OK