Global Styles: Confusing UX when styles are overridden from multiple sources #45086
Description
Description
When using 6.1 RC2 and TT3, I found that I couldn't change the appearance of Headings consistently.
Global Styles have a low specificity by design. This often leads to a confusing user experience though, when configuring default styles doesn't appear to have any effect. This could be due to the new styles being overridden by various sources, e.g. block styles, unexpected markup (see pattern in comments), and even theme-provided external CSS stylesheets.
In such a situation, the preview accurately represents how these elements or blocks would appear on the frontend, and the design tools do generate and apply the correct global styles. The issue is as a user, you could be changing options via the design tools and not see any visible change. This makes them feel broken or that something is wrong.
Original Issue Description
When using 6.1 RC2 and TT3, I found that I couldn't change the appearance of Headings consistently. I don't quite know what's going on here but, if this is intended, we should at least look into removing non working appearance options as it is a frustrating experience to switch between options with no response in the editor. It greatly breaks WYSIWYG.
cc @MaggieCabrera (for TT3) @aaronrobertshaw (for design tools) @scruffian (for element support) in case any of you have insight!
Possible Solutions / Improvements
It might not be possible to detect there are styles that would override settings from a particular design tool to omit it from the sidebar. It also likely isn't possible to accurately reflect that a given block or element has styles from a non-global-styles source that could conflict.
Displaying inline previews related not just on a "per-block" basis but also for root-level elements as well, if possible, might help provide immediate visual feedback that changes are being applied. The user could then easily and quickly compare that preview with blocks or elements in the preview and spot that the blocks in the preview have overriding styles, prompting them to look at more specific levels of applying styles.
Step-by-step reproduction instructions
- Use 6.1 RC2 & activate TT3.
- Head to Appearance > Editor.
- Open Styles UI.
- Select "browse styles" and switch to a different style variation.
- Head back to the main Styles interface > Typography.
- Select Headings.
- Try changing the appearance options and notice they appear to be applied inconsistently.
- Inspect headings within the preview via devtools and note that even on "unchanged" headings the heading elements do in fact get the global styles you set applied, they are just overridden.
Screenshots, screen recording, code snippet
appearance.controls.in.font.headings.mov
Environment info
- WP 6.1 RC 2
- No GB
- TT3 across style variations
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes