Gutenberg にプラグインを登録する

Gutenberg（ブロックエディタ）にはプラグインを登録する機能があります。

ここでいうプラグインとは『WP Multibyte Patch』や『Contact Form 7』のような、管理画面からインストールして使うものとは異なり、Gutenbergに独自の機能や表示を追加するためのJavaScriptで記述するプログラムのことを指します。

registerPlugin

icon と render を指定できます。

icon はなくてもよいですが render は必ず必要です。

サンプル

上部に固定することができ、クリックすると「click!」 と表示されるボタンをもつプラグインを登録してみます。

JavaScriptの登録

エディタで実行するためのJavaScriptをPHP側で登録します。

テーマの functions.php や 独自のプラグインを作成し次のようなプログラムを追加します。

functions.php

add_action( 'enqueue_block_editor_assets', function () {
   wp_enqueue_script( 'my_plugin', plugins_url( 'assets/js/gutenberg.js', __FILE__ ), [
      'wp-element',
      'wp-edit-post',
      'wp-components',
      'wp-data',
      'wp-plugins',
   ] );
} );

プラグインの登録

上で登録したJavaScriptに処理を書いていきます。

gutenberg.js

const { Fragment } = wp.element;
const registerPlugin = wp.plugins.registerPlugin;

registerPlugin( 'my-plugin', {
	render: () => {
		return (
			<Fragment/>
		);
	},
} );

これで登録自体は完了です。ビルドして実行してみてください。

ただし、まだ描画する要素を実装していないためなにも変化はありません。

render の実装

利用できる要素はいくつかあります。

• PluginBlockSettingsMenuItem
• PluginMoreMenuItem
• PluginPostPublishPanel
• PluginPostStatusInfo
• PluginPrePublishPanel
• PluginSidebar
• PluginSidebarMoreMenuItem

今回は PluginSidebar でサイドバーを追加します。

他の要素がどこにどう表示されるかに関しては以下の記事を参考にしてください。

先ほどは <Fragment/> としか書かなかった箇所を修正します。

gutenberg.js

const { Fragment } = wp.element;
const { PluginSidebar } = wp.editPost;
const { IconButton, PanelBody } = wp.components;
const registerPlugin = wp.plugins.registerPlugin;

registerPlugin( 'my-plugin', {
	render: () => {
		return (
			<Fragment>
				<PluginSidebar
					name='test'
					icon='carrot'
					title='追加テスト'
				>
					<PanelBody
						title='追加テストのパネル'
						initialOpen={ true }
					>
						<IconButton
							icon='admin-post'
							onClick={ () => {
								alert( 'click!' );
							} }
						/>
					</PanelBody>
				</PluginSidebar>
			</Fragment>
		);
	},
} );

ここまでで次のようなボタンとパネルが追加されます。

星のボタンで固定が解除されます。

そのままパネルを閉じると再び固定させる方法が今のところありません。

再び固定できるようにボタンを追加する

もう少しプログラムを追加して再度固定できるようにしてみます。

固定されているかどうかの状態の取得及び変更は『core/edit-post』の store を通して行うことができます。

固定されていないときにだけ PluginMoreMenuItem を使用してボタンを表示させます。

gutenberg.js

registerPlugin( 'my-plugin', {
	render: () => {
		return (
			<Fragment>
				<PluginSidebar
					name='test'
					icon='carrot'
					title='追加テスト'
				>
					<PanelBody
						title='追加テストのパネル'
						initialOpen={ true }
					>
						<IconButton
							icon='admin-post'
							onClick={ () => {
								alert( 'click!' );
							} }
						/>
					</PanelBody>
				</PluginSidebar>
				{ ! select( 'core/edit-post' ).isPluginItemPinned( 'my-plugin/test' ) && <PluginMoreMenuItem
					icon="carrot"
					onClick={ () => {
						dispatch( 'core/edit-post' ).togglePinnedPluginItem( 'my-plugin/test' );
					} }
				>
					再び表示
				</PluginMoreMenuItem> }
			</Fragment>
		);
	},
} );

再度固定させることができました。

まとめ

Gutenbergのプラグインを使えばエディタ自体を拡張することが可能です。

使い方次第でもっとGutenbergが使いやすくなる気がします。