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

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

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

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

wp.domReady

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