WordPress老人から脱却！vol:03 グーテンベルクでできること：カスタムブロックとその活用法

グーテンベルクエディタの登場により、WordPressは従来の投稿やページ作成のスタイルを一新し、ブロック単位でコンテンツを自由に編集できるようになりました。

その中でも「カスタムブロック」を活用することで、Webサイトのデザインや機能性をさらに高めることができます。

カスタムブロックは、標準ブロックにない独自のデザインや機能を実装でき、特定の目的に合わせたページレイアウトを簡単に実現できる優れたツールです。

この記事では、グーテンベルクエディタの柔軟性をさらに引き出すために、カスタムブロックの基本から作成方法、実際の活用法までを詳しく解説します。

初心者でも簡単に取り組めるステップから、より高度なブロック開発のアイデアまで紹介していくので、オリジナルのデザインを持つWebサイトを作成するための第一歩としてお役立てください。

カスタムブロックの概要
- グーテンベルク標準ブロックとカスタムブロックの違い
- カスタムブロックを作成するメリット
カスタムブロックの作成方法
カスタムブロックの編集とスタイル設定
カスタムブロックの導入とメンテナンス
カスタムブロックのさらなる発展
まとめ

カスタムブロックの概要

グーテンベルクエディタには、標準で多くのブロックが用意されていますが、特定のデザインや機能を実現したい場合、それらだけでは対応できないことがあります。

そこで活躍するのが「カスタムブロック」です。

カスタムブロックを使うと、Webサイトのデザインや機能を目的に応じて自由に拡張することができ、独自性の高いページ作成が可能になります。

グーテンベルク標準ブロックとカスタムブロックの違い

標準ブロックとカスタムブロックの違いは、柔軟性とデザインの自由度にあります。

標準ブロックはすぐに使用でき、ページ作成に必要な基本的な要素を提供してくれますが、カスタマイズ性に限界があります。

一方、カスタムブロックは、HTML、CSS、JavaScriptを使って、自由にレイアウトや機能を追加できるため、独自のデザインや複雑な機能を持つWebサイトを構築することができます。

例えば、サービス紹介ページで特定のレイアウトが必要だったり、特定のインタラクティブな機能を実装したい場合、カスタムブロックを作ることで、標準ブロックでは実現できない要素を簡単に追加することができます。

カスタムブロックを作成するメリット

カスタムブロックを作成することの最大のメリットは、サイトの一貫性を保ちながら、デザインや機能を効率よく統一できる点です。

カスタムブロックを作成すれば、複数のページやプロジェクトで同じデザインを使い回しつつ、統一感のあるブランドイメージを保つことができるからです。

具体例として、ブログ記事のレイアウトをすべて統一したい場合、カスタムブロックを使えば、一度作成したレイアウトを何度も再利用することができます。

これにより、デザインのブレを防ぎ、作業時間も大幅に短縮されます。

また、再利用可能なコンテンツとしても使えるため、頻繁に使う要素（ボタン、商品紹介セクションなど）を一度作成し、他のページでも簡単に適用できます。

さらに、カスタムブロックはメンテナンス性にも優れています。

例えば、サイト全体で使用しているボタンのデザインを変更したい場合、カスタムブロックを更新するだけで、全てのページにその変更を適用できます。

効率的に一貫性のあるデザインを維持することができ、更新作業の負担を軽減することが可能です。

カスタムブロックの作成方法

カスタムブロックを作成することで、グーテンベルクエディタの機能をさらに拡張し、サイトに独自のデザインやインタラクションを加えることができます。

ここでは、カスタムブロックを作成するための必要なツールやスキル、そして基本的な作成手順について詳しく解説します。

カスタムブロック作成に必要なツールとスキル

カスタムブロックを作成するには、JavaScript、HTML、CSSの基礎知識が必要です。

理由は、グーテンベルクのカスタムブロックは、ReactベースのJavaScriptを用いて構築されているためです。

HTMLとCSSは、ブロックの見た目やレイアウトを定義するために使います。

具体的には、次のツールやスキルを準備しましょう：

WordPress CLI：カスタムブロックの開発に役立つコマンドラインツールです。これを使って、簡単に新しいブロックのセットアップが可能になります。
Node.js と npm：JavaScript環境の設定や、依存ライブラリの管理に必要です。
React：カスタムブロックの動的な要素を作成するために必要です。基本的なReactの操作に慣れておくと、ブロックの作成がスムーズになります。

