When previewing themes the style of the widgets don't match

[draganescu]

When previewing themes using the Customizer the style of the widgets in the widgets editor sidebar is the one of the currently active theme.

To reproduce:

1. Have WordPress 5.8 and latest Gutenberg
2. Have TwentyTwenty and TwentyTwentyOne installed
3. Set TwentyTwentyOne as active
4. Go to Appearance > Customize
5. From the top bar of the Customizer header choose Previewing theme > Change
6. Pick Installed themes
7. For TwentyTwenty click Live Preview
8. After the preview is complete go to Widgets

Expected behavior:

The styles should match

Screenshot

[noisysocks]

What precisely do you mean by "they should match". Is this a dupe of #26163?

[draganescu]

It's not a dupe I believe. The problem here is that the editor in the Customizer styles the widgets and blocks to match the active theme not the one being previewed. If we eventually drop editor styles from the Widgets editor, hence the Customizer as well, then this issue won't exist anymore.

[noisysocks]

Ah, I see! The problem is that the Legacy Widget block preview renders using the site's active theme and not the theme being previewed in the current changeset. Thanks for clarifying.

[noisysocks]

I wonder if we should disable the Legacy Widgets "preview mode" in the Customizer. It's not very useful because there is already a preview on the right hand side, and it's confusing that the two previews look different. What do you think, @critterverse?

[critterverse]

I wonder if we should disable the Legacy Widgets "preview mode" in the Customizer.

Could we disable preview mode only when live previewing a different theme? I'm not opposed to making that change universally, just curious what the other possibilities are.

[noisysocks]

We most certainly could!

[draganescu]

I have heard (but unfortunately did not bookmark) others suggesting the same as an UX improvement for the customizer.

[draganescu]

@noisysocks even if we disable legacy preview mode this is not solved since my testing appears to be using a search block, not some legacy widget. The block editor needs to reload its CSS when we preview another theme. I have no idea if this can be done on the fly.

[noisysocks]

Right. So in the original comment's screenshot, that's a Search block and not a Legacy Widget block? And you would expect the search button to appear red, not black?

[noisysocks]

Related: #33264

[draganescu]

So in the original comment's screenshot, that's a Search block and not a Legacy Widget block? And you would expect the search button to appear red, not black?

Yes.

[noisysocks]

Got it 😀 thanks for clarifying. I mistakenly thought this was about the Legacy Widget block.

So, this happens by design. We don't load editor styles in the Customizer widgets block editor (that is: it's equivalent to turning Use theme styles off in the post block editor preferences) because there is already a preview of what the content will look like on the right hand side of the screen. Maybe it's something we'll revisit in the future but for now this is working as expected.

[draganescu]

Yes, excellent, I believe the problem was found when we did load the styles.