Several blocks with the anchor are broken in the update

[t-hamano]

In WordPress 6.1.1, if the content contains blocks with the anchor, updating to WordPress 6.2 Beta2 will break some blocks.

I created the following content in WordPress 6.1.1:

<!-- wp:paragraph -->
<p>Paragraph without anchor</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p id="anchor">Paragraph with anchor</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Heading without anchor</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="anchor">Heading with anchor</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div id="anchor" class="wp-block-group"></div>
<!-- /wp:group -->

If you update this environment to WordPress 6.2, the markup will change as follows:

<!-- wp:paragraph -->
<p>Paragraph without anchor</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><p id="anchor">Paragraph with anchor</p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Heading without anchor</h2>
<!-- /wp:heading -->

<!-- wp:heading {"anchor":"anchor"} -->
<h2 class="wp-block-heading" id="anchor">Heading with anchor</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} /-->

A comparison of the markups confirms the following three points:

• The paragraph block with the anchor are nested in the p element
• A comment about anchor attributes has been added to the heading block
• The anchor in the group block are missing

Now save the post, updating only the title, and reload the browser. Then the block will be broken as follows:

The browser console displays the following error:

react_devtools_backend.js:4012 Block validation: Block validation failed for `core/paragraph` ({name: 'core/paragraph', icon: {…}, keywords: Array(1), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<p></p>

Content retrieved from post body:

<p><p id="anchor">Paragraph with anchor</p></p>

---------------

react_devtools_backend.js:4012 Block validation: Block validation failed for `core/group` ({name: 'core/group', icon: {…}, keywords: Array(4), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="wp-block-group"></div>

Content retrieved from post body:

[t-hamano]

This issue might be related to #44771.

• In the Gutenberg repository, start wp-env with WordPress 6.1.1.
• Disable the Gutenberg plugin.
• Insert paragraphs, headings, group blocks, etc. with the anchor into the post content.
• Enable the Gutenberg plugin.
• When you open the post in the code editor, the markup has changed.
• Comment out this line added by Add anchor support for dynamic blocks #44771.
• Open the code editor and confirm that the markup has not changed.

As mentioned above, I think that the changes made in #44771 might have unintentionally affected static blocks.

[Mamaduka]

Cc @Soean

[Soean]

Maybe we should check, if the block has a render callback.

[t-hamano]

I think the render callback is not limited to dynamic blocks but is also used to rewrite output on the front end. For example, A static block with a render callback will have extra comments added as follows:

<!-- From -->

<!-- wp:heading -->
<h2 id="my-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large" id="my-image"><img src="https://live.staticflickr.com/4572/38004374914_6b686d708e_b.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- To -->

<!-- wp:heading {"anchor":"my-heading"} -->
<h2 class="wp-block-heading" id="my-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","anchor":"my-image"} -->
<figure class="wp-block-image size-large" id="my-image"><img src="https://live.staticflickr.com/4572/38004374914_6b686d708e_b.jpg" alt=""/></figure>
<!-- /wp:image -->

I think we should check if the save property of registerBlockType() is null, but the server side cannot determine that...