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

Gutenbergの記事投稿画面の、右側に表示される設定のエリア…編集エリア
ブロックの一番下にある高度な設定に項目を加えたい場合の方法です。

高度な設定とは?

ブロックのインスペクターの最下部に存在する要素です。
ブロックを開発される際、特に設定しなくても必ず存在します。

高度な設定の例

基本的には、ブロック全体にCSSクラスを追加する「追加CSSクラス」と言うのが存在します。

雪々南

これって、高度なのかな…?

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

雷々北

アンカーって、確か#から始まるやつ。

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

ブロック全体に対して設定するような項目ですが、一般のライターではあまり意識して欲しくない、あまり使わない(優先度低めの)設定と言う感じでしょうか?

ここに項目を追加するには?

InspectorControlsの代わりに、InspectorAdvancedControlsで記述を書くと、「追加CSSクラス」または「HTMLアンカー」の上、高度な設定の最上部に表示されるようになります。

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

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

この記事を書いた人

倉本葉月

倉本葉月

オンラインビデオ通話を使用したPHPプログラミングをはじめ、生徒さんへのWordPressサイト指導も行っている現役IT講師です。