CATEGORY
インフラエンジニアが提供するAWSナレッジ
エンジニア向けのTipsや仕事を効率化するノウハウを提供

WordPress開発：自作カスタムブロックのサイドバー拡張方法

WordPressのブロックエディタ（Gutenberg）は、コンテンツ作成の自由度を大きく高めましたが、その真の力はカスタマイズ性にあります。本記事では、WordPressの自作カスタムブロックにおけるサイドバー拡張の基礎から応用まで詳しく解説します。

自作カスタムブロックの作り方は以下の記事で解説しています。

関連
WordPress開発：ブロックエディタ用自作カスタムブロックの作り方ガイド2025年5月12日
目次を読み込み中…

WordPressカスタムブロックのサイドバー拡張とは

WordPressでウェブサイトを構築する際、ブロックエディタは欠かせない存在となっています。このエディタは標準でも多くの機能を備えていますが、カスタムブロックのサイドバー機能を拡張することで、直感的な操作で複雑なコンテンツを作成できる強力なコンテンツ管理ツールへと進化させることができます。

サイドバーの基本概念

WordPressのブロックエディタでサイドバー拡張を行う際には、いくつかの重要な基本概念を理解する必要があります。サイドバーはブロックエディタの右側に表示される設定パネルであり、「ブロック」タブと「ドキュメント」タブの2つの主要セクションに分かれています。

「ドキュメント」タブはページやポスト全体に関わる設定を管理します。個別のブロック選択に関係なく、常にアクセス可能な設定が含まれています。ページ全体に影響を与える設定や、サイト全体の一貫性に関わる設定を追加する場合に使用します。

「ブロック」タブは現在選択されているブロックの設定を管理します。この設定は、選択されたブロックのみに影響を与え、ページ全体には影響しません。カスタムブロックのサイドバー拡張を行う場合、基本的にこの「ブロック」タブに新しい設定を追加することになります。

なぜサイドバーを拡張するのか

WordPressブロックエディタのサイドバー機能を拡張することは、単なる見た目の変更にとどまらない大きな価値があります。標準のブロックエディタでは提供されていない独自の設定オプションを追加することで、コンテンツ作成者により多くの制御と柔軟性を与えることができます。

サイドバー拡張の主な利点としては、ユーザーインターフェースの一貫性を保ちながら機能を追加できることが挙げられます。ユーザーは既にWordPressの操作に慣れているため、同じインターフェース内に新機能を統合することで学習コストを最小限に抑えることができます。また、メインエディタ領域をクリーンに保ったまま、詳細設定をサイドバーに集約することで、コンテンツ作成の作業効率も向上します。

さらに、開発者の視点では、サイドバー拡張によってブロックの再利用性が高まります。同じコードベースを維持しながら、異なるプロジェクトに合わせて設定オプションだけを変更することが容易になるのです。

サイドバーのコンポーネント階層

WordPressが提供するサイドバーの基本的な構造は、折りたたみ可能なパネルの集まりになっています。これらのパネルを適切に配置し、必要なコントロールを追加することで、ユーザーフレンドリーな設定インターフェースを構築できます。

WordPressブロックエディタのサイドバーは、コンポーネント階層に基づいて構築されています。最上位は「@wordpress/block-editor」ライブラリに含まれるInspectorControlsコンポーネントで、これがサイドバー全体のコンテナとして機能します。このコンポーネントをブロックのeditコンポーネント内に配置することで、そのブロックのサイドバー領域が定義できるようになります。この領域に独自のコントロールを追加していくことになります。

InspectorControlsの下に「@wordpress/components」ライブラリに含まれるPanelBodyコンポーネントを配置し、設定グループを作成します。PanelBodyは論理的な設定グループ分けを可能にします。例えば、テキスト関連の設定、スタイル関連の設定、アニメーション関連の設定というように分類できます。階層が深くなりすぎると操作性が低下するため、通常は2〜3レベルの階層に収めることが推奨されています。

PanelBodyの下に「@wordpress/components」ライブラリに含まれるTextControl、SelectControlなど、サイドバーUI構築に必要な様々なコンポーネントを配置し、独自のコントロールを作成します。

