メニュー追加は、PluginSidebarMoreMenuItemを使う?

前の記事でメニューを追加する事を書きましたが、実は適切ではなさそうです。
今回はそれについて…

プラグインの主メニューを作る場合…

PluginSidebarMoreMenuItemを使ってサイドバーメニューを作るのが推奨されているようです。
ちょっと試してみましょう。

'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: クラス名,
} );

このようにすると、プラグイン用のサイドバーボタンが表示されるようになります。
同時に、このサイドバーが開閉されるメニューが追加されます。
メニューを開いている時はチェックボックス、閉じた際のiconは、registerPluginのiconが自動で適用されるようになっているようです。

スライドメニューのアイコンはプラグインのアイコンに。
メニューにはスライドの開閉が自動で適用され、アイコンもプラグインのアイコンとなっている。

主となるメニューと、副となるメニュー

PluginSidebarMoreMenuItemを使って、主となるサイドバーでのメニューを作り、PluginMoreMenuItemで副となるメニュー(モーダルや設定のON/OFF)を作る事が想定されている使い方のようです。1プラグインに1スライドのメニュー、その他…という構成ですね。
その為、registerPluginのiconが自動で適用されるのでしょう。
複数のサイドバーボタンを追加する事も出来ますが、構造としてもあまり良くありません。
サイドバーメニューの中には「文書」「ブロック」と言ったようにタブでプラグインの機能を別けるのが良いようです。

サイドバーメニューを作らない場合

サイドバーメニューを作らず、モーダルや設定のON/OFFと言ったUIをプラグインの主メニューとする場合は、PluginMoreMenuItemを使って作って良いと思います。
その場合は、自動でiconが適用されないので、メニューにアイコンを自分で設定したりするようにしましょう。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。