Non-dismissible lightbox carousel opens when clicking in-between linked Gallery images

the-misha commented 1 year ago

Impacted plugin

Jetpack

Quick summary

When a Gallery block ~is located within a container block (Group, Columns, etc.)~ contains linked images (such as Link to: Media File), clicking between images in the gallery will bring up an empty, non-dismissible, non-navigable lightbox modal which can only be exited by reloading the page.

Steps to reproduce

cuemarie updated the summary and steps to reproduce on 2023-10-03

On a simple site, Add a Gallery block within the Group block.
Add multiple images to the Gallery block. (Test site had 12, but the number doesn't appear to matter as long as there's more than one.)
Set the Gallery Block to "Link to: Media File"
Save page, then view page.
Click between two of the images.

A clear and concise description of what you expected to happen.

The carousel modal should open on the first image in the Gallery, with working navigation arrows and close icon in the upper right corner.

What actually happened

The carousel modal opens with no image displayed. Navigation arrows and close icon have no effect, and the modal can only be exited by reloading the page.

Impact

All

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

Simple

Logs or notes

Test was done on homepage of FSE site.

cuemarie commented 1 year ago

This may be a duplicate of https://github.com/Automattic/jetpack/issues/32668 👀

cuemarie commented 1 year ago

📌 REPRODUCTION RESULTS

Tested on Simple – Could not replicate
Tested on Atomic – Could not replicate

📌 FINDINGS/SCREENSHOTS/VIDEO Following the steps above, I'm not able to reproduce a carousel with no image displayed or broken navigation.

The only issue I can replicate is when I enable the image block's lightbox - that seems to reflect issue #32668 :

https://github.com/Automattic/jetpack/assets/27249804/a4393cac-3604-4767-bbce-75d78cc755e8

📌 ACTIONS

Requested author feedback

📌 Message to Author @the-misha can you take a look at my recording, and see if I'm doing something different than your steps to repro? If you can still replicate this on a test site, could you share a recording of the behavior, and browser details? Thank you!

the-misha commented 1 year ago

Hi, @cuemarie! Here's a video:

https://github.com/Automattic/jetpack/assets/426388/ad76f161-5a4b-4fc9-ab64-8972c1933662

This is on a test site with the same Kigen theme as the user, viewed in Chrome 117. Clicking ON the images will bring up the image in a modal, though it's not showing the navigation or the close icon, so I had to back out of the modal to return to the homepage.

Clicking between the images, though, brings up the empty modal which can't be escaped other than by reloading the site.

It's also worth noting this is on the homepage, created the Front Page FSE template. The Gallery works exactly as expected on an actual page as seen here: Pd1NTs-32-p2

cuemarie commented 1 year ago

Thanks so much @the-misha ! I'll retest this today 👍

cuemarie commented 1 year ago

📌 REPRODUCTION RESULTS

Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO I wasn't able to figure out what causes this, but I did make some headway! Some notes:

Copying the gallery from Kigen theme out of that site and onto a page of a Premium test site and not in a group, the problem still occurs. This means the Group block isn't the issue, nor is just the Kigen theme.
The Gallery is set to link to "Media File" for it's images, and so the Gutenberg Lightbox is disabled.
However, the carousel that appears when you click in-between the images appears to be the Jetpack Carousel, as disabling that from Settings > Media resolves the issue.

Recording

https://github.com/Automattic/jetpack/assets/27249804/5263a029-2983-4cbd-bde5-86939628ccb6

TLDR, I believe this is a unique symptom of the larger conflict between the behaviors of the Gutenberg Lightbox and the Jetpack Carousel. When a Gallery Block is set link the images, the Gutenberg Lightbox is disabled, but the Jetpack Carousel remains, causing unexpected behavior in the Gallery block.

https://github.com/Automattic/jetpack/issues/32668

📌 ACTIONS

Triaged
Leaving open for now

📌 Message to Devs @jeherve I'm not sure if this is helpful to keep open on it's own, outside of https://github.com/Automattic/jetpack/issues/32668 - the issue reported here is specific to when galleries are set to link to "Media File" or "Attachment Pages", and how the JP carousel is behaving in that setup.

Also, for a live of the issue example, you can check out the homepage of https://kigendemo.wordpress.com/

jeherve commented 1 year ago

Could you check for Javascript errors on the page, as explained here: https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/

Let me know what you find!

cuemarie commented 1 year ago

Using the demo site: https://kigendemo.wordpress.com/

I see this in my browser console (Firefox) when I click in-between the images and the JP Carousel opens without content:

Uncaught TypeError: t is undefined
    closest https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    H https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    C https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    onload https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    T https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    o https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    o https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    EventListener.handleEvent* https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    <anonymous> https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
_static:62:1406

When I try to close out of the Carousel, the following TypeError occurs:

Uncaught TypeError: e is undefined
    b https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    y https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    y https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    C https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    onload https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    T https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    o https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    o https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    EventListener.handleEvent* https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
    <anonymous> https://s0.wp.com/_static/??-eJyNjt0OwiAMhV/IrtHo4o3xUQxjjQMpLBTm64uL+8lijL3qoefjHHz2YLx2uSVBK9iFgaLxiXwCKxUbX1nZ4cal2nKARsW1QYcRw97lu/GCqSMmYPL5jSxq6+cME2Ip9Uo/Pho5BI+3EoxNNq5FrWLIQm72TQ/faqy+neuWuw4MS/1/GFaSKJYNUiyh8gOa+sCYs5GFu/JlX59Px/pQxr4AzjmNAA==:62
_static:62:14239

Recording:

https://github.com/Automattic/jetpack/assets/27249804/324f5969-ee0e-4f18-8cd1-15bf575e4a67

jeherve commented 1 year ago

Thank you all!

This is the key info I had missed:

It's also worth noting this is on the homepage, created the Front Page FSE template.

I'll close this issue in favor of #29101, where we currently track this problem.

Automattic / jetpack