add_filter( 'wp_interactivity_experimental_full_page_client_navigation', 'activate_full_csn', 10, 2 );

function activate_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.

Testing instructions

1. Go to a page with an image with lightbox.
2. Open and close the lightbox.
3. Go to a page without lightbox.
4. Go back to the page with lightbox.
5. 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.

Testing instructions

1. Add a query loop without "Force page reload" enabled in the homepage.
2. Navigate to a page that doesn't exist like http://localhost:8888/?query-1-page=999.
3. Navigate to a page with a lightbox.
4. 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.

Testing instructions

1. Create two posts with two different images with lightbox enabled.
2. Add a query loop of the posts, including the Post Content and put 1 item per page.
3. Go to the first page and open the lightbox.
4. Navigate to the second page and open the lightbox.
5. 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.