WordPress.org
Get WordPress

Make WordPress Core

Changeset 59130


Ignore:
Timestamp:
09/30/2024 04:16:44 PM (9 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.
  • 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:
2 edited

Legend:

Unmodified
Added
Removed

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

    r59098 r59130  
    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     * Deprecated.
     998     *
     999     * @since 6.5.0
     1000     * @deprecated 6.7.0 Use {@see WP_Interactivity_API::print_router_markup} instead.
     1001     */
     1002    public function print_router_loading_and_screen_reader_markup() {
     1003        _deprecated_function( __METHOD__, '6.7.0', 'WP_Interactivity_API::print_router_markup' );
     1004
     1005        // Call the new method.
     1006        $this->print_router_markup();
     1007    }
     1008
     1009    /**
     1010     * Outputs markup for the @wordpress/interactivity-router script module.
    9781011     *
    9791012     * 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() {
     1013     * navigation.
     1014     *
     1015     * @since 6.7.0
     1016     */
     1017    public function print_router_markup() {
    9861018        echo <<<HTML
    9871019            <div
    … …  
    9911023                data-wp-class--finish-animation="state.navigation.hasFinished"
    9921024            ></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>
    9991025HTML;
    10001026    }
    … …  
    10171043            $this->has_processed_router_region = true;
    10181044
    1019             // Initialize the `core/router` store.
     1045            /*
     1046             * Initialize the `core/router` store.
     1047             * If the store is not initialized like this with minimal
     1048             * navigation object, the interactivity-router script module
     1049             * errors.
     1050             */
    10201051            $this->state(
    10211052                'core/router',
    10221053                array(
    1023                     'navigation' => array(
    1024                         'texts' => array(
    1025                             'loading' => __( 'Loading page, please wait.' ),
    1026                             'loaded'  => __( 'Page Loaded.' ),
    1027                         ),
    1028                     ),
     1054                    'navigation' => new stdClass(),
    10291055                )
    10301056            );
    … …  
    10361062
    10371063            // Adds the necessary markup to the footer.
    1038             add_action( 'wp_footer', array( $this, 'print_router_loading_and_screen_reader_markup' ) );
     1064            add_action( 'wp_footer', array( $this, 'print_router_markup' ) );
    10391065        }
    10401066    }

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

    r59098 r59130  
    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.