Opened 3 years ago
#55142 new defect (bug)
Custom, external or 3rd party styles are not loaded inside the preview iframe
Reported by: | 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:
- 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
- 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