From 9ac1e703e6283ced482f30f874e3d4db2ac5becc Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Mon, 2 Mar 2026 19:40:13 +0900 Subject: [PATCH] Add command palette trigger button to admin bar (Left-aligned search bar version) --- src/wp-admin/css/colors/_admin.scss | 7 +++- src/wp-admin/css/colors/modern/colors.scss | 5 +++ src/wp-includes/admin-bar.php | 39 ++++++++++++++++++++++ src/wp-includes/class-wp-admin-bar.php | 3 ++ src/wp-includes/css/admin-bar.css | 30 +++++++++++++++++ 5 files changed, 83 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 5d9bcb3f7bb89..477d683cad556 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -500,6 +500,11 @@ ul#adminmenu > li.current > a.current:after { color: variables.$menu-icon; } +/* Admin Bar: Command Palette */ + +#wpadminbar #wp-admin-bar-command-palette .ab-item { + background: variables.$menu-submenu-background; +} /* Admin Bar: search */ @@ -661,7 +666,7 @@ div#wp-responsive-toggle a:before { } .wp-responsive-open div#wp-responsive-toggle a { - // ToDo: make inset border + // ToDo: make inset border; border-color: transparent; background: variables.$menu-highlight-background; } diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss index 45c750c0f583a..5b5f62696af05 100644 --- a/src/wp-admin/css/colors/modern/colors.scss +++ b/src/wp-admin/css/colors/modern/colors.scss @@ -14,3 +14,8 @@ $highlight-color: #3858e9; $custom-welcome-panel: "false" ); + +// Override the command palette background color for this scheme +#wpadminbar #wp-admin-bar-command-palette .ab-item { + background: #3c434a; +} diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php index 9fc3c2b46b348..282f223f2965f 100644 --- a/src/wp-includes/admin-bar.php +++ b/src/wp-includes/admin-bar.php @@ -934,6 +934,45 @@ function wp_admin_bar_edit_menu( $wp_admin_bar ) { } } +/** + * Adds the command palette trigger button. + * + * Displays a button in the admin bar that shows the keyboard shortcut + * for opening the command palette. + * + * @since 7.0.0 + * + * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance. + */ +function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void { + if ( ! is_admin() ) { + return; + } + + $is_apple_os = (bool) preg_match( '/Macintosh|Mac OS X|Mac_PowerPC/i', $_SERVER['HTTP_USER_AGENT'] ?? '' ); + $shortcut_label = $is_apple_os + ? _x( '⌘K', 'keyboard shortcut to open the command palette' ) + : _x( 'Ctrl+K', 'keyboard shortcut to open the command palette' ); + $icon = ''; + $title = sprintf( + '%s %s', + $shortcut_label, + /* translators: Hidden accessibility text. */ + __( 'Open command palette' ), + ); + $wp_admin_bar->add_node( + array( + 'id' => 'command-palette', + 'title' => $icon . $title, + 'href' => '#', + 'meta' => array( + 'class' => 'hide-if-no-js', + 'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;', + ), + ) + ); +} + /** * Adds "Add New" menu. * diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php index dfebbb20e4c86..0c6ab15553bb2 100644 --- a/src/wp-includes/class-wp-admin-bar.php +++ b/src/wp-includes/class-wp-admin-bar.php @@ -661,6 +661,9 @@ public function add_menus() { add_action( 'admin_bar_menu', 'wp_admin_bar_customize_menu', 40 ); add_action( 'admin_bar_menu', 'wp_admin_bar_updates_menu', 50 ); + // Command palette. + add_action( 'admin_bar_menu', 'wp_admin_bar_command_palette_menu', 55 ); + // Content-related. if ( ! is_network_admin() && ! is_user_admin() ) { add_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 60 ); diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 5ccc76177188c..1e457d66f967d 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -629,6 +629,36 @@ html:lang(he-il) .rtl #wpadminbar * { } } +/** + * Command Palette + */ +#wpadminbar #wp-admin-bar-command-palette { + padding: 4px 0; +} + +#wpadminbar #wp-admin-bar-command-palette .ab-item { + width: 200px; + background: #757575; + height: 24px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 2px; +} + +#wpadminbar #wp-admin-bar-command-palette .ab-label kbd { + background: transparent; +} + +#wpadminbar #wp-admin-bar-command-palette .ab-icon { + transform: scaleX(-1); +} + +#wpadminbar #wp-admin-bar-command-palette .ab-icon:before { + content: "\f179"; + content: "\f179" / ''; +} + /** * Search */