Skip to content

Shadow blur in the styles preview makes colors look unclear #73718

@poligilad-auto

Description

@poligilad-auto

What problem does this address?

The preview area in the Styles section currently shows a shadow. You can see it by opening Design > Styles or by opening the Styles panel in the editor.

Image Image

It also appears when browsing styles.

Image

It's a result of the filter: blur(60px) here: https://github.com/WordPress/gutenberg/blob/trunk/packages/global-styles-ui/src/preview-styles.tsx#L126 as discovered by @aaronrobertshaw here.

The clipping issue caused by this effect has already been fixed (thanks @aaronrobertshaw!), so the shadow no longer spills outside its container.

One problem remains. The blur smudges the background color, which makes it harder to judge the true background color when browsing styles, and it gives the preview box a washed out look, especially with light backgrounds.

What is your proposed solution?

I propose removing the blur effect from this area 🙂

@jameskoster if you have any extra input, feel free to add.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Priority] LowUsed to indicate that the issue at hand isn't a top priority to address and can be handled later[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions