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が使いやすくなる気がします。