Cover block: changes to zoom ratio in previously created blocks using fixed background

[annezazu]

Description

Currently, I'm seeing reports about users who had previously set up Cover blocks are now finding that the amount an image is zoomed in on has changed by zooming in further on an image than before. The first report of this happened 15 days ago as you can see here in this public repo: Automattic/wp-calypso#65042 Reporting this here since oddities can be replicated in a self hosted environment and the problem seems to be due to changes in Gutenberg.

Specifically, there seem to be two (possible three) factors at play: the Cover block needed to be created some time ago (unclear when exactly) and it needed to have the "fixed background" option toggled on. I'm also wondering if the size of the image might be at play as I noticed a change in the fixed background zooming with Gutenberg 13.6 compared to just using WordPress 6.0 that seems to be related. Specifically, the largest image size zooms in more whereas the smallest ends up repeating.

GB.13.6.mov

Replication Steps

To replicate part of the above, add varying sized images to different Cover blocks and set to fixed background. From there, you can use WordPress 6.0/6.0.1 with and without Gutenberg 13.6 to see the differences in the latest Gutenberg version. Specifically, here's a link to the image I used to replicate how, when using a smaller image, the image repeats rather than zooms.

For the previously created Cover blocks, I'm awaiting examples but wanted to flag up for now in case there might be an obvious cause I'm missing.

Next Steps

@glendaviesnz are you able to look into this? The only thing that felt remotely similar was this previous issue after 5.9 that I know you quickly helped address #38466 Otherwise perhaps @draganescu might know if something changed based on your work with implementing the featured image functionality #39658

In the meantime, I'll ask those from the WordPress.com team to add more examples here of markup for blocks impacted by this in a case that helps and I shared in #core-test to see if others are able to replicate what I was able to above.

[annezazu]

Digging into this more, I think the root cause is when using a very large image. When using Gutenberg 13.6 with WordPress 6.0.1, the image is zoomed in far more when using something 5000px wide vs 1500px wide:

• Large image: https://cloudup.com/c5Uwi07_2q1
• Small image: https://cloudup.com/c-_vZOGvCWY

If I deactivate Gutenberg 13.6, it works as expected. Of note too, when switching between turning GB on and off, I'm getting "attempt block recovery" messages in order to have the Cover blocks appear.

[costdev]

Testing on Gutenberg 13.6.0, 13.5.0, 13.4.0, and 13.3.0, the bug appears from 13.4.0 onwards.

Reviewing the changelog for 13.4.0, the Cover block is touched by 40554.

[glendaviesnz]

Thanks @costdev, #40554 looks like it could be it as it makes some changes to how the focal point is set it seems, will take a closer look.

[annezazu]

Ya'll are the best. Thank you ❤️

[glendaviesnz]

Looks like the issue is that #40554 is adding a background position, eg. style="background-position:50% 50%;background-image:url(...)" whereas prior to this change the image had no position set, eg. style="background-image:url(...)".

I am not going to have time to look at this further today, but can pick up again tomorrow - @matiasbenedetto or @ajlende you have any thoughts on whether we can achieve the fix with duotone without changing the positioning of the parallax images?

[glendaviesnz]

@annezazu there is a PR here that I think takes it back to the pre 13.4 state, and duotone still seems to work ok, if you have time to give it a test.

[matiasbenedetto]

👋 thanks @annezazu @costdev @glendaviesnz for working on this!

I think Glen's PR is re-introducing a bug already fixed. I think we can tackle this with a simpler approach so I submitted an alternative PR here: #42470

[matiasbenedetto]

#42470 seems to be fixing also the problem described here: Automattic/wp-calypso#64682

[cuemarie]

👋 Hey folks! Here's an example of the code from a cover block on a user's site who first reported the issue to HE's:

Here's the full copiable code from that cover block, where 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 -->

Hope this is helpful - let me know if there's something else that might help more!

[glendaviesnz]

It looks like #42470 fixes this issue. @cuemarie while you wait for this fix to make it into a release it may be possible to fix it on individual sites frontend display by adding the following custom CSS:

.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]

@happychait I deleted a commented from you as a part of triaging this issue and keeping it focused as it references what seems to be internal tooling. Noting here for further transparency. Let's keep this issue focused on the solutions and/or specific examples of the problems so those finding the solutions can dig in 💥.

[skorasaurus]

Sounds like this can be closed with the merging of #42470 ; reopen I am misunderstanding.