Cover Blocks with legacy markup lose their content after block recovery if hasParallax was true

[davidallenlewis]

Description

The Cover Block used to use an inline style attribute on the main div for the background image but now uses a nested img tag for regular backgrounds or nested div tag for fixed backgrounds. The new markup means any content saved by a previous version of WordPress will fail block validation when the editor loads. "Attempt Block Recovery" should fix the block but if hasParallex was true in the legacy markup the recovery process removes all the previously nested content / blocks.

Step-by-step reproduction instructions

1. Paste the legacy Cover Block markup (below) into a Page
2. Save the Page and Reload
3. You'll see a broken block with "Attempt Block Recovery"
4. Click "Attempt Block Recovery"
5. Cover Block is fixed but the nested "My Cover Block Text" content is now missing

Workaround

Removing the "hasParallax":true block attribute from the comment fixes the issue. The block will still fail validation but recovering the block will work and any nested content will be retained.

Legacy Cover Block markup for testing

<!-- wp:cover {"url":"https://placehold.co/1200x800","hasParallax":true,"dimRatio":90} -->
<div class="wp-block-cover has-parallax" style="background-image:url(https://placehold.co/1200x800)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">My Cover Block Text</p>
<!-- /wp:paragraph --></div></div>

Environment info

• WordPress 6.2.2
• Safari Version 16.5 (18615.2.9.11.4)
• MacOS Venture 13.4 (22F66)
• All plugins disabled
• Twenty Twenty-Two theme active

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]

Thanks for the report, @davidallenlewis.

I was also able to reproduce this problem.

Sources related to this issue would be:

• Cover block: fix duotone when background is set to fixed #40554
• Miscellaneous editor changes for WordPress 6.1 – Make WordPress Core

In WordPress 6.0, the markup for the cover block is as follows:

Fixed Background

<!-- wp:cover {"url":"https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg","hasParallax":true,"dimRatio":70} -->
<div class="wp-block-cover has-parallax" style="background-image:url(https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg)">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim"></span>
	<div class="wp-block-cover__inner-container">
		<!-- wp:paragraph {"placeholder":"Write title…"} -->
		<p>Fixed background</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:cover -->

Unfixed Background

<!-- wp:cover {"url":"https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg","dimRatio":70} -->
<div class="wp-block-cover">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim"></span>
	<img class="wp-block-cover__image-background" alt="" src="https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg" data-object-fit="cover"/>
	<div class="wp-block-cover__inner-container">
		<!-- wp:paragraph {"placeholder":"Write title…"} -->
		<p>Unfixed Background</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:cover -->

When WordPress is updated to version 6.1, the markup will change as follows:

Fixed Background

All HTML in the block will disappear.

<!-- wp:cover {"url":"https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg","hasParallax":true,"dimRatio":70} /-->

Unfixed Background

<!-- wp:cover {"url":"https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg","dimRatio":70} -->
<div class="wp-block-cover">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim"></span>
	<img class="wp-block-cover__image-background" alt="" src="https://live.staticflickr.com/2328/2061718046_64bbbc0a04_b.jpg" data-object-fit="cover"/>
	<div class="wp-block-cover__inner-container">
		<!-- wp:paragraph {"placeholder":"Write title…"} -->
		<p>Unfixed Background</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:cover -->

The block deplication may need to be fixed.

[t-hamano]

This problem occurred in WordPress 6.1. It may not be a blocker for the release of WordPress 6.3, but I'm adding it to WordPress 6.3 Editor Tasks because I think it is better to address the block deprecation issue as soon as possible.