From 9886c3de3df821bcbf48cbba87cefeb96ceec46c Mon Sep 17 00:00:00 2001
From: ella <ella@automattic.com>
Date: Thu, 5 Mar 2026 09:48:44 +0200
Subject: [PATCH 1/6] Command Palette: Make admin bar trigger a native group
 element

Instead of adding the command palette as a regular node in
root-default, register it as its own group under root. This makes
it a sibling `<ul>` to root-default and top-secondary, allowing
flexbox centering on `.quicklinks` without being constrained to
the `<li>` node structure.

- Add `command-palette` as a group with `add_group()`, place the
  trigger node inside it as `command-palette-trigger`
- Convert `.quicklinks` to `display: flex` for layout control
- Both side groups use `flex: 1 1 0; min-width: fit-content` so
  they share equal space but never shrink their content
- Command palette group uses `flex: 0 0 auto` to sit centered
  between them naturally

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/wp-admin/css/colors/_admin.scss        |  5 ++
 src/wp-admin/css/colors/modern/colors.scss |  5 ++
 src/wp-includes/admin-bar.php              | 20 +++++--
 src/wp-includes/css/admin-bar.css          | 68 ++++++++++++++++------
 4 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 313666e3ded73..1398c807c5322 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -485,6 +485,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 */
 
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 41b01c3c5cc68..70e743c3df44e 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -974,7 +974,7 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 			if ( ! ( new RegExp( applePattern, 'i' ) ).test( navigator.userAgent ) ) {
 				return;
 			}
-			const kbd = document.querySelector( '#wp-admin-bar-command-palette .ab-label kbd' );
+			const kbd = document.querySelector( '#wp-admin-bar-command-palette-trigger .ab-label kbd' );
 			if ( kbd ) {
 				kbd.textContent = appleOSLabel;
 			}
@@ -987,13 +987,21 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 		wp_json_encode( $shortcut_labels['appleOS'], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
 	);
 	$script  .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
+	$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(
-			'id'    => 'command-palette',
-			'title' => $title,
-			'href'  => '#',
-			'meta'  => array(
-				'class'   => 'hide-if-no-js',
+			'parent' => 'command-palette',
+			'id'     => 'command-palette-trigger',
+			'title'  => $title,
+			'href'   => '#',
+			'meta'   => array(
 				'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
 				'html'    => wp_get_inline_script_tag( $script ),
 			),
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 2331aeafd4b3c..312ef4ac601d4 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,
@@ -625,6 +639,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
  */
@@ -694,19 +739,6 @@ html:lang(he-il) .rtl #wpadminbar * {
 	display: none;
 }
 
-/**
- * Command Palette
- */
-#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
-	content: "\f179";
-	content: "\f179" / '';
-	top: 3px;
-}
-
-#wpadminbar #wp-admin-bar-command-palette kbd {
-	background: transparent;
-}
-
 /**
  * Customize support classes
  */
@@ -906,7 +938,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	#wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
 	#wpadminbar #wp-admin-bar-customize > .ab-item:before,
 	#wpadminbar #wp-admin-bar-my-account > .ab-item:before,
-	#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
+	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
 		display: block;
 		text-indent: 0;
 		font: normal 32px/1 dashicons;
@@ -951,12 +983,12 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 	/* Comments and Command Palette */
 	#wpadminbar #wp-admin-bar-comments .ab-icon,
-	#wpadminbar #wp-admin-bar-command-palette .ab-icon {
+	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
 		margin: 0;
 	}
 
 	#wpadminbar #wp-admin-bar-comments .ab-icon:before,
-	#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
+	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
 		display: block;
 		font-size: 34px;
 		height: 46px;
@@ -1026,7 +1058,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	#wpadminbar li#wp-admin-bar-edit,
 	#wpadminbar li#wp-admin-bar-comments,
 	#wpadminbar li#wp-admin-bar-my-account,
-	#wpadminbar li#wp-admin-bar-command-palette {
+	#wpadminbar li#wp-admin-bar-command-palette-trigger {
 		display: block;
 	}
 
