diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php index c1a835e3547c7b..c35e9516b1111d 100644 --- a/lib/interactivity-api.php +++ b/lib/interactivity-api.php @@ -31,5 +31,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 5574ee925b1dfe..f9bd401daae775 100644 --- a/packages/interactivity-router/src/index.ts +++ b/packages/interactivity-router/src/index.ts @@ -209,16 +209,18 @@ const isValidEvent = ( event: MouseEvent ) => // Variable to store the current navigation. let navigatingTo = ''; +const navigationTexts = { + loadedFromServer: false, + loading: 'Loading page, please wait.', + loaded: 'Page Loaded.', +}; + export const { state, actions } = store( 'core/router', { state: { url: window.location.href, navigation: { hasStarted: false, hasFinished: false, - texts: { - loading: '', - loaded: '', - }, message: '', }, }, @@ -275,7 +277,7 @@ export const { state, actions } = store( 'core/router', { navigation.hasFinished = false; } if ( screenReaderAnnouncement ) { - a11yAnnounce( navigation.texts.loading ); + a11yAnnounce( 'loading' ); } }, 400 ); @@ -315,7 +317,7 @@ export const { state, actions } = store( 'core/router', { } if ( screenReaderAnnouncement ) { - a11yAnnounce( navigation.texts.loaded ); + a11yAnnounce( 'loaded' ); } // Scroll to the anchor if exits in the link. @@ -362,10 +364,33 @@ export const { state, actions } = store( 'core/router', { * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing * the package on demand and should be used instead of calling `ally.speak` direacly. * - * @param message The message to be announced by assistive technologies. - * @param ariaLive The politeness level for aria-live; default: 'polite'. + * @param messageKey The message to be announced by assistive technologies. + * @param ariaLive The politeness level for aria-live; default: 'polite'. */ -function a11yAnnounce( message: string, ariaLive?: 'polite' | 'assertive' ) { +function a11yAnnounce( + messageKey: 'loading' | 'loaded', + ariaLive?: 'polite' | 'assertive' +) { + if ( ! navigationTexts.loadedFromServer ) { + navigationTexts.loadedFromServer = true; + const content = document.getElementById( + 'wp-script-module-data-@wordpress/interactivity-router' + )?.textContent; + if ( content ) { + try { + 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 {} + } + } + + const message = navigationTexts[ messageKey ]; + if ( globalThis.IS_GUTENBERG_PLUGIN ) { import( '@wordpress/a11y' ).then( ( { speak } ) => speak( message, ariaLive ),