Automattic / Automattic/jetpack

Tiled Gallery block: Difficult to select images when within a column block with multiple columns

Open
#41,396 1 comment 0 reactions 0 assignees View on GitHub
[Block] Tiled Gallery [Experiment] AI labels added [Feature Group] Editor Experience [Feature] Images [Feature] Tiled Gallery [Plugin] Jetpack [Pri] Low [Status] Auto-allocated Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

If a Tiled Gallery block is added within a column block with a few columns, the images can be hard to select at times. When they can't be selected it therefore isn't possible to see the arrows to move the images, or to remove the image (though even when they do display they can be cut-off, and not fully visible).

Where you click makes a difference - clicking toward the border of an image is more likely to select the image than clicking the centre from what I've noticed.

While moving the images could be solved by implementing drag and drop (see internal issue https://github.com/Automattic/vulcan/issues/651 ) (and it is currently possible to remove an image by clicking delete once selected), the issue of selecting the image still remains.

Reported in internal testing: p8oabR-1D0-p2#comment-8373

### Steps to reproduce

1. On a self-hosted Jetpack site both with or without the Gutenberg plugin installed and active, or on a WoA or Simple site, create a new post.
2. Add a column block, and set it to 3+columns.
3. Inside one column, add a Tiled Gallery block, and add multiple images.
4. Attempt to select images within the block, some will select and others won't (they may appear partially selected - with a fainter border color).
5. If selection is working, you may need more columns so the images are smaller.

Image

See video recording within the comment at p8oabR-1D0-p2#comment-8369

### Site owner impact

Fewer than 20% of the total website/platform users

### Severity

Minor

### What other impact(s) does this issue have?

_No response_

### If a workaround is available, please outline it here.

You can still generally select the relevant images, it may take a few attempts, or clicking the border of the image. They can also still be rearranged and removed by clicking on 'Edit'.
Alternatively, less columns so the images are larger will also resolve the issue.

### Platform (Simple and/or Atomic)

Self-hosted, Atomic, Simple

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named. Reproduce the issue by placing a Tiled Gallery with multiple images inside a three-column block, then inspect the gallery block's selection behavior and existing editor tests. Done means every image can be selected reliably and its controls are fully visible in narrow columns.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.