Gutenberg: Cover: Add option to desaturate background media

[melchoyce]

Is your feature request related to a problem? Please describe.
Often when selecting a background for a cover block, the overlay colors clash with the colors of the photo. I usually end up manually editing the photo so it's totally desaturated, then re-upload. Voila — beautiful cover overlay.

Describe the solution you'd like
It would be lovely if there could be an option to desaturate the image (or video? Is that possible?) using something like CSS filters, so users don't have to do this manually.

Describe alternatives you've considered
We could consider doing this automatically when an overlay color is used. Alternately, I could remember to desaturate my stuff before uploading 🙂

[mapk]

Good idea! We'll need a design for a Saturation scale control. Maybe it's as simple as adding it like this?

[paaljoachim]

What an interesting idea!

Another area this would be great in would be in a hover effect.

[ItsJonQ]

Haii!! I think it's a great idea :)!

I looked into it briefly:
There is a trickiness to this...

For this to work properly, we'll have to create a dedicated element that renders the background image. That way, we can apply the CSS filters to that image (only). At the moment, adding a CSS filter to the Cover would affect the contents within (e.g. paragraphs, titles, etc...).

Doing what I'm describing above isn't difficult. However, it would change the HTML markup output of Cover moving forward. I'm guessing we'll need to setup deprecations if that were to happen.

Not blocking! Just leaving a note for future self (or for anyone who would like to give this a shot)

[ItsJonQ]

@melchoyce I didn't forget about this! I experimented with something today that I think will help 😊

A new FilterControl component:

[ItsJonQ]

I got the initial integration of this new experimental control with the Cover block.

It works for both images and video!

I'll draft a PR when it's a little bit more ready.
Pretty jazzed about this 😊

@melchoyce Is this experience inline with what you were imagining? Would love to hear your thoughts!~

Thanks all! <3

Github branch:
https://github.com/WordPress/gutenberg/tree/try/cover-background-filters

[melchoyce]

Way more than I was expecting! This is great.

I wonder if we could drop hue, because that can be controlled by the overlay color?

Also wondering if we could create a few preset filters (black and white, black and white high contrast, sepia, vivid, custom etc.) in a dropdown or something, instead of automatically showing all of these sliders at once.

[ItsJonQ]

Way more than I was expecting! This is great.

@melchoyce Yay!! I'm glad I'm on the right track.

I wonder if we could drop hue

You got it!

Also wondering if we could create a few preset filters

OoOOoo. That could be interesting... A bit more complex, but might be fun :)

[ItsJonQ]

@melchoyce How's this :D

I added some presets inspired by iOS's camera app.

Note: I didn't add color tinted presets, as that would involve the Cover background, which (at the moment) is a separate thing.

P.S. It's really fun to use these on Cover videos 😊

[melchoyce]

Yeah! Those presets are fun.

I do think we should hide the range sliders by default until you select "custom," if we can.

[ItsJonQ]

I do think we should hide the range sliders by default until you select "custom," if we can.

Yup!! That's how it works :D. I didn't demo that in the GIF though.