registerFormatType
書式ツールバーに情報を登録する
import { registerFormatType } from '@wordpress/rich-text';
const testFn = ({isActive, onChange, value}) => {
return (
<>
<div>ここにJSXの処理を記載</div>
</>
)
}
registerFormatType('systech/test', {
title: 'テスト',
tagName: 'span',
className: 'u-test',
attributes: {
style: 'style'
},
edit: testFn
});- 第一引数：一意の識別子
- 第二引数：オブジェクト
title：UI上には表示されるず、おそらく内部で使用される
tagName：選択要素を囲うタグ
className：tagNameに付与するクラス名（classNameを指定しないとWordPressが判断できずエラーを出力する）
attributes：タグに直接スタイルやデータなどを挿入したいときに使う
edit：JSXの処理を記載
editに渡されるpropsで主に使うものは以下のとおり。
- isActive：現在の状態をbooleanで管理
- onChange：valueを更新する際に利用
- value：現在の値
情報が正しく登録されているかは、以下で確認できる
console.log(wp.data.select( 'core/rich-text' ).getFormatTypes());