Image: Captions overlaying images in galleries are still visible when lightbox is opened

[artemiomorales]

Description

Recently, the lightbox behavior was changed to remove duplicate images in the content (https://github.com/WordPress/gutenberg/pull/63381) However, this introduces a bug in which the captions in galleries are still briefly visible when the lightbox is opened, first reported here.

We should determine the appropriate behavior for the caption in these circumstances and fix the lightbox behavior accordingly.

Step-by-step reproduction instructions

1. Add a gallery block and set captions for few images.
2. Enable Expand on Click for those images
3. Set the scroll position of the page to a place where image bottom is near window bottom.
4. Now click on the image (with caption)
5. Observe that there is a shadow in place of original image.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[artemiomorales]

Here's the beginning of a potential fix, with some issues and uncertainty around implementing this in the gallery or the image block (link).

The primary questions are:

1. What should the behavior for the caption be when the lightbox opens and when it closes?
2. Where should the logic live? The gallery block initially makes most sense, but depending on the behavior, the caption would need to share the same animation styling as in the image. So maybe having the logic in the image styles or another shared place would be better.

Pinging @madhusudhand for awareness, as I know you're working on adding the lightbox to the gallery.

[artemiomorales]

For design, the primary question is, what should the treatment of the caption be?

When the lightbox opens, we could immediately hide the caption. And when the lightbox closes, we could immediately show the caption on the last frame of the zoom animation.

Alternatively, we could sequence animations such that when the lightbox opens, the caption first fades out, only then followed by the lightbox zoom. When the lightbox closes, we could likewise have the caption fade back in after the zoom is complete.

Sequencing the animations would likely make the lightbox animation feel less snappy and responsive to input, but would likely look more elegant. What do you think?