Make WordPress Core

Opened 6 weeks ago

Last modified 2 weeks ago

#63290 new defect (bug)

Cover block overlays didn't display after 6.8 update—every page had to be resaved

Reported by: margaretschneider's profile margaretschneider Owned by:
Milestone: 6.8.2 Priority: normal
Severity: major Version: 6.8
Component: Editor Keywords: needs-test-info
Focuses: Cc:

Description

When a site I'm working on updated to 6.8, overlays on cover blocks that previously were appearing stopped displaying. I had to go through and resave every page on the site to make the overlays appear again.

That was workable for me, because this was a small brochure site. But for anyone making extensive use of cover blocks with overlays on larger sites, that's not going to be practical.

Steps to reproduce:

  1. Go to site that has cover blocks in use with gradient overlays on pages.
  2. Check whether the overlays are appearing on the cover blocks.
  3. If the overlays aren't appearing, resave the page. You might want to check the code editor to document any issues before making this update.
  4. Overlays should reappear on the cover blocks at that point.

Change History (22)

#1 @yogeshbhutkar
6 weeks ago

Thanks for raising the issue.

Since it relates to blocks, it would be best to report it in the Gutenberg GitHub repository: https://github.com/WordPress/gutenberg/issues.

Some additional information might also be required to debug this further, like:

  • Whether the Gutenberg plugin is active
  • The version of WordPress you updated from before encountering the issue in 6.8
  • The code for the Cover block from the code editor (both before and after the update, if possible)

I tried to reproduce the issue by applying a gradient overlay to a Cover block on a page in WordPress 6.7 and then updating to 6.8. In my case, the overlay worked as expected, so I wasn’t able to replicate the bug. Any extra information you can provide might help narrow it down.

#2 @sabernhardt
6 weeks ago

  • Component changed from General to Editor
  • Version set to trunk

#3 @oglekler
5 weeks ago

  • Keywords needs-testing-info reporter-feedback added

#4 @jorbin
5 weeks ago

  • Version changed from trunk to 6.8

This ticket was mentioned in Slack in #core by jorbin. View the logs.


5 weeks ago

#6 @jorbin
5 weeks ago

@margaretschneider Thanks for opening your first ticket on trac! If you are able to answer the questions that @yogeshbhutkar laid out, that should help reproduce this so it can be fixed.

Whether the Gutenberg plugin is active
The version of WordPress you updated from before encountering the issue in 6.8
The code for the Cover block from the code editor (both before and after the update, if possible)

This is potentially a candidate for 6.8.1, but I don't want to milestone it until it's clear this is a reproducible issue.

#7 @margaretschneider
5 weeks ago

Hey Aaron,
Thanks! I think I opened and commented on a number of tickets here previously, but they were under a past workplace-specific account. So this is just the first one with this more recent account!

Yogesh, to answer your questions:

The separate Gutenberg plugin is not installed on the site, but I am using the Gutenberg editor.

I checked with the host's support, and this was an update from 6.7.2 to 6.8.

I checked revision history, and the code on these cover blocks hasn't changed at all from before to after the update. Here it is, with the client's image URL and name redacted.

!-- wp:cover {"url":"https://domainredacted.com/wp-content/uploads/2024/12/imagenameredacted.jpg","id":316,"alt":"Redacted Name of the Image","isUserOverlayColor":true,"focalPoint":{"x":0.52,"y":0.9},"minHeight":850,"customGradient":"linear-gradient(180deg,rgb(18,18,18) 4%,rgba(105,95,24,0.6) 18%,rgba(0,0,0,0.38) 49%,rgba(198,7,227,0.32) 88%,rgb(17,17,17) 93%)","contentPosition":"top center","align":"full","style":{"spacing":{"padding":{"right":"0px","left":"0px"}}},"layout":{"type":"constrained"}} -->

If need be, I can open a separate Gutenberg issue for this, but let me know! Thanks for looking into it, y'all.

#8 @margaretschneider
5 weeks ago

  • Keywords reporter-feedback removed

#9 @wildworks
5 weeks ago

I haven't reproduced the issue yet.

If we are experiencing issues, it might be related to this PR: https://github.com/WordPress/gutenberg/pull/66249/

@margaretschneider Are you using a default theme like Twenty Twenty-Five or another theme?

