Changing a block's style doesn't do anything when "Use theme styles" is turned off

[noisysocks]

Description

Changing a block's block style doesn't seem to do anything when "Use theme styles" is turned off.

Step-by-step reproduction instructions

1. Go to Posts → Add New.
2. Go to Preferences → Appearance.
3. Turn off "Use theme styles".
4. Insert e.g. a Latest Posts block.
5. Open the block inspector.
6. Toggle between the options underneath Styles.

Expected behaviour

The appearance of the block should change.

Actual behaviour

Nothing happens.

Screenshots or screen recording

This recording is of the widgets editor, but it's the same.

Kapture.2021-06-04.at.15.37.35.mp4

[tellthemachines]

This needs to be fixed in Core, so I've opened a ticket on Trac.

Do we really want theme styles in the Widgets editor though? I was under the impression, from the report in #31947, that that might not be the case.

E.g. if we do add those theme styles in, the editor will look like this with Twenty Twenty One:

[draganescu]

What is the downside of loading them? In my testing I found this to be a nice feature.

[critterverse]

Changing a block's block style doesn't seem to do anything in the Widgets editor. The appearance of the block should change same as it does in the post editor.

I think this behavior does actually match the post editor when the "theme styles" option is turned off in the Preferences modal under Appearance → Use theme styles / Make the editor look like your theme.

One thing to note is that the screenshot @tellthemachines shared above is not how I would expect this preference to work, with the theme color being applied to the frame of the page but not to the widget areas themselves (which could help you avoid things like changing the text color to something clashing/illegible, for example). So it may need more design exploration if we go in this direction.

Also FWIW, introducing this preference into the Customizer editor would definitely need a more significant design explore (but may be less useful there for similar reasons as those mentioned in #31139).

[tellthemachines]

@critterverse we could remove the background color from the widget areas, but then we'll need some kind of outline so they're easy to tell apart:

I agree being able to preview the theme styles is nice, but perhaps it can be an enhancement for later.

[noisysocks]

Thanks for looking into this @tellthemachines!

Looks like there's two issues at play here:

1. With theme styles turned off (e.g. via Preferences in the post editor), changing a block's style doesn't do anything. This is a bug that needs to be fixed in the widget and post editors.

   Since this is an existing issue in the post editor, I think we can de-prioritise it. I will leave this GitHub issue open to track it and adjust the title and description to reflect that the bug exists in both editors.

2. The widgets editor does not support theme styles. This is a missing enhancement and needs some further design consideration.

   This is tracked by Render widgets in the editor with the same style as in the theme #26163. I've added the Needs Design label to that issue. I don't think it's viable that we can implement it in time for WordPress 5.8 given there's some design issues to sort out.

[tellthemachines]

With theme styles turned off (e.g. via Preferences in the post editor), changing a block's style doesn't do anything. This is a bug that needs to be fixed in the widget and post editors.

Changing a block's style with theme styles turned off still works on the front end; the only thing that doesn't work is the editor preview of the style change.

Fixing this - if by fixing we mean loading only the block-related styles and not general editor styles such as background color - would mean separating out the block styles from the general styles, which I think could only be done by themes themselves. Not sure if the changes coming with global styles will make this easier, but in any case we also have the issue of determining what's a block style and what isn't: say for instance font-related styles that apply to more than one block.

Independently of the technical solution, it doesn't feel at all clear cut: which theme style changes should we allow to be previewable when the user explicitly disables theme styles in the editor?

[critterverse]

Opened a new issue with a small fix for the current behavior in #32550.

I'll plan to share some design explorations for introducing theme styles in the Widget editor(s) as they come together over in #26163, so we can probably close this issue. Thanks all 😁