You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR is built on top of #70353, which includes the new logic for client-side navigation. The issues it solves are pretty hard to replicate in existing region-based navigation.
For testing purposes, in the mentioned branch, the full client-side navigation can be enabled using a filter like this:
add_filter( 'wp_interactivity_experimental_full_page_client_navigation', 'activate_full_csn', 10, 2 );
functionactivate_full_csn() {
return'I acknowledge that full-page client-side navigation is still experimental and will probably change, breaking my plugin or website on its next version.';
}
What?
It solves a bunch of issues related to client-side navigation and the image lightbox.
The lightbox closing animation triggers when navigating to a page with the lightbox enabled.
Closing.animation.issue.mp4
Testing instructions
Go to a page with an image with lightbox.
Open and close the lightbox.
Go to a page without lightbox.
Go back to the page with lightbox.
Check the animation is not triggered.
How?
It changes the hide class to rely on state.overlayOpened instead of state.showClosingAnimation, and I've removed that property. According to this comment, it was added because the animation was triggered the first time the page was loaded, but I have been testing it and I wasn't able to reproduce it in any browser.
CSN breaks after going from an empty query loop to a page with lightbox enabled.
Broken.CSN.mp4
Testing instructions
Add a query loop without "Force page reload" enabled in the homepage.
Navigate to a page that doesn't exist like https://localhost:8888/?query-1-page=999.
Navigate to a page with a lightbox.
Check that the lightbox works as expected and it doesn't trigger an error like in the video.
How?
Using the data-wp-key directive solves this issue.
Lightbox triggers incorrect image when opening and closing multiple images in a query loop.
Query.gutenberg.-.13.June.2025.mp4
Testing instructions
Create two posts with two different images with lightbox enabled.
Add a query loop of the posts, including the Post Content and put 1 item per page.
Go to the first page and open the lightbox.
Navigate to the second page and open the lightbox.
Check it opens the appropriate image and the issue shown in the video is fixed.
How?
Using the data-wp-key directive solves this issue.
Right now, it is really hard to replicate these issues with region-based client-side navigation because Post Content is not supported and it is tricky to replicate having different images in the query loop.
However, I added a data-wp-router-region to ensure this is not a problem in the future. This will also need some changes to the router JS logic that @DAreRodz will handle in the original PR.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Warning
This PR is built on top of #70353, which includes the new logic for client-side navigation. The issues it solves are pretty hard to replicate in existing region-based navigation.
For testing purposes, in the mentioned branch, the full client-side navigation can be enabled using a filter like this:
What?
It solves a bunch of issues related to client-side navigation and the image lightbox.
The lightbox closing animation triggers when navigating to a page with the lightbox enabled.
Closing.animation.issue.mp4
Testing instructions
How?
It changes the
hide
class to rely onstate.overlayOpened
instead ofstate.showClosingAnimation
, and I've removed that property. According to this comment, it was added because the animation was triggered the first time the page was loaded, but I have been testing it and I wasn't able to reproduce it in any browser.CSN breaks after going from an empty query loop to a page with lightbox enabled.
Broken.CSN.mp4
Testing instructions
https://localhost:8888/?query-1-page=999
.How?
Using the
data-wp-key
directive solves this issue.Lightbox triggers incorrect image when opening and closing multiple images in a query loop.
Query.gutenberg.-.13.June.2025.mp4
Testing instructions
How?
Using the
data-wp-key
directive solves this issue.Right now, it is really hard to replicate these issues with region-based client-side navigation because Post Content is not supported and it is tricky to replicate having different images in the query loop.
However, I added a
data-wp-router-region
to ensure this is not a problem in the future. This will also need some changes to the router JS logic that @DAreRodz will handle in the original PR.