Lightbox: connect with overall linking behavior to ensure proper UX

[annezazu]

Right now, if you enable lightbox for an image and then add a link, the lightbox behavior is disabled, breaking user expectations. We need to clarify this experience as right now these behaviors are interconnected but that isn't clear.

"Expand on click" should be designed and optimized for as something that you enable once, globally, and then optionally override on a per-image or gallery basis. In following this approach, it would make sense to move the toggle from the inspector and into the URL toolbar. In doing so, it becomes more intuitively clear that "Expand on click" is mutually exclusive from linking to an attachment page, or a media file.

This design also leverages concepts outlined for the Link Control in #50891.

Separately, for when applying lightbox through a singular action across images in a gallery, the same dropdown that is currently used for linking to attachment or media files would be used:

See also: #56587 for conversations on the expand behavior as applied in galleries.

---

Issue updated Dec 22.

Previous version of the issue

Right now, if you enable lightbox for an image and then add a link, the lightbox behavior is disabled, breaking user expectations. We need to clarify this experience as right now these behaviors are interconnected but that isn't clear. Here's an example where you can enable lightbox and add a link but that then silently breaks lightbox behavior:

lightbox.mov

@jasmussen can you look into mapping this out? It seems like if you have lightbox enabled, we should disable the ability to add a link or consider a way to group these settings together since they interrelate.

Feel free to edit the title of this issue as it's a bit rough.

[getdave]

Nice mockups 👍

Just to add that Expand on click really isn't a search suggestion here where as both of Media file and Attachment page are.

IMHO expand on click could be a link setting rather than something you select when choose from a list of link search suggestions.

[richtabor]

Since a gallery cannot be singularly linked, that dropdown control is a blanket control that applies to all images inside. So ideally, "Expand on click" should be an option in that dropdown, shown by default if applied:

Alternatively, we can use the same toolbar control as proposed for the image block on the gallery, omitting the inspector "Link to" control on the gallery block.

[artemiomorales]

Let's proceed with option 2 for now and plan to iterate for 6.5. I do want to make clear though that the link UI is the eventual best location here, whether it's a cross icon to detach an image, or a toggle to disable the lightbox.

If you need any additional design help/guidance for option 2, please just say the word so we can move quickly for 6.4 ❤️

Perfect, thanks! I should have this UI fixed by the end of the beta period.

[richtabor]

That one looks great to me, feel free to update the issue! Nice one Rich.

I created a follow-up to this issue that details the move #55020.

[getdave]

@artemiomorales Please let me know if you go ahead with attempting to implement what Rich has in #55020.

I've worked a lot with LinkControl and related components and we can work together to find the best implementation.

One thing to consider is that we should try and avoid augmenting the API of LinkControl where possible 🙏

[artemiomorales]

I opened a PR to do the simple fix: #55141

[annezazu]

Just bringing in feedback from this YouTube video around how cumbersome it is to set the expand on click option for each individual image in a Gallery. This touches on comments further up where we need to think about these settings within a Gallery block too. Happy to open a separate issue or just track this in this issue as part of this broader work.

[jasmussen]

The solution to that, IMO, is to lean into lightbox being something you set on by default, and then toggle off on a per-image basis, as somewhat touched upon here and part of the motivation for the URL dialog design.

[jasmussen]

For folks subscribed, I've updated this issue with a summary of the conversation, and the agreed upon mockups put into the body of the original issue, so it's hopefully easier to understand the next step. I've also gone ahead and hidden the conversation that was resolved (you can still expand the comments if you like) for clarity.

[annezazu]

Closing this since this has landed #57608