サイドバーへのコントロール追加方法

WordPressのブロックエディタでは、「@wordpress/components」ライブラリが提供する豊富なコントロールコンポーネントを活用してサイドバーをカスタマイズできます。ここでは、よく使われるコントロールコンポーネントの実装例を紹介します。

block.jsonは変数部分のみ記載しています

さらに多くのコンポーネントを知りたい方は公式リファレンスから確認できます。

参考
Component Reference – Block Editor Handbook | Developer.WordPress.org
Component Reference – Block Editor Handbook | Developer.WordPress.orgWordPress Developer Resources

表示テキストの設定

サイドバーに入力したテキストをそのままブロックに表示するサンプルになります。

TextControl：単一行のテキスト入力フィールド

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": ""
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <TextControl
            label="コンテンツ"
            value={content}
            onChange={(value) => setAttributes({ content: value })}
          />
        </PanelBody>
      </InspectorControls>
      <div { ...useBlockProps() }>
        {content && <p>{content}</p>}
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  return (
    <div { ...useBlockProps.save() }>
      {content && <p>{content}</p>}
    </div>
  );
}
簡単な解説
  1. 変数contentを文字列・デフォルト空白で定義
  2. TextControlの値として変数contentを設定し、値変更時に変数contentを上書き
  3. 変数contentが空白でない場合、pタグを追加して変数contentの内容を表示

TextareaControl：複数行のテキスト入力エリア

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": ""
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextareaControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <TextareaControl
            label="コンテンツ"
            value={content}
            onChange={(value) => setAttributes({ content: value })}
          />
        </PanelBody>
      </InspectorControls>
      <div { ...useBlockProps() }>
        {content && <p>{content}</p>}
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  return (
    <div { ...useBlockProps.save() }>
      {content && <p>{content}</p>}
    </div>
  );
}
簡単な解説
  1. 変数contentを文字列・デフォルト空白で定義
  2. TextareaControlの値として変数contentを設定し、値変更時に変数contentを上書き
  3. 変数contentが空白でない場合、pタグを追加して変数contentの内容を表示

クラスを追加

サイドバーで選択した内容をクラスとして付与するサンプルになります。

SelectControl：ドロップダウンメニューによる選択

クラスのみ設定しているので、実際にスタイルを適用するにはstyle.cssに別途スタイルを記述してください

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": "left"
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps({
    className: 'is-align-' + content
  });
  const listOptions = [
    { label: '左揃え', value: 'left' },
    { label: '中央揃え', value: 'center' },
    { label: '右揃え', value: 'right' }
  ];
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <SelectControl
            label="テキスト配置"
            value={content}
            options={listOptions}
            onChange={(value) => setAttributes({ content: value })}
          />
        </PanelBody>
      </InspectorControls>
      <div {...blockProps}>
        <p>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps.save({
    className: 'is-align-' + content
  });
  return (
    <div {...blockProps}>
      <p>SampleText</p>
    </div>
  );
}
簡単な解説
  1. 変数contentを文字列・デフォルトleftで定義
  2. useBlockPropsフックにclassNameオプションでis-align- + 変数contentのクラスを追加
  3. 変数listOptionsに選択候補を定義
  4. SelectControlの値として変数content、候補に変数listOptionsを設定し、値変更時に変数contentを上書き

RadioControl：ラジオボタンによる選択

クラスのみ設定しているので、実際にスタイルを適用するにはstyle.cssに別途スタイルを記述してください

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": "left"
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RadioControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps({
    className: 'is-align-' + content
  });
  const listOptions = [
    { label: '左揃え', value: 'left' },
    { label: '中央揃え', value: 'center' },
    { label: '右揃え', value: 'right' }
  ];
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <RadioControl
            label="テキスト配置"
            selected={content}
            options={listOptions}
            onChange={(value) => setAttributes({ content: value })}
          />
        </PanelBody>
      </InspectorControls>
      <div {...blockProps}>
        <p>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps.save({
    className: 'is-align-' + content
  });
  return (
    <div {...blockProps}>
      <p>SampleText</p>
    </div>
  );
}
簡単な解説
  1. 変数contentを文字列・デフォルトleftで定義
  2. useBlockPropsフックにclassNameオプションでis-align- + 変数contentのクラスを追加
  3. 変数listOptionsに選択候補を定義
  4. RadioControlの値として変数content、候補に変数listOptionsを設定し、値変更時に変数contentを上書き

