Block Styles: Show style preview when hovered or focused

[shaunandrews]

Block Styles appear in both the block's toolbar and in the editor's sidebar. Currently, styles are shown with both a rendered preview and a name. The previews are a little too small to be helpful, but also add to the overall height of the sidebar accordion. Here's how it look when a plugin adds just a few styles to the Button block:

The overall height of the accordion in the screenshot above is about 570px. It ends up pushing down more important controls like Typography and Color.

Lets move the previews so they only appear when the style is hovered or has keyboard focus. This reduces the overall footprint, and also puts more emphasis on the style's name.

[fwazeter]

I like the way this feels - it appears more functional while also feeling a bit more modern when handling the preview.

[richtabor]

I agree. This makes styles still be featured - but take up a lot less space in the sidebar.

[ramonjd]

I tried this out using a Popover. I had to rely on a Popover SlotFill at the outer, Post Editor level since the sidebar hides any overflow.

On mouseover, rendering the preview is not entirely reliable as you can see from the screen capture above.

Often there's not enough time for the preview container to calculate the correct height, something it does on the fly. My guess the Popover animation and the bevy of nested iframes don't help much.

Still, this happens sometimes in the block inserter previews as well.

Also, for mobile (and if the popovers prove too unruly/inaccessible) I thought maybe we could reduce the preview to the currently selected (no previews)

Also were there any preferences for the Default Style dropdown?

Thanks!

[mtias]

One thing that stands out in terms of componetry — because this is a design pattern we don't have anywhere else — is that it looks fairly aligned with the new proposal for font pair selection in global styles:

It might be good to be explicit about aligning there in terms of component semantics.

[mtias]

@shaunandrews have you thought about the "default style" dropdown and how it'd fit? It's even more pronounced now with the smaller footprint of the style selectors and seems off. Might make sense to think of a panel ellipsis menu to handle reset and setting a new default instead, like "set current option as default".

[apeatling]

Worked on in #34522

[shaunandrews]

Using the more menu could help with resetting and changing the default style: