Tracking issue: Image Lightbox

[artemiomorales]

This tracking issue is for identifying bugs and features related to the experimental lightbox, introduced in #50373.

MVP

• Experiment: Improvements for the Image block lightbox #50959
• Experiment: Duotone filter in Image block lightbox not working #50973
• Enabling lightbox on images in a Gallery block breaks the gallery layout #51068
• Image: Vertical image from URL cut when displayed in the lightbox #51125
• Image: Close button in the lightbox hard to see with dark images #51126
• Image: The lightbox behavior not applied when the image is linked #51127
• Image: Long captions break lightbox #51170
• Image: Lightbox does not display largest available size of image #51171
• Image: Lightbox doesn't work on image inserted from URL #51276
• Add missing tests for image block #51305 (review)
  • Adding a link to image will disable lightbox
  • Ensure lightbox still works when adding an image via external URL

v0.1

Goal: Provide a robust, stable implementation supporting all single image features with UI exposed publicly to users for WordPress 6.4
Target Deadline: 17 October 2023

• Image block: Delayed response when opening image in lightbox for the first time #51555
• Experiment: Add zoom and animation toggle for image lightbox #51055
• Block Image: Lightbox - Hide animation selector if behavior is Default or None #51748
• Image block: Remove Lightbox markup if is set as disabled. #51692
• Image block: Lightbox zoom animation cuts off image in Android landscape mode #51556
• Image block: Use built-in directive for mouseover event in lightbox #52067
• Image block: Fix cursor style when lightbox is opened #52187
• Prevent scripts from loading if behaviors are not used #52140
• Image Block: Rename 'lightbox' feature to something more user friendly #52183
• Image Block: Devise alternative to getimagesize() to prevent unnecessary network requests when using lightbox #52172
• Image block: Update lightbox animation tests #52290
• Remove experimental setting for interactivity API and behaviors #52833
• Image block: Add aspect ratio support to lightbox #52765
• • Use transform or the new translate prop for more performant animations
• Image block: Revise Lightbox UI to remove reference to Behaviors #53403
• • Image block: Revise lightbox UI to remove 'behaviors' #53851
• • Image block: UI updates for the image lightbox #54071
• Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists #54878
• Image: Ensure false values are preserved in memory when defined in theme.json #54639
• Image: Fix duotone not being applied to lightbox image #54670
• Image: Fix layout shift when lightbox is opened and closed #53026
• Image block uses esc_attr() wrongly, passing an array #54930
• Lightbox expand doesn't work with Gallery image #54921
• New Lightbox (expand on click) does not work in WordPress 6.4 Beta 1 #54869
• Image: Fix inclusion of alttext in lightbox button aria-label #55000
• Image: Lightbox buggy retrieval of alt attribute and insufficient accessibility #54971
• Reset "Expand on click" image styles when window is resized #55077
• Image block: Fix flaky tests #52442
• Image block lightbox: setting lightbox on an image makes all following images open in the lightbox #55119 (comment)
• Image: Disable lightbox editor UI for linked images #55141
• Lightbox: Theme styles are applied to the button element #54940 (comment)
• Image block lightbox: do not overlay the image with a transparent button #55097
• Undefined array key warning (image block) #55214 (comment)
• New Lightbox with display bug in Classic Themes #54682
• Image: fix focus management and accessibility of the Lightbox #55414
• Image: Update lightbox full screen icon #55462
• Update label for lightbox editor UI #55724

WordPress 6.5 Maintenance

• Image block: Move UI for lightbox from sidebar to the content toolbar alongside link settings #57608

Potentially for WordPress 6.6

v0.2

• Featured Image block: Lightbox / Expand use case #57849
• Image block: Lightbox setting name and labels are inconsistent #55617
• Image block lightbox: do not hide the figcaption with display none #55088
• Image block: clean-up and improve usage of WP_HTML_Tag_Processor #55123 (comment)
• Image lightbox: configure lightbox settings in theme.json at the top-level #54858
• Discuss changing lightbox button placement for rtl languages
• Add tests for new UI

Backlog

• Explore using lightbox as a replacement for attachment pages
• Perform discovery around adding support for additional blocks
• Image: Shorthand syntax should enable functionality and UI for the lightbox #54635
• • Featured image?
• • Cover?
• Represent a preview of the currently selected lightbox animation effect in the sidebar
• Add support for variable mobile browser window height due to address bar being visible or not
• Clean up directives using Tag Processor bookmarks and HTML Processor
• Add aria-describedby if image has no alt but has caption #43059 (comment)
• Resize() callback for lightbox button does not always fire, causing horizontal overflow
• Add callback on window resize() to recenter lightbox when it is active
• Explore extending lightbox to include support for additional content types
• Explore extending lightbox to include support for galleries
• Add zoom on hover
• Disable lightbox when it is part of a gallery
• Explore using CSS background instead of JavaScript to improve animation performance
  • Potential idea around Accelerated Mobile Pages and how it used width and height properties to perform layout adjustments before loading media
  • Example of loading an image as a CSS background

