Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what will happen by andrewserong · Pull Request #80727 · WordPress/gutenberg

andrewserong · 2026-07-27T07:05:42Z

What?

The Dynamic mode of the gallery block (the Dynamic Gallery variation) has an ambiguous "Convert to images" button in the block toolbar. As discussed in #80613 this can be confusing to users, and it also doesn't accurately reflect what's really going to happen.

This PR tries out ideas discussed in that issue: let's try renaming the button to Detach and add a confirm dialog that helps explain what will happen.

Very happy for feedback and ideas on the wording! Right now I've borrowed from @ramonjd's mockups.

Why?

The block can operate in two modes: dynamic mode connected to a source, and a static mode where the block isn't attached to a source and is made up of editable inner blocks. The two modes provide powerful behaviour (at least I think so), but it's also difficult to understand.

Hopefully, the button and modal can help users learn how to interact with the gallery block in each of its states, and also with this change, we hopefully reduce some confusion.

How?

Add an additional confirm dialog and state to the dynamic mode of the gallery block
When a user clicks "Detach" trigger the modal instead of immediately switching to a static version of the gallery block

Testing Instructions

Upload a bunch of images to a post or page (or attach them manually via the media library)
Insert a Gallery block to the page and select "Use attached images" to switch to the dynamic mode
Try out the "Detach" button in the block toolbar or the "Detach gallery" button in the inspector sidebar
How does the text read / look / feel? Does it make sense?
Click to confirm the detach. And make sure it otherwise works as on trunk.

Screenshots or screencast

This screenshot includes the three changes:

Block toolbar button copy change (it now says Detach)
Inspector controls button copy change (it now says Detach gallery)
The new modal

Use of AI Tools

Claude Code (Opus 5) for making the initial change, with testing and a little tweaking by me.

github-actions · 2026-07-27T07:09:59Z

Size Change: +237 B (0%)

