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 :)

[artemiomorales]

@annezazu Thanks for reaching out! As far as I can see, the lightbox will be included in Gutenberg 16.7 and WP 6.4, so yes having more eyes on it would be great 😄 Here follows a more detailed update:

Biweekly Update

We've removed the old UI for the lightbox and added its new UI as an exclusive setting for the image block. This means that the lightbox, barring any unforeseen circumstances, will be shipped in WordPress 6.4.

While implementing the UI changes, we noticed some inconsistency in how theme.json settings are accessed and parsed in the codebase, so while the new UI will work without issue in a majority of cases, certain theme.json values will cause unexpected behavior under certain circumstances.

As beta testing commences, we'll continue to refine this and fix any other bugs that arise throughout the beta period over the next few weeks, as well as add tests. These new action items have been added to the v0.1 scope.

Merged

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

Closed

• Image block: Revise Lightbox UI to remove reference to Behaviors #53403

[bph]

@artemiomorales It all works fine. h owever, maybe you can elaborate on this with one or two examples (or point to the educating issue)

certain theme.json values will cause unexpected behavior under certain circumstances.

[artemiomorales]

@bph Thank you for taking a look at this! We've captured the theme.json inconsistencies in the following issues. The v0.1 task list has also been updated with these links.

• Image lightbox: configure lightbox settings in theme.json at the top-level #54858
• Image: Shorthand syntax should enable functionality and UI for the lightbox #54635
• Image: False values are not persisted in memory when used for lightbox configuration in theme.json #54638

[annezazu]

Marking this as blessed for major release per this slack discussion. @artemiomorales can you confirm that would be desirable? It seems like we'll likely get everything in in time for beta :) We can easily remove the status and we do try to keep those marked as blessed small in number.

[artemiomorales]

@annezazu Yes that sounds good! We'll likely merge a couple of more enhancements before the beta period is over, so this sounds right.

[artemiomorales]

Biweekly Update

These past two weeks, we've been reporting and fixing bugs to prepare for WordPress 6.4 — a huge thanks to everyone who has been helping with testing 🙏

Worth noting: We've clarified the scope regarding which theme.json issues we'll address and fixed a layout shift occurring with the zoom.

Specifically with the theme.json, for now the plan is to add top-level setting support for the lightbox but not add support for the shorthand syntax.

Given the newly reported bugs, I've updated the target date for v0.1 to be October 17th, the projected date for the WordPress 6.4 Release Candidate 1. I've added the new bugs to the scope.

Merged

• 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

Bugs added to the v0.1 scope

• Lightbox expand doesn't work with Gallery image #54921
• New Lightbox (expand on click) does not work in WordPress 6.4 Beta 1 #54869
• Lightbox: connect with overall linking behavior to ensure proper UX #54916
• New Lightbox with display bug in Classic Themes #54682

The plan is to continue addressing bugs, do more testing, and add automated tests.

[artemiomorales]

Biweekly Update

These past two weeks we've been wrapping up outstanding bugs to get the lightbox included in 6.4. Having more eyes on this continues to be great as folks chip in with identifying or fixing issues, from accessibility to backwards compatibility and more.

Closed / Merged

• Image: Lightbox buggy retrieval of alt attribute and insufficient accessibility #54971
  • Fix Image block lightbox missing alt attribute and improve accessibility #55010
• Image block lightbox: The enlarged image isn't responsive #55124
  • Reset "Expand on click" image styles when window is resized #55077
• Image block lightbox: setting lightbox on an image makes all following images open in the lightbox #55119
  • Remove the lightbox filter and view file when the lightbox setting is disabled. #55120
• Lightbox: Theme styles are applied to the button element #54940 (comment)

Remaining bugs for v0.1 scope

• Image block lightbox: do not overlay the image with a transparent button #55097 (needed for 6.4)
  • New Lightbox with display bug in Classic Themes #54682 (may resolve above)
• Image lightbox: configure lightbox settings in theme.json at the top-level #54858
• Image block: clean-up and improve usage of WP_HTML_Tag_Processor #55123 (comment)
• Image block lightbox: do not hide the figcaption with display none #55088
• Add tests

[JosKlever]

It looks like I've found a bug, but I'm not sure yet how it works. I've read a post using the new lightbox, and instead of showing the lightbox icon in the top right corner of an images on hover, it showed on 100% width/height even without the hover covering the all the images in the post with a black overlay.

This happened on both my (Windows) desktop as laptop with Chrome, Chrome incognito and Edge, but not with Firefox. All latest versions. There were no errors in the browser console and no extensions that could have blocked something,

In the end I've tested it without some local security and disabled Malwarbytes Anti-Malware. After that if worked as it should. So Malwarebytes seems to block a script or something that prevents the lightbox to work correctly.

More research is probably necessary, but I'll have to do that later. If this is not the right place to report it, please let me know where it belongs.

[artemiomorales]

It looks like I've found a bug, but I'm not sure yet how it works. I've read a post using the new lightbox, and instead of showing the lightbox icon in the top right corner of an images on hover, it showed on 100% width/height even without the hover covering the all the images in the post with a black overlay.

@JosKlever Thanks for your comment, and pardon the delay!

Would you be able to file a bug report? That will give the issue more visibility and allow folks to try to reproduce it, discuss, and suggest solutions 😄

[JosKlever]

@artemiomorales The issue appears to be solved now. I guess there was an update in the last 10 days that fixed it.

[artemiomorales]

Biweekly Update

I'm a bit late on this update, but it looks like the lightbox has made it to WordPress 6.4.

Once 6.4 is released, we hope to receive more feedback on the implementation and continue iterating our approach.

This seems to be a good milestone, so I think we can declare the v0.1 of the lightbox done; I've moved remaining tasks to v0.2 and will continue developing the scope of work for 6.5 there.

For the moment, these are the next issues we'll be tackling:

• Image block: Lightbox setting name and labels are inconsistent #55617
• Lightbox: connect with overall linking behavior to ensure proper UX #54916
• Image block lightbox: do not hide the figcaption with display none #55088
• Image lightbox: configure lightbox settings in theme.json at the top-level #54858
• Image block: clean-up and improve usage of WP_HTML_Tag_Processor #55123
• Multiple image blocks set to open in light box should connect to create cohesive carousel. #56310

Thanks everyone for your help in getting the lightbox to this stage of development! 🙌 🥳

[artemiomorales]

Update

Hey everyone, here I'm shooting an update to let everyone know that I'll be away until the week of December 4th and that biweekly updates may pause until I'm back.

Please reach out to @michalczaplinski on any issues or for any questions and discussions pertaining to the lightbox in the meantime. Thank you!

[NicoHood]

Will the lightbox be also added to the text+media block? I did not find it in this roadmap.

[michalczaplinski]

There are no short-term plans to do that as far as I'm aware, but I'd very happily review any PRs that add it! It might be a bit tricky because the Media&Text block can have different alignment configurations.

[artemiomorales]

Update

Hello all! Since the last update, my focus has mostly shifted to another project for 6.5, and someone else may be overseeing the lightbox come 6.6.

For the moment, I'm aiming to deliver just an improved UX for the lightbox in 6.5 via the following PR, as well as deal with any critical bugs if they arise:

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

Please feel free to continue reporting bugs and suggesting improvements; if you mention this issue, I can add those items to the backlog here for reference 🙏