Post pagination: duplicate inner wrapper

[chthonic-ds]

Description

The post pagination markup looked like this prior to the 11.7 release:

<div class="wp-container-61676156d9e74 wp-block-query-pagination">
  <div class="post-navigation-link-previous wp-block-post-navigation-link"></div>
  <div class="post-navigation-link-next wp-block-post-navigation-link"></div>
</div>

Since 11.7, there's a duplicate .wp-block-query-pagination attached to an inner wrapper <div>:

<div class="wp-container-61676156d9e74 wp-block-query-pagination">
  <div class="wp-block-query-pagination">
    <div class="post-navigation-link-previous wp-block-post-navigation-link"></div>
    <div class="post-navigation-link-next wp-block-post-navigation-link"></div>
  </div>
</div>

This means the flex styles managed by the .wp-container-* class are no longer applied to the intended target, .wp-block-post-navigation-link.

Step-by-step reproduction instructions

1. Activate a theme with post pagination blocks (e.g. Tove).
2. Create a few posts to generate post pagination links.
3. With 11.6 active: visit a post and view the post pagination markup.
4. Repeat 3. with 11.7 active.

Screenshots, screen recording, code snippet

11.6 active

11.7 active

Environment info

• WordPress 5.8
• Gutenberg 11.7
• Any theme with post pagination blocks 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

[chthonic-ds]

Looking at a single.html template:

Prior to 11.7, it seems <div class="wp-block-query-pagination"> was required to wrap the previous/next pagination blocks? Like so:

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-query-pagination">
  <!-- wp:post-navigation-link {"type":"previous","label":"Previous","showTitle":true} /-->
  <!-- wp:post-navigation-link {"type":"next","label":"Next","showTitle":true} /-->
</div>
<!-- /wp:query-pagination -->

Since 11.7, it appears this is automatically handled by <-- wp:query-pagination -->. When the wrapper <div> is removed from the template, the flex layout works correctly.

I guess this is not a bug and instead requires a theme update?

[chthonic-ds]

The two circumstances I'm seeing this happen with 11.7 active:

• When the markup in Post pagination: duplicate inner wrapper #35610 (comment) has been used in a template
• When the template has been saved via the Site Editor, prior to updating to 11.7

The duplicate wrapper no longer appears once a template is saved via the Site Editor in 11.7.

[carolinan]

Yes I noticed this too and needed to update the markup in the themes .html file.
I assume this change will be announced in the post for the plugin release.

[Mamaduka]

Sorry, this is my fault. The change was introduced via #35092 to fix the empty container issue.

[Mamaduka]

The note has been added to the release post.

[chthonic-ds]

Thank you, @Mamaduka!