Skip to content

Improve UX for adding images to a gallery block from the media library#71204

Open
dhruvikpatel18 wants to merge 3 commits intoWordPress:trunkfrom
dhruvikpatel18:feat/gallery-image-placeholder
Open

Improve UX for adding images to a gallery block from the media library#71204
dhruvikpatel18 wants to merge 3 commits intoWordPress:trunkfrom
dhruvikpatel18:feat/gallery-image-placeholder

Conversation

@dhruvikpatel18
Copy link
Copy Markdown
Contributor

@dhruvikpatel18 dhruvikpatel18 commented Aug 14, 2025

What?

Closes #48417

Improves the UX for adding images to a Gallery block when there is only a single image.
This PR ensures that a placeholder (empty image block) is always available after inserting the first image, making it easier to continue adding more without extra clicks.

Why?

Currently, when a Gallery block has only one image, it is not obvious how to add additional images from the media library.
Users must:

  1. Select the existing image,
  2. Select the gallery via the small toolbar icon,
  3. Click "Add",
  4. Open the media library,
  5. Select more images,
  6. Click "Add to gallery",
  7. Finally, click "Update gallery".

This creates unnecessary friction. The “+” appender only becomes visible once the gallery has 2 or more images.
This PR reduces that friction by always showing an empty Image block placeholder immediately after the first image is added.

Testing Instructions

  1. Create a new post or page.
  2. Insert a Gallery block.
  3. Add a single image from the media library.
    • Expected: An empty image placeholder is automatically appended after the first image.
  4. Add additional images — the appender and placeholder should behave as before.
  5. Remove images back down to one — the placeholder remains available to add another.
  6. Confirm drag-and-drop still works as expected.

Screenshots or screencast

Gallery.Block.mov

@im3dabasia im3dabasia added [Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Enhancement A suggestion for improvement. labels Aug 14, 2025
template: DEFAULT_TEMPLATE,
orientation: 'horizontal',
renderAppender: false,
renderAppender: InnerBlocks.defaultBlockAppender,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does seem like a good addition, similar to the Buttons block, and other design-related blocks such as Columns, Grid, and Group, which have an appender. The gallery block currently lacks one. so adding it would improve consistency.

If there’s enough consensus, should we raise a separate follow-up PR to address this?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion, I have raised separate follow-up PR to address above: #71236

@mtias mtias added the Needs Design Feedback Needs general design feedback. label Aug 14, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 18, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jasmussen
Copy link
Copy Markdown
Contributor

Thanks for the PR. Left some related feedback here as well.

It's not a bad instinct, but it's not clear to me yet that this is a clear improvement. The main piece on my mind is to improve the media library itself, for which I've seen a few efforts being underway. In this PR, even if I appreciate the motivation and it arguably has a nicer setup state, it seems like it would actually add more clicks to build a gallery, by having to engage with each image placeholder individually rather than just multi selecting images inside the modal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Gallery Affects the Gallery Block - used to display groups of images Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve UX for adding images to a gallery block from the media library

4 participants