#10 @margaretschneider
5 weeks ago

Ah interesting! I'm using the Astra theme on this site. The first thing I did when I noticed this was happening was update all my installed themes, but it didn't solve the problem.

#11 @wildworks
5 weeks ago

Unfortunately, I haven't reproduced the issue on the site with the Astra theme activated.

I had to go through and resave every page on the site to make the overlays appear again.

This is an important hint because WordPress 6.8 has changed the markup that is stored in the cover block. Related Gutenberg PR: https://github.com/WordPress/gutenberg/pull/66249/files#diff-e37eefbcd11d108017ba34be8d5bfd9fc3aaaf6c8613d42766a6c3c52060c239

Hopefully, someone can find some reproducible steps.

#12 @yogeshbhutkar
5 weeks ago

I wasn’t able to reproduce this with the Astra theme either.

This is an important hint because WordPress 6.8 has changed the markup that is stored in the cover block.

I thought the same, but as mentioned here, the markup doesn’t appear to have changed, which is a bit unexpected.

I checked revision history, and the code on these cover blocks hasn't changed at all from before to after the update. Here it is, with the client's image URL and name redacted.

#13 @butterflymedia
5 weeks ago

I have the same issue on 20+ websites, all using covers and overlays. Nothing fancy there, just the default cover block.

I had to edit the pages and resave them.

#14 follow-up: @wildworks
5 weeks ago

@butterflymedia Do you still have the HTML for the block you're having trouble with - i.e. the HTML before you re-saved it? You can check the HTML by switching to a code editor.

If you can provide that HTML, it might help us investigate the problem.

#15 in reply to: ↑ 14 @butterflymedia
5 weeks ago

  • Severity changed from normal to major

Replying to wildworks:

@butterflymedia Do you still have the HTML for the block you're having trouble with - i.e. the HTML before you re-saved it? You can check the HTML by switching to a code editor.

No, I resaved immediately, as the clients started complaining.

I am managing more than 20 websites, so if I find more issues, I'll try to save the HTML before and after.

#16 @wildworks
4 weeks ago

I've seen a few posts on social media about this issue where people are encountering the same error. It may be an error that occurs under certain conditions.

If you have encountered this issue, I would appreciate it if you could tell me the following:

  • Are you using the classic theme or the block theme?
  • What cover media do you have set: an image, video, or featured image?

#17 @butterflymedia
4 weeks ago

For me is when using a few different themes, both classic and block.

The cover media is set to images. I don't use videos or featured images, so I can't test.

For me, the condition was updating to WordPress 6.8.

#18 @wildworks
4 weeks ago

  • Milestone changed from Awaiting Review to 6.8.2

Thanks everyone for the info. Given that 6.8 changed the HTML/styles for the Cover block and several users are reporting issues, I think this is something we should continue to investigate with the goal of getting a fix in 6.8.2.

This ticket was mentioned in Slack in #core-editor by wildworks. View the logs.


3 weeks ago

#20 @getsyash
3 weeks ago

Same happened with me for 3 websites, Just editing and resaving the page fixed the issue. Unfortunately i couldn't get any before and after code.

#21 @smahjoob
2 weeks ago

Hi there,

After seeing the issue reported in the ticket, I decided to test it on my own setup with WordPress 6.8.1.

Here's what I found:
I created a page using the Cover block with a background image and an overlay (black, 50% opacity) in WP 6.7.2 before the upgrade.

In 6.7.2, everything was working perfectly, both in the editor and on the front end.

After upgrading to 6.8.1, I noticed that the overlay was no longer showing up on the front end — but still appeared correctly in the editor.

To test this, I opened the page in the editor and simply clicked Update (without changing anything). After doing this, the overlay displayed correctly on the front end again.

What I think is happening:
It seems like the overlay is not being applied correctly to blocks created in 6.7.2 after upgrading to 6.8.1. However, re-saving the page resolves the issue. This makes me think there’s a problem with how block attributes (like dimRatio for overlays) are being interpreted between versions.

It would be great to know if others are seeing this as well, and if there’s a patch we should consider to ensure backward compatibility for saved blocks.

Thanks!

#22 @joemcgill
2 weeks ago

  • Keywords needs-test-info added; needs-testing-info removed
Note: See TracTickets for help on using tickets.