Quote

[alaczek]

<!-- wp:cover {"url":"https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg","id":696,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","backgroundColor":"background"} -->
<div class="wp-block-group alignwide has-background-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textColor":"foreground-dark","style":{"typography":{"lineHeight":1.4}}} -->
<h2 class="has-foreground-dark-color has-text-color" style="line-height:1.4"><em>"So many things are possible just as long as you don't know they're impossible."</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"textColor":"foreground-dark"} -->
<p class="has-foreground-dark-color has-text-color">-- Norton Juster</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[ianstewart]

Let's ship this!

[iamtakashi]

I'd avoid specifying colours by using things such as "textColor":"foreground-dark" or a CSS class has-background-background-color that we get when we use the colour pallete.

This is because the names used there are theme-specific and not standardized—some themes don't use those names. For example, this pattern currently look like this in Twenty Nineteen.

So instead, I always use Custom color and add hex value when I need to specify colours. In this way, I find the colours in a pattern stay as intended regardless of themes.

[alaczek]

Good point Takashi, I totally forgot about that.

Although I found that if I pick white for the background (and site background is white), the background of the group block will change to match the site background in themes that don't use white site background (like Barnsbury or Twenty Twenty), and I kind of like that. Twenty Nineteen is a bit weird, and it results in no background color as you noted. There might be something broken with the custom colors in that theme too, because when I went in and manually selected different color for the group block bg from the palette it still didn't work. I'll have to look into it a bit more.

[iamtakashi]

Although I found that if I pick white for the background (and site background is white), the background of the group block will change to match the site background in themes that don't use white site background (like Barnsbury or Twenty Twenty), and I kind of like that.

Yes, Varia based themes share the naming pattern (and Twenty Twenty in some way), but we can't assume other themes do. Twenty Nineteen calls the background colour white, and the class has-background-background-color doesn't mean anything to the theme so the background becomes transparent. (As you said, Twenty Nineteen seems to have an issue in the editor, but it does add a background colour on the front of the site if you add a colour.)

Therefore, it's difficult, at the moment, to specify the theme's background colour if we need to add a background colour. But a theme's background colour can be anything, and we want to avoid a colour crush with the image anyway?

[alaczek]

But a theme's background colour can be anything, and we want to avoid a colour crush with the image anyway?

That's a good point. Here's the updated code for this block. If it works for you I'll add it to the master site

<!-- wp:cover {"url":"https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg","id":696,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"style":{"color":{"text":"#222222"},"typography":{"lineHeight":1.4}}} -->
<h2 class="has-text-color" style="line-height:1.4;color:#222222"><em>"So many things are possible, just as long as you don't know they are impossible."</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#222222"}}} -->
<p class="has-text-color" style="color:#222222">--Norton Juster</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[iamtakashi]

I didn't catch this before but, in this case, it'd be better to specify the text colour in the Group block rather than the text in it. In this way, whatever the user adds inside the group block will be #222222 in this case. At the moment, if you add a text it will be white on white and you can't see it.

[alaczek]

Setting color on the group doesn't work for me - still, if I add a new paragraph inside the group, the color is white :( I found it's because it's all wrapped in a cover block - this impacts the text color to ensure it is readable. Initially I didn't have a color overlay set, as the opacity is set to zero. But if I pick white as the overlay color, the text color adjusts automatically, without the need to explicitly set it on the group or text itself.

Please give it a go and let me know if I missed anything there.

<!-- wp:cover {"url":"https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg","id":696,"dimRatio":0,"customOverlayColor":"#ffffff","align":"full","className":"has-ffffff-background-color"} -->
<div class="wp-block-cover alignfull has-ffffff-background-color" style="background-image:url(https://arboretum264259637.files.wordpress.com/2020/05/jonny-clow-ngcigmlzxtk-unsplash.jpg);background-color:#ffffff"><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff","text":"#222222"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#ffffff;color:#222222"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"className":"has-text-color","style":{"typography":{"lineHeight":1.4}}} -->
<h2 class="has-text-color" style="line-height:1.4"><em>"So many things are possible, just as long as you don't know they are impossible."</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>--Norton Juster</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[iamtakashi]

Setting color on the group doesn't work for me - still, if I add a new paragraph inside the group, the color is white :( I found it's because it's all wrapped in a cover block - this impacts the text color to ensure it is readable. Initially I didn't have a color overlay set, as the opacity is set to zero. But if I pick white as the overlay color, the text color adjusts automatically, without the need to explicitly set it on the group or text itself.

Hmm, ok. It seems some themes override the text colour on a cover block with higher specificity. It should just inherit the colour of the direct parent element :/ Good to be aware of it. Thanks.

It looks good to me!

[pablohoneyhoney]

This one appears broken in the editor, while still previews well, unsure what's happening there. Also in inserter.

[alaczek]

Yes, this is an editor issue. I could swear I reported it already, but could not find the ticket, so created a new one just in case: https://github.com/WordPress/gutenberg/issues/25937

As for the inserter, I think the issue with the extra + button has been reported, it's quite pesky!