Pagination block does not take into account offset posts in query loop

[kathrynwp]

Description

When you set a Query Loop block to have an offset, the Pagination block does not seem to recognize this, and instead behaves as if those posts were still part of the query loop. This can result in blank pages when clicking pagination links.

Step-by-step reproduction instructions

1. Publish 13 posts
2. Add a Query Loop block to a page
3. In the block's settings in the right-hand panel, toggle "Inherit query from template" off
4. In the block's settings in the toolbar on top of the block, set the display to grid, "Items per page," to 9 and "Offset" to 4

6. Visit the page on the front end
7. In the pagination below the grid, click "Next page" or "2"

Result

Page 2 is blank

Expected

Pagination should only be present when there are posts to display in any of the paginated areas. There should be no blank pages. Pagination block needs to take into account offset posts.

User report

Reported in the WP.org support forums: https://wordpress.org/support/topic/front-page-74/

Screenshots, screen recording, code snippet

pagination-block-bug.mov

Environment info

• WP 6.1.1
• Twenty Twenty-Three
• Gutenberg plugin not active
• No other plugins 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

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[kathrynwp]

I can still replicate this with:

WP 6.3-RC2
Gutenberg not active
Twenty Twenty-Three 1.1

[jeflopodev]

I was creating my own issue. But I searched through the issues index and found this issue that is based on this same problem or a very similar one. So I'm just going to copy paste my issue here:

Description:
I was adjusting my query loop settings, because in the front page I decided to show the latest 12 posts. So I made the blog index page that has a query loop block to show 12 items per page with an offset of 12 posts.

This way I have a total of 34 posts. The front page has 12. +12 in the page 1 of the blog index sums 24. +12 in the page 2 sums 34.

The problem is that I'm seeing an extra third & empty page in the pagination that shouldn't be there.

Step-by-step reproduction instructions
For the reproduction steps I'm going to use the number of posts with which I was able to reproduce the issue. Feel free to adjust proportionally & check.

1. Go to https://playground.wordpress.net
2. Have a total of 34 posts. Create them or duplicate the Hello World post. I've used a plugin to duplicate it 33 times.
3. Open the editor & Edit the Blog Home template to have a query loop block like is in the video, with items per page 12, and an offset of 12. Save the template.
4. Use the "View site" button to go to that page and use the pagination till the last page.
5. Check if that last page is empty.

Video, because, why not:
https://youtu.be/C5s1g8oMR2Q

Environment info:

• Wordpress 6.6.1
• Gutenberg 18.8.0 & 18.9.0 RC1 (Pre-release) - after recording the video I installed them, and uninstalled the post duplicator plugin. Having gutenberg active or not made no difference.
• Windows 11 23H2
• Chrome 126.0.6478.183 (Build oficial) (64 bits)

[ntsekouras]

offset (int) – number of post to displace or pass over. Warning: Setting the offset parameter overrides/ignores the paged parameter and breaks pagination. The 'offset' parameter is ignored when 'posts_per_page'=>-1 (show all posts) is used.

It seems that in WP_Query class there are problems with the offset and pagination. I'm not sure what would be the best path forward here for this, but we should see why this is happening in core and if we can change that there.

[jeflopodev]

• When I wrote the post above I forgot about the inherit. And now I've realized that I also have the above mentioned pagination problem (that empty last page & as @kathrynwp mentions I also felt like if the pagination block behaved as if those (offsetted) posts were still counting towards the end result for the pagination) when the inherit property is Disabled.

  On the other hand, when the query loop block inherit property is Enabled, then it doesn't show an empty last page (is working as I expected).

I also would like to share some Feedback from a User / Noob theme developer 😅 perspective / UX:

• While having that inherit property Disabled:

  • Wordpress uses URL Query Parameters. ie. https://latest.test/blog/?query-10-page=2 or https://latest.test/blog/?query-page=2 if we remove the queryId attribute from the block markup.

• While having that inherit property Enabled:

  • WordPress uses URL Path params (SEO Friendly URLs). ie. https://latest.test/blog/page/2

  • The query loop block loses the pagination controls in the block bar. So the only way to control pagination is by using the "global" post per page setting.

    Since the Query Loop controls are only shown in the Block bar while it is Disabled:
    

  The problem I see here is that If we want / need to use those controls (post per page/offset/max page) WordPress will convert the URLs to query parameters... that are uglier.
  And If we set that property Enabled. The last page of the pagination is working as expected & We get cool SEO Friendly looking URLs in our pagination but then the query loop block and it's pagination became more rigid / less useful. Because we can't modify those properties anymore.

  So, we have two different behaviors, one of them limits us too much. The other one has more flexibility but makes the URLs uglier... The UX of this doesn't feel good IMHumbleO.

[ntsekouras]

@jeflopodev I'm not sure I got you last comment 100%..

The think I can mention though that the queryId and URLs like https://latest.test/blog/?query-10-page=2 are needed because we need to support pagination for multiple custom Query Loop blocks.

[jeflopodev]

@jeflopodev I'm not sure I got you last comment 100%..

Sorry for the confusion, Nik, I see that in the first sentence I used Enabled / Disabled incorrectly 😅 I have reworded / better structured the whole post for clarity.