Quadrat: add cover pattern

[jffng]

This PR adds the following block pattern (part of #3642) that leverages a new block style variation on the cover block.

h/t @MaggieCabrera for the implementation 🙌 . Doing it this way means users can control the color using the cover blocks built in overlay. Unfortunately it doesn't seem to be working with gradients but maybe we can look into that as a next step.

Demo

[MaggieCabrera]

You may want to have a look at #3615 (comment) for a way to alter the color of the svg when loaded as a background. This method is being used on the responsive navigation PR for gutenberg

[jffng]

Very cool! This seems like a perfect candidate for that method — mask-image + background-color

[jffng]

Some block markup to try it with:

<!-- wp:cover {"overlayColor":"darker-blue","align":"full","className":"is-style-quadrat-cover-diamond"} -->
<div class="wp-block-cover alignfull has-darker-blue-background-color has-background-dim is-style-quadrat-cover-diamond"><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"pink","layout":{"inherit":true}} -->
<div class="wp-block-group has-pink-color has-text-color"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Episode 3: Cycle of Emotions</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

[MaggieCabrera]

Ok, it's not super pretty, but it works. I had to use the :after pseudoelement to cover the background of the container div because I couldn't hide it or remove the background value and still use the background value on the before pseudoelement. If only the selected values where also defined as css variables...

[jasmussen]

This is wild, and very cool.

It seems like the primary headache is the need for two custom colors, one for the background, one for the square. Could we simply show the square as black/transparent to achieve mostly the same, or do they need to be able to be set separately?

[kjellr]

I think having the square be black/transparent would be a decent tradeoff, provided that we do the same for the squares we use elsewhere in the theme.

Can we use a blend mode here, either in the SVG or the CSS? It's possible to replicate the color pretty closely if we use mix-blend mode. The downside is that it renders just a little differently depending on your browser.

https://codepen.io/kjellr/pen/MWJzEKK?editors=1100

Actually... have we considered creating the entire square shape using only CSS? I'm not sure we're gaining much here by using a SVG.

[jffng]

I like all of those suggestions and it simplifies things quite a bit. I pushed a change to reflect those ideas.

Here's what it looks like with the three theme colors presets as the cover's background color:

a	b	c

have we considered creating the entire square shape using only CSS?

I am not sure, but I think downside is with an svg, we get the background-image resizing capabilities of CSS, whereas I think we have to set the size of the div explicitly if we want to guarantee it stays a square.

[MaggieCabrera]

I prefer the svg over the square too for the same reasons Jeff explained. And I really like the solution with the blend mode.

[kjellr]

I am not sure, but I think downside is with an svg, we get the background-image resizing capabilities of CSS, whereas I think we have to set the size of the div explicitly if we want to guarantee it stays a square.

Yeah, good call. 👍

Those screenshots look great! Does it work on pure white/black backgrounds?

[jffng]

Ok after some more trial and error, I think I have an approach. It even works with gradients!

I ended up targeting the :after element. When I tried adding it to the :before element (which is already being used by the cover block) I was getting strange results with mix-blend-mode, like the backgrounds being multiplied:

Does it work on pure white/black backgrounds?

Yes on pure white since the svg fill is black, but no on black. Scratch that, since we're using mix-blend mode it won't work with either pure white or black.

[kjellr]

Scratch that, since we're using mix-blend mode it won't work with either pure white or black.

Maybe we can add a little extra style so if the block includes has-black-background-color or has-white-background-color, we turn off the blend mode and adjust as necessary?

[MaggieCabrera]

Would it be ok to add black and white to the palette? That way we make sure those colors classes exist, else I don’t think the generated class is actually has-black-background-color

[MaggieCabrera]

So yeah, since the theme doesn't have a black/white color definition, picking them as custom on the editor will generate inline styles but not a white/black class that we can detect for this. Still, in light of the direction that colors will take in the future, it's safe to assume that those colors will exist in the default palette provided by Gutenberg, and adding them to the theme today shouldn't be an issue. They will show up as part of the palette today, but we can remove them once the changes to GB are done and let them be handled by the editor's default palette then.

[kjellr]

So yeah, since the theme doesn't have a black/white color definition, picking them as custom on the editor will generate inline styles but not a white/black class that we can detect for this.

Until they're provided by default by Gutenberg, I think all of our themes should include black and white options in their palettes.

[MaggieCabrera]

I rebased and added the black and white colors to the json and created the exceptions. I had to use mask again, since we have to manipulate the color of the svg when we are not using the blend mode.

[kjellr]

Since they're not using blend mode, can we make the black and white versions have a lower opacity? Maybe something like 25%?

Also, a few other small notes:

• This cover should be wide by default. Let's make it have a min-height of 700px too.
• We also need to shrink down the square. It's currently taking up the full height, but it should be a smaller element proportionally:

Current	Mockup

[MaggieCabrera]

@kjellr lower the opacity of the square or of the background?

[kjellr]

The square:

Before	After

[jffng]

This one's had a lot of back and forth. I think the main points have been addressed, it's getting a bit hard to follow so going to merge and we can address any additional feedback in a follow-up. Thanks everyone!

[kjellr]

@kjellr want to give this another spin, with an eye for the black + white versions? 🙏

Sorry, I was afk! I'll give this a test soon and open a new issue if I run into anything.