Skip to content

Commit

Permalink
Interactivity API: Move interactivity-router i18n strings to Script M…
Browse files Browse the repository at this point in the history 
…odule data.

Moves the 'loading' and 'loaded' i18n strings for the `interactivity-router` to the script module data via the `script_module_data_@wordpress/interactivity-router` filter.

Key changes:

- Add the `filter_script_module_interactivity_router_data()` method, hooked into the `script_module_data_@wordpress/interactivity-router` filter, to set the `i18n` data with the 'loading' and 'loaded' messages.
- Rename the `print_router_loading_and_screen_reader_markup()` method to `print_router_markup()` and remove the screen reader markup from it because it's no longer needed.
- Remove the `loading` and `loaded` strings from the `core/router` store state because they're no longer needed.
- Initialize the `core/router` store with a minimal navigation object to prevent errors in the interactivity-router script module when the store is not properly initialized.
- Update corresponding unit tests to reflect these changes.

This change ensures that the `interactivity-router` i18n messages are localized in a single place and removes the need to initialize them in the `core/router` store state.

Props jonsurrell, swissspidy, czapla. 
See #60647.


git-svn-id: https://develop.svn.wordpress.org/trunk@59097 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@michalczaplinski
michalczaplinski committed Sep 26, 2024
1 parent 66afbbd commit ad1fabe
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 25 deletions.
53 changes: 33 additions & 20 deletions src/wp-includes/interactivity-api/class-wp-interactivity-api.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,26 @@ public function print_client_interactivity_data() {
_deprecated_function( __METHOD__, '6.7.0' );
}

/**
* Set client-side interactivity-router data.
*
* Once in the browser, the state will be parsed and used to hydrate the client-side
* interactivity stores and the configuration will be available using a `getConfig` utility.
*
* @since 6.7.0
*
* @param array $data Data to filter.
* @return array Data for the Interactivity Router script module.
*/
public function filter_script_module_interactivity_router_data( array $data ): array {
if ( ! isset( $data['i18n'] ) ) {
$data['i18n'] = array();
}
$data['i18n']['loading'] = __( 'Loading page, please wait.' );
$data['i18n']['loaded'] = __( 'Page Loaded.' );
return $data;
}

/**
* Set client-side interactivity data.
*
Expand Down Expand Up @@ -296,6 +316,7 @@ public function register_script_modules() {
*/
public function add_hooks() {
add_filter( 'script_module_data_@wordpress/interactivity', array( $this, 'filter_script_module_interactivity_data' ) );
add_filter( 'script_module_data_@wordpress/interactivity-router', array( $this, 'filter_script_module_interactivity_router_data' ) );
}

/**
Expand Down Expand Up @@ -973,29 +994,21 @@ private function get_router_animation_styles(): string {
}

/**
* Outputs the markup for the top loading indicator and the screen reader
* notifications during client-side navigations.
* Outputs markup for the @wordpress/interactivity-router script module.
*
* This method prints a div element representing a loading bar visible during
* navigation, as well as an aria-live region that can be read by screen
* readers to announce navigation status.
* navigation.
*
* @since 6.5.0
* @since 6.7.0
*/
public function print_router_loading_and_screen_reader_markup() {
public function print_router_markup() {
echo <<<HTML
<div
class="wp-interactivity-router-loading-bar"
data-wp-interactive="core/router"
data-wp-class--start-animation="state.navigation.hasStarted"
data-wp-class--finish-animation="state.navigation.hasFinished"
></div>
<div
class="screen-reader-text"
aria-live="polite"
data-wp-interactive="core/router"
data-wp-text="state.navigation.message"
></div>
HTML;
}

Expand All @@ -1016,16 +1029,16 @@ private function data_wp_router_region_processor( WP_Interactivity_API_Directive
if ( 'enter' === $mode && ! $this->has_processed_router_region ) {
$this->has_processed_router_region = true;

// Initialize the `core/router` store.
/*
* Initialize the `core/router` store.
* If the store is not initialized like this with minimal
* navigation object, the interactivity-router script module
* errors.
*/
$this->state(
'core/router',
array(
'navigation' => array(
'texts' => array(
'loading' => __( 'Loading page, please wait.' ),
'loaded' => __( 'Page Loaded.' ),
),
),
'navigation' => new stdClass(),
)
);

Expand All @@ -1035,7 +1048,7 @@ private function data_wp_router_region_processor( WP_Interactivity_API_Directive
wp_enqueue_style( 'wp-interactivity-router-animations' );

// Adds the necessary markup to the footer.
add_action( 'wp_footer', array( $this, 'print_router_loading_and_screen_reader_markup' ) );
add_action( 'wp_footer', array( $this, 'print_router_markup' ) );
}
}

Expand Down
6 changes: 1 addition & 5 deletions tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-router-region.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ public function test_wp_router_region_missing() {
*
* @covers ::process_directives
*/
public function test_wp_router_region_adds_loading_bar_aria_live_region_only_once() {
public function test_wp_router_region_adds_loading_bar_region_only_once() {
$html = '
<div data-wp-router-region="region A">Interactive region</div>
<div data-wp-router-region="region B">Another interactive region</div>
Expand All @@ -125,9 +125,5 @@ public function test_wp_router_region_adds_loading_bar_aria_live_region_only_onc
$p = new WP_HTML_Tag_Processor( $footer );
$this->assertTrue( $p->next_tag( $query ) );
$this->assertFalse( $p->next_tag( $query ) );
$query = array( 'class_name' => 'screen-reader-text' );
$p = new WP_HTML_Tag_Processor( $footer );
$this->assertTrue( $p->next_tag( $query ) );
$this->assertFalse( $p->next_tag( $query ) );
}
}

0 comments on commit ad1fabe

Please sign in to comment.