Automattic / Automattic/jetpack
Tiled Gallery block: Difficult to select images when within a column block with multiple columns
- 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.
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
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