BlockPreview should render styles

[javierarce]

Description

While reviewing this issue we noticed that the previews in the Full Site Editor (FSE) template sidebar don't truly represent the design in the editor.

The reason seems to be that the BlockPreview component doesn't load styles (in this case, the ones from the editor) or the way this component is used in the template preview. In any case, fixing the previews by loading the editor styles could help users better identify the different templates while they work with the FSE.

Step-by-step reproduction instructions

1. Set up a test site with the latest version of Gutenberg
2. Install and activate a theme that supports FSE (like the TT1 blocks theme).
3. Head to the Site Editor (beta) tab and open any template.
4. Change the Global Styles and set the background color to red.
5. Click on the WordPress menu to open the template sidebar.
6. Hover some templates to make the preview appear.

Expected behaviour

The template previews should show a red background.

Actual behaviour

The template previews show a white background.

Screenshots or screen recording

The code rendered by the component doesn't seem to include any CSS related to the theme:

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.3.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No (see step-by-step instructions)

CC @annezazu @jasmussen

[jasmussen]

Thanks for ticketing this!

On the one hand this seems like a logical extension of the stylesheet being loaded into the site editor iframe, and so the editor-styles-wrapper classes of the thumbnail component don't pick up those sandboxed styles.

On the other hand, I could swear this used to be working, not that long ago. @ellatrix do you recall if this broke with the iframe and have been broken since?

[ramonjd]

I can replicate this for most patterns where the theme adds specific styling. I haven't confirmed, but I suspect that the theme css isn't being loaded in the iframe context?

This is tested with the current master branch (10.6.0-rc.1) using TT1 blocks, and no modifications:

Site editor	Block editor

On the one hand this seems like a logical extension of the stylesheet being loaded into the site editor iframe, and so the editor-styles-wrapper classes of the thumbnail component don't pick up those sandboxed styles.

There's a related issue over here: #31022

[jasmussen]

I can replicate this for most patterns where the theme adds specific styling. I haven't confirmed, but I suspect that the theme css isn't being loaded in the iframe context?

Well the popover is not part of the iframe. So even if the editor style is loaded inside the iframe, it's not loaded outside the iframe:

So it seems the solution is to either also load the editor style outside the iframe, in the site editor, or wrap each preview inside other iframes that load the editor styles.

[ramonjd]

Well the popover is not part of the iframe

Ah sorry for the red herring there. Thanks for the extra info.

[ellatrix]

Should be fixed after #28165.