プラグインメニューをエディターに作ろう! registerPlugin / PluginSidebarMoreMenuItem

メニューにプラグインメニューを追加する

registerPluginを使う事で、プラグインとしてエディターに登録する事ができます。

registerPluginの記述を試してみましょう

ブロックのjs(またはjsx)に下記のような記述を行います。

const { Component } = wp.element;
const { Fragment } = wp.element;
const { PluginMoreMenuItem } = wp.editPost;
const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;
 
registerPlugin( 'slug名', {
  icon: null,
  render: クラス名,
} );
 
export class クラス名 extends Component {
  render() {
    return (
      <Fragment>
        <PluginMoreMenuItem
          icon={ null }
          onClick={ () => {
            // メニューがクリックされた際のイベント
          } }
        >
          { __( 'This is Test' ) }
        </PluginMoreMenuItem>
      </Fragment>
    );
  }
}

ビルドして確認を行うと、ブロックエディター内の設定メニュー内のプラグイン項目に「This is Test」と書かれたメニュー項目が追加されています。

プラグインのメインメニューを作ろう

プラグインのメインメニューを作る場合、registerPluginと組み合わせる形でPluginSidebarMoreMenuItemPluginSidebarを使用しスライドメニューを作るのが推奨されているようです。

'use strict';
 
const { Component } = wp.element;
const { Fragment } = wp.element;
const { PluginSidebar, PluginSidebarMoreMenuItem, PluginMoreMenuItem } = wp.editPost;
const { PanelBody } = wp.components;
const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;
 
export class クラス名 extends Component {
  render() {
    return (
      <Fragment>
        <PluginSidebarMoreMenuItem
          target="ターゲット名"
        >
          { __( 'プラグイン名' ) }
        </PluginSidebarMoreMenuItem>
        <PluginSidebar
          name="ターゲット名"
          title={ __( 'バーに表示される文字列' ) }
        >
          <PanelBody
            title={ __( 'ボディに表示される文字列' ) }
            initialOpen={ true }
          >
          </PanelBody>
        </PluginSidebar>
      </Fragment>
    );
  }
}
 
registerPlugin( 'プラグイン名', {
  icon: 'welcome-learn-more',
  render: クラス名,
} );

このような記述を行うと、PluginSidebarMoreMenuItemによりサイドバーのプラグイン項目にメニュー項目が追加されます。
メニュー項目のターゲットにはPluginSidebarで用意したスライドバーを指定している為、そのメニュー項目を選択する事で、指定したスライドバーが開閉されるようになっています。
このスライドバー内にパネルを設置する事で、プラグインのメインメニューとして使用するのが推奨された方法のようです。

テネーブル

プラグインメニュー項目は、メニューのターゲットが表示(実行)されている時はチェックボックス、メニューのターゲットが非表示(停止)されている時には、registerPluginiconを自動でアイコンに適用して表示されるようになっています。

テネーブル(アイコン01)
ブロックエディター プラグインメニュー例
スライドメニューのアイコンの例
ブロックエディター プラグインメニュー項目例
プラグインメニューに追加された項目の例

メインメニューとサブメニューに別けて考える

1つのプラグインで複数のメニューを表示するのはエディター画面を使いにくくするだけです。

PluginSidebarMoreMenuItemを使って、エディター画面の上部にも開閉ボタンを設け、スライドバーコンテンツで表示を行うメインメニュー、PluginMoreMenuItemでサブメニュー(モーダル表示や設定のON/OFFのみ)と言った構造で、メニューを別けて考えると良いかもしれません。1プラグインに1スライドのメインメニュー、そのスライドからサブメニューと言う構成だとエディター画面がスッキリすると思います。

PluginSidebarMoreMenuItemを2つ以上使えば、サイドバーボタンを複数追加する事も出来ますが、メニュー構造としても良くありません。
文書」「ブロック」と言ったようにタブを用いて、プラグインの機能を1つのスライドメニューの中で別けるのが良いようです。

スライドバーメニューが要らない簡易的なメニューの場合

簡易的なプラグインの設定のON/OFFと言ったトグルのみであれば、PluginSidebarMoreMenuItemを使わずにPluginMoreMenuItemだけを使えば良いでしょう。しかし、その場合は自動でiconが適用(変更なども)されないので、PluginMoreMenuItemにアイコンを自分で設定するようにしましょう。