[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した（functions.php）

• WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。
• functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。

1. 「書式のクリア」のショートカットキーを追加したい

WordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。

ブロックエディタの「書式のクリア」は、そのほかのメニューにあるため、いちいち選択するのに2クリック必要だからです。

選択範囲がある場合はその範囲の書式をクリアし、選択範囲がない場合はブロック全体の書式をクリアします。

functions.phpファイルを使ってJavaScriptを読み込み、そのJavaScriptファイル内でショートカットキーの機能を実装します。

2. functions.php（enqueue_custom_editor_script）

まず、functions.phpファイルに以下のコードを追加して、カスタムJavaScriptファイルを読み込みます

function enqueue_custom_editor_script() {
    wp_enqueue_script(
        'custom-editor-script',
        get_stylesheet_directory_uri() . '/js/custom-editor.js',
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
        filemtime( get_stylesheet_directory() . '/js/custom-editor.js' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_editor_script' );

子テーマなので、get_stylesheet_directory_uri()とget_stylesheet_directory()を使っています。

3. custom-editor.js

テーマフォルダ内の js ディレクトリに custom-editor.js ファイルを作成し、以下のコードを追加します

(function (wp) {
    var __ = wp.i18n.__;
    var registerFormatType = wp.richText.registerFormatType;
    var removeFormat = wp.richText.removeFormat;
    var slice = wp.richText.slice;
    var createElement = wp.element.createElement;

    if (typeof wp === 'undefined' || !wp.richText || !wp.richText.registerFormatType) {
        console.error('WordPress editor API not available');
        return;
    }

    registerFormatType('custom/clear-format', {
        title: __('Clear formatting'),
        tagName: 'span',
        className: null,
        edit: function (props) {
            return null;
        }
    });

    function clearFormatting() {
        var editor = wp.data.select('core/block-editor');
        var dispatch = wp.data.dispatch('core/block-editor');
        var selectedBlockClientIds = editor.getSelectedBlockClientIds();

        if (selectedBlockClientIds.length === 0) return;

        selectedBlockClientIds.forEach(function(clientId) {
            var block = editor.getBlock(clientId);
            if (!block || !block.attributes.content) return;

            var content = wp.richText.create({ html: block.attributes.content });
            var start = editor.getSelectionStart();
            var end = editor.getSelectionEnd();

            var newContent;
            if (start.offset !== end.offset || start.clientId !== end.clientId) {
                // 範囲選択がある場合
                if (start.clientId === clientId && end.clientId === clientId) {
                    // 選択範囲が現在のブロック内にある場合
                    newContent = removeAllFormats(content, start.offset, end.offset);
                } else if (start.clientId === clientId) {
                    // 選択範囲の開始が現在のブロック内にある場合
                    newContent = removeAllFormats(content, start.offset, content.text.length);
                } else if (end.clientId === clientId) {
                    // 選択範囲の終了が現在のブロック内にある場合
                    newContent = removeAllFormats(content, 0, end.offset);
                } else {
                    // 選択範囲が現在のブロック全体を含む場合
                    newContent = removeAllFormats(content, 0, content.text.length);
                }
            } else {
                // 範囲選択がない場合、ブロック全体をクリア
                newContent = wp.richText.create({ text: content.text });
            }

            dispatch.updateBlock(clientId, {
                attributes: {
                    ...block.attributes,
                    content: wp.richText.toHTMLString({ value: newContent })
                }
            });
        });
    }

    function removeAllFormats(richTextContent, start, end) {
        var formats = ['core/bold', 'core/italic', 'core/link', 'core/strikethrough', 'core/underline'];
        var newContent = richTextContent;

        formats.forEach(function(format) {
            newContent = removeFormat(newContent, format, start, end);
        });

        return newContent;
    }

    // キーダウンイベントリスナーを追加
    document.addEventListener('keydown', function (event) {
        var isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
        if ((isMac && event.metaKey && event.key === 'j') ||
            (!isMac && event.ctrlKey && event.key === 'j')) {
            event.preventDefault();
            clearFormatting();
        }
    });

    console.log('Custom editor script loaded and initialized');
})(window.wp);

3-1. 初期化と設定・キー入力の監視

コードの内部動作について、簡潔に説明します。

まず、このコードはWordPressのエディタが読み込まれたときに実行されます。

コードは新しい「フォーマットクリア」機能を登録します。
この機能はエディタ内では見えませんが、ショートカットキーで呼び出せるようになります。

コードは常にキー入力を監視しています。
Command+J（macOS）またはCtrl+J（他のOS）が押されると、フォーマットクリアの処理が始まります。

3-2. 選択範囲の確認・フォーマットクリアの実行

キーが押されると、まず現在の選択状態を確認します。
テキストが選択されているか、どのブロックが選択されているかを調べます。

選択状態に応じて、以下の処理を行います：

1. 選択範囲がある場合：
   • 選択された部分のテキストを取得します。
   • そのテキストから全てのフォーマット（太字、斜体、下線など）を削除します。
   • 元のテキストをフォーマットが削除されたテキストで置き換えます。
2. 選択範囲がない場合：
   • 現在のブロック全体のテキストを取得します。
   • そのテキスト全体からフォーマットを削除します。
3. 複数ブロックにまたがる選択の場合：
   • 選択された各ブロックに対して、上記の処理を繰り返します。

3-3. 更新の反映

フォーマットが削除されたテキストで、エディタの内容を更新します。

この更新はWordPressの内部APIを使って行われ、画面上の表示もすぐに変更されます。

このように、コードは入力されたキーを監視し、適切なタイミングでテキストのフォーマットを削除し、その結果をエディタに反映します。

4. 実装時の課題と解決方法

このコードを作る際には、いくつかの難しい点がありました。

ブロックの一部だけが選ばれている場合、その範囲を正確に知ることのも注意が必要でした。
また、テキストが複数のブロックにまたがっている場合の処理にも気をつける必要がありました。

あと、macOSと他のOSでは使うキーが違うため、それぞれに対応することが難しかったです。

こちらもどうぞ。

[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。 window.getSelection() テーマのjavascript.jsに以下のコードを追加しました。 document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const art...

chiilabo.com

[WordPress] ブロックエディタで下線のショートカットキー（⌘U）が反応しなかった（プラグインの再有効化）

WordPressのブロックエディタで、下線のショートカットキー（⌘U）が反応しない不具合がありました。 いったんWordPressプラグインをすべて無効化して有効化し直すと、⌘Uがちゃんと動作するように戻りました。 WordPressプラグインも、一時的な不調でリセットが有効なことがあるんですね。 下線のショートカットキーが使えない？ ブログ記事の装飾の仕方で、「主張を太字し、根拠に下線をつけると見やすい」という意見を見つけました。 これまでは強調のための太字しか使っていな...

chiilabo.com

[WordPress] スラッシュインサータ用にブロックキーワードをJavaScriptで追加した（change-block-keywordsプラグインの代わり）

WordPress 6.6のアップグレードにより、ブロックの検索キーワード設定機能が使えなくなりました。 JavaScriptを使用して、子テーマに直接スラッシュインサータの機能を追加する方法を実装しました。 add-block-keywords.jsというJavaScriptを追加して、functions.phpから読み込むようにしました。 WordPress 6.6にしたらプラグインが動かなくなった WordPress 6.6にアップグレードしました。 すると、ブロックの...

chiilabo.com

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。 どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。 Cocoon バージョン：2.7.2.5で修正されました。 環境 Cocoonバージョン: 2.7.2.3 WordPress: 6.5 ブログカードが妙に縦に伸びている ブログカードに複数URLを挿入する運用をしています。 WordPress6.5にアップ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。