【WordPress】registerPlugin と PluginSidebar の使い方｜ブロックエディターに独自のサイドバーを追加する

{
  "name": "my-editor-plugin",
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  },
  "devDependencies": {
    "@wordpress/scripts": "^30.0.0"
  }
}

<?php
/**
 * Plugin Name: My Editor Plugin
 */

function myplugin_enqueue_editor_assets() {
    // ビルド時に生成される asset ファイルから依存関係とバージョンを読む
    $asset = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

    wp_enqueue_script(
        'myplugin-editor',
        plugins_url( 'build/index.js', __FILE__ ),
        $asset['dependencies'], // wp-plugins や wp-editor が自動で入る
        $asset['version'],
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'myplugin_enqueue_editor_assets' );

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody } from '@wordpress/components';
import { megaphone } from '@wordpress/icons';

const MySidebar = () => (
    <PluginSidebar
        name="my-sidebar"          // サイドバーを識別する名前
        title="公開前チェック"      // アイコンのツールチップと見出しに使われる
        icon={ megaphone }
    >
        <PanelBody title="チェック項目" initialOpen={ true }>
            <p>ここに好きな UI を置けます。</p>
        </PanelBody>
    </PluginSidebar>
);

registerPlugin( 'my-editor-plugin', { render: MySidebar } );

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
import { Fragment } from '@wordpress/element';
import { megaphone } from '@wordpress/icons';

const MySidebar = () => (
    <Fragment>
        <PluginSidebarMoreMenuItem target="my-sidebar" icon={ megaphone }>
            公開前チェック
        </PluginSidebarMoreMenuItem>

        <PluginSidebar name="my-sidebar" title="公開前チェック" icon={ megaphone }>
            <p>ここに好きな UI を置けます。</p>
        </PluginSidebar>
    </Fragment>
);

registerPlugin( 'my-editor-plugin', { render: MySidebar } );

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
import { ToggleControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyPanel = () => {
    const [ isFeatured, setIsFeatured ] = useState( false );

    return (
        <PluginDocumentSettingPanel
            name="my-document-panel"  // パネルの識別名
            title="記事の設定"          // パネルの見出し
            className="my-document-panel"
        >
            <ToggleControl
                __nextHasNoMarginBottom
                label="トップページで大きく表示する"
                checked={ isFeatured }
                onChange={ ( value ) => setIsFeatured( value ) }
            />
        </PluginDocumentSettingPanel>
    );
};

registerPlugin( 'my-document-panel', { render: MyPanel } );

function myplugin_register_meta() {
    register_post_meta(
        'post', // 対象の投稿タイプ
        'myplugin_is_featured',
        array(
            'type'         => 'boolean',
            'single'       => true,
            'default'      => false,
            'show_in_rest' => true, // これがないとエディターから読み書きできない
            'auth_callback' => function () {
                return current_user_can( 'edit_posts' );
            },
        )
    );
}
add_action( 'init', 'myplugin_register_meta' );

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel, store as editorStore } from '@wordpress/editor';
import { ToggleControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

const MyPanel = () => {
    // 編集中の投稿タイプを取得する
    const postType = useSelect(
        ( select ) => select( editorStore ).getCurrentPostType(),
        []
    );

    // meta オブジェクトと更新関数を受け取る
    const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );

    const isFeatured = meta?.myplugin_is_featured ?? false;

    return (
        <PluginDocumentSettingPanel name="my-document-panel" title="記事の設定">
            <ToggleControl
                __nextHasNoMarginBottom
                label="トップページで大きく表示する"
                checked={ isFeatured }
                onChange={ ( value ) =>
                    // 既存の meta を残したまま該当キーだけ上書きする
                    setMeta( { ...meta, myplugin_is_featured: value } )
                }
            />
        </PluginDocumentSettingPanel>
    );
};

registerPlugin( 'my-document-panel', { render: MyPanel } );