Dashboard: show ghost widgets visually & allow easy removal#78502
Conversation
|
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. |
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Icon as WCIcon, Spinner } from '@wordpress/components'; |
There was a problem hiding this comment.
Using Icon from @wordpress/ui was already done in #78440, but then I accidentally reverted it in rebase of another PR.
So this just returns it back to the previous state; could do a separate PR, but it seems fine here too.
| aria-hidden="true" | ||
| > | ||
| <WCIcon icon={ widgetType.icon } /> | ||
| <Icon icon={ widgetType.icon } /> |
There was a problem hiding this comment.
|
Size Change: 0 B Total Size: 8.18 MB ℹ️ View Unchanged
|
|
Solved by showing a loading spinner until widgets resolve: Screen.Recording.2026-05-21.at.13.57.36.movcc @jameskoster WDYT if, instead of a spinner, we show a pulsating placeholder? |
|
Flaky tests detected in ae99b76. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26511253653
|
|
I like skeleton loaders, but until we have the primitives for that in the design system I'd lean towards using the spinner as a recognised pattern across WP. |
|
@jameskoster we have the Animate in Keeping spinners works fine too |
393184e to
7458856
Compare
|
TIL about |
9c61121 to
7f7a591
Compare
FAIL routes/dashboard/widget-dashboard/test/staging.test.tsx
● WidgetDashboard staging layer › grid settings staging › publishes both layout and settings on commit
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
364 |
365 | expect( onLayoutChange ).toHaveBeenCalledTimes( 1 );
> 366 | expect( onGridSettingsChange ).toHaveBeenCalledTimes( 1 );
| ^
367 | expect( onGridSettingsChange.mock.calls[ 0 ][ 0 ] ).toMatchObject( {
368 | model: 'masonry',
369 | } );
at Object.toHaveBeenCalledTimes (routes/dashboard/widget-dashboard/test/staging.test.tsx:366:35)
b65d2ec to
ae99b76
Compare
|
Thanks @retrofox ! Good for a final review |
retrofox
left a comment
There was a problem hiding this comment.
LGTM. Thanks for addressing the feedback 🚢!


What?
Part of #77616
When the dashboard layout has saved widgets which are no longer available (e.g. plugin disabled/removed), indicate their place with a message & easy way to remove them.
Previously, widgets rendered
nulland appeared as unexplained "ghost widgets".Now they render a "missing widget" placeholder:
Why?
Improved UX and clarity.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Before
Customize mode
Regular mode
After
Customize mode
Regular mode
Use of AI Tools