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

WordPress

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

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

registerPlugin

@wordpress/plugins
Plugins module for WordPress. Installation Install the module npm install @wordpress/plugins –save This package assumes that your code will run in an ES2015+ en...

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
WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

今回は 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 を通して行うことができます。

WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg
WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

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

gutenberg.js

const {Fragment} = wp.element;
const {PluginSidebar, PluginMoreMenuItem} = wp.editPost;
const {PanelBody, IconButton} = wp.components;
const {dispatch, select} = wp.data;
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>
                {!select('core/edit-post').isPluginItemPinned('my-plugin/test') && <PluginMoreMenuItem
                    icon="carrot"
                    onClick={() => {
                        dispatch('core/edit-post').togglePinnedPluginItem('my-plugin/test')
                    }}
                >
                    再び表示
                </PluginMoreMenuItem>}
            </Fragment>
        );
    }
});

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

まとめ

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

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

コメント

タイトルとURLをコピーしました