Skip to content

Commit

Permalink
Load translated strings using script module data passing
Browse files Browse the repository at this point in the history
  • Loading branch information
sirreal committed Sep 10, 2024
1 parent 672d078 commit df831db
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 10 deletions.
18 changes: 17 additions & 1 deletion lib/interactivity-api.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) ) ) {

Check failure on line 37 in lib/interactivity-api.php

View workflow job for this annotation

GitHub Actions / PHP coding standards

Line indented incorrectly; expected 1 tabs, found 2
add_filter(
'script_module_data_@wordpress/interactivity-router',
function ( $data ) {
if ( ! isset( $data['i18n'] ) ) {

Check failure on line 41 in lib/interactivity-api.php

View workflow job for this annotation

GitHub Actions / PHP coding standards

Line indented incorrectly; expected 4 tabs, found 5
$data['i18n'] = array();
}

Check failure on line 43 in lib/interactivity-api.php

View workflow job for this annotation

GitHub Actions / PHP coding standards

Line indented incorrectly; expected 4 tabs, found 5
$data['i18n']['loading'] = __( 'Loading page, please wait.', 'gutenberg' );
$data['i18n']['loaded'] = __( 'Page Loaded.', 'gutenberg' );
return $data;
}

Check failure on line 47 in lib/interactivity-api.php

View workflow job for this annotation

GitHub Actions / PHP coding standards

Line indented incorrectly; expected 3 tabs, found 4
);
}

Check failure on line 49 in lib/interactivity-api.php

View workflow job for this annotation

GitHub Actions / PHP coding standards

Line indented incorrectly; expected 1 tabs, found 2
}
add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
43 changes: 34 additions & 9 deletions packages/interactivity-router/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
},
},
Expand Down Expand Up @@ -275,7 +277,7 @@ export const { state, actions } = store( 'core/router', {
navigation.hasFinished = false;
}
if ( screenReaderAnnouncement ) {
a11yAnnounce( navigation.texts.loading );
a11yAnnounce( 'loading' );
}
}, 400 );

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 ),
Expand Down

0 comments on commit df831db

Please sign in to comment.