Make WordPress Core

Opened 8 months ago

#55142 new defect (bug)

Custom, external or 3rd party styles are not loaded inside the preview iframe

Reported by: nenad-obradovic's profile Nenad Obradovic Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords:
Focuses: Cc:

Description

Hello,

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

Please check Google Font file issue - https://imgur.com/a/SPIPNvZ

  1. 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

Change History (0)

Note: See TracTickets for help on using tickets.