[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>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

目次