ツールバーへのボタンの追加

フォーマットが利用可能になったので、次に UI を作成します。RichTextToolbarButton コンポーネントを使用してフォーマットツールバーを拡張します。

次のコードを my-custom-format.js に追加してください。

ES5

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    console.log( 'toggle format' );
                },
            }
        );
    }
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: MyCustomButton,
        }
    );
} )( window.wp );

ESNext

import { registerFormatType } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

const MyCustomButton = props => {
    return <RichTextToolbarButton
        icon='editor-code'
        title='Sample output'
        onClick={ () => {
            console.log( 'toggle format' );
        } }
    />
};

registerFormatType(
    'my-custom-format/sample-output', {
        title: 'Sample output',
        tagName: 'samp',
        className: null,
        edit: MyCustomButton,
    }
);

重要: このコードは新しいユーティリティー (wp.element.createElement と wp.editor.RichTextToolbarButton) を使用しています。忘れずに対応する wp-element と wp-editor のパッケージを既存の wp-rich-text とともに PHP ファイル内の依存性配列に追加してください。

期待どおりに動作するかを確認します。投稿やページをリロードしテキストブロックを選択してください。フォーマットツールバーに新しいボタンが追加されています。editor-code ダッシュアイコン を使用し、title に設定したテキストがホバーします。

またボタンをクリックするとメッセージ toggle format がブラウザーのコンソールに表示されます。

特定のブロックでのボタンの表示

デフォルトではボタンはすべてのリッチテキストツールバー、たとえば画像のキャプション、ボタン、段落等でレンダリングされます。特定のタイプのブロックでのみボタンをレンダリングすることができます。これには wp.data.withSelect と wp.compose.ifCondition を一緒に使用します。 次のサンプルコードは先ほどのボタンを「段落」ブロックでのみレンダリングします。

ES5

( function( wp ) {
    var withSelect = wp.data.withSelect;
    var ifCondition = wp.compose.ifCondition;
    var compose = wp.compose.compose;
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    console.log( 'toggle format' );
                },
            }
        );
    }
    var ConditionalButton = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name === 'core/paragraph'
            );
        } )
    )( MyCustomButton );

    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: ConditionalButton,
        }
    );
} )( window.wp );

ESNext

import { compose, ifCondition } from '@wordpress/compose';
import { registerFormatType } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { withSelect } from '@wordpress/data';

const MyCustomButton = props => {
    return <RichTextToolbarButton
        icon='editor-code'
        title='Sample output'
        onClick={ () => {
            console.log( 'toggle format' );
        } }
    />
};

const ConditionalButton = compose(
    withSelect( function( select ) {
        return {
            selectedBlock: select( 'core/editor' ).getSelectedBlock()
        }
    } ),
    ifCondition( function( props ) {
        return (
            props.selectedBlock &&
            props.selectedBlock.name === 'core/paragraph'
        );
    } )
)( MyCustomButton );

registerFormatType(
    'my-custom-format/sample-output', {
        title: 'Sample output',
        tagName: 'samp',
        className: null,
        edit: ConditionalButton,
    }
);

wp-compose と wp-data を PHP スクリプト内の依存性配列に忘れずに加えてください。

もっと高度な条件を加えることも可能です。たとえばブロックの特定の属性に依存してボタンを表示するなど。

最終更新日: 2020年4月27日