Commands: Add sections to command palette and introduce Recently used functionality#75691
Merged
Commands: Add sections to command palette and introduce Recently used functionality#75691
Conversation
github-actions
bot
added
[Package] Components
|
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. |
jasmussen
reviewed
Feb 18, 2026
packages/base-styles/_variables.scss
Outdated
| $modal-width-small: 384px; | ||
| $modal-width-medium: 512px; | ||
| $modal-width-large: 840px; | ||
| $modal-large-max-height: 70%; |
Contributor
There was a problem hiding this comment.
These make me apprehensive. I'm not sure we shouild add these. CC: @jameskoster @ciampo
Contributor
Author
There was a problem hiding this comment.
I actually can revert this as I ended up not using it (and going for 70vh)
Contributor
There was a problem hiding this comment.
Wouldn't a max-height be applicable to all modals, not just the large one?
If we need the new var then think it would make sense to sync the value with Dialog from @wordpress/ui, IE calc(100vh - 2 * $grid-unit-30)
Contributor
Author
There was a problem hiding this comment.
The modal max height as of now is 70% when large and 100% - 2 * header-size on others.
Contributor
There was a problem hiding this comment.
I'm also mostly noting to be careful avoiding anything to the variables.scss stylesheet if at all you can avoid it. It enters some system territory which is fine to do, but just be sure that's what you want to, suddenly it becomes an API of sorts.
Contributor
There was a problem hiding this comment.
Let's definitely align @wordpress/component's Modal and @wordpress/ui's Dialog.
Dialog currently doesn't really enforce a min/max height, ie. it grows as the content grows apart from what Jay mentioned (ie. leave a little space around dialog to show the backdrop).
Only the size="full" variant sets the height regardless of the content.
Happy to help to make adjustments to either Modal or Dialog (or both), but I agree that we should keep them synced whenever possible.
Contributor
Author
There was a problem hiding this comment.
@fcoveram design does require a fixed height, so are we to align with that for the Dialog as well?
Contributor
There was a problem hiding this comment.
It feels like the fixed height is more related to the command palette, and not to the generic Modal / Dialog component, though?
In other words, not necessarily a change that needs to be applied to Modal, but rather directly in the command palette?
Contributor
Author
There was a problem hiding this comment.
Yes, and in the case above, it was applied directly to the command palette. I'm just making sure we're aligning on the design/UI of the component as a whole.
Contributor
There was a problem hiding this comment.
The command palette was thought to have a fixed height, but both width (medium and large) come from Modal to keep size consistency. So it doesn't sound that Modal and Dialog need to update.
Contributor
|
Would it be possible to just do recent commands. This PR seems to be doing too much IMO |
|
Size Change: +957 B (+0.01%) Total Size: 7.66 MB
ℹ️ View Unchanged
|
Contributor
Author
Sure, they're basically the same thing with only a difference in how they get added |
|
Flaky tests detected in e7bb6dd. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23456300764
|
Contributor
Author
|
@youknowriad I've removed the favorite section and only kept the recently used. A large challenge to doing this is how loaders work being a blackbox of commands. In the latest commits, I made the recent history RLU cache to always show the most used up top, limit it to 5, but save 15 to account for contextual history. Reduced the height of items to 32px (but kept the click area 40px). Did some refactoring to account for cases where commands didn't load yet, and some general fixes as well. Right now, when you open the command on a screen with no suggestions, it will show up empty, as I understand from @fcoveram, we don't want any screens with no suggestions, so in a follow up, I will make sure we have suggestions in all screens: Suggestions are sometimes contextual (if you have a block selected, a template page, and what not). I'd also appreciate a design review to ensure the behavior is correct. |
senadir
changed the title
senadir
force-pushed
the
senadir/add/sections-to-command-palette
branch
from
a96d5f6 to
44ecf31
Compare
6 tasks
youknowriad
reviewed
Feb 19, 2026
youknowriad
reviewed
Feb 19, 2026
youknowriad
reviewed
Feb 19, 2026
youknowriad
reviewed
Feb 19, 2026
youknowriad
reviewed
Feb 19, 2026
youknowriad
reviewed
Feb 19, 2026
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
For me the code is a bit all over the place, multiple things with different roles in a single file.
ciampo
reviewed
Feb 20, 2026
Track command usage via @wordpress/preferences and display a "Recent" section at the top of the palette when no search is active. Refactor command item rendering into a shared CommandItem component and move section headings into their respective groups so they only appear when content exists. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…suggestions) Add organizational sections to the command palette including Favorites, Recently Used, and Suggestions sections. Implement a keyboard shortcut (Shift+Ctrl+D) to toggle favorite status for the currently selected command. Extract command item rendering into a reusable CommandItem component to support per-section value prefixes and avoid cmdk value collisions. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Pull out all favorites-related code to be added in a separate PR: - FavoritesGroup component - FavoriteShortcutHandler component - useSelectedCommandName hook - CommandNameContext - toggleFavorite callback and shortcut registration Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add Shift+Backspace shortcut to remove items from the recently used list. Reduce item visual height to 32px with 4px padding for 40px click target, and reduce input height by 8px. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…rder Refactor command-menu.js to reduce prop drilling by introducing a CommandPaletteContext, extract reusable hooks (useRecentCommands, useCommandPalette), and fix loader-based commands not respecting recency order in the Recent section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…e context provider Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move RecentGroup data fetching to useRecentCommandsData hook - Move remove-recent shortcut registration/handling to use-recent-commands hooks - Inline useRemoveRecentShortcut into CommandInput (no need for separate component) - Remove redundant isOpen prop from CommandInput (only mounts when open) - Fix useSelect warning by returning stable references from selectors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ok, fix useSelect warning Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…collector, memoize recentSet - Extract recordUsage as a plain function using dispatch() directly - Add useLoaderCollector hook for resolving loader commands in RecentGroup - Memoize recentSet with useMemo, use EMPTY_SET constant for early return - Add cleanup effect in useLoaderCollector to evict stale entries on unmount - Remove unused useRecentCommandsData, useRemoveRecentShortcut exports - Remove filterNames/sortOrder props from CommandMenuLoader and CommandList - Use Map-based O(1) lookups instead of .find() for command resolution Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
These APIs are internal implementation details for tracking loader states and should not be part of the public store interface. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contextual loaders in SuggestionsGroup received search={undefined}
instead of search="" because the prop wasn't forwarded to CommandList.
This caused loader hooks to malfunction on first open since they
received { search: undefined } instead of { search: '' }.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Change the command list from a fixed height to max-height so the palette hugs its content when there are few or no suggestions, while still capping at the maximum when there are many items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Cover the three section states: Suggestions visible on open with contextual commands, Results appearing during search, and Recent commands showing after using a command. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
senadir
force-pushed
the
senadir/add/sections-to-command-palette
branch
from
a8d78b8 to
e7bb6dd
Compare
adamsilverstein
pushed a commit
that referenced
this pull request
Mar 31, 2026
… functionality (#75691) * Commands: Display category labels and enforce category icons Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Refine command palette styles - Use overflow: clip on modal content to prevent programmatic scrolling - Add gap in header layout - Adjust input line-height to 24px - Hide scrollbar on the command list - Conditionally show border and padding only when commands are present - Add scroll padding for smoother keyboard navigation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * restore scrollbar * Commands: Add section headings for suggestions and search results Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Widen command palette and set fixed list height Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Add recently used section to command palette Track command usage via @wordpress/preferences and display a "Recent" section at the top of the palette when no search is active. Refactor command item rendering into a shared CommandItem component and move section headings into their respective groups so they only appear when content exists. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Add sections to command palette (favorites, recently used, suggestions) Add organizational sections to the command palette including Favorites, Recently Used, and Suggestions sections. Implement a keyboard shortcut (Shift+Ctrl+D) to toggle favorite status for the currently selected command. Extract command item rendering into a reusable CommandItem component to support per-section value prefixes and avoid cmdk value collisions. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * add changelog * use proper font weight * Commands: Remove favorites functionality from command palette Pull out all favorites-related code to be added in a separate PR: - FavoritesGroup component - FavoriteShortcutHandler component - useSelectedCommandName hook - CommandNameContext - toggleFavorite callback and shortcut registration Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Commands: Refine command palette styles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * update lock * Commands: Add remove from recent and refine palette item styles Add Shift+Backspace shortcut to remove items from the recently used list. Reduce item visual height to 32px with 4px padding for 40px click target, and reduce input height by 8px. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor to use cmdK group component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Simplify command palette with context and fix recent sort order Refactor command-menu.js to reduce prop drilling by introducing a CommandPaletteContext, extract reusable hooks (useRecentCommands, useCommandPalette), and fix loader-based commands not respecting recency order in the Recent section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Save 15 recent items, display 5, limit loaders to display set Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Revert whitespace changes in base-styles/_variables.scss Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Refactor the main command menu file to be smaller and remove context provider Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * align palette with modal more * Commands: Move recent commands logic to hook and clean up CommandInput - Move RecentGroup data fetching to useRecentCommandsData hook - Move remove-recent shortcut registration/handling to use-recent-commands hooks - Inline useRemoveRecentShortcut into CommandInput (no need for separate component) - Remove redundant isOpen prop from CommandInput (only mounts when open) - Fix useSelect warning by returning stable references from selectors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * remove redudant prop * Clean up recent commands: remove unused isOpen prop, simplify data hook, fix useSelect warning Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Simplify recent commands — extract recordUsage, add loader collector, memoize recentSet - Extract recordUsage as a plain function using dispatch() directly - Add useLoaderCollector hook for resolving loader commands in RecentGroup - Memoize recentSet with useMemo, use EMPTY_SET constant for early return - Add cleanup effect in useLoaderCollector to evict stale entries on unmount - Remove unused useRecentCommandsData, useRemoveRecentShortcut exports - Remove filterNames/sortOrder props from CommandMenuLoader and CommandList - Use Map-based O(1) lookups instead of .find() for command resolution Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Make setLoaderLoading and isLoading private APIs These APIs are internal implementation details for tracking loader states and should not be part of the public store interface. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Pass search="" to SuggestionsGroup loaders Contextual loaders in SuggestionsGroup received search={undefined} instead of search="" because the prop wasn't forwarded to CommandList. This caused loader hooks to malfunction on first open since they received { search: undefined } instead of { search: '' }. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Use adaptive height for command palette list Change the command list from a fixed height to max-height so the palette hugs its content when there are few or no suggestions, while still capping at the maximum when there are many items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Tests: Add e2e tests for command palette sections Cover the three section states: Suggestions visible on open with contextual commands, Results appearing during search, and Recent commands showing after using a command. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Make consistent padding for groups Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
… functionality (#75691) * Commands: Display category labels and enforce category icons Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Refine command palette styles - Use overflow: clip on modal content to prevent programmatic scrolling - Add gap in header layout - Adjust input line-height to 24px - Hide scrollbar on the command list - Conditionally show border and padding only when commands are present - Add scroll padding for smoother keyboard navigation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * restore scrollbar * Commands: Add section headings for suggestions and search results Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Widen command palette and set fixed list height Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Add recently used section to command palette Track command usage via @wordpress/preferences and display a "Recent" section at the top of the palette when no search is active. Refactor command item rendering into a shared CommandItem component and move section headings into their respective groups so they only appear when content exists. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Add sections to command palette (favorites, recently used, suggestions) Add organizational sections to the command palette including Favorites, Recently Used, and Suggestions sections. Implement a keyboard shortcut (Shift+Ctrl+D) to toggle favorite status for the currently selected command. Extract command item rendering into a reusable CommandItem component to support per-section value prefixes and avoid cmdk value collisions. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * add changelog * use proper font weight * Commands: Remove favorites functionality from command palette Pull out all favorites-related code to be added in a separate PR: - FavoritesGroup component - FavoriteShortcutHandler component - useSelectedCommandName hook - CommandNameContext - toggleFavorite callback and shortcut registration Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * Commands: Refine command palette styles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * update lock * Commands: Add remove from recent and refine palette item styles Add Shift+Backspace shortcut to remove items from the recently used list. Reduce item visual height to 32px with 4px padding for 40px click target, and reduce input height by 8px. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor to use cmdK group component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Simplify command palette with context and fix recent sort order Refactor command-menu.js to reduce prop drilling by introducing a CommandPaletteContext, extract reusable hooks (useRecentCommands, useCommandPalette), and fix loader-based commands not respecting recency order in the Recent section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Save 15 recent items, display 5, limit loaders to display set Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Revert whitespace changes in base-styles/_variables.scss Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Refactor the main command menu file to be smaller and remove context provider Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * align palette with modal more * Commands: Move recent commands logic to hook and clean up CommandInput - Move RecentGroup data fetching to useRecentCommandsData hook - Move remove-recent shortcut registration/handling to use-recent-commands hooks - Inline useRemoveRecentShortcut into CommandInput (no need for separate component) - Remove redundant isOpen prop from CommandInput (only mounts when open) - Fix useSelect warning by returning stable references from selectors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * remove redudant prop * Clean up recent commands: remove unused isOpen prop, simplify data hook, fix useSelect warning Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Simplify recent commands — extract recordUsage, add loader collector, memoize recentSet - Extract recordUsage as a plain function using dispatch() directly - Add useLoaderCollector hook for resolving loader commands in RecentGroup - Memoize recentSet with useMemo, use EMPTY_SET constant for early return - Add cleanup effect in useLoaderCollector to evict stale entries on unmount - Remove unused useRecentCommandsData, useRemoveRecentShortcut exports - Remove filterNames/sortOrder props from CommandMenuLoader and CommandList - Use Map-based O(1) lookups instead of .find() for command resolution Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Make setLoaderLoading and isLoading private APIs These APIs are internal implementation details for tracking loader states and should not be part of the public store interface. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Pass search="" to SuggestionsGroup loaders Contextual loaders in SuggestionsGroup received search={undefined} instead of search="" because the prop wasn't forwarded to CommandList. This caused loader hooks to malfunction on first open since they received { search: undefined } instead of { search: '' }. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Commands: Use adaptive height for command palette list Change the command list from a fixed height to max-height so the palette hugs its content when there are few or no suggestions, while still capping at the maximum when there are many items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Tests: Add e2e tests for command palette sections Cover the three section states: Suggestions visible on open with contextual commands, Results appearing during search, and Recent commands showing after using a command. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Make consistent padding for groups Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
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
6 participants
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.
Part of #75616
Adds section to command palette (
Favorites, recent, suggestions, results) to better setup the command list, withfavorites andrecent being saved to user preferences.Also expands the command palette width to 512px (modal medium) and a forced height.
Adding items to favorite is currently hidden (not documented yet) and can be done using shift+cmd+D.Testing Instructions
favorite andrecent are shown, you should either see suggestions or noting.Results.Recent.6. Toggle an item to favorite with Shift+Cmd+D, make sure you can unfavorite it as well.