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

フォーマットが利用可能になったので、次に 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 el = wp.element.createElement;
    var useSelect = wp.data.useSelect;

    function ConditionalButton( props ) {
        var selectedBlock = useSelect( function ( select ) {
            return select( 'core/block-editor' ).getSelectedBlock();
        }, [] );

        if ( selectedBlock && selectedBlock.name !== 'core/paragraph' ) {
            return null;
        }

        return el( wp.blockEditor.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: ConditionalButton,
    } );
} )( window.wp );

ESNext

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

function ConditionalButton( props ) {
    const selectedBlock = useSelect( ( select ) => {
        return select( 'core/block-editor' ).getSelectedBlock();
    }, [] );

    if ( selectedBlock && selectedBlock.name !== 'core/paragraph' ) {
        return null;
    }

    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: ConditionalButton,
} );

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

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

原文

最終更新日: