Gutenberg: Gallery Block: The "Edit Gallery" modal is unaware of any captions added within Gutenberg.

Created on 30 Jul 2018  路  18Comments  路  Source: WordPress/gutenberg

Describe the bug

If a user has entered image gallery captions from within Gutenberg, the "Edit Gallery" modal does not display them. Furthermore, if a user makes changes from the "Edit Gallery" modal, their custom captions will be deleted without warning.

To Reproduce

Steps to reproduce the behavior:

  1. Add an image gallery.
  2. Add custom captions using Gutenberg.
  3. Select "Edit Gallery" from the block toolbar.
  4. In the modal, select the "Update Gallery" button.

Expected behavior

After step 3, I expected to see my image captions in the "Edit Gallery" modal.

Actual behavior

After step 3, the image captions in the "Edit Gallery" modal were blank.
After clicking "Update Gallery" in step 4, my custom captions were deleted without warning, for all images in the gallery.

Screenshots

gallery-captions

[Block] Gallery [Feature] Blocks [Feature] Media [Type] Bug

Most helpful comment

I'd like us to reconsider this. It's a pretty jarring UX to have the captions disappear without warning. Here's a recording of the current behaviour in 5.0:

gallery

All 18 comments

Noticed this during some user testing. Adding this to the Editor milestone as I think it's an important rough edge to smooth off.

Noting: the change would have to be made in the Image block and will solve Gallery as a result.

Currently, the image block also does not update caption. I think I have some ideas on this. I'm going to assign it to myself and see what I can figure out.

Any thoughts around this, feel free to keep the conversation going. :)

@androb, there is the same issue not just with Gallery/Image caption, but with Image "alt attribute". Here are some thoughts:

Option 1

When image element within the gallery is clicked - add its fields to the sidebar on the right (either instead of "gallery" options, or not top of gallery options).

123

Option 2

Allow editing caption only within media modal. So when an image is clicked (or double-clicked, or edit icon clicked) - gallery edit modal opens with the selected image:

image

Options 3

Keep "Write Caption...". Do not add new fields to sidebar. When "Write Caption..." focus is lost - send a request to server to update media attachment caption field.

Similar technique is used by WordPress already, when editing fields at Media -> Library -> Attachment Details.


Do we really need WYSIWYG (bold/italic/link/strike...) editor for caption text?

It feels most uses of this feature is adding photo credit link, which is much more elegantly done via a separate media field. Which is styled by a theme afterward.

I'm thinking that the Rich Text component may need an event for when focus leaves to make a REST call to update the ID associated with each image. onChange is too frequent to be making that sort of call...

Gallery captions are instance based by design. I think we should close this one. The caption field was meant to serve as a placeholder for text if needed at a per block or post basis.

If this was just meant to be a placeholder, what could we use to actually show a caption on an image? I use tens galleries on my site with tens of images each, and not being able to re order them without losing the caption is a real hassle

I'd like us to reconsider this. It's a pretty jarring UX to have the captions disappear without warning. Here's a recording of the current behaviour in 5.0:

gallery

YES! Please. I like the new caption process.
But, the missing captions and disappearing captions issue when editing with the Gallery really needs to be fixed.

This is very frustrating, especially when one spends time writing meaningful captions. At least deactivate the Gutenberg captions for now, please.

Howdy @antpb any progress on this issue? From what you tried, do you have any advice on how to proceed? Your comment here:

I'm thinking that the Rich Text component may need an event for when focus leaves to make a REST call to update the ID associated with each image. onChange is too frequent to be making that sort of call...

seems like a decent approach.

@kjellr I have a PR with a small fix, although not the best it should make for better UX:
Briefly:

  • if you write captions in the gallery they _will NOT be overwritten_ by the gallery modal
  • if your captions in the GTB gallery are empty and you add captions in the gallery modal they will be copied exactly
  • if you then edit a caption in GTB and then edit the gallery the GTB caption stays the same as you edited

LMK :)

Closing this as there's no Gallery Edit Modal anymore.

@youknowriad You were saying? 馃槀
where-is-my-caption

Interesting :) that "Media Upload" button is not mean to edit the gallery but just to pick new images from the MediaLibrary. We should create a new issue to fix that :)

I really like how the gallery block made some progress. This issue has been closed and I'm not sure why. The issue is still there. I have 10 images and I've added my captions. I want to add another image to the gallery results in losing ALL captions. I have to force reload the browser tab to get a previous state. And there is no way of adding images to a gallery.

@youknowriad Did you create an issue for that? How do I add images to a gallery without losing the captions?

No I didn't, but I think the issue should be to "remove the Gallery Edit modal" and have the "media library" button behave as an appender.

FYI for those that came across this thread from Google.

This issue is still persists on the built-in Gutenberg in WP 5.4

But can be fixed by installing the latest Gutenberg plugin which is currently 7.8.1

Agree that we need to remove _Edit Gallery_ from the media modal. I've created https://github.com/WordPress/gutenberg/issues/21413 to track this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

moorscode picture moorscode  路  3Comments

jasmussen picture jasmussen  路  3Comments

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments

maddisondesigns picture maddisondesigns  路  3Comments

pfefferle picture pfefferle  路  3Comments