Changeset 62282

Timestamp:

04/28/2026 11:57:38 PM (7 weeks ago)

Author:

peterwilsoncc

Message:

Toolbar: Add JavaScript fallback for determining command palette icon.

Introduces a JavaScript fallback for determining whether the command palette icon in the toolbar should display ⌘Kfor Apple devices.

This is to account for sites behind a CDN as it's common for the User-Agent header to be stripped from the request sent to the application server in order to increase cache hits on the edge.

Props peterwilsoncc, westonruter, mukesh27, ramonopoly.
Fixes #65121.

File:

• trunk/src/wp-includes/admin-bar.php (modified) (3 diffs)

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

@@ -950 +950 @@
     }
 
-    $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' );
-    $title          = sprintf(
+    $shortcut_labels = array(
+        'appleOS' => _x( '⌘K', 'keyboard shortcut to open the command palette' ),
+        'default' => _x( 'Ctrl+K', 'keyboard shortcut to open the command palette' ),
+    );
+    $apple_pattern   = 'Macintosh|Mac OS X|Mac_PowerPC';
+    $is_apple_os     = (bool) preg_match( "/{$apple_pattern}/i", $_SERVER['HTTP_USER_AGENT'] ?? '' );
+    $shortcut_label  = $is_apple_os ? $shortcut_labels['appleOS'] : $shortcut_labels['default'];
+    $title           = sprintf(
         '<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,
@@ -960 +963 @@
         __( 'Open command palette' ),
     );
+    /*
+     * Detect Apple OS via JavaScript for sites behind a CDN blocking the UA header.
+     *
+     * Running the script as the admin bar is rendered avoids a flash of incorrect content
+     * for users with Apple OS when the UA header is blocked. It also prevents the need for
+     * wp-i18n to be loaded as a dependency.
+     */
+    $function = <<<'JS'
+        ( applePattern, appleOSLabel ) => {
+            if ( ( new RegExp( applePattern ) ).test( navigator.userAgent ) ) {
+                document.querySelector( '#wp-admin-bar-command-palette .ab-label kbd' ).textContent = appleOSLabel;
+            }
+        }
+    JS;
+    $script   = sprintf(
+        '( %s )( %s, %s );',
+        $function,
+        wp_json_encode( $apple_pattern, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),
+        wp_json_encode( $shortcut_labels['appleOS'], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
+    );
+    $script  .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     $wp_admin_bar->add_node(
         array(
@@ -968 +992 @@
                 'class'   => 'hide-if-no-js',
                 'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
+                'html'    => wp_get_inline_script_tag( $script ),
             ),
         )