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.



git-svn-id: https://develop.svn.wordpress.org/trunk@62282 602fd350-edb4-49c9-b593-d223f7449a82

Author: peterwilsoncc

src/wp-includes/admin-bar.php

@@ -949,16 +949,40 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 		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' );
-	$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,
 		/* translators: Hidden accessibility text. */
 		__( '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(
 			'id'    => 'command-palette',
@@ -967,6 +991,7 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
 			'meta'  => array(
 				'class'   => 'hide-if-no-js',
 				'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
+				'html'    => wp_get_inline_script_tag( $script ),
 			),
 		)
 	);