@@ -1058,7 +1090,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	#wpadminbar #wp-admin-bar-new-content,
 	#wpadminbar #wp-admin-bar-edit,
 	#wpadminbar #wp-admin-bar-my-account,
-	#wpadminbar #wp-admin-bar-command-palette {
+	#wpadminbar #wp-admin-bar-command-palette-trigger {
 		position: static;
 	}
 

From b64d8fc01fa8ca04c8239f1104328a39e6b7a10f Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Mon, 11 May 2026 12:45:48 +0700
Subject: [PATCH 2/6] Fix styles for mobile viewport

---
 src/wp-includes/css/admin-bar.css | 33 ++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 312ef4ac601d4..993766d23b267 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -937,8 +937,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	#wpadminbar #wp-admin-bar-site-name > .ab-item:before,
 	#wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
 	#wpadminbar #wp-admin-bar-customize > .ab-item:before,
-	#wpadminbar #wp-admin-bar-my-account > .ab-item:before,
-	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
+	#wpadminbar #wp-admin-bar-my-account > .ab-item:before {
 		display: block;
 		text-indent: 0;
 		font: normal 32px/1 dashicons;
@@ -981,14 +980,12 @@ html:lang(he-il) .rtl #wpadminbar * {
 		top: 3px;
 	}
 
-	/* Comments and Command Palette */
-	#wpadminbar #wp-admin-bar-comments .ab-icon,
-	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+	/* Comments */
+	#wpadminbar #wp-admin-bar-comments .ab-icon {
 		margin: 0;
 	}
 
-	#wpadminbar #wp-admin-bar-comments .ab-icon:before,
-	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
+	#wpadminbar #wp-admin-bar-comments .ab-icon:before {
 		display: block;
 		font-size: 34px;
 		height: 46px;
@@ -996,6 +993,28 @@ html:lang(he-il) .rtl #wpadminbar * {
 		top: 0;
 	}
 
+	/* Command Palette */
+	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
+		width: auto;
+		height: 32px;
+		padding: 0 2px;
+		margin-right: 4px;
+		border-radius: 4px;
+	}
+
+	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+		font: 30px/1 dashicons !important;
+		width: auto;
+		height: auto;
+		margin-right: 0;
+		padding: 4px 0;
+		text-align: center;
+	}
+
+	#wpadminbar .ab-top-secondary {
+		flex: 0 0 auto;
+	}
+
 	/* My Account */
 	#wpadminbar #wp-admin-bar-my-account > a {
 		position: relative;

From 8065a86ad8ad3b19df44bd782984aec99a06e5e5 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Mon, 11 May 2026 17:27:04 +0700
Subject: [PATCH 3/6] Update background color to -submenu-background-alt

---
 src/wp-admin/css/colors/_admin.scss        | 19 +++++++++++++++++--
 src/wp-admin/css/colors/modern/colors.scss |  5 -----
 src/wp-includes/css/admin-bar.css          | 17 ++++++++++++++++-
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 1398c807c5322..6f2465f094a1c 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -485,12 +485,27 @@ ul#adminmenu > li.current > a.current:after {
 	color: variables.$menu-icon;
 }
 
-/* Admin Bar: Command Palette */
+/* Admin Bar: command palette */
 
-#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger .ab-item {
+	background: variables.$menu-submenu-background-alt;
+}
+
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover .ab-item,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus-visible {
 	background: variables.$menu-submenu-background;
 }
 
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover .ab-icon:before,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus .ab-icon:before {
+	color: variables.$menu-icon;
+}
+
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover span.ab-label,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus span.ab-label {
+	color: variables.$menu-text;
+}
+
 /* Admin Bar: search */
 
 #wpadminbar #adminbarsearch:before {
diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss
index 492b1c3642d0c..45c750c0f583a 100644
--- a/src/wp-admin/css/colors/modern/colors.scss
+++ b/src/wp-admin/css/colors/modern/colors.scss
@@ -14,8 +14,3 @@ $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/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 993766d23b267..6cdbc80c77976 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -649,7 +649,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 #wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
 	width: 200px;
-	background: #757575;
+	background: #3c434a;
 	height: 24px;
 	display: flex;
 	justify-content: space-between;
