Vite compiler does not load editor style assets #2
Description
I noticed when I went to preview some ACF block I had made in the Gutenberg editor, that there were absolutely no styles whatsoever pulling through.
I dug into the Tailpress framwork code (sepcifically the vite compiler stuff) - and I found the script used to initialise the vite dev server scripts.
<script type="module" >
wp.domReady(() => {
wp.data.subscribe(() => {
const editorIframe = document.querySelector('iframe[name="editor-canvas"]');
if (!editorIframe) {
console.log('Editor iframe not found');
return;
};
const doc = editorIframe.contentDocument || editorIframe.contentWindow.document;
if (doc.querySelector('script[src$="/@vite/client"]')) return;
const viteScript = doc.createElement('script');
viteScript.type = 'module';
viteScript.src = '<?php echo esc_url($this->serverUrl.'/@vite/client'); ?>';
doc.head.appendChild(viteScript);
const style = doc.createElement('link');
style.rel = 'stylesheet';
style.href = '<?php echo esc_url($this->serverUrl.'/'.ltrim($this->editorStyleFile, '/')); ?>';
doc.head.appendChild(style);
});
});
</script>
It seems like the iframe selector fails all the time as it doesn't exist on the page.
I hacked it to use one of the selectors below and replaced const doc = editorIframe.contentDocument || editorIframe.contentWindow.document; with just a reference to document, and it started displaying styles in the editor.
.block-editor
.editor-visual-editor
Any chance to fix this or explain what's going on?