Tracking Issue: Interactivity API Behaviors MVP

[artemiomorales]

Update 08 August 2023 — We will no longer be surfacing "behaviors" as part of the lightbox UX, and even though we will continue to use the Interactivity API under the hood for the lightbox, we will no longer be using it as a testing ground for behaviors as a concept. With that in mind, I'll close this issue and now capture all lightbox UI issues in the dedicated lightbox tracking issue.

Description

This issue is meant to capture the requirements to deliver an MVP of behaviors via the Interactivity API, which includes tasks from the image lightbox and the outline for block behaviors.

By centralizing this information, the idea is to get a better roadmap of next steps for the both issues and their intersections relative to upcoming Gutenberg releases. We could also use this issue to coordinate further after the initial goal is met.

Target Gutenberg Release: 16.6

Goals
- [x] Removal of experimental flag on lightbox
- [ ] Lightbox configurable on image blocks globally using UI

Deadline: 25 August 2023
Release Candidate Date: 30 August 2023

Lightbox

• Prevent scripts from loading if behaviors are not used #52140
• Image Block: Rename 'lightbox' feature to something more user friendly #52183
• Image block: Disable behaviors dropdown if image has aspect ratio configured #52197
• Image block: Update lightbox animation tests #52290
• Image block: Add aspect ratio support to lightbox #52765
• Image: Fix layout shift when lightbox is opened and closed #53026

Lightbox UI

• Make Behaviors UI work in the site editor. Behaviors: Extend Global Styles API to read/write behaviors config. #52370
• Add the behaviors to the schemas for block.json & theme.json. Behaviors - Lightbox: Update theme.json schema #51156
• Add e2e tests for Behaviors in the site editor #52809
• Image block: Revise Lightbox UI to remove reference to Behaviors #53403
• Global Styles: Add link to compare revisions #52829

Interactivity API

• Remove Interactivity API experiments flag Remove experimental setting for interactivity API and behaviors #52833
• Allow passing optional afterLoad callbacks to store calls #53363

How to enable

Editing theme.json file

You can add the behaviors object at the same level as settings and styles. Enabled can be true or false. Animation can be zoom or fade.

Via Global Styles, block settings.

global_styles_by_block.mov

Via Block Settings

global_styles_by_block_settings.mov

Via individual block

by_individual_block.mov

What to test

• Lightbox is applied, defined by theme.json
• Lightbox is applied, defined by global styles, taking preference over theme.json
• Lightbox is applied, defined by block inside the post editor, taking preference over theme.json and global styles config.
• Lightbox works in all browsers.
• Lightbox works in Android devices.
• Lightbox works in IOS devices.
• Check that you can choose between default (inherit from previous), zoom or fade animations.
• Global styles revisions work with Lightbox changes, setting changes and styles changes, together and separately.
• If you remove behaviors from block supports in block.json, behaviors are not displayed.
• If you set as false behaviors in theme.json settings, behaviors are not displayed.
  

[artemiomorales]

What's New This Week

Progress is going well on advancing this MVP, and we're edging closer to removing the experimental flag. On a general level, the recently added aspect ratio feature has added to the scope of the lightbox, and I'm currently working through all of the edge cases.

We merged and/or closed the following:

• Image Block: Rename 'lightbox' feature to something more user friendly #52183
• Image block: Disable behaviors dropdown if image has aspect ratio configured #52197
• Prevent scripts from loading if behaviors are not used #52140

We also added the following issues to the scope and pushed the target Gutenberg release from 16.3 to 16.4, which means a new deadline of July 28th.

• Image block: Add aspect ratio support to lightbox #52765
• Global Styles: Add link to compare revisions #52829
• Add e2e tests for Behaviors in the site editor #52809

The aspect ratio support is coming along, though it's taking longer than I'd like. There are some cases, namely in using the thumbnail resolution in combination with custom aspect ratios, that we haven't accounted for yet. There's also a contain attribute in the image block settings that we haven't supported (additional discussion).

It's been a bit tricky accounting for performance on all browsers and dealing with all of the combinations of device size and image resolutions/aspect ratios, though I should be able to wrap things up by the deadline.

[cbravobernal]

I updated the tracking issue with test instructions.

[artemiomorales]

What's New This Week

Adding aspect ratio support has been proven to be challenging because of all of the edge cases, though we've now addressed all of the issues with the contain attribute and all of the other single image block features. To accomplish this, we're currently working on adding support for executing callbacks after hydration.

We've also determined that the Behaviors UI will NOT ship for the time being, as it would be better for the end user to have just the relevant UI for the image, so we will need to devise a new UI implementation for the lightbox. I've updated the issue description to reflect this.

We've also discovered a couple of bugs that should be addressed before declaring that a v0.1 is complete.

We merged the following:

• Add e2e tests for Behaviors in the site editor #52809

The following have been added to the scope:

• Closing lightbox on scroll does not always perform as expected on iOS
• Image: Fix layout shift when lightbox is opened and closed #53026
• Determine new UX for lightbox UI now that behaviors will not ship in 16.4
• Allow passing optional afterLoad callbacks to store calls #53363

I've pushed the anticipated release to 16.6, which means a new target deadline of August 25th.

While this tracking issue is focused on delivering a configurable first version of the lightbox implementing the Interactivity API as an MVP, we've also started started looking beyond to determine the lightbox feature set for WordPress 6.4, target deadline of 22 September 2023 for inclusion in the first 6.4 beta.

You can find more info on future plans for the lightbox in the dedicated lightbox tracking issue.

[artemiomorales]

Update 08 August 2023

We will no longer be surfacing "behaviors" as part of the lightbox UX, and even though we will continue to use the Interactivity API under the hood for the lightbox, we will no longer be using it as a testing ground for behaviors as a concept. With that in mind, I'll close this issue and now capture all lightbox UI issues in the dedicated #51132.