@@ -670,6 +670,21 @@ html:lang(he-il) .rtl #wpadminbar * {
 	content: "\f179" / '';
 }
 
+#wpadminbar #wp-admin-bar-command-palette-trigger:hover .ab-item,
+#wpadminbar #wp-admin-bar-command-palette-trigger > .ab-item:focus-visible {
+	background: #2c3338;
+}
+
+#wpadminbar #wp-admin-bar-command-palette-trigger:hover .ab-icon:before,
+#wpadminbar #wp-admin-bar-command-palette-trigger > .ab-item:focus .ab-icon:before {
+	color: rgba(240, 246, 252, 0.6);
+}
+
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover span.ab-label,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus span.ab-label {
+	color: #f0f0f1;
+}
+
 /**
  * Search
  */

From a4317dc6885081ecf9e7b96cd07a657576c2e951 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Mon, 11 May 2026 18:45:42 +0700
Subject: [PATCH 4/6] Make the command palette shrinkable on crowded admin bar

---
 src/wp-includes/css/admin-bar.css | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 6cdbc80c77976..3e48e0e612e4a 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -643,12 +643,18 @@ html:lang(he-il) .rtl #wpadminbar * {
  * Command Palette
  */
 #wpadminbar .ab-command-palette {
-	flex: 0 0 auto;
+	flex: 0 1 200px;
+	min-width: fit-content;
 	padding: 4px 0;
 }
 
+#wpadminbar .ab-command-palette > #wp-admin-bar-command-palette-trigger {
+	width: 100%;
+}
+
 #wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
-	width: 200px;
+	width: 100%;
+	box-sizing: border-box;
 	background: #3c434a;
 	height: 24px;
 	display: flex;
@@ -1009,6 +1015,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 	}
 
 	/* Command Palette */
+	#wpadminbar .ab-command-palette {
+		flex: 0 0 auto;
+	}
+
 	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
 		width: auto;
 		height: 32px;

From 4c82dcae02aca48b5ab7144a77dfa21ec4b94884 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Mon, 11 May 2026 19:02:48 +0700
Subject: [PATCH 5/6] Make command palette overlay to cover the trigger node

---
 src/wp-includes/css/admin-bar.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 3e48e0e612e4a..c4eda52da97ba 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -691,6 +691,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 	color: #f0f0f1;
 }
 
+body .commands-command-menu {
+	top: 4px;
+}
+
 /**
  * Search
  */

From dd618498729aabc7d2e96359d82515007bec333e Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Tue, 12 May 2026 17:33:11 +0700
Subject: [PATCH 6/6] Rename ids to be consistent with upcoming search