[gziolo]

Sharing more issues, I reported today:

• Image: Vertical image from URL cut when displayed in the lightbox #51125
• Image: Close button in the lightbox hard to see with dark images #51126
• Image: The lightbox behavior not applied when the image is linked #51127

[ajlende]

Added one more that I found

• Image: Lightbox doesn't work on image inserted from URL #51276

[michalczaplinski]

I've opened the PR to:

• Prevent scripts from loading if behaviors are not used #52140

[cbravobernal]

I've updated the issue description with these new PRs

• Remove experimental setting for interactivity API and behaviors #52833
• Image block: Add aspect ratio support to lightbox #52765
• Global Styles: Add link to compare revisions #52829

[artemiomorales]

I've updated the issue description with these new PRs

• Remove experimental setting for interactivity API and behaviors #52833
• Image block: Add aspect ratio support to lightbox #52765
• Global Styles: Add link to compare revisions #52829

@c4rl0sbr4v0 Great, thanks! Heads up that I moved #52765 to Interactivity Behaviors MVP instead, since this issue is more a catch-all for all tasks related to the lightbox specifically, though am happy to discuss and iterate if there's a better approach.

[artemiomorales]

Changes in Scope for v0.1

We've added a few issues to the v0.1 release, with a new target deadline of 25 August 2023. You can find more details in the dedicated Interactivity API Behaviors MVP tracking issue.

New Scope for v0.2

Planning for WordPress 6.4 has also kicked off, and I've begun outlining plans for a v0.2 inclusion of the lightbox.

I've set the target goal to be the following: Provide a robust, stable implementation supporting all single image features in WordPress 6.4.

We'll need to perform discovery around some proposed additions to the scope, including the tasks to be done for adding lightbox support for the cover block, featured image, and potentially other blocks.

As of now, that deadline has been set for 22 September 2023, the last Gutenberg release before the 6.4 beta.

That timeline and feature set as proposed by design honestly seems a bit tight at the moment. That being said, I'm happy to hear thoughts and further discuss the items for inclusion in 6.4 and this update overall. Thanks!

[artemiomorales]

Biweekly Update

The lightbox was originally envisioned as an MVP of an idea called behaviors, but since it appears increasingly that the lightbox is a particular setting of the image block, we will no longer be shipping behaviors as a concept for WordPress 6.4. This means that the tracking issue for the lightbox as a behaviors MVP has now been closed.

This also means that we need to revise the lightbox UI, which is currently being discussed in Image Block: Revise Lightbox UI to Remove Reference to Behaviors.

We also finally merged aspect ratio support, which means that the lightbox now supports all single image block features.

With that in mind, implementing the new lightbox UI takes precedence over adding support for additional block types and and as a potential replacement for the attachment page, so I've revised the v0.1 and v0.2 goals and scope to reflect that prioritization.

In other words, the v0.1 will be the primary focus until it's shipped, with the v0.2 tasks being an aspirational goal for WordPress 6.4. I'll continue updating the v0.2 list of tasks as we complete the UI and the scope for those tasks becomes better defined.

Merged

• Image block: Add aspect ratio support to lightbox #52765

Closed

• Tracking Issue: Interactivity API Behaviors MVP #52292

[artemiomorales]

Biweekly Update

These past couple of weeks we've spent a lot of time discussing what the UI for the lightbox should look like for the release of the WP 6.4 beta, slated for 26 September 2023, captured in the following issue. All feedback considered, the current design we're working on is captured in this comment.

We have two open PRs to remove the old Behaviors UI and introduce new settings panels for the image in the Global Styles and block settings, which have been added to the task list for v0.1:

• Image block: Revise lightbox UI to remove 'behaviors' #53851
• Image block: UI updates for the image lightbox #54071

We're aiming to have these outstanding tasks completed by 13 September 2023, the last Gutenberg release so we can comfortably have a couple of weeks of testing before the lightbox is, if all goes well, merged to WordPress core.

[annezazu]

@artemiomorales where do we stand on this? I don't see a recent update in the last two weeks and I'd like to feature this in a next call for testing for the FSE Outreach Program :)