はじめてのWordPressブロック自作ガイド

ブロックエディタの基本を理解しよう

WordPressでブロックを自作するには、まず「ブロックエディタ（Gutenberg）」の仕組みを理解することが大切です。ここでは、従来のクラシックエディタとの違いや、ブロックの役割を確認していきましょう。

ブロックエディタとは？

WordPress 5.0から導入された新しい編集画面で、パーツごとに「ブロック」としてコンテンツを構成します。従来のテキストエディタと異なり、見出し、段落、画像、リストなどが個別のブロックとして扱われるため、視覚的にわかりやすい編集が可能になりました。

ブロックエディタの最大の特徴は、直感的な操作性です。ドラッグ&ドロップでブロックを移動したり、コピー&ペーストで複製したりできるため、レイアウトの調整が格段に楽になります。また、各ブロックには独自の設定パネルがあり、細かなカスタマイズも簡単に行えます。

クラシックエディタとの違い

クラシックエディタでは一つのテキストエリアで編集しますが、ブロックエディタでは段落・画像・見出しなどをブロック単位で管理できます。これにより、コンテンツの構造がより明確になり、編集作業の効率が大幅に向上します。

クラシックエディタでは、レイアウトの調整にHTMLやCSSの知識が必要でしたが、ブロックエディタならビジュアルな操作だけで美しいページを作成できます。また、ブロックごとに設定が保存されるため、一度作成したデザインを他のページでも簡単に再利用できるのも大きな魅力です。

ブロックの種類と役割

基本ブロック、フォーマット、レイアウト、ウィジェットなどカテゴリごとに多くのブロックが用意されており、目的に応じて使い分けます。基本ブロックには段落、見出し、画像、リストなどがあり、日常的な投稿作成に必要な機能が揃っています。

フォーマットブロックでは、引用、コード、テーブルなどの特殊な表示形式を扱えます。レイアウトブロックには、カラム、グループ、区切りなどがあり、複雑なページ構成を視覚的に作成できます。ウィジェットブロックでは、検索フォーム、カレンダー、最新投稿などのサイトパーツを配置できます。

なぜブロックを自作するのか？メリットを整理

公式やテーマ提供のブロックだけでは対応できないレイアウトやデザインを可能にするのが自作ブロックです。ここではそのメリットを初心者にもわかりやすく解説します。

オリジナルデザインの実現

自分のブランドに合ったスタイルや装飾を組み込めることで、サイトに独自性を持たせることができます。例えば、企業のコーポレートカラーを使った特別なCTAボタンや、独自のデザインを持つ料金表、プロフィールカードなどを作成できます。

既存のブロックをカスタマイズするだけでは限界があります。自作ブロックなら、デザインの自由度が無限大に広がり、競合他社との差別化を図れます。また、ブランドイメージを統一したい場合も、自作ブロックがあれば編集者が迷うことなく一貫したデザインを保てます。

コードの再利用性と保守性

同じ機能やデザインを何度も使い回せるため、管理が楽になります。例えば、商品紹介用のブロックを一度作成すれば、全てのページで同じデザインと機能を使えます。従来のように、毎回HTMLやCSSを書き直す必要がありません。

また、デザインの変更が必要になった場合も、ブロックのコードを修正するだけで全てのページに反映されます。これにより、サイト全体の一貫性を保ちながら、効率的な運用が可能になります。バグの修正やセキュリティアップデートも、一箇所の修正で全体に適用できるため、メンテナンス性が格段に向上します。

サイトの運用効率アップ

編集者が迷わず使えるブロックを用意することで、投稿作業がスムーズになります。複数の編集者がいる場合、誰でも同じクオリティのコンテンツを作成できるようになります。また、ブロックには説明文や設定項目を自由に追加できるため、使い方に迷うことがありません。

特に、定期的に同じような投稿を作成する場合、自作ブロックの効果は絶大です。ニュース記事、商品紹介、イベント告知など、テンプレート化できるコンテンツがあれば、作業時間を大幅に短縮できます。

ブロック自作に必要な環境と準備

ブロックを作成するには最低限の開発環境とツールが必要です。ここでは、初心者でも用意しやすい構成を紹介します。

必要なツール一覧

ブロック開発に必要な主要ツールをご紹介します。

