ブロックエディタ（Gutenberg）に独自ブロックを追加する方法

必要な準備：Node.js環境と@wordpress/scriptsの導入

独自ブロックの開発には、Node.js環境とビルドツールが必要です。以下はプラグインとして開発する前提のセットアップ手順です。

1. プラグインのベースフォルダを作成

mkdir wp-custom-block
cd wp-custom-block
npm init -y

2. 必要なパッケージのインストール

npm install @wordpress/scripts --save-dev

package.json に以下のスクリプトを追加します。

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

ファイル構成とブロック登録の基本

以下のようなファイル構成を取るのが一般的です。

wp-custom-block/
├── block.json
├── src/
│   └── index.js
├── plugin.php
├── package.json

plugin.php（WordPressにプラグインとして認識させる）

<?php
/**
 * Plugin Name: Custom Gutenberg Block
 */

function custom_block_register() {
    register_block_type( __DIR__ );
}
add_action( 'init', 'custom_block_register' );

block.json の定義

Gutenbergでは block.json を使った登録が推奨されています。

{
  "apiVersion": 2,
  "name": "custom/block",
  "title": "カスタムブロック",
  "category": "widgets",
  "icon": "smiley",
  "description": "シンプルなカスタムブロックです。",
  "editorScript": "file:./build/index.js"
}

JavaScriptでのブロック定義（src/index.js）

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('custom/block', {
  title: 'カスタムブロック',
  icon: 'smiley',
  category: 'widgets',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit({ attributes, setAttributes }) {
    return (
      <RichText
        tagName="p"
        value={attributes.content}
        onChange={(newContent) => setAttributes({ content: newContent })}
        placeholder="ここにテキストを入力"
      />
    );
  },
  save({ attributes }) {
    return <RichText.Content tagName="p" value={attributes.content} />;
  },
});

ビルドと読み込み確認

開発モードでブロックを確認したい場合は以下を実行します。

npm run start

本番用にビルドする場合は：

npm run build

WordPress管理画面 > 投稿/固定ページ で、カスタムブロックが「ウィジェット」カテゴリーに追加されていれば成功です。

カスタマイズ例：画像＋見出し＋本文の複合ブロック

よりリッチなブロックも簡単に実装できます。

registerBlockType('custom/image-block', {
  title: '画像付きブロック',
  icon: 'format-image',
  category: 'layout',
  attributes: {
    heading: { type: 'string', source: 'html', selector: 'h2' },
    body: { type: 'string', source: 'html', selector: 'p' },
    imageUrl: { type: 'string', default: '' },
  },
  edit({ attributes, setAttributes }) {
    const onSelectImage = (media) => setAttributes({ imageUrl: media.url });

    return (
      <>
        <MediaUpload
          onSelect={onSelectImage}
          allowedTypes={['image']}
          render={({ open }) => (
            <button onClick={open}>画像を選択</button>
          )}
        />
        <RichText
          tagName="h2"
          value={attributes.heading}
          onChange={(value) => setAttributes({ heading: value })}
          placeholder="見出しを入力"
        />
        <RichText
          tagName="p"
          value={attributes.body}
          onChange={(value) => setAttributes({ body: value })}
          placeholder="本文を入力"
        />
      </>
    );
  },
  save({ attributes }) {
    return (
      <div>
        {attributes.imageUrl && <img src={attributes.imageUrl} alt="" />}
        <RichText.Content tagName="h2" value={attributes.heading} />
        <RichText.Content tagName="p" value={attributes.body} />
      </div>
    );
  },
});

独自ブロックを開発できる既存プラグインの紹介

コードを書くのが難しい場合でも、以下のようなプラグインを使えば、GUIベースで独自ブロックを作成できます。

1. Block Lab（※現在は開発終了）

GUIでカスタムブロックを作成できるプラグイン。PHPでテンプレートを定義する方式でしたが、現在は「Genesis Custom Blocks」への移行が推奨されています。

2. Genesis Custom Blocks

Block Labの後継であり、ReactやJSの知識がなくても、GUIでカスタムブロックを定義・配置可能です。

3. Lazy Blocks

ノーコードでカスタムブロックが作れるプラグイン。条件分岐やカスタムHTML出力も柔軟に設定でき、非開発者向けにも人気です。個人的には結構おすすめです。

まとめ：Gutenbergに独自ブロックを追加することで表現の幅が広がる

独自ブロックを使うことで、WordPressの編集体験を大幅にカスタマイズ可能になります。
ビルド環境の構築が必要ですが、慣れれば自由度の高いブロックを短時間で開発できるようになります。
特に複雑なUIや繰り返し使うコンポーネントを持つサイトでは、独自ブロックの導入が強力な武器になるでしょう。
また、コードを書くのが難しい方でも、GUIベースのプラグインを活用すれば柔軟に独自ブロックを導入できます。