Duplicating Query Block can result in duplicate Query IDs and makes navigation not working as expected

Gustavo-Hilario commented 8 months ago

Update: This only happens when duplicating an existing Query Loop block, which results pagination not working as expected.

Already reported on https://github.com/WordPress/gutenberg/issues/55823

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] commented 8 months ago

Support References

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

[ ] 7817509-zen
[ ] 7945212-zen
[ ] 8460805-zen

liviopv commented 8 months ago

📌 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 commented 8 months ago

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 commented 8 months ago

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 commented 5 months ago

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 commented 4 months ago

Reported here as well: 8460805-zen

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

fditrapani commented 2 weeks ago

@Automattic/dotcom-product-ambassadors can you please triage this issue again to confirm if it's still replicable.

jartes commented 1 week ago

Thanks for the ping, @fditrapani!

I'm only able to reproduce this when duplicating existing Query Loops, which is already reported on https://github.com/WordPress/gutenberg/issues/55823

@annezazu I added it to the CtD board to see if we can review this one, which is impacting some users.

annezazu commented 1 week ago

How often do we see this? Is this a top issue impacting our users?

Automattic / wp-calypso