スタイルの設定

ToggleControl：オン/オフを切り替えるスイッチ

block.json
{
  "attributes": {
    "content": {
      "type": "boolean",
      "default": false
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps({
    style: {
      border: content ? '1px solid #ccc' : 'none'
    }
  });
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <ToggleControl
            label="ボーダーの有無"
            checked={content}
            onChange={(value) => setAttributes({ content: value })}
          />
        </PanelBody>
      </InspectorControls>
      <div {...blockProps}>
        <p>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps.save({
    style: {
      border: content ? '1px solid #ccc' : 'none'
    }
  });
  return (
    <div {...blockProps}>
      <p>SampleText</p>
    </div>
  );
}
簡単な解説
  1. 変数contentをブーリアン型・デフォルトfalseで定義
  2. useBlockPropsフックにstyleオプションでborderスタイルを追加
    変数contentがtrueであれば「1px solid #ccc」falseであれば「none」
  3. ToggleControlの値として変数contentを設定し、値変更時に変数contentを上書き

RangeControl：スライダーによる数値の調整

block.json
{
  "attributes": {
    "content": {
      "type": "number",
      "default": 24
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps({
    style: {
      fontSize: content+'px'
    }
  });
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <RangeControl
            label="フォントサイズ"
            value={content}
            onChange={(value) => setAttributes({ content: value })}
            min={12}
            max={36}
            step={4}
          />
        </PanelBody>
      </InspectorControls>
      <div {...blockProps}>
        <p>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps.save({
    style: {
      fontSize: content+'px'
    }
  });
  return (
    <div {...blockProps}>
      <p>SampleText</p>
    </div>
  );
}
簡単な解説
  1. 変数contentを数値型・デフォルト24で定義
  2. useBlockPropsフックにstyleオプションでfontSizeスタイルを追加
    変数contentの値にpxをを追加してサイズを設定
  3. RangeControlの値として変数contentを設定し、値変更時に変数contentを上書き
    最小値を「12」、最大値を「36」、1目盛りを「4」に設定

ColorPicker：色選択ツール

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": "#000000"
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPicker } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps({
    style: {
      color: content
    }
  });
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <p>色</p>
          <ColorPicker
            color={content}
            onChangeComplete={(value) => setAttributes({ content: value.hex })}
            disableAlpha
          />
        </PanelBody>
      </InspectorControls>
      <div {...blockProps}>
        <p>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  const blockProps = useBlockProps.save({
    style: {
      color: content
    }
  });
  return (
    <div {...blockProps}>
      <p>SampleText</p>
    </div>
  );
}
簡単な解説
  1. 変数contentを文字列・デフォルト#000000で定義
  2. useBlockPropsフックにstyleオプションでcolorスタイルを追加
    変数contentを値として設定
  3. ColorPickerの値として変数contentを設定し、値変更時に変数contentを16進数に直して上書き
    透明度スライダーは非表示

その他：Buttonを利用した多種多様なコントロール

Buttonコンポーネントは、HTMLのbuttonタグと同様に非常に汎用性が高いUIコンポーネントです。onClick関数と組み合わせることで、設定のリセット、パネルの表示内容の切替など、様々なインタラクションのトリガーとして活用でき、視覚的に明確なアクションポイントを提供します。これにより、複雑な操作も直感的なインターフェースで実現できるのです。

グラフィカルなカラーパレット

今回は直感的に色を選択できる選択UIを作成します。

ボタンにのみスタイルを設定しているので、実際に色を適用するにはstyle.cssに別途スタイルを記述してください

block.json
{
  "attributes": {
    "content": {
      "type": "string",
      "default": "is-color-black"
    }
  }
}
edit.js
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, Button } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
  const { content } = attributes;
  const listOptions = [
    'is-color-black',
    'is-color-blue',
    'is-color-red',
  ];
  return (
    <>
      <InspectorControls>
        <PanelBody title="設定" initialOpen={true}>
          <div className="my-color-palette">
            {listOptions.map((listItem) => (
              <Button 
                className={listItem}
                key={listItem}
                onClick={() => setAttributes({ content: listItem })}
              >
              </Button>
            ))}
          </div>
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        <p className={content}>SampleText</p>
      </div>
    </>
  );
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
  const { content } = attributes;
  return (
    <div {...useBlockProps.save()}>
      <p className={content}>SampleText</p>
    </div>
  );
}
editor.css
.my-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.my-color-palette button {
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  height: 30px;
  width: 30px;
  display: block;
}
.my-color-palette button.is-color-black {
  background: black;
}
.my-color-palette button.is-color-blue {
  background: blue;
}
.my-color-palette button.is-color-red {
  background: red;
}
簡単な解説
  1. 変数contentを文字列・デフォルトis-color-blackで定義
  2. 変数listOptionsに選択候補を定義
  3. 変数listOptions分、BUTTONを作成
    classNameとkeyには変数listOptionsの値を設定し、クリック時に変数contentをクリックされた値で上書き
  4. 変数contentをpタグのクラスとして設定
  5. エディター画面用のCSSにBUTTONのデザインを設定

