Fields: Prevent animation on item removal for MediaEdit by yashjawale · Pull Request #85372 · WordPress/gutenberg · GitHub
Skip to content

Fields: Prevent animation on item removal for MediaEdit - #85372

Merged
ciampo merged 3 commits into
WordPress:trunkfrom
yashjawale:fix/item-animation-media-utils-84940
Oct 22, 2026
Merged

ciampo merged 3 commits into
WordPress:trunkfrom
yashjawale:fix/item-animation-media-utils-84940

Conversation

@yashjawale

Copy link
Copy Markdown
Contributor

What?

Follow up to #83854
Carries over changes from #84940

This PR prevents animation of item removal so that any items below MediaEdit don't overlap it while it animates to the reduced height.

Why?

Removing the first item from a compact multiple selection makes the remaining rows animate outside the shrinking group and briefly overlap any items below the component. Leading to a degrated user experience.

How?

This PR updates animation logic so that it is only applied when same attachment IDs change order.
When items are added or removed, the running movement animations are cancelled and the rows are placed directly in their new positions. Membership changes are checked even when a surviving row's index stays unchanged.

Testing Instructions

We can test this by temporarily applying this patch to allow multiple selection in Site Editor's Identity section for "Site logo" input.

Patch
diff --git a/packages/fields/src/components/media-edit/index.tsx b/packages/fields/src/components/media-edit/index.tsx
index 631c909d03..dc68d71ca6 100644
--- a/packages/fields/src/components/media-edit/index.tsx
+++ b/packages/fields/src/components/media-edit/index.tsx
@@ -611,8 +611,9 @@ export function MediaEditControl< Item >( {
 	onChange,
 	hideLabelFromVision,
 	allowedTypes = [ 'image' ],
-	multiple,
-	isExpanded,
+	// multiple,
+	// isExpanded,
 	validity,
 	isPickerFiltered,
 	featuredImageFlow,
@@ -633,6 +634,8 @@ export function MediaEditControl< Item >( {
 	 */
 	pickerTitle?: string;
 } ) {
+	const multiple = true;
+	const isExpanded = false;
 	const MediaUploadComponent = isPickerFiltered
 		? FilteredMediaUpload
 		: ConditionalMediaUpload;
  1. After the patch, navigate to /wp-admin/site-editor.php?p=%2Fidentity
  2. Select multiple images for site logo
  3. Remove the ones on top to confirm that the list doesn't animate
  4. Confirm that the items still animate for changing order of exisitng items.

Screenshots or screencast

Before After
Screen.Recording.2026-10-22.at.11.58.43.AM.mov
Screen.Recording.2026-10-22.at.12.14.56.PM.mov

Use of AI Tools

None

@github-actions github-actions Bot added the [Package] Fields /packages/fields label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

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: yashjawale <yashjawale@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

@yashjawale
yashjawale marked this pull request as ready for review October 22, 2026 07:01
@ciampo ciampo assigned ciampo and yashjawale and unassigned ciampo Oct 22, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Oct 22, 2026
@ciampo
ciampo self-requested a review October 22, 2026 14:11

@ciampo ciampo left a comment

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.

LGTM 🚀

@ciampo ciampo added the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Oct 22, 2026
@github-actions github-actions Bot removed the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Oct 22, 2026
@ciampo
ciampo merged commit 7bc2f23 into WordPress:trunk Oct 22, 2026
96 of 97 checks passed
@github-actions github-actions Bot added this to the Gutenberg 24.4 milestone Oct 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Fields /packages/fields [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants