WordPress

useState

変数の初期値を設定できる。

Reactと同様な機能を持っているため、値が更新されると再レンダリングされる。
また、更新後に値を引き継がないので一時的な状態管理向き。

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

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

    const [showPicker, setShowPicker] = useState(false);

    const onClickedUnderlineBtn = () => {
        setShowPicker(!showPicker);
        onChange(toggleFormat(value, {
            'type': 'systech/underline'
        }));
    }

    return (
        <>
            <RichTextToolbarButton
                title='アンダーライン'
                icon='editor-underline'
                onClick={onClickedUnderlineBtn}
                isActive={isActive}
            />
            {
                showPicker && (
                    <div>TRUE時のみ表示</div>
                )
            }
        </>

    )
}

registerFormatType('systech/underline', {
    title: 'アンダーライン',
    tagName: 'span',
    className: 'u-underline',
    edit: insertUnderline
})

外部リンク

ドキュメント