Enable Hover-to-Preview for Fonts and Color Variations in Global Styles

[JosVelasco]

What problem does this address?

When exploring Global Style variations in the Site Editor, users must click on each variation individually to see how it affects the site. This interrupts the design flow, especially when trying to quickly compare multiple global looks before committing to one.

It becomes slow to click through every variation, primarily when only subtle differences exist. Users cannot currently preview styles without making a selection, which also adds friction to reverting or undoing unintended changes; they can only see the name of the variations on hover.

What is your proposed solution?

Enable a hover-to-preview feature for Global Style variations within the Site Editor. When a user hovers over a variation (including different font pairings, color palettes, or complete style combinations), the site preview pane should temporarily reflect the style—without applying it permanently—until the user clicks to confirm.

This improvement would:

• Streamline the creative process, allowing quick comparisons across global looks.
• Make it more efficient to find a preferred style without repeatedly committing and undoing changes.
• Enhance usability for both newcomers and advanced designers exploring theme variations.
• Reduce friction for theme developers and agencies showcasing multiple design presets.

[t-hamano]

Thanks for the suggestion. Do you envision a UI like this?

712e9917548ca58625de9a7321b01492.mp4

Before moving forward with this issue, I would recommend discussing at least two points:

• Is this UX ideal?
• Currently, it's not very responsive when switching between variations. This issue would become more prominent if we implemented mouse-over preview.

[JosVelasco]

Thanks for the preview! I guess it would need some preloading to feel smoother.

[karmatosed]

To me, treating both styles and variations the same makes sense. However, this has complications when talking about combinations of things like palettes and typography. I have concerns with things rapidly switching and the visual experience feeling unexpected. At least when you click there is a conscious decision. I do think though having it be the same for previewing as a foundation makes sense though.

[JosVelasco]

If we generate a popover preview like the ones for patterns, it would still lag; however, it might not significantly impact the visual experience. I wonder if generating this preview could help speed up loading when selecting a variation, similar to speculative loading.