カスタムブロックを作成するためのステップ

カスタムブロックを作成するには、次のステップを踏む必要があります。

ここでは、WordPress CLIを使用した基本的なカスタムブロック作成の流れを紹介します。

1. WordPress CLIのセットアップ

WordPress CLIをインストールし、コマンドラインから新しいブロックを作成します。

具体的には、次のコマンドを実行して新しいブロックのテンプレートを生成します。

HTML

wp scaffold block <ブロック名> --title="<ブロックのタイトル>" --category="common"

このコマンドにより、必要なファイル（block.json や JavaScriptファイルなど）が生成されます。

2. block.json ファイルの設定

block.json は、カスタムブロックの基本的な設定ファイルであり、ブロックの名前、カテゴリー、アイコンなどのメタ情報を定義します。ここで、ブロックの表示方法や機能を調整します。

3. ブロックの編集とデザインの定義

ブロックが生成されたら、次にブロックのJavaScriptファイルを編集し、Reactを使ってブロックの構造を定義します。

たとえば、シンプルなテキスト入力フィールドを作成する場合、Reactのコンポーネントを使って、ユーザーが入力できるインターフェースを作成します。

4. CSSでデザインを適用

ブロックの見た目を整えるために、CSSファイルでスタイルを定義します。

たとえば、背景色やフォントサイズ、余白などを調整し、ブロックのビジュアルをカスタマイズします。

5. ブロックのテストとデバッグ

作成したカスタムブロックが正しく動作するかどうか、エディタ内で確認します。

もしエラーが発生した場合は、コンソールを確認しながらデバッグを行います。

カスタムブロック作成の際の注意点とコツ

カスタムブロックを作成する際、いくつかのポイントに注意する必要があります。

まず、ブロックのレスポンシブデザインを意識して、あらゆるデバイスで正しく表示されるようにスタイルを調整しましょう。

また、再利用性の高い設計を心がけ、同じブロックを複数のページで使えるように作成しておくことが重要です。

さらに、パフォーマンスにも配慮し、不要なスクリプトやスタイルを読み込まないように最適化を行いましょう。

カスタムブロックの編集とスタイル設定

カスタムブロックを作成した後、そのブロックを独自のデザインに仕上げるためには、CSSやJavaScriptを使ってスタイルや設定オプションを加えていく必要があります。

ここでは、カスタムブロックにデザインを適用する具体的な方法と、ブロックの設定画面で使えるオプションについて解説します。

さらに、エディタとフロントエンドでのデザインの一貫性を保つためのポイントも紹介します。

カスタムブロックにオリジナルデザインを追加する

カスタムブロックに独自のデザインを加えるためには、CSSでスタイルを設定し、ブロックの見た目を調整することが基本です。

CSSを使うことで、文字の色やサイズ、背景色、配置などのビジュアルを自由にコントロールできるからです。

作成したカスタムブロックのCSSファイルに、次のようなスタイルを追加することでデザインをカスタマイズします。

CSS

.my-custom-block {
  background-color: #f5f5f5;
  color: #333;
  padding: 20px;
  border-radius: 5px;
  font-size: 16px;
}

このように、ブロック全体の背景色や文字のスタイルを設定することで、サイトのテーマやデザインに合わせたブロックを作成できます。

また、メディアクエリを使ってレスポンシブデザインを実現し、あらゆるデバイスでブロックが適切に表示されるように調整することも可能です。

ブロックの設定画面で使用できるオプション

カスタムブロックには、WordPressのグーテンベルクエディタ内で設定できるオプションが用意されています。

これらのオプションを活用することで、ユーザーが直感的にブロックをカスタマイズできるようになります。

ブロック設定パネルに各種オプション（フォントサイズ、色、余白など）を追加することで、開発者がコードを書かなくてもユーザーがデザインを調整できるからです。

例えば、次のようにカスタムブロックにカラーや背景色の選択オプションを追加できます。

registerBlockType('my-plugin/my-custom-block', {
  attributes: {
    backgroundColor: { type: 'string' },
    textColor: { type: 'string' }
  },
  edit: (props) => {
    const { attributes, setAttributes } = props;

    return (
      <div
        style={{
          backgroundColor: attributes.backgroundColor,
          color: attributes.textColor,
        }}>
        <InspectorControls>
          <PanelBody title="Color Settings">
            <ColorPalette
              value={attributes.backgroundColor}
              onChange={(color) => setAttributes({ backgroundColor: color })}
              label="Background Color"
            />
            <ColorPalette
              value={attributes.textColor}
              onChange={(color) => setAttributes({ textColor: color })}
              label="Text Color"
            />
          </PanelBody>
        </InspectorControls>
        <p>ここにカスタムブロックのコンテンツが表示されます。</p>
      </div>
    );
  },
});

このようなコードを使えば、ブロック設定パネルに「背景色」と「文字色」のカラーパレットが表示され、ユーザーがブロックの外観を簡単にカスタマイズできるようになります。

エディタとフロントエンドでのデザインの一貫性を保つ方法

カスタムブロックをデザインする際、エディタ内の表示と、実際のサイトで表示されるフロントエンドの見た目が異なると、ユーザーに混乱を招くことがあります。

エディタとフロントエンドでデザインの一貫性を保つためには、エディタスタイル（editor.css）とフロントエンドスタイル（style.css）の両方を適切に設定することが重要です。

たとえば、次のように、エディタとフロントエンドで同じスタイルを適用することができます。

PHP

function my_custom_block_assets() {
  wp_enqueue_style(
    'my-custom-block-editor-style',
    plugins_url('editor.css', __FILE__), // エディタ用スタイル
    array('wp-edit-blocks')
  );

  wp_enqueue_style(
    'my-custom-block-style',
    plugins_url('style.css', __FILE__) // フロントエンド用スタイル
  );
}
add_action('enqueue_block_assets', 'my_custom_block_assets');

このコードにより、エディタ内でのブロック表示と、サイト公開後のフロントエンドでの表示が同じデザインで維持され、ユーザーが混乱することなくデザインを調整できるようになります。

カスタムブロックの導入とメンテナンス

カスタムブロックが完成したら、次はそのブロックをWordPressサイトに導入し、運用中もメンテナンスを行う必要があります。ここでは、カスタムブロックをどのようにサイトに組み込み、メンテナンスしていくかについて詳しく説明します。

サイトにカスタムブロックを導入する手順

結論として、カスタムブロックはテーマやプラグインとしてサイトに組み込むことができます。

理由は、WordPressではカスタムブロックを含むファイルを簡単にテーマやプラグインに追加し、それらを通じてブロックを有効化できるからです。

ここでは、プラグインとして導入する方法を紹介します。

1. カスタムブロックをプラグインに組み込む

作成したカスタムブロックをWordPressに組み込む最も簡単な方法は、プラグインとして導入することです。

具体的には、カスタムブロックのコードを含むディレクトリを作成し、WordPressのwp-content/pluginsフォルダに配置します。次に、プラグインファイル内でブロックを登録します。

PHP

// プラグインの初期化
function my_custom_block_init() {
  wp_register_script(
    'my-custom-block',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-editor' )
  );
  
  register_block_type( 'my-plugin/my-custom-block', array(
    'editor_script' => 'my-custom-block',
  ) );
}
add_action( 'init', 'my_custom_block_init' );

このコードにより、カスタムブロックがプラグインとしてWordPressに登録され、エディタ内で使用できるようになります。

プラグインを有効化すれば、サイト内でブロックが使用可能になります。

2. テーマに組み込む方法

カスタムブロックはテーマ内に直接組み込むこともできます。

テーマのfunctions.phpにブロック登録のコードを追加し、ブロックのスクリプトとスタイルをテーマ内のファイルに読み込ませます。

これにより、特定のテーマに依存するブロックを作成することができ、テーマに合わせたデザインや機能をブロックに反映できます。

継続的なメンテナンスの重要性

結論として、カスタムブロックは作成後も継続的なメンテナンスが必要です。

理由は、WordPress本体や他のプラグイン、テーマの更新により、ブロックの機能が正しく動作しなくなる可能性があるからです。

特に、WordPressは頻繁に更新されており、新しいバージョンがリリースされた際には、カスタムブロックも対応が必要となる場合があります。

1. バージョン管理と更新のポイント

カスタムブロックを導入する際は、バージョン管理を徹底することが重要です。

Gitなどのバージョン管理ツールを使用して、変更内容を追跡し、問題が発生した場合はすぐに修正できるようにしておくことを推奨します。

