プラグインをエディターに登録!registerPlugin

久々のBlock開発学習記事になってしまいました。
今回はメニューにプラグインメニューを追加するregisterPluginについて。

registerPluginを使えば、メニューのプラグイン部分に項目を追加できる

使ってみる

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と書かれた項目が追加されるでしょう。

2行に設定

デフォルトでのメニューである表示トップツールバーなどの項目は、2行になっています。
このようなスタイルにしたい場合は、デフォルトと同様にspanタグで記述を行うようです。{ __( ‘This is Test’ ) }の箇所を下記のように変更し、スタイルを適用してください。

<span className="components-menu-item__スラグ名-wrapper">
	{ __( 'This is Test' ) }
	<span className="components-menu-item__スラグ名">
		{ __( 'This is Test Description' ) }
	</span>
</span>

また、CSSを追加しましょう。このCSSは公式とほぼ同様です。

.components-menu-item__スラグ名-wrapper {
	display: flex;
	flex-direction: column;
}
.components-menu-item__スラグ名 {
	margin-top: 4px;
	font-size: 12px;
	opacity: .82;
}

これで同様に2行として表示されると思います。

モーダル表示やチェック選択…など

onClickイベントでモーダルを呼び出すようにすればモーダル表示が出来ます。
<Modal>を使えば良いと思います。その際はisOpenなどをonClickと共に制御する必要があります。

デフォルトにあるような選択するとチェックが付くのは、onClick時にisSelectと言う変数で制御しています。そして、PluginMoreMenuItemのiconを

icon={ isSelect ? 'yes' : null }

のようにしています。そうする事でチェックがON / OFFしているように表示できると言う訳です。

実際のメニューイベント処理の実装については、この記事では割愛します。
プラグインのブロックをよりよくする為のメニュー実装、してみると良いかもしれません。

追記

プラグインのメニューにPluginMoreMenuItemで追加する方法は、主となる機能を追加するのには適切では無いです。
こちらを参考にしてみてください。

この記事を書いた人

kmix-39

kmix-39

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