• Node.js：JavaScriptの実行環境で、ブロックのビルドに必要です
• npm（Node Package Manager）：JavaScriptのパッケージ管理ツール
• WordPress環境（ローカルまたはテストサーバー）：作成したブロックをテストするため
• テキストエディタ：Visual Studio Code、Sublime Text、Atomなど
• ブラウザ：Chrome、Firefox（開発者ツール付き）

これらのツールの中でも、特にNode.jsとnpmは必須です。WindowsやMacの場合、Node.jsの公式サイトからインストーラーをダウンロードして実行するだけで、npmも同時にインストールされます。

@wordpress/create-blockの概要

WordPress公式のCLIツールで、コマンドひとつでブロック開発用のひな型が作成できます。このツールを使えば、複雑な設定ファイルを手動で作成する必要がなく、すぐにブロック開発を始められます。

@wordpress/create-blockツールは、現在のWordPressベストプラクティスに沿った構成でプロジェクトを生成します。ES6、JSX、Webpack、Babelなどの最新技術が自動的に設定されるため、開発者は本来の目的であるブロックの機能開発に集中できます。

テスト用のローカル環境を作る方法

Localなどのツールを使うと、簡単に自分のPC内にWordPress環境を構築できます。Localは無料で使えるツールで、数クリックでWordPressサイトを立ち上げられます。他にもXAMPP、MAMP、Docker環境など、様々な選択肢があります。

ローカル環境の最大のメリットは、インターネット接続がなくても開発できることです。また、失敗を恐れることなく、思い切った実験ができます。本番環境に影響を与えることなく、様々なブロックを試作できるため、学習効率が格段に向上します。

自作ブロックの作成ステップを実例で解説

ここでは、実際に「Hello Block」という名前の簡単なブロックを作成しながら、基本の流れを紹介します。

ブロックひな型の生成

以下のコマンドを実行して雛形を作成します。

npx @wordpress/create-block hello-block

このコマンドを実行すると、「hello-block」という名前のフォルダが作成され、その中にブロック開発に必要な全てのファイルが自動生成されます。生成されるファイルには、JavaScript、CSS、PHP、設定ファイルなどが含まれており、すぐに開発を始められる状態になっています。

コマンド実行後は、生成されたフォルダに移動して、開発用サーバーを起動します。これにより、ファイルの変更を監視して自動的にビルドしてくれるため、効率的な開発が可能になります。

ブロックの中身を編集する

生成されたsrc/edit.jsを編集し、ブロックの見た目や挙動を定義します。@wordpress/create-blockが生成するファイルは、標準でJSXという記法を使用します。

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
    return (
        <p {...useBlockProps()}>
            Hello, World!（編集画面）
        </p>
    );
}

このコードは、編集画面に「Hello, World!」と表示する最も基本的なブロックです。同様に、src/save.jsファイルがサイト上での実際の表示を定義します。

import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
    return (
        <p {...useBlockProps.save()}>
            Hello, World!（公開画面）
        </p>
    );
}

より実践的なブロックを作成する場合は、ユーザーからの入力を受け取る仕組みや、設定パネルの追加などが必要になります。しかし、基本的な構造は変わらないため、まずはシンプルなブロックから始めることをおすすめします。

カスタム属性を追加する

属性（attributes）を定義することで、ブロックの状態を保持し、ユーザーの入力内容を保存できます。属性はblock.jsonファイルで定義します。

// block.json
{
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        },
        "backgroundColor": {
            "type": "string",
            "default": "#ffffff"
        }
    }
}

次に、src/edit.jsとsrc/save.jsを修正し、属性を使って動的なコンテンツを作成します。

// src/edit.js
import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps({
        style: { backgroundColor: attributes.backgroundColor },
    });

    return (
        <RichText
            {...blockProps}
            tagName="p"
            value={attributes.content}
            onChange={(newContent) => setAttributes({ content: newContent })}
            placeholder="テキストを入力..."
        />
    );
}

設定パネルの追加

ブロックの右サイドバーに表示される設定パネルを追加すると、ユーザーがブロックをより柔軟にカスタマイズできます。前のセクションで作成したRichTextに、色の設定パネルを追加した完全なコードは以下のようになります。

// src/edit.js

// 必要な部品をすべてimport（インポート）します
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPicker } from '@wordpress/components';

/**
 * `attributes`（属性）と `setAttributes`（属性を更新する機能）を受け取ります
 */
