Varia Themes: Incorrect Front-End colours with Cover, Headings, and Background Images, without Opacity

[ianstewart]

Steps to replicate

1. Visit wp.com/new
2. Select the "Reynolds" design featured there (see screenshots below) which uses the "Rockfield" theme
3. Create a new site
4. Compare the front end of site with editor

Or …

Paste the following sample block content into the code editor view a test site.

<!-- wp:cover {"url":"https://iantesting363831624.files.wordpress.com/2021/01/pexels-photo-5383782.jpeg","id":23,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://iantesting363831624.files.wordpress.com/2021/01/pexels-photo-5383782.jpeg)"><div class="wp-block-cover__inner-container"><!-- wp:heading -->
<h2>This is a heading in a cover block</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:cover -->

• Cover Block with image background
• Heading inside
• Overlay opacity at 0

Result

Editor view of cover block

Front-end view of cover block in Rockfield

Front-end with Maywood

Front-end with Shawburn

Expected

Front-end with Seedlet

Front-end with Spearhead

Front-end with Twenty Twenty

Sample block content result in Maywood

[ianstewart]

Updated the reproduction instructions with some sample content that I think isolates the issue.

[simison]

@scruffian I couldn't replicate this anymore, did it get fixed?

[scruffian]

It's possible. We've fixed a few Varia bugs this week, so this one might have been fixed accidentally. Maybe @ianstewart could confirm?

[ianstewart]

I could replicate this today in a PR that added some of the patterns above back into wp.com/new. Not sure now if theme issue or wp.com/new issue with the PR that added the patterns back.

[simison]

@scruffian would there be any estimation on when this could be fixed? It's pretty longstanding bug that forced us to remove one of the designs from wpcom. You can replicate here: Automattic/wp-calypso#49608