Image block: lightbox trigger misplaced depending on contextual layout

afercia commented 4 days ago

Description

When an image opens the lightbox, a 'trigger' icon button is displayed on hover or focus on the front end. It appears this button absolute positioning top and right value are calculated based on a series of factors but, in some cases, the actual positioning might end to be less than ideal.

In the case of a normal Image block, the positioning works pretty well. However, when the Image block has a non-default layout due to being inside other containers, the positioning is really inconsistent and unpredictable. I would say it's not a great experience for users.

For example, in the screenshot below I'm using a Group block with its 'Grid' variation and I placed six images inside the grid. For some images, the placement of the button is less than ideal:

I don't have enough context to understand why the button position needs to be calculated. Given it's absolutely positioned based on the container figure element, wouldn't be better to drastically simplify and provide fixed top and right values?

Worth noting this misplacement may happen with any particular layoug, not only with the Group grid.

Noting that the misplacement of this button makes it even more difficult to be clearly visible. See related https://github.com/WordPress/gutenberg/issues/55513

Step-by-step reproduction instructions

Add a Group block set to a Grid variant.
Add six images with different size ratio and with or without captions inside the grid.
Save and view the front end.
Hover or focus the images.
Observe the placement of the trigger button is inconsistend and unpredictable.

Screenshots, screen recording, code snippet

No response

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

Please confirm which theme type you used for testing.

[ ] Block
[ ] Classic
[ ] Hybrid (e.g. classic with theme.json)
[ ] Not sure

michalczaplinski commented 3 days ago

I'm gonna remove the [Feature] Interactivity API label. While the lightbox uses the Interactivity API, this seems to be a CSS / layout problem that is unrelated to the API itself.

afercia commented 3 days ago

@michalczaplinski to my understanding the calculation of the button position is in the view.js. I thought that was part of the Interactivity API implementation. What would be the most appropriate label to indicate this is anyways related to the Interactivity?

michalczaplinski commented 2 days ago

Oh, I didn't realize we calculated the button's position in JS. In that case, it IS related, sorry!

We use the label for issues in the API itself, and its usage in Core blocks, so it makes sense to re-add it 🙂 .

afercia commented 2 days ago

Thanks @michalczaplinski 👍🏻

luisherranz commented 2 days ago

@artemiomorales can you take a look?

Takshil-Kunadia commented 2 days ago

The logic for calculating the top-offset for the button is not robust, neither is necessary. Since, its absolutely positioned like @afercia mentioned. It can have a static top offset of 16px and that takes care of that. Though calculation is needed for the position from the right, as small images combined with large captions, skew the position of the button to be outside the image.

WordPress / gutenberg