export default function Edit({ attributes, setAttributes }) {
    
    // 背景色とコンテンツ（テキスト）を属性から取り出します
    const { backgroundColor, content } = attributes;

    return (
        // <> と </> は、複数の要素をまとめるための「からっぽの箱」のようなものです
        <>
            {/* ここからが設定パネル（右サイドバー）のコードです */}
            <InspectorControls>
                <PanelBody title="カラー設定">
                    <p>背景色を選んでください</p>
                    <ColorPicker
                        color={backgroundColor}
                        onChangeComplete={(newColor) => setAttributes({ backgroundColor: newColor.hex })}
                    />
                </PanelBody>
            </InspectorControls>

            {/* ここからがブロック本体（編集エリア）の表示コードです */}
            <RichText
                {...useBlockProps({ style: { backgroundColor: backgroundColor } })}
                tagName="p"
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                placeholder="テキストを入力..."
            />
        </>
    );
}

このように、設定パネル（InspectorControls）とブロック本体（この例ではRichText）を<>で囲んで両方記述するのがポイントです。設定パネルで変更した内容が、即座にブロック本体の見た目に反映されるようになります。

エディタ画面で表示を確認する

WordPress管理画面にログインし、投稿画面にアクセスしてブロックが表示されるか確認します。作成したブロックは「ブロック追加」ボタンをクリックすると、カスタムブロックのカテゴリに表示されます。

ブロックが正常に表示されない場合は、ブラウザの開発者ツールを使ってエラーメッセージを確認しましょう。JavaScriptのエラーがあると、ブロックが読み込まれません。また、PHPのエラーログも確認して、サーバーサイドでエラーが発生していないかチェックしてください。

高度なブロック開発のテクニック

基本的なブロックが作成できたら、さらに高度な機能を追加してみましょう。

動的ブロックの作成

静的ブロックとは異なり、動的ブロックは表示時にPHPコードを実行できます。これにより、データベースから最新の情報を取得したり、ユーザーの権限に応じて内容を変更したりできます。

ここからは少し応用的な内容です。動的ブロックでは、これまで使ってきたJavaScriptに加え、サーバー側で動作するPHPという言語の知識も少し必要になります。まずは「こんなこともできるんだ」という参考としてご覧ください。

function render_dynamic_block($attributes) {
    $posts = get_posts([
        'numberposts' => $attributes['numberOfPosts'],
        'post_status' => 'publish',
    ]);
    
    $output = '<div class="dynamic-block">';
    foreach ($posts as $post) {
        $output .= '<h3>' . esc_html($post->post_title) . '</h3>';
        $output .= '<p>' . esc_html(wp_trim_words($post->post_content, 20)) . '</p>';
    }
    $output .= '</div>';
    
    return $output;
}

動的ブロックを使えば、最新記事の一覧、人気記事のランキング、カテゴリ別の記事表示など、動的なコンテンツを簡単に作成できます。

ブロックバリエーションの実装

一つのブロックから複数のバリエーションを作成できる機能です。例えば、ボタンブロックから「通常ボタン」「大きなボタン」「アウトラインボタン」などを選択できるようになります。

wp.blocks.registerBlockVariation('core/button', {
    name: 'custom-cta-button',
    title: 'CTAボタン',
    description: 'コンバージョンを促進する特別なボタン',
    attributes: {
        backgroundColor: 'red',
        textColor: 'white',
        className: 'cta-button'
    },
    isDefault: false
});

ブロックパターンの作成

よく使われるブロックの組み合わせをパターンとして登録できます。これにより、複数のブロックで構成されるレイアウトを一度に挿入できるようになります。

以下のコードは、ブロックエディタ上で複数のブロックを組み合わせたレイアウトを、そのままコピーしたものです。一見すると複雑に見えますが、実際にはエディタで視覚的に作成したものをコード化しただけなので、ご安心ください。

wp.blocks.registerBlockPattern('my-plugin/hero-section', {
    title: 'ヒーローセクション',
    description: 'メインビジュアルとCTAボタンの組み合わせ',
    categories: ['header'],
    content: `
<div class="wp-block-cover"><div class="wp-block-cover__inner-container"><h1>メインタイトル</h1>
<p>サブタイトルやキャッチコピーをここに入力</p>
<div class="wp-block-buttons"><div class="wp-block-button"><a class="wp-block-button__link">今すぐ始める</a></div>
</div>
</div></div>
`
});

