Old Cover Blocks with Fixed Backgrounds are now showing greatly enlarged backgrounds.

[KirkwallDay]

Quick summary

This is one I cannot reproduce, but I can give examples. It seems cover blocks with older code that worked well in January (could have been later) are now enlarging the image greatly.

Testing this on a test site is a problem as currently this issue is a blocker to testing: #64682 setting a new cover block results in the repeated background being added even if it's not selected. So we can't create a new cover block to see if the size is enlarged abnormally.

You can find an example in this ticket: 5329121-zen
And as this involves customer data, details are in this p2 post: pd4QKa-Bt-p2

Steps to reproduce

See the p2 post for specific details, this involves customer data and is current not possible to reproduce due to the other Github issue.

What you expected to happen

The cover blocks should not enlarge the pictures to huge dimensions for a fixed background.

What actually happened

They should look as they did in January.

Context

5329121-zen

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Intermittent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

Setting the background to fixed will resolve the enlargement issue and repeated background issue.

[KirkwallDay]

Another instance here: 5329926-zen

Kindly follow up here:

• 5329926-zd-woothemes

[happychait]

This customer was promised to be updated when this bug is fixed.

• 5329121-zen

[filipanoscampos]

Another case here 35947281-hc

Kindly follow up here:

• 5339064-zd-woothemes

[KirkwallDay]

Another instance here: 5325449-zen

Kindly Follow-up here:

• 5325449-zen

[AMcGrady]

Another instance here: 5339064-zen

Kindly Follow-up here:

• 5339064-zen

[essleeung]

Another instance here: 5342352-zd-woothemes
I've asked them to not set their cover block to fixed for now.

[dcoleonline]

• 5342352-zd

[msilbers]

• 5341159-zd-woothemes

[cuemarie]

📌 SCRUBBING

• Tested on P2 ✅
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I was not blocked by Cover Block: Background Image is Repeated When Fixed Background setting is ON but Repeated Background is OFF #64682 in testing this
• I found that any new cover block added to any test site also zoomed in on the image when Fixed background was enabled. However, it's unclear at the moment if this is a bug, or perhaps a new intended behavior.

For tests, I started by copying over cover blocks from the OP's site. Cover blocks zoomed in on the image in all testing environments, as well as on new cover blocks added today.

AT

Screen.Capture.on.2022-07-12.at.09-26-38.mp4

Self-Hosted

Screen.Capture.on.2022-07-12.at.09-33-50.mp4

Simple P2

Screen.Capture.on.2022-07-12.at.09-36-03.mp4

Image Dimensions
It seems that how far the block zooms in is determined by the original file size. For instance, the user image in these tests has huge dimensions:

📌 Workaround

• As a workaround, users impacted by this can resize the background image down to impact how much the image zooms in. For example:

I resized the OP user's 5830 x 3887 image down to 1458 x 972, and here's how the block behaves now:

Screen.Capture.on.2022-07-12.at.09-46-57.mov

---

📌 ACTIONS

• Marked as Triaged for Quality Squad review
• I'll raise this with the PAs to see if we can get some folks to weigh in on whether this behavior is by design

[annezazu]

