Support image filters in Cover blocks

[laras126]

No description provided.

[laras126]

@slambert Here is what the current image filters applied to a cover block will look like – https://codepen.io/laras126/pen/Rwwwvjw

Scroll down to the cover block heading and you can click the buttons to change them. We can either apply that – which will be least dev. effort – or create some special case filters for the cover specifically. The CSS for the cover image starts at line 183 if you want to play around with it.

[slambert]

@laras126 Ah, so is what you're saying is it won't work the same way as it will for other images?

I think cover blocks could work one way and that would be ok. It'd be so rarely used anyway.

The options are:

1. having some full color bleed come in
2. having it be entirely black and white via filter: grayscale(100%) sepia(0%)
3. ??

If those are the options, I choose 2, we can skip the other styles (red and white, etc), and we can figure out how to adjust the other filter settings to make it a bit better.

[slambert]

@laras126 will get it "hooked up" then I will tweak the settings.

[laras126]

Okay - got this working with one caveat. There is a bug in Gutenberg related to this - WordPress/gutenberg#9897

It does work though if you select the block style before uploading the image. Otherwise you will get a fatal error. Not sure if there is a way around this until a fix is released to the plugin.

[laras126]

So, @slambert - if you pull from master, add a core cover block, then before setting the image, apply the C4AA Simple Filter block style. Then when you preview, you can tweak the value for filter on the class .is-style-c4aa-simple-filter. Whatever value you decide on can replace what's on line 162 of c4aa-imageFilter.css.