初心者におすすめの補助ツールと学習方法

ブロックのコードが難しいと感じる方は、以下のサポートツールや学習リソースを活用しましょう。

Gutenberg Examples（公式サンプル集）

WordPressがGitHubで公開しているブロック開発の実例集です。基本的なブロックから高度な機能を持つブロックまで、幅広いサンプルが用意されています。実際に動作するコードが提供されているため、学習効果が非常に高いリソースです。

各サンプルには詳細な説明とコメントが付いているため、コードの動作を理解しやすくなっています。また、定期的に更新されているため、最新のベストプラクティスを学べます。

CodePenやGitHubの活用

他の開発者が作ったブロックコードを見ることで、実践的なヒントが得られます。CodePenでは、ブロックの見た目を確認しながらコードを学習できます。GitHubでは、実際のプロジェクトのソースコードを見ることで、本格的な開発手法を学べます。

特に、オープンソースのプラグインやテーマを参考にすることで、プロの開発者がどのようにブロックを実装しているかを学べます。ライセンスを確認して、適切に参考にしましょう。

ブロック開発を学べる公式ドキュメント

WordPress公式のブロック開発ドキュメントは、最も信頼できる情報源です。基本的な概念から高度な実装まで、体系的に学習できます。また、最新の変更点や新機能についても随時更新されているため、常に最新情報を得られます。

開発者コミュニティの活用

WordPressの開発者コミュニティに参加することで、他の開発者から直接アドバイスを得られます。SlackのWordPress開発チャンネル、Stack Overflow、WordPress.orgのサポートフォーラムなど、様々なコミュニティがあります。

また、WordCampやWordPressの勉強会に参加すれば、実際に開発者と交流できます。オンラインでの学習に加えて、直接的な交流も学習効果を高めます。

トラブル対策とつまずきポイントQ&A

ブロック開発中によくあるエラーや表示不具合の原因と対処法をまとめました。

エディタにブロックが表示されない

ビルドエラーや登録名のミスが原因です。ターミナルでエラーが出ていないか確認しましょう。

最も多い原因は、JavaScriptの構文エラーです。セミコロンの忘れ、括弧の不一致、関数名のタイプミスなどが考えられます。ブラウザの開発者ツールのコンソールタブを確認して、エラーメッセージを読み取りましょう。

また、ブロックの登録名（block name）が重複している場合も表示されません。他のプラグインやテーマと同じ名前を使用していないか確認してください。

JavaScriptエラーが出たときの対応

構文ミスがある場合はVSCodeなどのエディタでエラーハイライトを確認するとスムーズです。

現代的なコードエディタには、リアルタイムでエラーを検出する機能があります。VSCodeの場合、JavaScript用の拡張機能をインストールすることで、より詳細なエラー情報を得られます。

また、console.log()を使ったデバッグも効果的です。変数の値や関数の実行状況を確認することで、問題の原因を特定できます。

スタイルが反映されないときの確認項目

CSSの読み込みミスやセレクタの指定漏れが原因になっている場合が多いです。

まず、CSSファイルが正しく読み込まれているかを確認しましょう。ブラウザの開発者ツールのNetworkタブで、CSSファイルが404エラーになっていないかチェックしてください。

次に、CSSのセレクタが正しく指定されているかを確認します。ブロックエディタでは、特定のクラス名が自動的に追加されるため、セレクタの優先度に注意が必要です。

ブロックが保存されない問題

ブロックのsave関数の実装に問題がある場合、コンテンツが正しく保存されません。

save関数は、データベースに保存されるHTMLを生成します。この関数の出力が変更されると、既存のブロックが「無効なブロック」として表示される可能性があります。

また、属性の型定義が不正確な場合も、保存時にエラーが発生します。文字列型の属性に数値を代入したり、必須の属性が未定義だったりすると問題が発生します。

パフォーマンスの問題

複雑なブロックや大量のブロックを使用すると、エディタの動作が重くなる場合があります。

JavaScriptの処理が重い場合は、非同期処理やメモ化を活用して最適化しましょう。また、CSSアニメーションの多用も動作を重くする原因になります。

大きな画像や外部リソースの読み込みも、パフォーマンスに影響します。必要に応じて、遅延読み込みや圧縮を実装しましょう。

まとめ