---
 src/wp-admin/css/colors/_admin.scss | 14 +++++++-------
 src/wp-includes/admin-bar.php       |  8 ++++----
 src/wp-includes/css/admin-bar.css   | 30 ++++++++++++++---------------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 6f2465f094a1c..2724e8c8b6ba7 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -487,22 +487,22 @@ ul#adminmenu > li.current > a.current:after {
 
 /* Admin Bar: command palette */
 
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger .ab-item {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette .ab-item {
 	background: variables.$menu-submenu-background-alt;
 }
 
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover .ab-item,
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus-visible {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover .ab-item,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus-visible {
 	background: variables.$menu-submenu-background;
 }
 
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover .ab-icon:before,
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus .ab-icon:before {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover .ab-icon:before,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus .ab-icon:before {
 	color: variables.$menu-icon;
 }
 
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover span.ab-label,
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus span.ab-label {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover span.ab-label,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus span.ab-label {
 	color: variables.$menu-text;
 }
 
diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index 70e743c3df44e..2dbeae37511bb 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -974,7 +974,7 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 			if ( ! ( new RegExp( applePattern, 'i' ) ).test( navigator.userAgent ) ) {
 				return;
 			}
-			const kbd = document.querySelector( '#wp-admin-bar-command-palette-trigger .ab-label kbd' );
+			const kbd = document.querySelector( '#wp-admin-bar-command-palette .ab-label kbd' );
 			if ( kbd ) {
 				kbd.textContent = appleOSLabel;
 			}
@@ -989,7 +989,7 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 	$script  .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
 	$wp_admin_bar->add_group(
 		array(
-			'id'   => 'command-palette',
+			'id'   => 'command-palette-group',
 			'meta' => array(
 				'class' => 'ab-command-palette hide-if-no-js',
 			),
@@ -997,8 +997,8 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 	);
 	$wp_admin_bar->add_node(
 		array(
-			'parent' => 'command-palette',
-			'id'     => 'command-palette-trigger',
+			'parent' => 'command-palette-group',
+			'id'     => 'command-palette',
 			'title'  => $title,
 			'href'   => '#',
 			'meta'   => array(
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index c4eda52da97ba..3ff383e8ac1e4 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -648,11 +648,11 @@ html:lang(he-il) .rtl #wpadminbar * {
 	padding: 4px 0;
 }
 
-#wpadminbar .ab-command-palette > #wp-admin-bar-command-palette-trigger {
+#wpadminbar .ab-command-palette > #wp-admin-bar-command-palette {
 	width: 100%;
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
+#wpadminbar #wp-admin-bar-command-palette .ab-item {
 	width: 100%;
 	box-sizing: border-box;
 	background: #3c434a;
@@ -663,31 +663,31 @@ html:lang(he-il) .rtl #wpadminbar * {
 	border-radius: 2px;
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger .ab-label kbd {
+#wpadminbar #wp-admin-bar-command-palette .ab-label kbd {
 	background: transparent;
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+#wpadminbar #wp-admin-bar-command-palette .ab-icon {
 	transform: scaleX(-1);
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
+#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
 	content: "\f179";
 	content: "\f179" / '';
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger:hover .ab-item,
-#wpadminbar #wp-admin-bar-command-palette-trigger > .ab-item:focus-visible {
+#wpadminbar #wp-admin-bar-command-palette:hover .ab-item,
+#wpadminbar #wp-admin-bar-command-palette > .ab-item:focus-visible {
 	background: #2c3338;
 }
 
-#wpadminbar #wp-admin-bar-command-palette-trigger:hover .ab-icon:before,
-#wpadminbar #wp-admin-bar-command-palette-trigger > .ab-item:focus .ab-icon:before {
+#wpadminbar #wp-admin-bar-command-palette:hover .ab-icon:before,
+#wpadminbar #wp-admin-bar-command-palette > .ab-item:focus .ab-icon:before {
 	color: rgba(240, 246, 252, 0.6);
 }
 
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger:hover span.ab-label,
-#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette-trigger > .ab-item:focus span.ab-label {
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover span.ab-label,
+#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus span.ab-label {
 	color: #f0f0f1;
 }
 
@@ -1023,7 +1023,7 @@ body .commands-command-menu {
 		flex: 0 0 auto;
 	}
 
-	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
+	#wpadminbar #wp-admin-bar-command-palette .ab-item {
 		width: auto;
 		height: 32px;
 		padding: 0 2px;
@@ -1031,7 +1031,7 @@ body .commands-command-menu {
 		border-radius: 4px;
 	}
 
-	#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
+	#wpadminbar #wp-admin-bar-command-palette .ab-icon {
 		font: 30px/1 dashicons !important;
 		width: auto;
 		height: auto;
@@ -1106,7 +1106,7 @@ body .commands-command-menu {
 	#wpadminbar li#wp-admin-bar-edit,
 	#wpadminbar li#wp-admin-bar-comments,
 	#wpadminbar li#wp-admin-bar-my-account,
-	#wpadminbar li#wp-admin-bar-command-palette-trigger {
+	#wpadminbar li#wp-admin-bar-command-palette {
 		display: block;
 	}
 
@@ -1138,7 +1138,7 @@ body .commands-command-menu {
 	#wpadminbar #wp-admin-bar-new-content,
 	#wpadminbar #wp-admin-bar-edit,
 	#wpadminbar #wp-admin-bar-my-account,
-	#wpadminbar #wp-admin-bar-command-palette-trigger {
+	#wpadminbar #wp-admin-bar-command-palette {
 		position: static;
 	}