Media Editor Modal: surface save failures as scoped snackbar notices#77733
Merged
Conversation
55 tasks
Contributor
There was a problem hiding this comment.
Pull request overview
Adds scoped snackbar error feedback to the Media Editor modal when saving fails, matching the established media-upload-modal snackbar pattern and avoiding unhandled promise rejections.
Changes:
- Introduces a dedicated notices context (
media-editor) and renders<SnackbarNotices>for the modal via adocument.bodyportal. - Surfaces save failures from
/wp/v2/media/{id}/editandsaveEditedEntityRecordas snackbar error notices, clearing stale notices on retry/cancel. - Adds styling to ensure snackbars are positioned correctly and appear above the modal overlay.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/media-editor/tsconfig.json | Adds TS project reference to @wordpress/notices. |
| packages/media-editor/src/components/media-editor-modal/style.scss | Adds snackbar container styling and elevated z-index for portaled snackbars. |
| packages/media-editor/src/components/media-editor-modal/index.tsx | Implements scoped snackbar notices for save failures; portals snackbar list to document.body. |
| packages/media-editor/package.json | Adds @wordpress/notices dependency. |
| package-lock.json | Updates lockfile for the new @wordpress/notices dependency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ramonjd
commented
Apr 28, 2026
|
Size Change: +422 B (+0.01%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
A failed `/edit` POST or `saveEditedEntityRecord` rejection used to leave the user with no feedback — the Save button just popped out of its busy state. Surface failures as a snackbar so the user can see what happened and decide whether to retry. Notices are scoped to a `media-editor` context so they don't leak into the host editor's tray (and host-editor notices don't bleed into the modal). The list is portaled to `document.body` and styled with `snackbar-container()` plus an elevated z-index, mirroring the `media-upload-modal` precedent — without the portal/positioning the list collapses to a 0-size box and is painted under the modal overlay. Stale failure snackbars are cleared at the start of each save attempt and on cancel so successful retries don't leave dead messages hovering.
Move the modal-snackbar z-index out of a magic literal and into the shared `_z-index.scss` registry alongside the other in-modal layer entries. The new value (1000001) clears both the modal overlay (100000) and any popovers that may open inside the modal (1000000), matching the tier of the existing nested-action modals. The literal `200000` we'd inherited from `media-upload-modal` was a coin-toss between regimes — high enough to clear the overlay but below popovers, which would have been a problem if a popover error ever coexisted with an in-modal snackbar.
The media-editor SCSS uses base-styles for colors, mixins, variables, and (newly) z-index. The previous build only worked by accident — npm workspace hoisting was making the package resolvable through a sibling. Declare it explicitly so the dependency graph matches what the styles actually need, matching the pattern used in media-utils, interface, and other packages that consume base-styles.
Move the entry into the existing 1000001 cluster so the value is implicit and the multi-line comment becomes unnecessary.
72e3ffb to
bbf5dd4
Compare
|
Flaky tests detected in bbf5dd4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25038355130
|
andrewserong
approved these changes
Apr 28, 2026
Contributor
andrewserong
left a comment
There was a problem hiding this comment.
Nice and simple, looking good!
🚢
t-hamano
pushed a commit
that referenced
this pull request
Apr 29, 2026
…77733) Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a snackbar notice when a save in the Media Editor modal fails. Previously a failed
/wp/v2/media/{id}/editPOST orsaveEditedEntityRecordrejection produced an unhandled promise rejection — the Save button just popped out of its busy state with no UI feedback.Kapture.2026-04-28.at.15.54.09.mp4
Why
Follow-up to #77641. Andrew flagged the missing error handling in his review and pointed at the existing
media-utils/src/components/media-upload-modalsnackbar pattern as a precedent.How
media-editornotices context isolates failure snackbars to the modal — they don't leak into the host editor's tray, and host-editor notices don't bleed into the modal.<SnackbarNotices>is portaled todocument.bodyso the list isn't trapped inside the Modal's stacking context..media-editor-modal__snackbaruses@include snackbar-container()(fixed-position bottom strip) plusz-index: 200000to clear the modal overlay. Without this the list collapses to a 0-size box and would be painted under the overlay anyway.Mirrors the established pattern in
packages/media-utils/src/components/media-upload-modal/.Test plan
handleSave) → snackbar "Could not save image. " appears at the bottom of the modal, above the overlay.messageappears verbatim after "Could not save image.".