Block Hooks: Incorrect placement in the parent container for hooked blocks

[gziolo]

• Part of Include Block Hooks in WordPress 6.4 #53987.

Description

Every block that has inner blocks also has some wrapping HTML element. The way hooked blocks are currently implemented is that it puts the injected block at exactly first or last place in the parsed block, which happens to be outside of the wrapping element. A simplified example based on REST API response that shows the issue:

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
    <main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)">
        <!-- wp:pattern {"slug":"twentytwentythree/cta"} /-->
    </main>
    <!-- wp:ockham/like-button /-->
<!-- /wp:group /-->

It should be withing the main tag instead:

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
    <main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)">
        <!-- wp:pattern {"slug":"twentytwentythree/cta"} /-->
        <!-- wp:ockham/like-button /-->
    </main>
<!-- /wp:group /-->

Step-by-step reproduction instructions

1. Install and activate the plugin with the hooked block. Example block can be downloaded from https://github.com/ockham/like-button/releases/tag/v0.3.1.
2. Activate Twenty Twenty-Three theme or any other theme that uses core/comment-template block.
3. Go to the single post page and see where the Like Button gets injected. Ensure that all templates and template parts used on that page don't have any customizations applied.
4. Check the source of the page and notice that the Like button is after the closing tag for the comment row wrapper.

Screenshots, screen recording, code snippet

The configuration used for the Like Button:

The same issue exists for firstChild and lastChild. Everything works correctly for before and after positions.

The issue was hard to discover because the way it's presented in the block editor is perfectly valid:

The REST API endpoint contains the hooked block as expected, at least when you don't check it with enough attention:

The issue is easier to spot when checking the source of the webpage because the block gets printed after (or before when using firstChild) the closing tag for the target parent block:

It's hard to tell by looking at the page:

Well, until you use source inspector:

Environment info

The latest Gutenberg version.

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