Add command palette trigger button to admin bar#75757
Merged
Conversation
t-hamano
added
[Type] Enhancement
t-hamano
commented
Feb 20, 2026
| return; | ||
| } | ||
|
|
||
| $is_apple_os = (bool) preg_match( '/Macintosh|Mac OS X|Mac_PowerPC/i', $_SERVER['HTTP_USER_AGENT'] ?? '' ); |
Contributor
Author
There was a problem hiding this comment.
This might be the most difficult part.
By the way, PHP_OS_FAMILY cannot be used. This is because PHP_OS_FAMILY determines the OS of the machine on which PHP is running. For example, if a Windows user runs a local environment in WSL2, PHP_OS_FAMILY will be Darwin, not Windows. This is not the expected result.
Member
There was a problem hiding this comment.
If the decision is moved to JS, you can use navigator.platform for this.
Contributor
Author
There was a problem hiding this comment.
If we need the shortcut keys to be translatable, then we will need to check the device on the server side. If no translation is needed, then we can of course use your client-side approach. I'm not sure if they should be translatable or not 🤔
Member
There was a problem hiding this comment.
I don't think they need to be translated, but I'm not an expert on that. However, something to keep in mind is any scenario where page responses will be cached. If so, this would break the user agent sniffing.
This surely won't be happening in the admin, and the command palette isn't available on the frontend (yet?). But if it were available on the frontend, even so the admin bar isn't shown unless logged-in, although this is just a default. Nevertheless, it seems quite unlikely that the command palette would be served to unauthenticated users even then.
All that to say, it's probably safe for this to be server-rendered 😅
Contributor
Author
There was a problem hiding this comment.
I've tried dynamically rendering label text on the client side, but that can cause flashes when the page loads. Below is the behavior when simulating Slow 4G network in Chrome.
ba3c7da4d634d3f758dd54ecffc13502.mp4
Whether we translate shortcut keys or not, I think it's better to prepare label text on the server side.
|
Size Change: +129 B (0%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
sabernhardt
reviewed
Feb 20, 2026
| * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance. | ||
| */ | ||
| function gutenberg_admin_bar_command_palette_button( $wp_admin_bar ) { | ||
| if ( ! is_admin() ) { |
Contributor
There was a problem hiding this comment.
Suggested change
| if ( ! is_admin() ) { | |
| if ( ! is_admin() || ! has_action( 'admin_enqueue_scripts', 'wp_enqueue_command_palette_assets' ) ) { |
I did not find any examples that remove the action in GitHub code search, except for Gutenberg forks, but the hook is removable.
Contributor
Author
There was a problem hiding this comment.
I think the core hook has been deleted here. If we delete a hook, is it gutenberg_enqueue_command_palette_assets?
Contributor
There was a problem hiding this comment.
I meant that anyone could use
remove_action( 'admin_enqueue_scripts', 'wp_enqueue_command_palette_assets' );
Gutenberg specifically added that for compatibility, overriding it with the plugin's version, but someone might have a reason to disable the command palette.
Contributor
Author
There was a problem hiding this comment.
I understand your intention, but if we apply the proposed code as is, this PR will not work because we have already removed the wp_enqueue_command_palette_assets hook in the 6.9 compat code.
Also, I think there is very little checking done across the Gutenberg project to see if core hooks are removed. Maybe we can discuss this in another issue.
Co-authored-by: Stephen A. Bernhardt <sabernhardt@yahoo.com>
Co-authored-by: Stephen A. Bernhardt <sabernhardt@yahoo.com>
| array( | ||
| 'id' => 'command-palette', | ||
| 'title' => $title, | ||
| 'href' => '#', |
Member
There was a problem hiding this comment.
If the command palette is opened by keyboard shortcut only, having a clickable button that just jumps to # is a UX regression.
Contributor
Author
There was a problem hiding this comment.
This link actually triggers Command Palette, and because of the event.preventDefault(), there shouldn't be a jump.
Actually, qw should render a button element here, but as far as I know, there is no precedent for rendering a button element in the admin bar. Furthermore, some CSS adjustments would be required, so I deliberately used the a element to avoid that.
Contributor
There was a problem hiding this comment.
- Yes, a button would be more appropriate than a link.
- No, there is no precedent in core for a
buttonelement in the admin toolbar. The admin menu toggle for small screens used a link withhref="#"(wp_admin_bar_sidebar_toggle). - Yes, a button would require several CSS adjustments, including focus styles.
|
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. |
Contributor
|
Thanks for working on this! Looking at the discussion on the Trac ticket, it sounds like the direction has shifted toward something more like a search bar. That said, a full search bar in the toolbar raises concerns about overflow. As a lighter alternative, consider a search/magnifying glass icon instead of the keyboard shortcut text label. A couple of reasons:
The keyboard shortcut could still be communicated via a title attribute on the node, so users discover it on hover, keeping that discoverability without making it the visible label. Just a thought — curious what others think. |
Contributor
|
The admin toolbar already has a search icon (and form) on the front end. Within the admin area, that icon could be reworked to open the command palette. Also, we have removed title attributes. |
westonruter
reviewed
Feb 23, 2026
westonruter
reviewed
Feb 23, 2026
Co-authored-by: Weston Ruter <weston@ruter.net>
ellatrix
reviewed
Feb 26, 2026
backport-changelog/7.0/10985.md
Outdated
| @@ -0,0 +1,3 @@ | |||
| https://github.com/WordPress/wordpress-develop/pull/10985 | |||
Member
There was a problem hiding this comment.
This appears to be closed, do we need a new backport?
Contributor
Author
There was a problem hiding this comment.
Created a new backport: WordPress/wordpress-develop#11063
t-hamano
commented
Feb 26, 2026
packages/core-commands/src/index.js
Outdated
Comment on lines
+48
to
+63
| function attachAdminBarTrigger() { | ||
| const trigger = document.querySelector( ADMIN_BAR_TRIGGER_SELECTOR ); | ||
| if ( ! trigger ) { | ||
| return; | ||
| } | ||
| trigger.addEventListener( 'click', ( event ) => { | ||
| event.preventDefault(); | ||
| dispatch( commandsStore ).open(); | ||
| } ); | ||
| } | ||
|
|
||
| if ( document.readyState === 'loading' ) { | ||
| document.addEventListener( 'DOMContentLoaded', attachAdminBarTrigger ); | ||
| } else { | ||
| attachAdminBarTrigger(); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Technically, we could write the code to open the command palette on the server side. Which is better?
$wp_admin_bar->add_node(
array(
'id' => 'command-palette',
'title' => $title,
'href' => '#',
'meta' => array(
'class' => 'hide-if-no-js',
'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
),
)
);
Contributor
There was a problem hiding this comment.
I prefer the inline server-side version personally, it's collocated properly, the one thing I'd add to the code though is a check for presence of wp.data and wp.data.dispatch( "core/commands" ) because I'm not sure how you codify that this depends on the commands script.
Contributor
Author
There was a problem hiding this comment.
Addressed in 779b377. I've written it in a fairly traditional format to avoid errors.
Member
There was a problem hiding this comment.
IMO, wp.data.dispatch( "core/commands" ).open(); return false; is better because we want there to be errors instead of silently failing.
Contributor
Author
There was a problem hiding this comment.
I see, let's start with some simple code.
Contributor
|
This is working well, I prefer inline script over relying on an event handler registered later. There's also the question of design as Matt suggested a centered bar. I know it's harder but maybe good to explore in a separate to see what can be achieved at what complexity levels. |
Contributor
Author
t-hamano
added
the
No Core Sync Required
|
Flaky tests detected in 535b729. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23173387118
|
youknowriad
approved these changes
Mar 17, 2026
t-hamano
added
the
Backport to WP 7.0 Beta/RC
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Mar 17, 2026
* Add command palette trigger button to admin bar * Add temporary backport changelog * Includ hidden accessibility text Co-authored-by: Stephen A. Bernhardt <sabernhardt@yahoo.com> * Add hide-if-no-js class Co-authored-by: Stephen A. Bernhardt <sabernhardt@yahoo.com> * Update changelog * Add has_action check * Use kbd tag Co-authored-by: Weston Ruter <weston@ruter.net> * Add types Co-authored-by: Weston Ruter <weston@ruter.net> * Update changelog PR * Try inline server-side version * Simplify onClick event process * Add css for mobile --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: brandonpayton <bpayton@git.wordpress.org> Co-authored-by: sabernhardt <sabernhardt@git.wordpress.org> Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org> Co-authored-by: westonruter <westonruter@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: JosVelasco <josvelasco@git.wordpress.org>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: ef3be14 |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62063 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@62063 git-svn-id: http://core.svn.wordpress.org/trunk@61345 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
8 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.
What?
Addresses: https://core.trac.wordpress.org/ticket/64672
Adds a trigger button to launch the command palette.
Testing Instructions
You should be able to launch the command palette from a button in the admin bar.
Screenshots or screencast
Windows
Mac
Note that my development environment is Windows OS, and the screenshots below were taken after modifying the code. The font will probably be different on an actual Mac.