WordPress.org
Get WordPress

Make WordPress Core

Changeset 59097


Ignore:
Timestamp:
09/26/2024 05:53:11 PM (7 months 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.
  • 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.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r59083 r59097  
    201201
    202202    /**
     203     * Set client-side interactivity-router data.
     204     *
     205     * Once in the browser, the state will be parsed and used to hydrate the client-side
     206     * interactivity stores and the configuration will be available using a `getConfig` utility.
     207     *
     208     * @since 6.7.0
     209     *
     210     * @param array $data Data to filter.
     211     * @return array Data for the Interactivity Router script module.
     212     */
     213    public function filter_script_module_interactivity_router_data( array $data ): array {
     214        if ( ! isset( $data['i18n'] ) ) {
     215            $data['i18n'] = array();
     216        }
     217        $data['i18n']['loading'] = __( 'Loading page, please wait.' );
     218        $data['i18n']['loaded']  = __( 'Page Loaded.' );
     219        return $data;
     220    }
     221
     222    /**
    203223     * Set client-side interactivity data.
    204224     *
    … …  
    297317    public function add_hooks() {
    298318        add_filter( 'script_module_data_@wordpress/interactivity', array( $this, 'filter_script_module_interactivity_data' ) );
     319        add_filter( 'script_module_data_@wordpress/interactivity-router', array( $this, 'filter_script_module_interactivity_router_data' ) );
    299320    }
    300321
    … …  
    974995
    975996    /**
    976      * Outputs the markup for the top loading indicator and the screen reader
    977      * notifications during client-side navigations.
     997     * Outputs markup for the @wordpress/interactivity-router script module.
    978998     *
    979999     * This method prints a div element representing a loading bar visible during
    980      * navigation, as well as an aria-live region that can be read by screen
    981      * readers to announce navigation status.
    982      *
    983      * @since 6.5.0
    984      */
    985     public function print_router_loading_and_screen_reader_markup() {
     1000     * navigation.
     1001     *
     1002     * @since 6.7.0
     1003     */
     1004    public function print_router_markup() {
    9861005        echo <<<HTML
    9871006            <div
    … …  
    9911010                data-wp-class--finish-animation="state.navigation.hasFinished"
    9921011            ></div>
    993             <div
    994                 class="screen-reader-text"
    995                 aria-live="polite"
    996                 data-wp-interactive="core/router"
    997                 data-wp-text="state.navigation.message"
    998             ></div>
    9991012HTML;
    10001013    }
    … …  
    10171030            $this->has_processed_router_region = true;
    10181031
    1019             // Initialize the `core/router` store.
     1032            /*
     1033             * Initialize the `core/router` store.
     1034             * If the store is not initialized like this with minimal
     1035             * navigation object, the interactivity-router script module
     1036             * errors.
     1037             */
    10201038            $this->state(
    10211039                'core/router',
    10221040                array(
    1023                     'navigation' => array(
    1024                         'texts' => array(
    1025                             'loading' => __( 'Loading page, please wait.' ),
    1026                             'loaded'  => __( 'Page Loaded.' ),
    1027                         ),
    1028                     ),
     1041                    'navigation' => new stdClass(),
    10291042                )
    10301043            );
    … …  
    10361049
    10371050            // Adds the necessary markup to the footer.
    1038             add_action( 'wp_footer', array( $this, 'print_router_loading_and_screen_reader_markup' ) );
     1051            add_action( 'wp_footer', array( $this, 'print_router_markup' ) );
    10391052        }
    10401053    }

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

    r58594 r59097  
    103103     * @covers ::process_directives
    104104     */
    105     public function test_wp_router_region_adds_loading_bar_aria_live_region_only_once() {
     105    public function test_wp_router_region_adds_loading_bar_region_only_once() {
    106106        $html     = '
    107107            <div data-wp-router-region="region A">Interactive region</div>
    … …  
    126126        $this->assertTrue( $p->next_tag( $query ) );
    127127        $this->assertFalse( $p->next_tag( $query ) );
    128         $query = array( 'class_name' => 'screen-reader-text' );
    129         $p     = new WP_HTML_Tag_Processor( $footer );
    130         $this->assertTrue( $p->next_tag( $query ) );
    131         $this->assertFalse( $p->next_tag( $query ) );
    132128    }
    133129}
Note: See TracChangeset for help on using the changeset viewer.