Custom styles/scripts are not loaded inside the preview iframe

[NenadObradovic]

Description

Hello guys,

Is there any issue with styles/scripts loading inside iframe (responsive editor)?

I enqueued 3 scripts with default function and that scripts are loaded fine initial but when I clicked on the tablet or mobile preview button, some scripts disappeared/did not load inside the head tag.

Please check the attachment and screenshots inside.

Thanks for your time.

Best regards,
Nenad Obradovic

Step-by-step reproduction instructions

I also tested with the default Twenty Twenty-One theme, I just enqueued Google Font link and I got the same issue

/**
 * Enqueue block editor script.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @return void
 */
function twentytwentyone_block_editor_script() {
	wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=DM+Sans%3A400%2C500%2C600%2C700&subset=latin-ext&display=swap&ver=1.0.0' );
	wp_enqueue_script( 'twentytwentyone-editor', get_theme_file_uri( '/assets/js/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
}

add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' );

Screenshots, screen recording, code snippet

https://imgur.com/a/SPIPNvZ

Environment info

• WordPress 5.9
• Chrome
• Window 11

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[NenadObradovic]

Hello again,

Unfortunately, you messed a lot of things with the new iframe editor preview, conditional you set are "crazy" and work only for your cases otherwise you blocked or removed any custom/external/3rd party scripts.

In this file src/components/iframe/index.js you made function styleSheetsCompat and that function has 2 problems:

1. If we include any external CSS file that file will not be loaded because of this case

try {
	// May fail for external styles.
	// eslint-disable-next-line no-unused-expressions
	styleSheet.cssRules;
} catch ( e ) {
	return;
}

External files on Chrome browser will be blocked and cssRules result will be "Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at CSSStyleSheet" - https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760

2. The Second problem is 3rd party styles or theme custom styles. In the same file -> same function -> you can find this piece of code

const isMatch = Array.from( cssRules ).find(
	( { selectorText } ) =>
		selectorText &&
		( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
			selectorText.includes( `.${ BLOCK_PREFIX }` ) )
);

where

const BODY_CLASS_NAME = 'editor-styles-wrapper';
const BLOCK_PREFIX = 'wp-block';

If we have for example 3rd party style - Swiper.css you will block it because inside that file there is no editor-styles-wrapper or wp-block classes as selector https://www.screencast.com/t/YxASDqA97u0 and that file will not be executed/loaded.

The same issue is with any custom theme or plugin styles that don't contain these classes. In my case, I have several CSS files which don't contain these classes and all files are blocked.

Could you please consider changing this logic or adding some hooks/JS variables so we can be able to extend/change or add our items?

Best regards,
Nenad Obradovic

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[ALJ]

I tried the reproduction instructions (with https://fonts.googleapis.com/css?family=DM+Sans) and I see the same problem as reported above. I'm using WordPress@5.9.3, no Gutenberg plugin. The DM Sans font successfully loaded and applied in Desktop preview mode, but was missing in either of the two iframed previews.

@NenadObradovic there are other inconsistencies between the iframe preview modes and desktop preview, including this one I reported. Probably something the team will look at when building out the iframe editor more in the future.

[NenadObradovic]

Hello @ALJ ,

I hope someone will check this issue :) In the meantime I fixed it with a not so good solution, but I can't wait for an answer :)

document.addEventListener(
	'DOMContentLoaded',
	function () {
		gutenbergResponsiveIframe.init();
	}
);

const gutenbergResponsiveIframe = {
	listenerTriggered: false,
	init: function () {
		const isEditorFrameLoaded = setInterval(
			() =>
			{
                                // Check is the current page Gutenberg editor or Full Site Editor
				const editorPage = document.querySelector( '.edit-post-visual-editor__content-area' ) || document.querySelector( '.edit-site-visual-editor' );

				if ( editorPage ) {
					clearInterval( isEditorFrameLoaded );

					gutenbergResponsiveIframe.listenerChanges( editorPage );
				}
			},
			500
		);
	},
	listenerChanges: function ( editorPage ) {

		const observer = new MutationObserver(
			() =>
			{

				if ( ! gutenbergResponsiveIframe.listenerTriggered ) {
					const editorFrame = editorPage.querySelector( 'iframe[name="editor-canvas"]' );

					if ( editorFrame ) {
						gutenbergResponsiveIframe.includeScripts( editorFrame.contentDocument );

						// Prevent function to include scripts only once for the full site editor
						if ( editorPage.classList.contains( 'edit-site-visual-editor' ) ) {
							gutenbergResponsiveIframe.listenerTriggered = true;
						}
					}
				}
			}
		);

		observer.observe(
			editorPage,
			{
				subtree: true,
				childList: true,
			},
		);
	},
	includeScripts: function ( $document ) {
		if ( $document ) {
			const $head  = $document.querySelector( 'head' );
			const styles = [];

			if ( typeof window.additionalIframeScripts === 'object' ) {
				for ( const [key, value] of Object.entries( window.additionalIframeScripts ) ) {
					styles.push( value );
				}
			}

			if ( styles.length > 0 ) {
				styles.forEach(
					styleURL =>
					{
						const link = $document.createElement( 'link' );

						link.setAttribute( 'href', styleURL );
						link.setAttribute( 'rel', 'stylesheet' );
						link.setAttribute( 'type', 'text/css' );

						$head.insertBefore( link, $head.firstChild );
					}
				);
			}
		}
	},
}

and inside functions.php I just localized the main block script for example

if ( is_admin() ) {
	wp_localize_script(
		'wp-block-editor',
		'additionalIframeScripts',
		array(
			'googleFonts' => esc_url_raw( 'https://fonts.googleapis.com/css?family=DM+Sans' ),
			'swiper'           => plugin_dir_url( __FILE__ ) ) . '/assets/plugins/swiper.min.css',
		)
	);
}

Best regards,
Nenad Obradovic

[StasNemy]

I've added class "wp-block" to my custom style, and now it's work. Thank you!