[Gutenberg]サイドバーをカスタマイズする方法

Gutenbergのブロックには値を調整できるフィールドをサイドーのブロックタブ部分に持たせる事ができます。

この記事ではこちらのようなフィールドを制作する方法を紹介します。

InspectorControls

サイドバーへフィールドを追加するにはInspectorControlsコンポーネントを使用します。

@wordpress/block-editorからInspectorControlsをインポートし、メインとなるブロックのjsxとは並列にInspectorControlsコンポーネントを設置します。

ReactはrootNodeは1つですのでからタグを入れておきましょう。

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
  return (
    <>
      <InspectorControls>
        <PanelBody title={'フィールド名'}>
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        block content
      </div>
    </>
  );
};

PanelBodyを使用する事でクリックで展開できるフィールドの塊を作る事ができます。

inputを制作し、テキストを入力可能にする

制作例としてinputフィールドを表示し、テキストを入力する事が出来るフィールドを制作してみます。

テキスト入力はTextControlコンポーネントを使用する事で制作可能です。

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
  const { url } = attributes;
  const saveUrl = (url) => {
    setAttributes({ url });
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={'リンク先'}>
          <TextControl label="URL" value={url} onChange={saveUrl} />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        block content
      </div>
    </>
  );
};

TextControlをインポートし、PanelBodyの子要素として配置します。

リンク先を入力する事が出来るフィールドという想定で、PanelBodyのタイトルはリンク先と記載しておきます。

onChangeで入力がある度にsaveUrl関数を実行し、saveUrl関数の中でsetAttributesを使い、値を保存します。

複数の入力フィールド

PanelBodyのセットをInspectorControlsに追加する事でクリック展開フィールドをいくつも用意する事がが可能です。

また、PanelBodyに入力フィールド内に入力コンポーネントを設置し複数の入力エリアを用意する事も可能です。

<InspectorControls>
  <PanelBody title={'リンク先'}>
    <TextControl label="URL1" value={url1} onChange={saveUrl1} />
    <TextControl label="URL2" value={url2} onChange={saveUrl2} />
    <TextControl label="URL3" value={saveUrl3} onChange={saveUrl3} />
    ...
  </PanelBody>

  <PanelBody title={'色'}>
    <TextControl label="Color" value={color} onChange={saveColor} />
  </PanelBody>
  ...
</InspectorControls>