Cover Block: fixed parallax background issue

[DRepasky]

Description

The built-in Cover block parallax background feature is broken on our client's site. The cover block image is not visible when selecting the Media settings > Fixed background option. Inserting the Cover block and selecting the "Fixed" background option is supposed to render a parallax version of the image that scrolls through a semi-opaque window as the user scrolls.

Currently the block is displaying a 100% opaque overlay where the image is supposed to go, only when the "Fixed" or "Repeated" background options are selected. The block renders appropriately when neither of these options are selected.

This issue has been reported and resolved before, as reported in #28425.

A search of the repository doesn't show any new issues with the Cover block. We noticed in testing that the Cover block's markup has changed considerably in the most recent WordPress core versions, and we suspect that is the cause of the issue.

Here's an example of what we're seeing:

Step-by-step reproduction instructions

1. Log into the page or post editor running WordPress core later than 6.0.3
2. Add the Cover block to the editor.
3. Select an image.
4. Toggle the "fixed" or "repeated" media background settings to active.
5. Publish the post. The image should appear in the editor correctly, but when published, the block should show up on the frontend as a black background with no image present.

Screenshots, screen recording, code snippet

The image in the editor:

What we see on the frontend:

Environment info

-WordPress version 6.1.1, running WordPress multi-site. As stated before, WordPress 6.0.3 doesn't have the same bug.
-We are not using the Gutenberg plugin. We are using the block editor that ships with WordPress.
-This happens in every browser we've tested.
-Current OS / Browser: macOS Monterey v12.4 running Chrome v108.0.5359.98 / Safari v15.5
-The theme we're using is a custom theme we developed for the client.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I have not been able to reproduce this issue with the default theme.
If this problem occurs in a custom theme, I suspect it has something to do with the markup changes in WordPress 6.1.

Miscellaneous editor changes for WordPress 6.1 – Make WordPress Core

[annezazu]

@DRepasky can you provide more information around whether you are using a custom theme considering the above comment?

[DRepasky]

We are using a custom theme, and the link t-hamano provided was helpful. The markup between the two versions did change, and since then I've tried a number of fixes, none of which worked. I've tried re-rendering the block using the version of cover.php from WP 6.0.3, and that didn't work. I've also tried using the render_block hook to modify the output of the block, but that didn't work either. All I need to do is attach the background image for the block to the block's containing div, and we should be good to go.

[t-hamano]

@DRepasky
I can't give you specific advice on your custom theme here, but you may need to adjust your CSS to match the new markup. Rewriting the markup with hooks, as you have already tried, may also be useful.

In both cases, I would like to close this issue, as I think this is an intended change.

Please feel free to comment if there are any issues I have missed.