Command Palette: Fix macOs label for sites unable to determine UA via PHP

backport-changelog/7.0/11636.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11636
+
+* https://github.com/WordPress/gutenberg/pull/77638

lib/compat/wordpress-7.0/command-palette.php

@@ -9,16 +9,39 @@ function gutenberg_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ):
 		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' ),
+	);
+	$is_apple_os     = (bool) preg_match( '/Macintosh|Mac OS X|Mac_PowerPC/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'
+		( appleOSLabel ) => {
+			if ( navigator.platform.startsWith("Mac") || navigator.platform === "iPhone" || navigator.platform === "iPad" ) {
+				document.querySelector( '#wp-admin-bar-command-palette .ab-label kbd' ).textContent = appleOSLabel;
+			}
+		}
+	JS;
+	$script   = sprintf(
+		'( %s )( %s );',
+		$function,
+		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',
@@ -27,6 +50,7 @@ function gutenberg_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ):
 			'meta'  => array(
 				'class'   => 'hide-if-no-js',
 				'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
+				'html'    => wp_get_inline_script_tag( $script ),
 			),
 		)
 	);