Add command palette trigger button to admin bar (Left-aligned search bar version)

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;
 }

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;
+}

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           = '<span class="ab-icon" aria-hidden="true"></span>';
+	$title          = sprintf(
+		'<span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
+		$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.
  *

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 );

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