Query Loop: Pagination on Empty Query

[carinapilar]

Quick summary

The Query Pagination is still shown even when there are no results on the Query Loop block.

Steps to reproduce

1. Create a new page
2. Add the Query Loop block
3. Add a filter that would result in No results found.
4. Add the Query Pagination block

What you expected to happen

To not show any pagination on the live page, since there are no results on the query.

What actually happened

It shows a Next Page link.

This is what you see within the editor:

And on the live page:

The Next Page link adds ?query-0-page=2 to the page's URL, and when you click on it, it changes to Previous Page and Next Page.

[inaikem]

Thanks for the report, Carina!

I was not able to replicate this on a Simple, Atomic or self-hosted test site. The screenshots below are from an Atomic sites public page and editor page respectively:

     

Are you still able to replicate this on your end? If so, can you please provide details of the exact filter combination you used? Maybe the pagination issue here is specific to that.

For reference, here's the code for the Query Block (and filters) I used to generate a block that would produce a No results found. message 🙏

<!-- wp:query {"queryId":7,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":20569242,"search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->

Note: I used an author with no posts.

[carinapilar]

The problem is with the Query Pagination block within the Query Loop, you would want to have this structure on the page:

Even if there are no results from the query, it shows a Next Page link:

[Robertght]

Thank you @carinapilar! I can replicate this on my end as well.

[ivan-ottinger]

The Query Loop Pagination block is a part of Gutenberg. One of the ways we could fix the issue is to add a check whether there are actual pages available for the pagination. If there are no pages to navigate to, the "Next Page" link wouldn't display in the front-end.

When it comes to back-end, I think it would be worth leaving the default pagination displayed there even when there are no posts to be displayed at the time. This would make sure the user can still click on the pagination block and adjust its settings (e.g. label) for the time when the new posts meeting the filter criteria are published:

What do you think?

---

For completeness, here is a proposed code change (I will be working on the PR for the Gutenberg repo and will then link it here as well):

--- a/packages/block-library/src/query-pagination-next/index.php
+++ b/packages/block-library/src/query-pagination-next/index.php
@@ -44,7 +44,11 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
        remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
    } elseif ( ! $max_page || $max_page > $page ) {
        $custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
-       if ( (int) $custom_query->max_num_pages !== $page ) {
+       $max_num_pages = (int) $custom_query->max_num_pages;
+       if (!$max_num_pages) {
+           return '';
+       }
+       if ( $max_num_pages !== $page ) {
            $content = sprintf(
                '<a href="%1$s" %2$s>%3$s</a>',
                esc_url( add_query_arg( $page_key, $page + 1 ) ),

[carinapilar]

That sounds great to me, thanks @ivan-ottinger! 😃

[ivan-ottinger]

My PR didn't get to review, but when I tried now, I couldn't reproduce the issue anymore. → Closing this thread now.

Of course, we can still reopen in case the issue comes back. :)