ボタンのクリックでフォーマットを適用する

ここまではまだカスタムボタンをクリックしても選択したテキストは変化せず、コンソールにメッセージが表示されるだけです。これから実装していきます。

rich-text パッケージ にはフォーマット関連のユーティリティー applyFormat、removeFormat、toggleFormat があります。

この例で適用するフォーマットの <samp> タグは、選択したテキストがタグを持つか持たないかの2つの状態を取ります。したがって toggleFormat プリミティブを使えば良さそうです。

my-custom-format.js を次のコードで更新してください。

ES5

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

ESNext

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

const MyCustomButton = ( props ) => {
    return <RichTextToolbarButton
        icon='editor-code'
        title='Sample output'
        onClick={ () => {
            props.onChange( toggleFormat(
                props.value,
                { type: 'my-custom-format/sample-output' }
            ) );
        } }
        isActive={ props.isActive }
    />;
};

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

意図したとおりに動作するかを確認します。投稿またはページをリロードし、テキストを選択し、ボタンをクリックし、HTML ビューに切り替えます。タグが正しく適用されていることが確認できます。

期待する動作としてフォーマットはトグルします。すなわち、選択したテキストに何もなければ <samp> タグでラップされ、すでにタグがあれば除去されます。選択したテキストのタグの有無によってボタンは異なるスタイルでレンダリングすることに注意してください。これは RichTextToolbarButton コンポーネントの isActive プロパティによって制御されます。

タグが適用されるとブラウザ上ではすでに異なるスタイルで表示されたかもしれませんが、指定したスタイルを使用することもできます。registerFormatType の className オプションを使用して新しい要素をクラス名で対象にできます。className が設定されると、新しい要素に追加されます。

以上で、新しいエディターで利用可能なカスタムフォーマットについての説明は終了です。ここからは他のチュートリアルを調べるか、ここで得た新しい知識を次のプラグインで試してみてください !

原文

最終更新日: