From 415692284689ee95274f998b5a6c57e1900c118c Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 6 Sep 2024 18:17:04 +0200
Subject: [PATCH] Load translated strings using script module data passing

---
 lib/interactivity-api.php                  | 18 +++++++++++++-
 packages/interactivity-router/src/index.ts | 29 ++++++++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php
index 6f04a3ba8fc927..e0e54c7bc1f018 100644
--- a/lib/interactivity-api.php
+++ b/lib/interactivity-api.php
@@ -28,5 +28,21 @@ function gutenberg_reregister_interactivity_script_modules() {
 		$default_version
 	);
 }
-
 add_action( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+
+function gutenberg_register_interactivity_script_module_data_hooks() {
+		if ( ! has_filter( 'script_module_data_@wordpress/interactivity-router', array( wp_interactivity(), 'filter_script_module_interactivity_router_data' ) ) ) {
+			add_filter(
+				'script_module_data_@wordpress/interactivity-router',
+				function ( $data ) {
+					if ( ! isset( $data['i18n'] ) ) {
+						$data['i18n'] = array();
+					}
+					$data['i18n']['loading'] = __( 'Loading page, please wait.', 'gutenberg' );
+					$data['i18n']['loaded']  = __( 'Page Loaded.', 'gutenberg' );
+					return $data;
+				}
+			);
+		}
+}
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index c6e1087b038a55..fa4b0a8ff57e32 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -209,16 +209,31 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
+const navigationTexts = {
+	loading: 'Loading page, please wait.',
+	loaded: 'Page Loaded.',
+};
+try {
+	const content = document.getElementById(
+		'wp-script-module-data-@wordpress/interactivity-router'
+	)?.textContent;
+	if ( content ) {
+		const parsed = JSON.parse( content );
+		if ( typeof parsed?.i18n?.loading === 'string' ) {
+			navigationTexts.loading = parsed.i18n.loading;
+		}
+		if ( typeof parsed?.i18n?.loaded === 'string' ) {
+			navigationTexts.loaded = parsed.i18n.loaded;
+		}
+	}
+} catch {}
+
 export const { state, actions } = store( 'core/router', {
 	state: {
 		url: window.location.href,
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			texts: {
-				loading: '',
-				loaded: '',
-			},
 			message: '',
 		},
 	},
@@ -275,7 +290,7 @@ export const { state, actions } = store( 'core/router', {
 					navigation.hasFinished = false;
 				}
 				if ( screenReaderAnnouncement ) {
-					navigation.message = navigation.texts.loading;
+					navigation.message = navigationTexts.loading;
 				}
 			}, 400 );
 
@@ -319,8 +334,8 @@ export const { state, actions } = store( 'core/router', {
 					// same, we use a no-break space similar to the @wordpress/a11y
 					// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
 					navigation.message =
-						navigation.texts.loaded +
-						( navigation.message === navigation.texts.loaded
+						navigationTexts.loaded +
+						( navigation.message === navigationTexts.loaded
 							? '\u00A0'
 							: '' );
 				}