Query Loop: Pagination affects all Query Loop blocks on the page (Grid 3x2 pattern only)

[Gustavo-Hilario]

Quick summary

When there are two query loop blocks using the grid 3x2 pattern, the pagination feature stops working correctly. When we try to move one another page, it also affects the other query loop block.

Steps to reproduce

• Activate Twenty Twenty-Four theme
• Create a new page
• Add two Query Loop blocks using the pattern: Grid of Posts 3x2 (I couldn't consistently reproduce this issue using other patterns)
• Make sure the blocks have pagination
• Save the changes and check the page
• When trying to navigate using the pagination feature, you will see that both blocks are affected.

https://github.com/Automattic/wp-calypso/assets/50875131/00312909-edfe-4b40-b02f-21f98d45e3e0

What you expected to happen

I expected the paginations to be independent so navigating in one block shouldn't affect the other one.

What actually happened

After switching pages, the posts on both blocks change, so navigation affects the other query blocks on the page.

Impact

One

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Atomic

Logs or notes

• Customer Report on 7817509-zen
• I could only replicate this on an Atomic site because I couldn't add the Query Loop blocks on my simple sites – not sure why.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7817509-zen
• [ ] 7945212-zen

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated / Could Not Replicate / Uncertain
• Tested on Atomic – Replicated / Could Not Replicate / Uncertain
• Tested on P2 (optional) – Replicated / Could Not Replicate / Uncertain
• Replicable outside of Dotcom – Yes/No

📌 FINDINGS

I tested this on a Simple Site and on a local site and what I found is that when duplicating the Query Block (using the "Duplicate" action in the block settings) instead of manually adding another block, the issue occurs:

This is from my local test site:

https://github.com/Automattic/wp-calypso/assets/14153300/df5e2fbb-4587-48f1-913c-92dc1e1c619d

This doesn't seem to be dependant on the pattern or the theme (I managed to repro with TT3 on a simple site)

📌 ACTIONS

• Requested author feedback

📌 Message to Author @Gustavo-Hilario can you test the hypothesis above - manually creating patterns X duplicating) and confirm if you get the same results?

If you get the same, we can open an upstream issue in Gutenberg.

That said, for this customer, you can suggest turning off "Force Page Reload" in both blocks, which will make them work as expected - it's also a better user experience.

[Gustavo-Hilario]

Hey @liviopv. I tested the same issue on a simple site now (I don't know why that wasn't working there before), and I got the same issue when manually adding both blocks.

I find it odd that the issue only occurs when both Query loop blocks are using the same specific pattern, i.e., Grid 3x2. I've tried other layouts, but the problem persists only with this one.

I have suggested a few workarounds to the user, and they should be good for now.

[cuemarie]

Reported here as well: 7945212-zen

Simple Site; customer has 4 Query Loop blocks on their page using the Grid Layout with 3 columns, and pagination impacts all of them at once.

The URL of the page is appended with ?query-16-page=1 and ?query-16-page=2 when clicking Next Page and Previous Page – same for all QL blocks. This also breaks the filters on the QL blocks, and all 4 begin showing the same posts. I've enclosed a recording of the behavior in the notes on the ticket.

[mdawaffe]

I happened across this GitHub issue today. I suspect it's related to https://github.com/WordPress/gutenberg/issues/55823, but I haven't actually looked :) Apologies if that's a red herring.

[ezebecke]

Reported here as well: 8460805-zen

I asked the user to create the query blocks manually instead of duplicating or using a pattern