Skip to content

Cover Block: Allow Opacity Option For Gradients/Colors #32339

@justintadlock

Description

@justintadlock

Currently, if you add a Cover block, the overlay opacity option only appears if you add a background image. If you use a solid color or gradient only, you get no opacity control. Of course, the original intention of the opacity option was for letting the user choose how much of the image bleeds through. So, it makes sense that it doesn't show up.

However, there are use cases where users might want to have a gradient/color that is transparent, particularly when a Cover block is nested within another block (like another Cover).

One of the patterns I've been working on uses a Cover nested inside of a Cover. The inside Cover uses a transparent color overlay now (with a framed border block style). It looks like this:

cover-001

If I add a gradient color (no image) to the inner Cover, it looks like the following (no bleed through of the outer Cover):

cover-002

What I want to achieve is the following, which would require control over the opacity:

cover-003

It is possible to achieve this using rgba() for gradient presets, but we're talking adding 9 extra gradients for each existing gradient (to handle 0.1 - 0.9 transparency). And, that, of course, would be insane. :)

Metadata

Metadata

Assignees

Labels

[Block] CoverAffects the Cover Block - used to display content laid over a background image[Status] In ProgressTracking issues with work in progress[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