WordPress

RichTextToolbarButton

書式ツールバー「↓さらに表示」の中にボタンを追加する

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

const testFn = ({ isActive, onChange, value }) => {

    const onClickedTestBtn = () => {
        onChange(toggleFormat(value, {
            'type': 'systech/test'
        }))
    }

    return (
        <RichTextToolbarButton
            title='テストボタン'
            icon='desktop'
            onClick={onClickedTestBtn}
            isActive={isActive}
        />
    )
}

registerFormatType('systech/test', {
    title: 'テスト',
    tagName: 'span',
    className: 'u-test',
    edit: testFn
});
  • title：表示されるタイトル
  • icon：タイトルの左側に表示されるアイコン
  • onClick：クリックされたときに実行される関数
  • isActive：選択されたテキストの状態を判定し適用されているかを可視化してくれる

iconは独自のsvgでも可能っぽいが、wordpressのDashiconsを使うのが簡単

外部リンク

ドキュメント