ブロックエディタにラインマーカーを追加する方法（プラグインなし）

WordPressのブロックエディタに蛍光ペンでラインマーカーを引ける機能を追加してみました！プラグインなしで、functions.phpとJavaScriptを使って実現できるんです。結構簡単でしたよ！

highlight.js

テーマファイルのディレクトリの中に「js」ディレクトリを作って、その中に「highlight.js」を置くことにします。highlight.jsの内容は、以下のようになります。

JavaScript
/**
 * ブロックエディタにハイライト（蛍光ペン）を追加
 */
(function (richText, element, blockEditor) {}
    (
        window.wp.richText,
        window.wp.element,
        window.wp.blockEditor
    )
);

(function (richText, element, blockEditor) {
    richText.registerFormatType(`highlight/${myEditorObj[0].item}`, {
        title: myEditorObj[0].title,
        tagName: 'span',
        className: myEditorObj[0].class,
        edit: function (args) {
            return element.createElement(blockEditor.RichTextToolbarButton, {
                icon: 'admin-customizer',
                title: myEditorObj[0].title,
                onClick: function () {
                    args.onChange(richText.toggleFormat(args.value, {
                        type: `highlight/${myEditorObj[0].item}`
                    }));
                },
                isActive: args.isActive,
            });
        },
    })
}(
    window.wp.richText,
    window.wp.element,
    window.wp.blockEditor
));

functions.php

highlight.jsを読み込んで、エディタに「ハイライト（蛍光ペン）」という名前で編集メニューを追加します。

PHP
/**
 * ブロックエディタにハイライト（蛍光ペン）を追加
 */
add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script( 'highlight', get_theme_file_uri( 'js/highlight.js'), [
		'wp-element',
		'wp-rich-text',
		'wp-editor',
	]);
	wp_localize_script( 'highlight', 'myEditorObj', [
		[
			'item' => 'highlight',
			'title' => 'ハイライト（蛍光ペン）',
			'class' => 'text-highlight',
		]
	]);
});

style.css

スタイルシートのクラス「text-highlight」に対してスタイルを定義します。下記例では黄色の蛍光ペンでラインマーカーを引いたような見た目になります。

CSS
/* 蛍光ペン */
.text-highlight {
  background: linear-gradient(to top, #eaeb16 40%, transparent 40%);
  font-weight: bold;
}

実装結果

ブロックエディタに「ハイライト（蛍光ペン）」という名前でラインマーカー機能が追加されました！