Changeset 61979

Timestamp:

03/12/2026 05:23:14 AM (7 months ago)

Author:

westonruter

Message:

Toolbar: Show command palette admin bar item on mobile.

• The keyboard shortcut is hidden in favor of a search icon on mobile.
• The background color of the KBD element is made transparent on non-mobile.
• The admin bar item is skipped from being added if the wp-core-commands script is not enqueued.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/11222

Follow-up to r61912.

Props sabernhardt, westonruter, ellatrix, mukesh27.
See #64672.

Location:

trunk/src/wp-includes

Files:

• admin-bar.php (modified) (2 diffs)
• css/admin-bar.css (modified) (5 diffs)

trunk/src/wp-includes/admin-bar.php

@@ -946 +946 @@
  */
 function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
-        if ( ! is_admin() ) {
+        if ( ! is_admin() || ! wp_script_is( 'wp-core-commands', 'enqueued' ) ) {
                 return;
         }
@@ -955 +955 @@
                 : _x( 'Ctrl+K', 'keyboard shortcut to open the command palette' );
         $title          = sprintf(
-                '<span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
+                '<span class="ab-icon" aria-hidden="true"></span><span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
                 $shortcut_label,
                 /* translators: Hidden accessibility text. */

trunk/src/wp-includes/css/admin-bar.css

@@ -696 +696 @@
 
 /**
+ * Command Palette
+ */
+#wpadminbar #wp-admin-bar-command-palette .ab-icon {
+        display: none; /* Icon displayed only on mobile */
+}
+
+#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
+        content: "\f179";
+        content: "\f179" / '';
+}
+
+#wpadminbar #wp-admin-bar-command-palette kbd {
+        background: transparent;
+}
+
+/**
  * Customize support classes
  */
@@ -893 +909 @@
         #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-my-account > .ab-item:before,
+        #wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
                 display: block;
                 text-indent: 0;
@@ -936 +953 @@
         }
 
-        /* Comments */
-        #wpadminbar #wp-admin-bar-comments .ab-icon {
+        /* Comments and Command Palette */
+        #wpadminbar #wp-admin-bar-comments .ab-icon,
+        #wpadminbar #wp-admin-bar-command-palette .ab-icon {
                 margin: 0;
         }
 
-        #wpadminbar #wp-admin-bar-comments .ab-icon:before {
+        #wpadminbar #wp-admin-bar-command-palette .ab-icon {
+                display: block; /* Icon is only shown on mobile, while the keyboard shortcut is hidden */
+        }
+
+        #wpadminbar #wp-admin-bar-comments .ab-icon:before,
+        #wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
                 display: block;
                 font-size: 34px;
@@ -1010 +1033 @@
         #wpadminbar li#wp-admin-bar-edit,
         #wpadminbar li#wp-admin-bar-comments,
-        #wpadminbar li#wp-admin-bar-my-account {
+        #wpadminbar li#wp-admin-bar-my-account,
+        #wpadminbar li#wp-admin-bar-command-palette {
                 display: block;
         }
@@ -1041 +1065 @@
         #wpadminbar #wp-admin-bar-new-content,
         #wpadminbar #wp-admin-bar-edit,
-        #wpadminbar #wp-admin-bar-my-account {
+        #wpadminbar #wp-admin-bar-my-account,
+        #wpadminbar #wp-admin-bar-command-palette {
                 position: static;
         }