また、定期的にブロックの動作をテストし、WordPressの新バージョンへの対応状況を確認することが必要です。

2. ブロックの互換性チェック

カスタムブロックが他のプラグインやテーマと競合しないよう、互換性チェックを行うことも重要です。

特に、JavaScriptやCSSのスタイルが他のコンテンツに影響を与えないよう、適切なスコープでスタイルを適用することが推奨されます。

さらに、テーマやプラグインのアップデート後には、ブロックの動作に不具合がないか確認することが不可欠です。

カスタムブロックの最適化

結論として、カスタムブロックのパフォーマンス最適化も長期的な運用では重要な要素です。

理由は、サイトのパフォーマンスが低下すると、ユーザー体験に悪影響を与え、SEOにもマイナスの影響があるからです。

具体的には、ブロックで使用するスクリプトやスタイルを軽量化し、不要なリソースが読み込まれないようにします。また、キャッシュやCDNを活用して、ユーザーに高速な表示体験を提供できるようにします。これにより、サイト全体のパフォーマンスを向上させ、快適なユーザー体験を実現できます。

カスタムブロックの導入とメンテナンスまとめ

カスタムブロックをサイトに導入し、定期的なメンテナンスと最適化を行うことで、長期的に安定した運用が可能となります。

プラグインやテーマへの組み込み方法を理解し、バージョン管理やパフォーマンスの最適化を心がけることで、Webサイト全体の品質を高めることができます。

この内容でいかがでしょうか？修正や追加点があればお知らせください。

カスタムブロックのさらなる発展

カスタムブロックを基本的に作成できるようになったら、次はそのブロックに高度な機能を追加し、サイトのデザイン性やインタラクティブ性をさらに向上させることが可能です。

ここでは、JavaScriptを使った動的なインタラクションの実装や、外部APIと連携してデータをリアルタイムに表示する方法、そしてカスタムブロックをプラグインやテーマに統合して広く公開するためのステップについて解説します。

高度な機能を持つカスタムブロックの作成

結論として、JavaScriptとReactを活用することで、カスタムブロックにインタラクティブな要素を追加し、より動的なWebサイトを構築することができます。

理由は、Reactがカスタムブロックの動的部分を構築するために非常に適しているからです。

Reactを使えば、フォームやフィルター機能、リアルタイムのコンテンツ更新など、ユーザーの操作に応じた動的なコンテンツを簡単に追加できます。

例えば、簡単なフォームブロックを作成し、送信ボタンをクリックしたときに即座にコンテンツが表示されるような機能を実装することが可能です。

また、クリックで画像やテキストが切り替わる「タブ」や「アコーディオン」などのインタラクティブなUI要素もカスタムブロックとして作成できます。

const { registerBlockType } = wp.blocks;
const { useState } = wp.element;

registerBlockType('my-plugin/interactivity-block', {
  edit() {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <div>
        <button onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? 'Hide Content' : 'Show Content'}
        </button>
        {isOpen && <p>このコンテンツはボタンのクリックで表示されます。</p>}
      </div>
    );
  },
  save() {
    return null; // インタラクションはフロントエンドで処理
  },
});

このように、Reactフックを使った簡単なインタラクションを追加することで、ユーザーにとって使いやすく、動的なWebページを実現できます。

外部APIとの連携による動的コンテンツの生成

カスタムブロックに外部APIを連携させることで、より複雑で動的なコンテンツを作成できます。

結論として、API連携を活用すると、外部サービスからリアルタイムにデータを取得し、それをWebサイトに表示することが可能です。

理由は、APIを通じて他のシステムやデータソースと接続し、常に最新の情報をWebページに反映できるからです。

例えば、天気情報や最新ニュース、SNSフィードなど、常に更新されるデータを表示したい場合に、APIからデータを取得し、その結果をカスタムブロック内に表示することができます。

const { registerBlockType } = wp.blocks;
const { useEffect, useState } = wp.element;

registerBlockType('my-plugin/api-block', {
  edit() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((data) => setData(data));
    }, []);

    return (
      <div>
        {data ? <p>{data.title}</p> : <p>データを取得中...</p>}
      </div>
    );
  },
  save() {
    return null;
  },
});

このように、APIから取得したデータをリアルタイムで表示することで、常に新鮮な情報をユーザーに提供でき、より動的で魅力的なWebサイトを構築できます。