Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法

ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。

• 

• 

エディタにデザインを適用させるためにクラスを付与していたのですが、エディタの切り替えでそのクラスが外れてしまうため、切り替えのタイミングで付け直す必要がありました。
ネットで調べても情報が出てこなかったのでコードを読んでその方法を調べた結果、よい方法があったので忘れないように記録しておきます。

wp.data.subscribe

「wp.data.subscribe」は何か状態が変化したときに呼ばれるコールバックを登録できます。

wp.data.subscribe(function() {
    console.log('called');
});

コールバックに引数はなく、「wp.data.select」でセレクタを取得しそこで使用可能な状態取得メソッドで状態を取得するなどの動作が必要です。

実装

wp-includes/js/dist/edit-post.js の onChangeListener を参考に実装しています。

wp.data.subscribe(function (selector, listener) {
    let previousValue = selector();
    return function () {
        let selectedValue = selector();
        if (selectedValue !== previousValue) {
            previousValue = selectedValue;
            listener(selectedValue);
        }
    };
}(function () {
    return wp.data.select('core/edit-post').getEditorMode();
}, function () {
    setTimeout(addClasses, 1);
}));

addClasses は別途用意してあるクラスを付与する関数です。

selector

function () {
    return wp.data.select('core/edit-post').getEditorMode();
}

エディタのモードを取得する関数を渡しています。
ここを別の状態を取得するものに変えればその状態の変化を検出できます。

listener

function () {
    setTimeout(addClasses, 1);
}

変化があった場合に呼びたい関数を渡しています 。
クラスを付与する場合、少し遅らせる必要がありました。

subscribe

「呼ばれるたびに上記で渡された selector 関数の返り値が変更されたかどうかをチェックし、変更があった場合は listener を呼ぶ」関数を登録しています。

動作確認

ビジュアルエディター⇒コードエディター⇒ビジュアルエディターと切り替えた結果です。

• 

• 

クラスが再度付与されてデザインが適切に反映されることが確認できました。

まとめ

まだまだ情報が少ないため何ができて何ができないかも判断するのが難しいですが、エディタの状態が変わったときに何かを実行できることはわかりました。
今回はソースから手掛かりを得て公式のリファレンスにたどり着きましたが、公式のリファレンスも結構充実していたので、何か困ったことがあったらそちらを見てみるといいかもしれません。