【WordPress】スラッシュで追加できるブロック一覧を表示する自作プラグイン【Gutenberg】

現在の環境で使用可能な Gutenberg のスラッシュ対応ブロックを一覧表示する投稿編集画面専用プラグインを自作し、その仕組みと導入手順を説明する。

はじめに
プログラムの概要
導入方法
投稿画面における使い方
おわりに

はじめに

WordPress のブロックエディタ（Gutenberg）では、本文入力中に / を入力することでブロックを素早く追加できる。

しかし、実際にどのブロックがスラッシュ入力に対応しているかは、公式ドキュメントや管理画面上から一覧で確認できない。

この記事では、現在の環境で使用可能な Gutenberg のスラッシュ対応ブロックを一覧で表示する投稿編集画面専用プラグインを自作し、その仕組みと導入手順を説明する。

■ 動作確認環境
・WordPress：6.9
・PHP：8.4.3
・テーマ：Cocoon 1.0.8
・ブラウザ：143.0.7499.170

プログラムの概要

このプラグインは、投稿編集画面のサイドバーに以下の情報を表示する。

Gutenberg が認識している全ブロック
/ 入力時に候補として表示されるブロックの日本語名
ブロックの内部名（core/paragraph など）

さらに、一覧の上部には検索ボックスを配置し、日本語ブロック名を入力すると、入力と同時に該当行のみが表示される。

導入方法

プラグイン全体構成

wp-content/
└─ plugins/
   └─ gutenberg-slash-list/
      ├─ gutenberg-slash-list.php   ← PHP（読み込み処理）
      └─ sidebar.js                 ← JavaScript（Gutenberg 拡張）

ソースコード

`gutenberg-slash-list.php`

<?php
/
 * Plugin Name: Gutenberg Slash List Viewer
 * Description: 投稿編集画面のサイドバーに Gutenberg の / ショートカット一覧を表示する
 * Version: 1.1.0
 */

if (!defined('ABSPATH')) {
    exit;
}

/
 * ブロックエディタ用スクリプトを読み込む
 */
function gslv_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'gslv-sidebar',
        plugin_dir_url(__FILE__) . 'sidebar.js',
        array(
            'wp-blocks',
            'wp-element',
            'wp-components',
            'wp-edit-post',
            'wp-plugins'
        ),
        '1.1.0',
        true
    );
}
add_action('enqueue_block_editor_assets', 'gslv_enqueue_block_editor_assets');

`sidebar.js`

( function ( wp ) {
    const { registerPlugin } = wp.plugins;
    const { PluginSidebar } = wp.editPost;
    const { createElement, useEffect, useState } = wp.element;

    function SlashListSidebar() {
        const [ blocks, setBlocks ] = useState( [] );
        const [ filterText, setFilterText ] = useState( '' );

        useEffect( () => {
            setBlocks( wp.blocks.getBlockTypes() );
        }, [] );

        const filteredBlocks = blocks.filter( block =>
            block.title.toLowerCase().includes( filterText.toLowerCase() )
        );

        return createElement(
            'div',
            {},
            createElement(
                'input',
                {
                    type: 'text',
                    value: filterText,
                    placeholder: 'スラッシュ名で検索（例：見出し）',
                    onChange: event => setFilterText( event.target.value ),
                    style: {
                        width: '100%',
                        marginBottom: '12px'
                    }
                }
            ),
            createElement(
                'table',
                { className: 'widefat striped' },
                createElement(
                    'thead',
                    {},
                    createElement(
                        'tr',
                        {},
                        createElement( 'th', {}, 'ブロック名' ),
                        createElement( 'th', {}, 'スラッシュ' )
                    )
                ),
                createElement(
                    'tbody',
                    {},
                    filteredBlocks.map( block =>
                        createElement(
                            'tr',
                            { key: block.name },
                            createElement( 'td', {}, '/' + block.title ),
                            createElement( 'td', {}, block.name )
                        )
                    )
                )
            )
        );
    }

    registerPlugin( 'gutenberg-slash-list', {
        render: () =>
            createElement(
                PluginSidebar,
                {
                    name: 'gutenberg-slash-list',
                    title: 'Slash 一覧'
                },
                createElement( SlashListSidebar )
            )
    } );

} )( window.wp );

サーバーにアップロードする

ローカルで gutenberg-slash-list フォルダを作成

上記 2 ファイルを配置

FFFTP で以下にアップロード

/wp-content/plugins/gutenberg-slash-list/

窓の杜

「FFFTP」定番FTPクライアントソフト

プラグインを有効化する

WordPress 管理画面を開く
「プラグイン」一覧へ移動して「Gutenberg Slash List Viewer」を検索

Gutenberg Slash List Viewer を有効化

これで投稿編集画面のサイドバーに機能が追加される。

投稿画面における使い方

投稿編集画面（ブロックエディタ）を開く
右上の「︙」メニューから「Slash 一覧」を開く

サイドバー内にブロック一覧表が表示される
検索ボックスに日本語名を入力すると、該当ブロックのみが即時表示される

おわりに

現在の環境で使用可能な Gutenberg のスラッシュ対応ブロックを一覧表示する投稿編集画面専用プラグインを自作し、その仕組みと導入手順を説明した。

ChatGPT万歳。