応用編
🧩 Gutenbergブロック開発
WordPressのブロックエディタ（Gutenberg）用のカスタムブロックを作成します。React/JSXを使って、編集画面と表示画面をそれぞれ実装する方法を学びましょう。
🧩 Gutenbergとカスタムブロックとは
Gutenbergとは、WordPress 5.0から導入されたブロックエディタです。段落・画像・見出しなどの「ブロック」を組み合わせて記事を作成します。プラグインで独自のカスタムブロックを追加することで、ユーザーが簡単に複雑なレイアウトを作れるようになります。
💡 カスタムブロックでできること
- アラートボックス、料金表、タイムラインなど独自UIを提供
- 管理画面での見た目をフロントエンドに近づけられる
- ショートコードより直感的に使えるコンテンツ部品を作れる
🛠️ 開発環境の準備
Gutenbergブロックの開発にはNode.jsとnpmが必要です。@wordpress/create-blockを使うと、ひな型を自動生成できます。
# Node.js（v16以上）とnpmをインストール後
# ブロックのひな型を生成（プラグインフォルダで実行）
npx @wordpress/create-block my-alert-block
# 生成されたフォルダに移動
cd my-alert-block
# 開発サーバーを起動（ファイル変更を自動ビルド）
npm start
# 本番用ビルド
npm run build
💡 生成されるファイル構成
src/edit.js（編集画面）、src/save.js（保存HTML）、src/block.json（ブロック設定）の3ファイルが中心です。
📄 ブロックの基本構成
block.json — ブロックの設定ファイル
{
"apiVersion": 2,
"name": "mfp/alert-block",
"title": "アラートボックス",
"category": "text",
"icon": "warning",
"description": "目立つアラートボックスを挿入します",
"textdomain": "my-alert-block",
"attributes": {
"message": {
"type": "string",
"default": "ここにメッセージを入力してください"
},
"alertType": {
"type": "string",
"default": "info"
}
},
"editorScript": "file:./index.js",
"style": "file:./style-index.css"
}
edit.js — 編集画面の実装
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
export default function Edit( { attributes, setAttributes } ) {
const { message, alertType } = attributes;
const blockProps = useBlockProps();
return (
<>
{/* サイドバーのコントロール */}
<InspectorControls>
<PanelBody title="アラート設定">
<SelectControl
label="種類"
value={ alertType }
options={[
{ label: '情報', value: 'info' },
{ label: '警告', value: 'warning' },
{ label: 'エラー', value: 'error' },
]}
onChange={ val => setAttributes({ alertType: val }) }
/>
</PanelBody>
</InspectorControls>
{/* 編集画面のプレビュー */}
<div { ...blockProps } className={ `alert-box alert-${ alertType }` }>
<RichText
tagName="p"
value={ message }
onChange={ val => setAttributes({ message: val }) }
placeholder="メッセージを入力..."
/>
</div>
</>
);
}
save.js — 保存HTMLの実装
import { useBlockProps, RichText } from '@wordpress/block-editor';
export default function Save( { attributes } ) {
const { message, alertType } = attributes;
const blockProps = useBlockProps.save();
return (
<div { ...blockProps } className={ `alert-box alert-${ alertType }` }>
<RichText.Content tagName="p" value={ message } />
</div>
);
}
🎨 ブロックパターンの登録
複数のブロックを組み合わせたレイアウトを「パターン」として登録しておくと、ユーザーがワンクリックで挿入できます。
add_action( 'init', function() {
register_block_pattern(
'mfp/hero-section',
array(
'title' => 'ヒーローセクション',
'description' => '大きな見出しとボタンのセット',
'categories' => array( 'featured' ),
'content' => '<!-- wp:heading {"level":1} --><h1>タイトル</h1><!-- /wp:heading --><!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">詳しく見る</a></div><!-- /wp:button --></div><!-- /wp:buttons -->',
)
);
} );
✏️ 演習：シンプルなカスタムブロックを作ろう
📝 課題
@wordpress/create-blockでブロックのひな型を生成する- テキストと背景色を設定できる「カラーカード」ブロックを作成する
- InspectorControlsに色選択コントロールを追加する
- npm run buildでビルドし、実際のエディタで動作確認する
✅ この章のチェックリスト
- create-blockでひな型を生成できた
- block.jsonの役割を理解した
- edit.jsとsave.jsの違いを理解した
- InspectorControlsでサイドバーコントロールを追加できた
- ブロックパターンを登録できた
🔗 関連ページ・次のステップ
📘 前提知識
- STEP 4: 機能を実装する（フック・ショートコード）
- STEP 5: フロントエンド機能（CSS/JS読み込み）
🚀 あわせて学ぶ
- REST API拡張（ブロックからAPIを呼び出す）
- WP-CLIコマンド開発（ブロックの一括操作）
📚 補足
- 実例集（カスタムブロックの実装例）
- トラブルシューティング