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
*/