Hi hi! I don't have access to the various zendesk tickets and am not sure what p2 is being referenced since nothing is linked. The Cover block had some style changes in 5.9 (wouldn't impact this) and can now use a featured image in 6.0 (again wouldn't impact this afaik) so I'm not quite sure what's different here.

I did try various sized images using WordPress 6.0.1 and wasn't able to notice anything super odd:

Screen.Recording.2022-07-12.at.11.59.59.AM.mov

When I try with WordPress 6.0.1 and Gutenberg 13.6, I do notice a few oddities that I think make sense to report in the Gutenberg repo:

Screen.Recording.2022-07-12.at.12.01.22.PM.mov

Specifically, the largest image size zooms in more whereas the smallest ends up as a pattern! @cuemarie can you handle following up on this please?

[msilbers]

• 5373274-zd-woothemes

The customers coming in are specifically saying that it looks different than previously. It used to be much less zoomed in.

[annezazu]

Definitely think an issue in Gutenberg's GitHub repo needs to be opened with examples, clear ways to reproduce, etc.

[supernovia]

clear ways to reproduce

@annezazu If it's only an issue happening with previously-created old cover blocks, would it make sense to just grab the affected code and work with that?

[annezazu]

Yes! That would be very helpful to cross compare to see what might be at the root of this. Specifically, examples along with timeframes of when this changed would go a long way.

[annezazu]

To be safe/to not lose more time, I went ahead and opened an issue in the Gutenberg repo: WordPress/gutenberg#42407 As a reminder, I cannot see the zendesk tickets so if folks can share examples of the block markup impacted by this issue in the Gutenberg one, that would be very helpful!

[TPilgs]

Another instance here: 34135037-hc

User requested to be notified if/when it's fixed.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5329121-zen
• 5329926-zen
• 5339064-zen
• 5325449-zen
• 5342352-zen
• 5341159-zen
• 5373274-zen
• 5401674-zen
• 5382860-zen
• 5408423-zen
• 5430986-zen
• 6433029-zen

[mxhassani]

Another one: 5401674-zd-woothemes

[cuemarie]

@annezazu Coming back to this after some time away from guild work, thank you for pushing forward with the Gutenberg issue! Is this the kind of code that's helpful?

Here's the full copiable code from the OP's cover block, I've just swapped the Image URLs with a free Pexels photo:

<!-- wp:cover {"url":"https://images.pexels.com/photos/2480072/pexels-photo-2480072.jpeg","id":333,"dimRatio":20,"customOverlayColor":"#000000","contentPosition":"center center","isDark":false,"align":"full","className":"is-style-default"} -->
<div class="wp-block-cover alignfull is-light is-style-default"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim" style="background-color:#000000"></span><img class="wp-block-cover__image-background wp-image-333" alt="" src="https://images.pexels.com/photos/2480072/pexels-photo-2480072.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"opacity":"css","backgroundColor":"background","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background-color has-css-opacity has-background-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontWeight":"200","fontStyle":"normal","textTransform":"lowercase","fontSize":"35px"}},"textColor":"secondary","className":"alignwide"} -->
<h2 class="has-text-align-center alignwide has-secondary-color has-text-color" id="un-chemin-vers-le-bien-etre" style="font-size:35px;font-style:normal;font-weight:200;text-transform:lowercase"><mark style="background-color:rgba(0,0,0,0);" class="has-inline-color has-white-color">Un chemin vers le bien être ... </mark></h2>
<!-- /wp:heading -->

<!-- wp:separator {"opacity":"css","backgroundColor":"background","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background-color has-css-opacity has-background-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

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

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

I'll share on the Gutenberg issue as well.

[cuemarie]

Update for HEs - A fix is in the works here: WordPress/gutenberg#42470 . Gutenberg updates are released every 2 weeks (rolling out on WordPress.com sites shortly after that), so once this fix is confirmed (not quite there yet as of this comment), it'll be another two weeks or so for the solution to take effect on WordPress.com sites.

In the meantime, if you'd like to offer a CSS workaround, you can address the issue on individual sites frontend display by adding the following custom CSS (Thanks @glendaviesnz on WordPress/gutenberg#42407 for this!):

/* Cover Block Fixed BG - CSS workaround | XXX-hc/zen [XX] */
.wp-block-cover-image.has-parallax,
.wp-block-cover.has-parallax,
.wp-block-cover__image-background.has-parallax,
video.wp-block-cover__video-background.has-parallax {
	background-size: cover;
	background-repeat: no-repeat;
}

[annezazu]

@cuemarie Thanks for sharing! That is helpful. No more examples needed at this point since a fix is in the works.

[cuemarie]

Copy that, @annezazu !

For HEs that encounter users who want an update when this one is fixed, we've queued this up for batch replies when the time comes, so feel free to share any other tickets that need a follow up. Formatting reminders: p7DVsv-eD3-p2

[syedshaon]

Another one: 5382860-zd-woothemes

[arunsathiya]

@alliebbush2 shared a CSS in 5408423-zen. Tracking here in case we want to followup once the bug is resolved and CSS removed.

[daledupreez]

Noting that WordPress/gutenberg#42470 addresses the issue and was merged yesterday. The fix should be included in Gutenberg 13.8.

[jp-imagines]

• Another report in 5430986-zd-woothemes.

(Personal plan, so no CSS. Suggested disabling the "fixed background" setting for now, or shrinking the affected images as noted above, as temporary workarounds while we wait for the fix to be merged.)

[christianguerrag]

The user is reaching out for an update here 6433029-zen, it is said that the fix was to be deployed in Gutenberg 13.8, is there an update on the issue?

[cuemarie]

@christianguerrag It looks like this was resolved, yes! The issue just wasn't closed when WordPress/gutenberg#42470 was merged.

I took a quick look at the user in your ticket, and all their media images are HUUUUGE - like upwards of 3000-4000px in dimensions, and 4-8MB. It's possible they're just seeing the fixed cover block zoom in because of the size of their images, and a down-sized image should work better.

I hope this helps! Thanks for the ping on this.

📌 ACTIONS

• Closing this now as resolved. Will look into batch replies for impacted users soon.

📌 Message to HEs

• Since Gutenberg has reached v16.0.0 as of this post, and this issue was resolved with Gutenberg 13.8, please open a new issue for new reports of cover blocks with fixed backgrounds that appear to be broken (feel free to refer to this if you feel it's similar). This will help with clarity if there's a new underlying cause for an issue.