Gallery: Fix caption updates not reflecting when using Edit Gallery interface - #71142

What?

Closes #71131

Fix Gallery block caption updates not reflecting when using the "Edit Gallery" interface in the Media Library.

Why?

When users edit a gallery and update image captions through the "Edit Gallery" interface in the Media Library, the changes were not being reflected in the gallery block. The issue occurred because the updateImages function was reusing existing image blocks without applying the updated attributes from the Media Library, causing caption changes to be lost.

How?

Modified the updateImages function in packages/block-library/src/gallery/edit.js to:

1. Update existing blocks with new attributes: Added logic to map over existing image blocks and apply updated media data from the Media Library using buildImageAttributes().
2. Preserve block integrity: Use createBlock() to create new blocks with updated attributes while maintaining the existing block structure.
3. Apply gallery settings: Ensure that updated media data is properly merged with gallery-specific settings through the existing buildImageAttributes helper function.

The key change is in the updatedExistingBlocks logic where we now:

• Find the corresponding updated image data for each existing block
• Apply buildImageAttributes() to merge the updated media data with gallery settings
• Create a new block instance with the merged attributes

Testing Instructions

1. Open a post or page in the block editor.
2. Insert a Gallery block and add multiple images.
3. Save the post.
4. Click on the Gallery block to select it.
5. Click the "Edit Gallery" button in the block toolbar.
6. In the Media Library modal, select an image and update its caption in the attachment details panel.
7. Click "Update Gallery" to close the modal.
8. Verify that the caption changes are now reflected in the gallery block.
9. Repeat with multiple images to ensure all caption updates are preserved.

Testing Instructions for Keyboard

1. Use Tab to navigate to the Gallery block.
2. Press Enter to select the gallery.
3. Use Tab to navigate to the "Edit Gallery" button and press Enter.
4. In the Media Library modal, use Tab and arrow keys to navigate to an image.
5. Press Enter to select the image and open attachment details.
6. Use Tab to navigate to the caption field and update the caption.
7. Use Tab to navigate to "Update Gallery" and press Enter.
8. Verify caption changes are reflected in the gallery block using screen reader or visual inspection.

Before:

After