Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactivity Router: Update for latest package changes #7447

Closed
wants to merge 3 commits into from
+47 −25
Closed

Interactivity Router: Update for latest package changes #7447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1217100
Revert "Revert [59097] because it was renaming a public method that s…
sirreal Sep 27, 2024
76f506f
Restore print_router_loading_and_screen_reader_markup method
sirreal Sep 27, 2024
e09839e
Call the new `print_router_markup` method in the deprecated `print_ro…
michalczaplinski Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 46 additions & 20 deletions src/wp-includes/interactivity-api/class-wp-interactivity-api.php
View file
Open in desktop
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,34 @@ private function get_router_animation_styles(): string {
}

/**
* Outputs the markup for the top loading indicator and the screen reader
* notifications during client-side navigations.
*
* 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.
* Deprecated.
*
* @since 6.5.0
* @deprecated 6.7.0 Use {@see WP_Interactivity_API::print_router_markup} instead.
*/
public function print_router_loading_and_screen_reader_markup() {
_deprecated_function( __METHOD__, '6.7.0', 'WP_Interactivity_API::print_router_markup' );

// Call the new method.
$this->print_router_markup();
}
Comment on lines +1004 to +1007
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we need to call the "new" method here. I've just added it in e09839e


/**
* Outputs markup for the @wordpress/interactivity-router script module.
*
* This method prints a div element representing a loading bar visible during
* navigation.
*
* @since 6.7.0
*/
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 +1042,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 +1061,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
Open in desktop
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 ) );
}
}
Loading