Query pagination doesn't work when inside a template part.

[scruffian]

Description

When the query pagination block is inside a template block it doesn't go to the next page anymore.

Step-by-step reproduction instructions

To reproduce, use this PR: https://github.com/WordPress/theme-experiments/pull/302

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[pandammonium]

I have come across this pagination problem in WP 5.9 (so core rather than Gutenberg plugin?).

My set-up is:

• WP 5.9.1
• macOS Catalina 10.15.7
• Apache 2.4.52
• MySQL 8.0.28
• no active plugins
• my own theme (in development).

Pagination block in template part

If I choose code reuse over minimising nesting, I put my pagination block in a template part. This results in links such as <a class="page-numbers" href="?query-page=2">2</a>. These links do not work: the page numbers are updated, but the page content (i.e. the query result) is not.

Example

templates/index.html

<!-- wp:query -->
<div class="wp-block-query">
  <!-- wp:post-template -->
    <!-- wp:template-part {"slug":"article-loop","tagName":"article"} /-->
  <!-- /wp:post-template -->
  <!-- wp:template-part {"slug":"navigation-loop","tagName":"div"} /-->
</div>
<!-- /wp:query -->

parts/navigation-loop.html

<!-- wp:query-pagination -->
  <!-- wp:query-pagination-previous /-->
  <!-- wp:query-pagination-numbers /-->
  <!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

parts/article-loop.html

<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->

Resulting HTML for pagination block

<div class="wp-block-template-part">
  <div class="wp-container-62273d09eff1f wp-block-query-pagination">
    <div class="wp-block-query-pagination-numbers">
      <span aria-current="page" class="page-numbers current">1</span>
      <a class="page-numbers" href="?query-page=2">2</a>
      <a class="page-numbers" href="?query-page=3">3</a>
      <span class="page-numbers dots">&hellip;</span>
      <a class="page-numbers" href="?query-page=7">7</a>
    </div>
    <a href="/wordpress/?query-page=2" class="wp-block-query-pagination-next">Next Page</a>
  </div>
</div>

These links don't work.

Notice that:

1. the page number links include only the question mark onwards (?query-page=2), whereas the next and previous (latter not shown) page links include the WP directory (/wordpress/?query-page=2)
2. the links are relative.

Pagination block in template

If I choose minimising nesting over code reuse, I put the pagination block in a template. This results in such links as <a class="page-numbers" href="http://localhost/wordpress/page/2/">2</a>. These links work as expected.

Example

templates/index.html

<!-- wp:query -->
<div class="wp-block-query">
  <!-- wp:post-template -->
    <!-- wp:template-part {"slug":"article-loop","tagName":"article"} /-->
  <!-- /wp:post-template -->
  <!-- wp:query-pagination -->
    <!-- wp:query-pagination-previous /-->
    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
  <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->

parts/article-loop.html

<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->

Resulting HTML for pagination block

<div class="wp-container-62273d09f03ff wp-block-query-pagination">
  <div class="wp-block-query-pagination-numbers">
    <span aria-current="page" class="page-numbers current">1</span>
    <a class="page-numbers" href="http://localhost/wordpress/page/2/">2</a>
    <a class="page-numbers" href="http://localhost/wordpress/page/3/">3</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="http://localhost/wordpress/page/7/">7</a></div>
    <a href="http://localhost/wordpress/page/2/" class="wp-block-query-pagination-next">Next Page</a>
  </div>
</div>

These links do work.

Notice that:

1. the page number links and the next and previous (latter not shown) page links are the same (http://localhost/wordpress/page/2/)
2. the links are absolute.

[eri-trabiccolo]

I bumped into this too. The issue seems to be that, when in a template part or in a pattern, the pagination doesn't inherit the query context. Basically the condition below is never met, while it should https://github.com/WordPress/gutenberg/blob/d06ee3a4c5d18e336e2a7f3e78dcf6a7f9a6e397/packages/block-library/src/query-pagination-next/index.php#L33

[annezazu]

Adding for now to the phase 2 board as this is the closest issue I could find related to the following feedback pulled from https://github.com/WordPress/gutenberg/issues/48443

It's frustrating to use the “query pagination” block and not being able to drag it around to reposition. It seems to only want to exist as a direct child of Query Loop. Contrast to the “prev” and “next” post block which are much easier to use, insert, copy, move.