WordPress Gutenbergのリッチテキストツールバーにドロップダウンメニューボタン追加

専用ドロップダウンメニューへまとめるには

リッチテキストの通常のドロップダウンメニューではなく、専用に別のドロップダウンメニューとしてまとめるコードについても紹介します

先ほど作成した edit_richtext.js を以下のように変更します

(function () {
    const { Fragment, createElement } = wp.element;
    const { registerFormatType, toggleFormat } = wp.richText;
    const { RichTextToolbarButton, RichTextShortcut, BlockFormatControls } = wp.blockEditor;

    const { Fill, Slot, Toolbar, ToolbarButton, DropdownMenu } = wp.components;
    const { displayShortcut } = wp.keycodes;
    const { orderBy } = lodash;

    const el = createElement;

    function CeltisRichTextToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
        let shortcut;
        let fillName = 'CeltisToolbarControls';
        
        if ( name ) {
            fillName += `.${ name }`;
        }
        
        if ( shortcutType && shortcutCharacter ) {
            shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
        }
        
        return (
            el( Fill, 
                { name: fillName },
                el( ToolbarButton,
                    props,
                    { shortcut: shortcut }
                ),                  
            )  
        );
    };

    //専用のドロップダウン用ボタンとメニューを登録
    registerFormatType( 'celtis/dropdown', {
        title: 'buttons',
        tagName: 'dropdown',
        className: null,

        edit( { isActive, value, onChange } ) {
            return (
                el( BlockFormatControls, 
                    {},
                    el( 'div', 
                        { className: 'editor-format-toolbar block-editor-format-toolbar' },
                        el( Toolbar, 
                            {},
                            el( Slot, 
                                { name: 'CeltisToolbarControls' },
                                (fills) => {
                                    return ( fills.length !== 0 &&
                                        el( DropdownMenu, 
                                            { icon: 'smiley',
                                              label: 'Celtis Buttons',
                                              hasArrowIndicator: true,
                                              position: 'bottom left',
                                              controls : orderBy( fills.map( ( [ { props } ] ) => props ), 'title'),
                                            }
                                        )
                                    );
                                }
                            )
                        ),   
                    )
                )
            );
        }
    });
    
    const tagTypes = [];
    tagTypes.push({ tag: 'mark', class: null, title: 'mark (マーカー)', icon: 'edit' });
    tagTypes.push({ tag: 'mark', class: 'style-linemaker', title: 'mark (アンダーラインマーカー)',icon: 'edit' });

    tagTypes.map( (idx) => {
        let type = 'celtis/richtext-' + idx.tag;
        if(idx.class !== null){
            type += '-' + idx.class;
        }
        registerFormatType( type, {
            title: idx.title,
            tagName: idx.tag,
            className: idx.class,

            edit( { isActive, value, onChange } ) {
                return (
                    el( Fragment,
                        {},
                        // RichTextToolbarButton から CeltisRichTextToolbarButton へ登録先変更
                        el( CeltisRichTextToolbarButton,
                            { icon: idx.icon,
                              title: idx.title,
                              isActive: isActive,
                              onClick: () => onChange( toggleFormat(value, { type: type })),
                            }
                        )
                    )
                );
            },
        });
    }) 
    
}());

これでツールバーにスマイルアイコンの専用ボタンが追加されて、そこに マーカーとアンダーラインマーカーの2つのメニューが追加されるようになります

ちょっとコードが複雑になり、正直なところ私も理解できてません … 　Gutenberg ソースコードの JSX を使って記述されているコードをベースにして、それを開発環境がなくても実行できるように変更して作成してみました

コードを理解するにはかなりの修行が必要なので プログラマー以外の方にはちょっと難しいですかね。私も JS が得意でないし、もっと手軽に JS を扱いたいのでなかなかムズい感じです　(^_^;)

さらにいろいろ挑戦してみたいという方には、やはり開発環境を用意するのがおすすめです。 下記の create-block を使えば、 簡単に開発環境を構築できるようになったのでそこから始めるのが良いかもしれません

@wordpress/create-block | Block Editor Handbook | WordPress Developer Resources

Create Block is an officially supported way to create blocks for registering a block for a WordPress plugin. It offers a modern build setup…

WordPress Developer Resources