InspectorAdvancedControls 高度な設定に項目を追加しよう!

ブロックエディター(Gutenberg)画面の、右側に表示される編集エリア
ブロックタブの最下部にある「高度な設定」パネルに項目を追加したい場合の方法を紹介します。

高度な設定ってなんだろう?

ブロックの編集エリアの最下部に存在されるパネル要素です。
ブロックを開発される際、特に設定しなければ最下部に設定されます。
デフォルトでは、「追加CSSクラス」を設定する事が可能となり、ブロックのHTML領域に対してCSSクラスを設定できるようになっています。

公式のブロックでは、見出しブロックのみ「HTMLアンカー」と呼ばれる設定が可能になっています。
aタグなどで、ページ内にリンクする為のものを設定できます。

テネーブル

HTMLアンカーは、HTMLの記述ではidとして設定される要素です。

テネーブル(アイコン01)

どう言う設定が、高度なんだろう?

ルミェール

ブロック全体に対して設定される項目だけど、一般の記事投稿者、または編集者にあまり意識して欲しくない細かい設定要素とか、管理者でもほとんど使わない(優先度低めの)設定と言う感じなのかな?

ルミェール(アイコン05)

「高度な設定」パネルに項目を追加するには?

ブロック開発時に、InspectorControlsの代わりにInspectorAdvancedControlsでインスペクター要素の記述を書いた場合には「追加CSSクラス」または「HTMLアンカー」の上、「高度な設定」パネルの最上部に対してそれらの要素が表示されるようになります。

InspectorAdvancedControlsが設定されている定義はInspectorControlsと同じく、wp.editorです。
使い方などの変更は特にありません。表示される場所が変わる程度です。

注意事項として「高度な設定」パネルと言うPanelBodyに既に入っている状態ですので、新しく追加する要素に対してPanelBodyを使ってはいけません。