独自サイドバー機能で広がるWordPressの可能性

サイドバー拡張の導入は、確かに初期投資として技術的な学習と実装時間を要します。しかし、その見返りとして得られるコンテンツ管理の効率化と品質向上は、長期的に見れば大きな価値があります。特に同じクライアントのサイトを継続的に保守管理する場合や、複数のWordPressサイトを運営している場合には、その恩恵は倍増するでしょう。

本記事で解説した知識を活用して、ぜひ自身のプロジェクトに最適なサイドバー拡張を実装してみてください。WordPressを単なるCMSから、自分専用の強力なコンテンツ制作プラットフォームへと進化させる第一歩となるはずです。

この記事は役に立ちましたか？

もし参考になりましたら、下記のボタンで教えてください。

WordPress開発：ブロックエディタ用自作カスタムブロックの作り方ガイド 前の記事 【完全初心者OK】WordPressの問い合わせフォーム設置完全ガイド 次の記事

関連記事

  • WordPress

WordPress開発：ブロックエディタ用自作カスタムブロックの作り方ガイド

WordPressのブロックエディタ（Gutenberg）は、標準で提供されるブロックだけでも多彩な表現が可能ですが、自分だけのカスタムブロックを作成することで、さらに可能性は広がります。本記事では、WordPressブロックエディタで自作ブロックを作成する方法を、初心者にもわかりやすく解説します

  • WordPress

【完全素人OK】WordPressとは？ブログ開設から収益化まで実践完全ロードマップ

WordPressを使いこなせると、本格的なウェブサイトを専門知識なしで構築できます。初心者でも始められる基本設定から、読者を引きつけるコンテンツ作成、そして収益化までの道のりを丁寧に解説します。この記事を読めば、あなたもWordPressの可能性を最大限に活かし、理想のブログ運営をスタートできる

  • WordPress

WordPressのデフォルトブロックを自分好みにカスタマイズ！スタイル追加の完全ガイド

WordPressのデフォルトブロックを自分らしくカスタマイズしたいと思ったことはありませんか？本記事では、PHPによるスタイル登録からCSSでのデザイン追加まで、プラグインに頼らずにデフォルトブロックを効率的にカスタマイズする方法を詳しく解説します。この記事内ではテーマや子テーマの作成を

  • WordPress

WordPressの子テーマ作成方法：初心者でも簡単にできるカスタマイズガイド

WordPressサイトをカスタマイズしたいけれど、アップデートで変更が消えるのが心配…そんな悩みを解決するのが「子テーマ」です。本記事では、プログラミング初心者でも安心して始められる子テーマの作り方から、CSSやPHPによる効果的なカスタマイズ方法まで、解説していきます。ローカル環境がなくても今

コメント

この記事へのコメントはありません。

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）