diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 5d9bcb3f7bb89..fb8e0a460d63a 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-trigger .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..492b1c3642d0c 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-trigger .ab-item {
+ background: #3c434a;
+}
diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index 9fc3c2b46b348..ce95de79d77aa 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -934,6 +934,53 @@ 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_group(
+ array(
+ 'id' => 'command-palette',
+ 'meta' => array(
+ 'class' => 'ab-command-palette hide-if-no-js',
+ ),
+ )
+ );
+ $wp_admin_bar->add_node(
+ array(
+ 'parent' => 'command-palette',
+ 'id' => 'command-palette-trigger',
+ 'title' => $icon . $title,
+ 'href' => '#',
+ 'meta' => array(
+ '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..b2c032d9915cb 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -374,8 +374,22 @@ html:lang(he-il) .rtl #wpadminbar * {
color: #000;
}
+#wpadminbar .quicklinks {
+ display: flex;
+ align-items: center;
+}
+
+#wpadminbar #wp-admin-bar-root-default {
+ flex: 1 1 0;
+ min-width: fit-content;
+}
+
#wpadminbar .ab-top-secondary {
float: right;
+ flex: 1 1 0;
+ min-width: fit-content;
+ display: flex;
+ justify-content: flex-end;
}
#wpadminbar ul li:last-child,
@@ -629,6 +643,37 @@ html:lang(he-il) .rtl #wpadminbar * {
}
}
+/**
+ * Command Palette
+ */
+#wpadminbar .ab-command-palette {
+ flex: 0 0 auto;
+ padding: 4px 0;
+}
+
+#wpadminbar #wp-admin-bar-command-palette-trigger .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-trigger .ab-label kbd {
+ background: transparent;
+}
+
+#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+ transform: scaleX(-1);
+}
+
+#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
+ content: "\f179";
+ content: "\f179" / '';
+}
+
/**
* Search
*/