Changeset 59130

Timestamp:

09/30/2024 04:16:44 PM (2 years ago)

Author:

czapla

Message:

Interactivity API: Move interactivity-router i18n strings to Script Module 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.
• Deprecate the print_router_loading_and_screen_reader_markup() method.
• 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, gziolo.
See #60647.

Location:

trunk

Files:

• src/wp-includes/interactivity-api/class-wp-interactivity-api.php (modified) (6 diffs)
• tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-router-region.php (modified) (2 diffs)

trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php

@@ -201 +201 @@
 
         /**
+         * 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.
          *
@@ -297 +317 @@
         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' ) );
         }
 
@@ -974 +995 @@
 
         /**
-         * Outputs the markup for the top loading indicator and the screen reader
-         * notifications during client-side navigations.
+         * 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();
+        }
+
+        /**
+         * 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.
-         *
-         * @since 6.5.0
-         */
-        public function print_router_loading_and_screen_reader_markup() {
+         * navigation.
+         *
+         * @since 6.7.0
+         */
+        public function print_router_markup() {
                 echo <<<HTML
                         <div
@@ -991 +1023 @@
                                 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;
         }
@@ -1017 +1043 @@
                         $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(),
                                 )
                         );
@@ -1036 +1062 @@
 
                         // 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' ) );
                 }
         }

trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-router-region.php

@@ -103 +103 @@
          * @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>
@@ -126 +126 @@
                 $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 ) );
         }
 }