Automattic / Automattic/jetpack

Tiled gallery block captions

Open
#11,794 98 comments 5 reactions 2 assignees Claimed by @glendaviesnz View on GitHub
[Block] Tiled Gallery [Feature] Tiled Gallery [Focus] Blocks [Interaction #] > 20 [Pri] High [Size] M [Status] Design In Progress [Status] Needs Design Customer Report [LEGACY] Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Tiled gallery block currently doesn't have captions directly in the block interface.

It could have captions very similar to core gallery block. They have several issues and bugs we should solve before shipping captions to our customers.

This is a list of all the issues, bugs and problems around captions so that it's easier to re-design how captions should work.

Screenshots are from the time when captions were actually implemented in Tiled gallery; they were just taken out just before releasing the block because of several issues.

- Links in captions look awful (https://github.com/Automattic/wp-calypso/issues/29729)

- Longer captions cover "remove image" button in the editor (#29706)

- Captions don't look great on small tiles. We need to rethink how we adjust caption text size when tiles scale down for small screens. Captions in a tile might look great on desktop but then the gallery looks awful on mobile.

- Writing captions for circle layout doesn't work.
We had to disable captions for circle layout because, well:

- Captions are automatically pulled in from image meta. It's easy enough to just not write captions, but cleaning out automatically added captions from a lot of images, especially on smaller screens is really annoying or impossible:

- Users might expect captions to appear only on mouse hover, just like with old tiled gallery. That isn't too amazing with touchscreens, though.

- Detecting if caption is empty using `RichText.isEmpty()` is buggy. Calypso-Gutenberg seems to pass an old version of RichText format (array) and our block expects new format (string), thus making it seem like caption isn't empty, causing caption UI to behave weirdly and causing block invalidations on save. We need to `RichText.toHTMLString( caption )`

- Adding files from Media picker wipes out previously added captions (https://github.com/Automattic/wp-calypso/issues/29557, p7jreA-21M-p2)

---

cc @MichaelArestad @scruffian @mapk

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.