Wp-calypso: CoBlocks: Using Masonry Gallery with lightbox on causes navigation issue in gallery.

[fernmed]

Describe the bug
When using the Masonry Gallery with lightbox enabled, it seems to cause an issue where the Left / Right buttons to move to the next image don't change the actual image in the gallery, but instead changes the background image.

To Reproduce
Steps to reproduce the behavior:

Add a Masonry Gallery to a page or post.
Add a few images to the gallery.
Enable Lightbox
Update page/post.
Go to page/post and click on any image.
Try using the Previous/Next arrows to view the issue.

Isolating the problem:
Seems to happen across different themes including WordPress default theme and portfolio specific themes. First reported on a user site and recreated on my own test site. This happened on a Simple Site as well, did not test on AT site since original user site was also a Simple Site.

Brief video with issue at hand: https://cld.wthms.co/N0AHZb

[gwensmithx]

Another instance here: 2428842-ZD
Theme: Portrait
Gallery: Masonry with Lightbox enabled

I was able to replicate this with my test site as well.

[selectedselections]

This was reported here: 16055729-hc
Theme:
Balasana
Gallery: Masonry with lightbox enabled

[kwight]

I can't replicate this with CoBlocks 1.16.1 on a sandalone install, so it looks like a WP.com integration issue.

[GeoJunkie]

Original user (Reported in 844177-hc, follow-up 2414899-zen) responded again in 2476350-zen looking for a status update.

They mentioned:

At the moment I have found that if I delete the existing gallery/masonry block - then apply a new masonry block with the same images, the Lightbox seems to work on the website. However, it still doesn't work on the mobile. You can open the first image but when you scroll through - only the background changes.

I was unable to locate the gallery with that happening so have asked for clarification.

While looking, I also noticed that the first image had a custom URL set which was interfering with the browsers displaying the lightbox (redirecting to the image instead). This may be related as that may have been set by something and then gets in the way (user has no access to that setting).

[katiebethbrown]

I see the same behavior on my personal site with the masonry gallery block:

https://wp.me/p5WA6G-yz

It's a simple site. When I click through the images in the lightbox, I can see that the lightbox background image URL changes, and so does the img src, but the srcset URL never updates.

I see the same behavior in Firefox, Chrome, and Safari on desktop, as well as Safari on mobile.

[SiobhyB]

Another report in 2481998-zen. I can replicate via the gallery linked in the notes of that ticket (omitting the full URL here for the user's privacy). If I click an image and then try to click the next arrow, the lightbox effect closes and I can't reopen it.

This user's not using CoBlocks, as they don't have Gutenberg enabled. They're using a regular gallery (with a grid style) and the lightbox effect.

I'm adding to the reports here as the effect they're seeing is exactly the same as the video and other reports.

Theme: Curator

[eoinsav]

I got another report in 16742119-hc/2501554-zen when using the Masonry block. I was also able to replicate on my test site.

It also doesn't work for me on our theme demos. Example on the front page of Mayland: https://maylanddemo.wordpress.com/

[tanjoymor]

User came in asking if there was a Masonry alternative because of this bug.

16747208-hc

[kwight]

Fix by @mmtr upcoming in D36079.

[kwight]

Fixed 👍