Dashboard: add command palette commands#78429
Merged
Merged
Conversation
simison
added
[Type] Experimental
|
Size Change: 0 B Total Size: 8.04 MB ℹ️ View Unchanged
|
|
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. |
|
Flaky tests detected in e9f35e4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26388627309
|
retrofox
reviewed
May 19, 2026
Contributor
There was a problem hiding this comment.
After this refactoring, probably we should remove the whole file
Contributor
There was a problem hiding this comment.
Pull request overview
Adds command palette integration to the experimental widget dashboard so dashboard-specific actions (customize, add widgets, layout switches/settings, reset) can be triggered via Cmd/Ctrl+K within the dashboard surface.
Changes:
- Introduces
DashboardCommandsto register dashboard command-palette commands and set a dashboard-specific command context. - Adds a shared UI context for opening the inserter, layout settings drawer, and reset dialog from multiple entry points (Actions + command palette).
- Adds grid-model change utilities and a provider helper (
commitGridModelChange) to apply layout model switches with migration.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| routes/dashboard/widget-dashboard/widget-dashboard.tsx | Mounts DashboardCommands alongside the existing inserter within the dashboard providers. |
| routes/dashboard/widget-dashboard/utils/grid-model-change/index.ts | Barrel export for grid-model change helpers. |
| routes/dashboard/widget-dashboard/utils/grid-model-change/grid-model-change.ts | Adds helpers to derive current model and compute migrated layout + updated grid settings. |
| routes/dashboard/widget-dashboard/test/dashboard-commands.test.tsx | New tests validating command context and conditional command registration. |
| routes/dashboard/widget-dashboard/context/ui-context.tsx | Extends shared UI context to include layout settings and reset dialog open states. |
| routes/dashboard/widget-dashboard/context/dashboard-context.tsx | Adds commitGridModelChange to publish a model switch (with migration) immediately. |
| routes/dashboard/widget-dashboard/components/dashboard-commands/utils.ts | Adds command-specific grid-model helpers (currently unused). |
| routes/dashboard/widget-dashboard/components/dashboard-commands/use-pending-when-edit-mode.ts | Adds helper hook to defer actions until edit mode is enabled. |
| routes/dashboard/widget-dashboard/components/dashboard-commands/index.ts | Re-exports DashboardCommands and the dashboard command context constant. |
| routes/dashboard/widget-dashboard/components/dashboard-commands/dashboard-commands.tsx | Implements command registration, callbacks, and context wiring for the dashboard. |
| routes/dashboard/widget-dashboard/components/actions/actions.tsx | Switches layout settings + reset dialog state to the shared UI context. |
| routes/dashboard/package.json | Adds @wordpress/commands dependency for the dashboard route package. |
| package-lock.json | Updates lockfile for the new dependency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+163
to
+186
| { | ||
| name: 'core/dashboard/layout-settings', | ||
| label: __( 'Configure dashboard layout settings' ), | ||
| icon: settings, | ||
| category: 'command', | ||
| context: DASHBOARD_COMMAND_CONTEXT, | ||
| keywords: [ | ||
| __( 'layout' ), | ||
| __( 'columns' ), | ||
| __( 'row height' ), | ||
| ], | ||
| disabled: ! canEditGridSettings || editMode, | ||
| callback: openLayoutSettings, | ||
| }, | ||
| { | ||
| name: 'core/dashboard/reset-to-default', | ||
| label: __( 'Reset dashboard widgets to default' ), | ||
| icon: trash, | ||
| category: 'command', | ||
| context: DASHBOARD_COMMAND_CONTEXT, | ||
| keywords: [ __( 'reset' ), __( 'default' ) ], | ||
| disabled: ! onLayoutReset, | ||
| callback: resetToDefault, | ||
| }, |
Comment on lines
66
to
77
| <WidgetDashboardUIProvider> | ||
| { children ?? ( | ||
| <> | ||
| <NoWidgetsState /> | ||
| <Actions /> | ||
| <Widgets /> | ||
| </> | ||
| ) } | ||
|
|
||
| <DashboardCommands /> | ||
| <Inserter /> | ||
| </WidgetDashboardUIProvider> |
Comment on lines
+296
to
+313
| const commitGridModelChange = useCallback( | ||
| ( targetModel: WidgetGridModel ) => { | ||
| const next = computeGridModelChange( { | ||
| layout: stagingLayout, | ||
| gridSettings: stagingGridSettings, | ||
| targetModel, | ||
| } ); | ||
|
|
||
| if ( ! next ) { | ||
| return; | ||
| } | ||
|
|
||
| setStagingLayout( next.layout ); | ||
| setStagingGridSettings( next.gridSettings ); | ||
| onLayoutChange( canonicalize( next.layout ) ); | ||
| onGridSettingsChange?.( next.gridSettings ); | ||
| onEditChange?.( false ); | ||
| }, |
Comment on lines
+1
to
+51
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| computeGridModelChange, | ||
| getGridModel, | ||
| } from '../../utils/grid-model-change'; | ||
| import type { | ||
| DashboardWidget, | ||
| WidgetGridModel, | ||
| WidgetGridSettings, | ||
| } from '../../types'; | ||
|
|
||
| export { getGridModel, computeGridModelChange }; | ||
|
|
||
| /** | ||
| * Applies a layout-model change the same way the layout settings drawer does: | ||
| * migrates widget placements, then updates the staged grid settings. | ||
| * @param root0 | ||
| * @param root0.layout | ||
| * @param root0.gridSettings | ||
| * @param root0.targetModel | ||
| * @param root0.onLayoutChange | ||
| * @param root0.onGridSettingsChange | ||
| */ | ||
| export function applyGridModelChange( { | ||
| layout, | ||
| gridSettings, | ||
| targetModel, | ||
| onLayoutChange, | ||
| onGridSettingsChange, | ||
| }: { | ||
| layout: DashboardWidget[]; | ||
| gridSettings: WidgetGridSettings; | ||
| targetModel: WidgetGridModel; | ||
| onLayoutChange: ( layout: DashboardWidget[] ) => void; | ||
| onGridSettingsChange: ( gridSettings: WidgetGridSettings ) => void; | ||
| } ): void { | ||
| const next = computeGridModelChange( { | ||
| layout, | ||
| gridSettings, | ||
| targetModel, | ||
| } ); | ||
|
|
||
| if ( ! next ) { | ||
| return; | ||
| } | ||
|
|
||
| onLayoutChange( next.layout ); | ||
| onGridSettingsChange( next.gridSettings ); | ||
| } |
Contributor
There was a problem hiding this comment.
Once applyGridModelChange is gone, this file only re-exports getGridModel and computeGridModelChange.
The consumer in dashboard-commands.tsx imports them straight from ../../utils/grid-model-change, so the re-exports add no value either. Probably easiest to delete the whole file.
retrofox
reviewed
May 19, 2026
retrofox
reviewed
May 19, 2026
retrofox
reviewed
May 19, 2026
Comment on lines
+104
to
+110
| const customize = useCallback< CommandCallback >( | ||
| ( { close } ) => { | ||
| onEditChange?.( true ); | ||
| close(); | ||
| }, | ||
| [ onEditChange ] | ||
| ); |
Contributor
There was a problem hiding this comment.
Super mint one: every other callback in this file calls close() first and runs the action after; this one inverts it. Same outcome, but worth unifying so the pattern is consistent across the six commands.
retrofox
reviewed
May 19, 2026
Contributor
retrofox
left a comment
retrofox
left a comment
There was a problem hiding this comment.
The new computeGridModelChange and getGridModel duplicate logic that already lives in the layout settings drawer:
-
layout-settings.tsx:238-259(handleChange) compares current vs next model, runsmigrateLayout, and pushes the result. Same flow ascomputeGridModelChange. -
layout-settings.tsx:28(getModel) is byte-for-byte identical togetGridModel.
If we're extracting these helpers, it's worth applying them in the drawer as well, so we end up with one source of truth.
Otherwise, the extraction is an extra hop without actually consolidating anything. Happy to do that as a follow-up if we want to keep this PR focused on the palette work.
…s/use-pending-when-edit-mode.ts
…mands # Conflicts: # routes/dashboard/widget-dashboard/context/dashboard-context.tsx # routes/dashboard/widget-dashboard/context/ui-context.tsx
unify customize callback to close() before acting
command-palette reset opens the dialog Actions mounts
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?
Part of #77616
Add command palette commands for the dashboard.
Why?
Helps advanced users navigate features on the dashboard more quickly.
How?
Testing Instructions
At the experimental dashboard, press cmd+K and try all the different commands.
On other pages, the commands are not available.
Testing Instructions for Keyboard
Screenshots or screencast
Use of AI Tools