段落ブロックをもう少しカスタマイズした

説明

前回追加したツールバー（メニュー）の「マーキング」は、必要最低限の機能を実装した感じだ。今回はその続きで、標準の「太字」や「イタリック」ボタンのようなショートカットキーに対応するところからはじめていく。

リッチテキストのショートカットキー

ショートカットキーを実装すべく、ネットで検索したり、ソースコードを読んでいくと、RichTextToolbarButtonと同じblockEditorパッケージにあるRichTextShortcutが見つかった。このRichTextShortcutを適用したソースコードは次の通り。なおツールバー（メニュー）とショートカットキーに対応した処理は重複しているため、このタイミングで関数化した。

var paragraphMarkingButton = function ( props ) {

function onToggle() {
	props.onChange(
		wp.richText.toggleFormat( props.value, {
			type: 'core-ex/marking',
		} )
	);
}

function onClick() {
	onToggle();
	props.onFocus();
}

return el(
	wp.element.Fragment,
	{},
	el(
		wp.blockEditor.RichTextShortcut,
		{
			type: 'primary',
			character: 'm',
			onUse: onToggle
		}
	),
	el(
		wp.blockEditor.RichTextToolbarButton,
		{
			icon: 'admin-customizer',
			title: 'マーキング',
			onClick: onClick
		}
	)
);

赤字の追加した部分では、RichTextShortcutを使ってショートカットキーに対応するための要素を生成。これをRichTextToolbarButtonを使ったツールバーの要素と組み合わせるため、青字で示すwp.element.Fragmentを使って、2つの要素を内包した要素を生成している。

RichTextShortcutで要素を生成する際に指定するパラメータは、type、character、onUseの3つとなる。typeには修飾キーの組み合わせ（modifiers）を示すキーワードを、characterにはa～z、delやbackspaceといったキー名を、onUseにはキーの組み合わせが押された際に呼び出される任意の関数を指定する。

typeに指定できるキーワードとその組み合わせは次の通りで、AppleのOSかどうかで適用される修飾キーが変化するものがある。

上記のソースコードではtypeに'primary'を、characterに'm'を指定しており、Windows環境ならCtrl+Mキーが「マーキング」を切り替えるショートカットキーとなる。

メニューからツールバーのボタンへ

ここまで進めてくると、現状メニューとして表示されている「マーキング」をツールバー上のボタンとして表示させたくなってしまう。そんな想いで、RichTextToolbarButtonのソースコードを読み進めていくと、パラメータnameの指定によって「Fill」の名前が変わるようになっていた。例えばnameの内容が'bold'の場合ならそれはRichText.ToolbarControls.boldとなり、nameが省略された場合にはRichText.ToolbarControlsとなる。RichTextToolbarButtonを使って生成される要素は、先ほどの名前を使ったFill要素であり、その子要素はボタン（メニュー項目）要素となる。

ブロックエディターの編集画面には、「Slot」と呼ばれる固有の名前が付けた場所を編集画面上の各所に定義されている。「Fill」とはそんな「Slot」に埋め込まれるモノであり、どの「Slot」かを示す名前が指定されている。ツールバーを例に、具体的に「Slot」がどのような場所に定義されているのかを確認する。

RichTextToolbarButtonのパラメータを次のように変更する。nameはすでに説明しているように「Slot」を示すものでここでは'text-color'を、続くisActiveにはprops.isActiveを指定する。shortcutTypeとshortcutCharacterには、ショートカットキーを設定する際に指定したtypeとcharacterと同じものをそれぞれ指定する。

el(
	wp.blockEditor.RichTextToolbarButton,
	{
		icon: 'admin-customizer',
		title: 'マーキング',
		name: 'text-color',
		isActive: props.isActive,
		shortcutType: 'primary',
		shortcutCharacter: 'm',
		onClick: onClick
	}
)

次の図がツールバーのボタンとして表示されたところ。

nameで指定した'text-color'の効果により、「マーキング」ボタンは「リンク」ボタンの右側に表示される。isActiveの指定はカーソル位置がマーキング設定範囲内かどうかを示すもので、対象の範囲内であればボタンが押された状態（反転）に切り替わるようになる。shortcutTypeとshortcutCharacterの効果は、マウスポインタがボタンの上にのった際に表示されるツールチップにショートカットキーを加えるもので、この2つの指定がない場合はtitleの内容のみが表示される。

これでwp.richText.registerFormatTypeで追加する文字修飾（フォーマット）に関しては、おおむね説明できただろう。段落ブロックに文字修飾に物足りなさを感じている方の参考になれば幸いである。