Total Size: 7.75 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-library/index.min.js`	356 kB	+237 B (+0.07%)

_{compressed-size-action}

github-actions · 2026-07-27T07:21:54Z

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: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

github-actions · 2026-07-27T07:58:09Z

Flaky tests detected in 5857f08.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30332099419
📝 Reported issues:

[Flaky Test] Should navigate inner blocks with arrow keys #39607 in /test/e2e/specs/editor/various/writing-flow.spec.js
[Flaky Test] persists table layout across all tabs with unified view persistence #80156 in /test/e2e/specs/site-editor/pages-view-persistence.spec.js

jasmussen · 2026-07-27T08:53:41Z

I like it! It feels like it explains quite well, even if after the fact, what this is. How do you feel about it?

Nit, I'd love if this could be a small dialog rather than be medium sized. We can potentially make the text shorter if that helps. I do like how you emulated detaching from the page list, but perhaps we can trim it. Instead of:

Detach gallery?

The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However newly attached images will no longer be added automatically.

[Cancel] [Detach]

Perhaps we could:

Detach Gallery

This gallery displays your post's attachments. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.

[Cancel] [Detach]

Well, barely shorter. Up to you!

Mamaduka · 2026-07-27T09:15:45Z

Nit, I'd love if this could be a small dialog rather than be medium sized.

I thought all confirmation dialogs were the same size.

jasmussen · 2026-07-27T09:23:26Z

Could be my mistake, it just looked wider in the screenshot. You can safely ignore me if that's not the case.

fcoveram · 2026-07-27T13:09:16Z

From Joen's idea shared here, I like the body of the second but without shrinking the "images attached to the post" part, and the heading of the first. Therefore…

Detach gallery?

The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.

[Cancel] [Detach]

jasmussen · 2026-07-27T13:12:25Z

A note, "Detach Gallery" vs. "Detach gallery?"—the reason I proposed the former is that when you click Edit on a Page List inside the navigation block, it asks: "Edit Page List". Neutrally and matter of factly, and referring to the block name with capital letters. It's not strongly felt, just context.

bph · 2026-07-27T15:30:05Z

This works very nicely. As attached images are a fairly complex concept for end users, I would keep the explanation as is and not assume too much knowledge from the content creators.

The gallery displays the images attached to the post. Detaching it will enable you to add, delete, or reorder images. However, newly attached images will no longer be added automatically.

Great work. The "Detach" verb has been in use in the Media Library for a while.

🤦‍♀️ BTW: Although I have been using WordPress since 2009, I was not aware of the feature that I could attach images to posts from there.

bph

LGTM - Not that my approval does anything. See also my separate comment.

…aining what happens

andrewserong · 2026-07-28T05:36:37Z

Thanks for the feedback, folks! I've updated the heading and sidebar buttons to use a capital G and updated the modal body wording to match Francisco's redrafting (#80727 (comment)). Here's how it's looking:

LGTM - Not that my approval does anything. See also my separate comment.

It's worth a lot to me, thank you! 😄

Mamaduka

Looks great 🚢

ramonjd · 2026-07-28T06:00:42Z

LGTM - general poll:

should we align table of contents/page list with this pattern for 7.1 or leave it for now?

my gut instinct is to do it in GB, but not force it through to 7.1.

andrewserong · 2026-07-28T06:05:34Z

should we align table of contents/page list with this pattern for 7.1 or leave it for now?
my gut instinct is to do it in GB, but not force it through to 7.1.

Good question. I think we could do it in GB but not force it through for 7.1. While aligning them all is a good idea, it feels a bit beyond the scope of polishing the Dynamic Gallery block (which is a 7.1 feature).

github-actions · 2026-07-28T06:12:28Z

There was a conflict while trying to cherry-pick the commit to the wp/7.1 branch. Please resolve the conflict manually and create a PR to the wp/7.1 branch.

PRs to wp/7.1 are similar to PRs to trunk, but you should base your PR on the wp/7.1 branch instead of trunk.

# Checkout the wp/7.1 branch instead of trunk.
git checkout wp/7.1

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 794b6778f11aca2cbc4b3a4431f427cfcc73b17e

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.1 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

andrewserong · 2026-07-28T06:24:13Z

I've opened a manual backport to the wp/7.1 branch over in #80774

…aining what will happen (#80727) (#80774) * Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what happens * Tweak the wording * Update changelog * Remove superfluous comment * Update wording Co-authored-by: bph <bph@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: fcoveram <fcoveram@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

This updates the pinned commit hash of the Gutenberg repository from `4997026b75c922d8a6f77a03d72ed7cad04c7073` to `fd715a6833679d098d9fee84b642f8f1bc27341b`. A full list of changes included in this commit can be found on GitHub: WordPress/gutenberg@4997026...fd715a6 - Update view config API versioning (WordPress/gutenberg#80319) - Perf Tests: Fix 'Selecting blocks' metric reporting 0 ms (WordPress/gutenberg#80524) - Notes: Register the inline note format at import time (WordPress/gutenberg#80576) - Media: Stop forcing crossorigin on IMG tags in media templates (WordPress/gutenberg#80532) - GradientPicker: select by slug so two presets sharing a gradient keep their identity (WordPress/gutenberg#80554) - Media Editor: Show a loading state while the cropped file loads (WordPress/gutenberg#80460) - Remove default paragraph from tab-panel template (WordPress/gutenberg#80565) - Global Styles: Resolve link element styles in block inspector controls for blocks that are links (WordPress/gutenberg#80607) - Media REST API: Backport sideload from url path upload size check (WordPress/gutenberg#80659) - Rich text: remove tabIndex from editable elements again to fix shift+click selection (WordPress/gutenberg#80651) - Gallery: make dynamic mode conversion a single undo level (WordPress/gutenberg#80665) - Background image control: Remove duplicated focus ring (WordPress/gutenberg#80671) - Detach core's note mention kses filter in the baseline strip test (WordPress/gutenberg#80656) - wp-build: sync the page template preload field list with core-data (WordPress/gutenberg#80648) - Read the contentEditable attribute in ownsSelection, not isContentEditable (WordPress/gutenberg#80549) - Writing flow: extend block selections with shift+arrow when there is no native selection (WordPress/gutenberg#80687) - Notes: Capture the target block before saving a block-level note (WordPress/gutenberg#80690) - Theme JSON: Level block-level preset class specificity with :where() (WordPress/gutenberg#80657) - Notes: Sync the sidebar selection to the inline marker under the caret (WordPress/gutenberg#80610) - Writing flow: use isMultiSelecting for shift+click (WordPress/gutenberg#80286) (WordPress/gutenberg#80726) - Block supports: Return from layout support before resolving global settings (WordPress/gutenberg#80771) - Notes: Report save success consistently from note actions (WordPress/gutenberg#80748) - Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what will happen (WordPress/gutenberg#80727) (WordPress/gutenberg#80774) - ToolsPanel: Migrate styles to an SCSS Module (WordPress/gutenberg#80445) (WordPress/gutenberg#80800) - Add a responsiveEditingEnabled editor setting to hide the Responsive styles option (WordPress/gutenberg#80814) - iOS: remove jumping hack, add typewriter (WordPress/gutenberg#74596) - Writing flow: stop the page scrolling on caret moves within blocks taller than the viewport (WordPress/gutenberg#80708) - Global Styles: Put the inheritance UI behind a Gutenberg experiment (… (WordPress/gutenberg#80818) - Notes: Cancel in-flight hover highlight when focus leaves a note thread (WordPress/gutenberg#80752) - Block Editor: Try to fix typing performance regression (WordPress/gutenberg#80507) - List Block: Preserve ordered type on indent (WordPress/gutenberg#75353) - Make editableRoot a private block setting Symbol, not a public support (WordPress/gutenberg#80820) - Fix cursor position during forward delete of empty blocks (WordPress/gutenberg#80827) - Navigation: Fixes `aria-expanded` not updating on hover submenu inside overlay (WordPress/gutenberg#80828) - Remove redundant @jest-environment jsdom pragma and lint against it (WordPress/gutenberg#80676) - View config: reject shape-mismatched merges, define empty-array semantics, strip nulls from appended members (WordPress/gutenberg#80829) - Editor: leave undo to the browser in fields that handle their own undo (WordPress/gutenberg#80768) - Fix: New route-based admin pages are empty when no JS (WordPress/gutenberg#80839) Props wildworks. See #65529. git-svn-id: https://develop.svn.wordpress.org/trunk@62896 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned commit hash of the Gutenberg repository from `4997026b75c922d8a6f77a03d72ed7cad04c7073` to `fd715a6833679d098d9fee84b642f8f1bc27341b`. A full list of changes included in this commit can be found on GitHub: WordPress/gutenberg@4997026...fd715a6 - Update view config API versioning (WordPress/gutenberg#80319) - Perf Tests: Fix 'Selecting blocks' metric reporting 0 ms (WordPress/gutenberg#80524) - Notes: Register the inline note format at import time (WordPress/gutenberg#80576) - Media: Stop forcing crossorigin on IMG tags in media templates (WordPress/gutenberg#80532) - GradientPicker: select by slug so two presets sharing a gradient keep their identity (WordPress/gutenberg#80554) - Media Editor: Show a loading state while the cropped file loads (WordPress/gutenberg#80460) - Remove default paragraph from tab-panel template (WordPress/gutenberg#80565) - Global Styles: Resolve link element styles in block inspector controls for blocks that are links (WordPress/gutenberg#80607) - Media REST API: Backport sideload from url path upload size check (WordPress/gutenberg#80659) - Rich text: remove tabIndex from editable elements again to fix shift+click selection (WordPress/gutenberg#80651) - Gallery: make dynamic mode conversion a single undo level (WordPress/gutenberg#80665) - Background image control: Remove duplicated focus ring (WordPress/gutenberg#80671) - Detach core's note mention kses filter in the baseline strip test (WordPress/gutenberg#80656) - wp-build: sync the page template preload field list with core-data (WordPress/gutenberg#80648) - Read the contentEditable attribute in ownsSelection, not isContentEditable (WordPress/gutenberg#80549) - Writing flow: extend block selections with shift+arrow when there is no native selection (WordPress/gutenberg#80687) - Notes: Capture the target block before saving a block-level note (WordPress/gutenberg#80690) - Theme JSON: Level block-level preset class specificity with :where() (WordPress/gutenberg#80657) - Notes: Sync the sidebar selection to the inline marker under the caret (WordPress/gutenberg#80610) - Writing flow: use isMultiSelecting for shift+click (WordPress/gutenberg#80286) (WordPress/gutenberg#80726) - Block supports: Return from layout support before resolving global settings (WordPress/gutenberg#80771) - Notes: Report save success consistently from note actions (WordPress/gutenberg#80748) - Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what will happen (WordPress/gutenberg#80727) (WordPress/gutenberg#80774) - ToolsPanel: Migrate styles to an SCSS Module (WordPress/gutenberg#80445) (WordPress/gutenberg#80800) - Add a responsiveEditingEnabled editor setting to hide the Responsive styles option (WordPress/gutenberg#80814) - iOS: remove jumping hack, add typewriter (WordPress/gutenberg#74596) - Writing flow: stop the page scrolling on caret moves within blocks taller than the viewport (WordPress/gutenberg#80708) - Global Styles: Put the inheritance UI behind a Gutenberg experiment (… (WordPress/gutenberg#80818) - Notes: Cancel in-flight hover highlight when focus leaves a note thread (WordPress/gutenberg#80752) - Block Editor: Try to fix typing performance regression (WordPress/gutenberg#80507) - List Block: Preserve ordered type on indent (WordPress/gutenberg#75353) - Make editableRoot a private block setting Symbol, not a public support (WordPress/gutenberg#80820) - Fix cursor position during forward delete of empty blocks (WordPress/gutenberg#80827) - Navigation: Fixes `aria-expanded` not updating on hover submenu inside overlay (WordPress/gutenberg#80828) - Remove redundant @jest-environment jsdom pragma and lint against it (WordPress/gutenberg#80676) - View config: reject shape-mismatched merges, define empty-array semantics, strip nulls from appended members (WordPress/gutenberg#80829) - Editor: leave undo to the browser in fields that handle their own undo (WordPress/gutenberg#80768) - Fix: New route-based admin pages are empty when no JS (WordPress/gutenberg#80839) Props wildworks. See #65529. Built from https://develop.svn.wordpress.org/trunk@62896 git-svn-id: http://core.svn.wordpress.org/trunk@62163 1a063a9b-81f0-0310-95a4-ce76da25c4cd

andrewserong self-assigned this Jul 27, 2026

github-actions Bot added the [Package] Block library /packages/block-library label Jul 27, 2026

andrewserong added [Type] Bug An existing feature does not function as intended [Block] Gallery Affects the Gallery Block - used to display groups of images and removed [Package] Block library /packages/block-library labels Jul 27, 2026

github-actions Bot added the [Package] Block library /packages/block-library label Jul 27, 2026

andrewserong marked this pull request as ready for review July 27, 2026 07:21

andrewserong requested review from ajitbohra and fabiankaegy as code owners July 27, 2026 07:21

andrewserong requested review from Mamaduka, bph, jasmussen and ramonjd July 27, 2026 07:22

This was referenced Jul 27, 2026

Gallery: Dynamic variation has confusing "Convert to ..." actions #80613

Closed

Gallery: update action labels for conversion from dynamic variation #80664

Closed

bph approved these changes Jul 27, 2026

View reviewed changes

andrewserong added 5 commits July 28, 2026 15:18

Dynamic Gallery: Rename toolbar button to Detach and add a modal expl…

5401b5f

…aining what happens

Tweak the wording

ba99ed9

Update changelog

1077345

Remove superfluous comment

4236e7b

Update wording

5857f08

andrewserong force-pushed the try/detach-modal-for-dynamic-gallery-block branch from e324af8 to 5857f08 Compare July 28, 2026 05:35

Mamaduka approved these changes Jul 28, 2026

View reviewed changes

andrewserong added the Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 28, 2026

andrewserong enabled auto-merge (squash) July 28, 2026 05:38

andrewserong merged commit 794b677 into trunk Jul 28, 2026
47 checks passed

andrewserong deleted the try/detach-modal-for-dynamic-gallery-block branch July 28, 2026 06:10

github-actions Bot added this to the Gutenberg 23.7 milestone Jul 28, 2026

andrewserong mentioned this pull request Jul 28, 2026

[Backport to 7.1] Dynamic Gallery: Rename toolbar button to Detach and add a modal #80774

Merged

andrewserong added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Jul 28, 2026

t-hamano mentioned this pull request Jul 29, 2026

General: Bump the pinned hash for Gutenberg to fd715a6 WordPress/wordpress-develop#12752

Closed

t-hamano mentioned this pull request Aug 5, 2026

General: Bump the pinned hash for Gutenberg to f05e40 WordPress/wordpress-develop#12857

Closed

Uh oh!

Conversation

andrewserong commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Use of AI Tools

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jasmussen commented Jul 27, 2026

Uh oh!

Mamaduka commented Jul 27, 2026

Uh oh!

jasmussen commented Jul 27, 2026

Uh oh!

fcoveram commented Jul 27, 2026

Uh oh!

jasmussen commented Jul 27, 2026

Uh oh!

bph commented Jul 27, 2026

Uh oh!

bph left a comment

Choose a reason for hiding this comment

Uh oh!

andrewserong commented Jul 28, 2026

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

ramonjd commented Jul 28, 2026

Uh oh!

andrewserong commented Jul 28, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

andrewserong commented Jul 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

andrewserong commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 27, 2026 •

edited

Loading