Skip to content

Block Styles: Show style preview when hovered or focused #33933

Closed

Description

image

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:

image

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.

Style Previews on Hover

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

[Feature] Theme Style VariationsRelated to style variations provided by block themesRelated to style variations provided by block themes[Type] TaskIssues or PRs that have been broken down into an individual action to takeIssues or PRs that have been broken down into an individual action to take

Type

No type

Projects

  • Status

    ✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions