Cover Block: Overlay background possible regression

[sirreal]

Describe the bug

The style of Cover block background overlays has changed in Gutenberg 9.2. This is likely a regression from #26133.

Specifically, this section changes the style of the overlay:

Before #26133, there was a background-color: $black; rule which was inherited by the ::before:

gutenberg/packages/block-library/src/cover/style.scss

Lines 37 to 44 in ee85a7d

	&.has-background-dim {
	background-color: $black;
	&::before {
	content: "";
	background-color: inherit;
	}
	}

After, there is just an inherit:

gutenberg/packages/block-library/src/cover/style.scss

Lines 37 to 40 in 68419b4

	&.has-background-dim::before {
	content: "";
	background-color: inherit;
	}

To reproduce

1. Use Gutenberg 9.1 (download link)
2. Create a post with a Cover block and an overlay.
3. View the post on the frontend and notices the background overlay.
4. Upgrade Gutenberg to 9.2 (download link)
5. View the same post on the frontend and notice that the background overlay is different.

Expected behavior
I expected the same block to render the same across 9.1 - 9.2 Gutenberg versions.

Screenshots

Editor version (please complete the following information):

• WordPress version: 5.5
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 9.1 ➡️ 9.2

[sirreal]

Pinging a few folks who interacted on #26133 to verify: @jasmussen @mkaz @stokesman

[stokesman]

I was aware that #26133 would create this difference and perhaps I should have highlighted that point in my PR. Just to be clear it only affects cover blocks that have no color selected. I'd say the change is worth keeping and maybe there's a way to preserve the old presentation for this particular case without going back to the old CSS since that is problematic in other ways. I actually have a couple of ideas but I'll look into that.

Thanks, @sirreal for bringing this up. It made me realize an oversight in #26133 was that the useCoverIsDark hook should have been revised to not assume the black color when no color has been selected. How do you make those rad little file excerpts of particular line numbers, btw?

[inaikem]

I'm seeing this issue on a live site with several hundred posts being affected -- losing a semi-opaque background colour -- by this change.

[sirreal]

I was aware that #26133 would create this difference and perhaps I should have highlighted that point in my PR. Just to be clear it only affects cover blocks that have no color selected. I'd say the change is worth keeping and maybe there's a way to preserve the old presentation for this particular case without going back to the old CSS since that is problematic in other ways. I actually have a couple of ideas but I'll look into that.

Please see #26569 for the proposed fix.

Thanks, @sirreal for bringing this up. It made me realize an oversight in #26133 was that the useCoverIsDark hook should have been revised to not assume the black color when no color has been selected.

With #26569 would that be an issue? (I'm unfamiliar with useCoverIsDark).

How do you make those rad little file excerpts of particular line numbers, btw?

😉 You can reference code inline from the same repository. Highlighting some lines in the repo and selecting "Copy Permalink", then put that URL on its own line and they'll show up as snippets.

[stokesman]

@sirreal, in #26569, useCoverIsDark will be fine as is. Thanks for the tip on the code refs. Funny cause I was trying that but it wasn't showing in the preview so I thought it wouldn't work.