GutenbergエディタのDOMを操作をしたい場合

今までのエディタでは「tiny_mce_before_init」フィルタなどのフックでクラスを付与したり色々な設定を変更したりすることができました。

Gutenbergでは同様の方法をとることができません。

新たにDOMの構築後に実行するコールバックを登録する方法が提供されているため、それを利用することで様々なことが簡単に実現できます。

wp.domReady

@wordpress/dom-ready | Block Editor Handbook | WordPress Developer Resources

Execute callback after the DOM is loaded. Installation Install the module npm install @wordpress/dom-ready --save …

developer.wordpress.org

wp.domReady(function () {
    // editor root
    const target = document.getElementById('editor');

    // visual editor
    const editor = target.getElementsByClassName('editor-writing-flow');
    Array.prototype.forEach.call(editor, e => e.classList.add('article'));
});

上のようなコードでビジュアルエディタに「article」というクラスを付与することが可能です。

jQueryでの操作も可能です。

wp.domReady(function() {
    $('#editor .editor-writing-flow').addClass('article');
});

注意点

DOMの構築後に付与したクラスなどはビジュアルエディタとコードエディタの切り替えで外れてしまうため、別途対応が必要です。

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

ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。ビジュアルエディターコードエディターエディタにデザインを適用させるためにクラスを付与していたのですが、エデ

technote.space