Changeset 62282 for trunk/src/wp-includes/admin-bar.php

Timestamp:

04/28/2026 11:57:38 PM (4 months 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 ),
                         ),
                 )