Gutenberg（グーテンベルク）のカスタムHTMLのプレビューにCSSを反映したい

Question

##実現したいこと
WPのデフォルトのカラム分け以外の特殊なカラム分けや特別なデザインをつけた部分にCSSを反映したいため、
ブロック編集の画面時にカスタムHTMLのプレビューにもCSSを当てたい。

##問題点
カスタムHTMLがiframe読み込みのため、エディタ全体のcssが反映されない。

##現状
下記のコードにてcssとjsは読み込み済みです。

add_action( 'enqueue_block_editor_assets', 'gutenberg_stylesheets_custom_demo' );
function gutenberg_stylesheets_custom_demo() {
	$editor_style_url = get_theme_file_uri('/editor-style.css');
	wp_enqueue_style( 'theme-editor-style', $editor_style_url );
	wp_enqueue_script( 'theme-gutenberg-js', get_theme_file_uri('/js/gutenberg.js'), array( 'jquery' ), false, true );
}

エディタ全体にCSSは反映されていることは確認し、JSもconsole.logにて読み込まれていることは確認しているため、
CSSとJSに問題はないようです。

iframeにCSSを読み込ませるJSは何件か見かけたため下記のコードにて試してみました。

$(function(){
    $('.components-sandbox').on('load', function(){
        $('.components-sandbox').contents().find('head').append('<link rel="stylesheet" href="editor-style.css" type="text/css" />');
    });
});

が、iframeのheadに反映されませんでした。
その他HTML表示とプレビュー表示のクリックを感知してheadにCSSを追加するJSなども試そうかとおもいましたがクリックの感知すらできませんでした。

カスタムHTMLのプレビューモードにCSSを反映させる方法はJSで無理やり入れ込む以外にありますでしょうか？

Answer 1

Sandboxコンポーネントのiframeはdocument.write()でコンテンツを読み込んでるので
多分loadイベントは発生しないのですよね

MutationObserverでDOMの変更を追跡する形ならあるいは・・・
試してないのでなんとも言えないですが

Comments

[okm_1162]

MutationObserverを試してみましたが、
iframeを囲っているdivがclassであり、監視対象のノードをidで指定することが難しいためかうまく動きませんでした。
1ページに複数カスタムHTMLを設置することもあるためidを振ることもできず…。
ご回答ありがとうございました。

[KazuhiroHatano]

MutationObserverのobserveでは特定の一つのDOM要素を引数にすればいいだけで
特にidを指定しなければならないわけじゃないです
一つずつやればいいだけなので

$('.someClass').each(function(){myMutationObserverObj.observe(this);});

みたいな感じにやればいいだけです

ただ、まだreactのことがよくわかってないので正確なことは言えないですが
GutenbergのエディタではsetStateとかのタイミングで要素が置き換わっていて
reactのコンポーネントのハンドラ以外のイベントリスナやオブザーバーなどは
何かブロックに変更があるたびに消失してしまうのかもしれません

Sandboxコンポーネントを含めてhtmlブロックの関連のコンポーネントには
見た所拡張の余地がないので正直自分の知識の範囲では手詰まりです

[okm_1162]

MutationObserverのコードまでご解説いただきありがとうございます。
eachで複数回働かせてみても反応がなく、
gutenbergはまだアップデートもあるかと思いますのでそちらを待とうと思います。
ご返信ありがとうございました。