WordPress.org
Get WordPress

Make WordPress Core

Changeset 58729


Ignore:
Timestamp:
07/16/2024 09:42:38 AM (2 months ago)
Author:
Bernhard Reiter
Message:

Interactivity API: Use Script Modules filter for store & config data.

A dedicated API exists for passing data to Script Modules implemented in changeset [58579].
Use this Core API instead of a custom implementation for Interactivity API to pass data to the client.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/6683.

Props jonsurrell, gziolo, luisherranz, cbravobernal.
Fixes #61512.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r58327 r58729  
    193193     *
    194194     * @since 6.5.0
     195     *
     196     * @deprecated 6.7.0 Client data passing is handled by the {@see "script_module_data_{$module_id}"} filter.
    195197     */
    196198    public function print_client_interactivity_data() {
     199        _deprecated_function( __METHOD__, '6.7.0' );
     200    }
     201
     202    /**
     203     * Set client-side interactivity 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 API script module.
     212     */
     213    public function filter_script_module_interactivity_data( array $data ): array {
    197214        if ( empty( $this->state_data ) && empty( $this->config_data ) ) {
    198             return;
    199         }
    200 
    201         $interactivity_data = array();
     215            return $data;
     216        }
    202217
    203218        $config = array();
    … …  
    208223        }
    209224        if ( ! empty( $config ) ) {
    210             $interactivity_data['config'] = $config;
     225            $data['config'] = $config;
    211226        }
    212227
    … …  
    218233        }
    219234        if ( ! empty( $state ) ) {
    220             $interactivity_data['state'] = $state;
    221         }
    222 
    223         if ( ! empty( $interactivity_data ) ) {
    224             /*
    225              * This data will be printed as JSON inside a script tag like this:
    226              *   <script type="application/json"></script>
    227              *
    228              * A script tag must be closed by a sequence beginning with `</`. It's impossible to
    229              * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
    230              * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
    231              *
    232              *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
    233              *   - JSON_UNESCAPED_SLASHES: Don't escape /.
    234              *
    235              * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
    236              *
    237              *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
    238              *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
    239              *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
    240              *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
    241              *
    242              * The JSON specification requires encoding in UTF-8, so if the generated HTML page
    243              * is not encoded in UTF-8 then it's not safe to include those literals. They must
    244              * be escaped to avoid encoding issues.
    245              *
    246              * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
    247              * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
    248              * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
    249              */
    250             $json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
    251             if ( ! is_utf8_charset() ) {
    252                 $json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
    253             }
    254 
    255             wp_print_inline_script_tag(
    256                 wp_json_encode(
    257                     $interactivity_data,
    258                     $json_encode_flags
    259                 ),
    260                 array(
    261                     'type' => 'application/json',
    262                     'id'   => 'wp-interactivity-data',
    263                 )
    264             );
    265         }
     235            $data['state'] = $state;
     236        }
     237
     238        return $data;
    266239    }
    267240
    … …  
    330303     *
    331304     * @since 6.5.0
     305     * @since 6.7.0 Use the {@see "script_module_data_{$module_id}"} filter to pass client-side data.
    332306     */
    333307    public function add_hooks() {
    334308        add_action( 'wp_enqueue_scripts', array( $this, 'register_script_modules' ) );
    335         add_action( 'wp_footer', array( $this, 'print_client_interactivity_data' ) );
    336 
    337309        add_action( 'admin_enqueue_scripts', array( $this, 'register_script_modules' ) );
    338         add_action( 'admin_print_footer_scripts', array( $this, 'print_client_interactivity_data' ) );
     310
     311        add_filter( 'script_module_data_@wordpress/interactivity', array( $this, 'filter_script_module_interactivity_data' ) );
    339312    }
    340313

  • trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

    r58594 r58729  
    185185
    186186    /**
    187      * Invokes the private `print_client_interactivity` method of
    188      * WP_Interactivity_API class.
    189      *
    190      * @return array|null The content of the JSON object printed on the client-side or null if nothings was printed.
    191      */
    192     private function print_client_interactivity_data() {
    193         $interactivity_data_markup = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    194         preg_match( '/<script type="application\/json" id="wp-interactivity-data">.*?(\{.*\}).*?<\/script>/s', $interactivity_data_markup, $interactivity_data_string );
    195         return isset( $interactivity_data_string[1] ) ? json_decode( $interactivity_data_string[1], true ) : null;
    196     }
    197 
    198     /**
    199      * Tests that the initial state and config are correctly printed on the
    200      * client-side.
    201      *
    202      * @ticket 60356
    203      *
    204      * @covers ::state
    205      * @covers ::config
    206      * @covers ::print_client_interactivity_data
    207      */
    208     public function test_state_and_config_is_correctly_printed() {
    209         $this->interactivity->state( 'myPlugin', array( 'a' => 1 ) );
    210         $this->interactivity->state( 'otherPlugin', array( 'b' => 2 ) );
    211         $this->interactivity->config( 'myPlugin', array( 'a' => 1 ) );
    212         $this->interactivity->config( 'otherPlugin', array( 'b' => 2 ) );
    213 
    214         $result = $this->print_client_interactivity_data();
    215 
    216         $data = array(
    217             'myPlugin'    => array( 'a' => 1 ),
    218             'otherPlugin' => array( 'b' => 2 ),
    219         );
    220 
    221         $this->assertSame(
    222             array(
    223                 'config' => $data,
    224                 'state'  => $data,
    225             ),
    226             $result
    227         );
    228     }
    229 
    230     /**
    231187     * Tests that the wp-interactivity-data script is not printed if both state
    232188     * and config are empty.
    233189     *
    234190     * @ticket 60356
     191     * @ticket 61512
     192     */
     193    public function test_state_and_config_dont_print_when_empty() {
     194        $filter = $this->get_script_data_filter_result();
     195
     196        $this->assertSame( array(), $filter->get_args()[0][0] );
     197    }
     198
     199    /**
     200     * Test that the print_client_interactivity_data is deprecated and produces no output.
     201     *
     202     * @ticket 60356
     203     * @ticket 61512
    235204     *
    236205     * @covers ::print_client_interactivity_data
    237      */
    238     public function test_state_and_config_dont_print_when_empty() {
    239         $result = $this->print_client_interactivity_data();
    240         $this->assertNull( $result );
    241     }
    242 
    243     /**
    244      * Tests that the config is not printed if it's empty.
    245      *
    246      * @ticket 60356
    247      *
    248      * @covers ::state
    249      * @covers ::print_client_interactivity_data
     206     *
     207     * @expectedDeprecated WP_Interactivity_API::print_client_interactivity_data
    250208     */
    251209    public function test_config_not_printed_when_empty() {
    252         $this->interactivity->state( 'myPlugin', array( 'a' => 1 ) );
    253         $result = $this->print_client_interactivity_data();
    254         $this->assertSame( array( 'state' => array( 'myPlugin' => array( 'a' => 1 ) ) ), $result );
    255     }
    256 
    257     /**
    258      * Tests that the state is not printed if it's empty.
    259      *
    260      * @ticket 60356
    261      *
    262      * @covers ::config
    263      * @covers ::print_client_interactivity_data
     210        $this->interactivity->print_client_interactivity_data();
     211        $this->expectOutputString( '' );
     212    }
     213
     214    /**
     215     * Sets up an activity, runs an optional callback, and returns a MockAction for inspection.
     216     *
     217     * @since 6.7.0
     218     *
     219     * @param  ?Closure $callback Optional. Callback to run to set up interactivity state and config.
     220     * @return MockAction
     221     */
     222    private function get_script_data_filter_result( ?Closure $callback = null ): MockAction {
     223        $this->interactivity->add_hooks();
     224        $this->interactivity->register_script_modules();
     225        wp_enqueue_script_module( '@wordpress/interactivity' );
     226        $filter = new MockAction();
     227        add_filter( 'script_module_data_@wordpress/interactivity', array( $filter, 'filter' ) );
     228
     229        if ( $callback ) {
     230            $callback();
     231        }
     232
     233        ob_start();
     234        wp_script_modules()->print_script_module_data();
     235        ob_end_clean();
     236
     237        return $filter;
     238    }
     239
     240    /**
     241     * Tests that the state is not included in client data if it's empty.
     242     *
     243     * @ticket 60356
     244     * @ticket 61512
    264245     */
    265246    public function test_state_not_printed_when_empty() {
    266         $this->interactivity->config( 'myPlugin', array( 'a' => 1 ) );
    267         $result = $this->print_client_interactivity_data();
    268         $this->assertSame( array( 'config' => array( 'myPlugin' => array( 'a' => 1 ) ) ), $result );
     247        $filter = $this->get_script_data_filter_result(
     248            function () {
     249                $this->interactivity->config( 'myPlugin', array( 'a' => 1 ) );
     250            }
     251        );
     252
     253        $this->assertSame( array( 'config' => array( 'myPlugin' => array( 'a' => 1 ) ) ), $filter->get_args()[0][0] );
    269254    }
    270255
    … …  
    273258     *
    274259     * @ticket 60761
    275      *
    276      * @covers ::print_client_interactivity_data
     260     * @ticket 61512
    277261     */
    278262    public function test_state_not_printed_when_empty_array() {
    279         $this->interactivity->state( 'pluginWithEmptyState_prune', array() );
    280         $this->interactivity->state( 'pluginWithState_include', array( 'value' => 'excellent' ) );
    281         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    282         $expected       = <<<'SCRIPT_TAG'
    283 <script type="application/json" id="wp-interactivity-data">
    284 {"state":{"pluginWithState_include":{"value":"excellent"}}}
    285 </script>
    286 
    287 SCRIPT_TAG;
    288 
    289         $this->assertSameIgnoreEOL( $expected, $printed_script );
     263        $filter = $this->get_script_data_filter_result(
     264            function () {
     265                $this->interactivity->state( 'pluginWithEmptyState_prune', array() );
     266                $this->interactivity->state( 'pluginWithState_include', array( 'value' => 'excellent' ) );
     267            }
     268        );
     269
     270        $this->assertSame( array( 'state' => array( 'pluginWithState_include' => array( 'value' => 'excellent' ) ) ), $filter->get_args()[0][0] );
    290271    }
    291272
    … …  
    294275     *
    295276     * @ticket 60761
    296      *
    297      * @covers ::print_client_interactivity_data
     277     * @ticket 61512
    298278     */
    299279    public function test_state_not_printed_when_only_empty_arrays() {
    300         $this->interactivity->state( 'pluginWithEmptyState_prune', array() );
    301         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    302         $this->assertSame( '', $printed_script );
     280        $filter = $this->get_script_data_filter_result(
     281            function () {
     282                $this->interactivity->state( 'pluginWithEmptyState_prune', array() );
     283            }
     284        );
     285
     286        $this->assertSame( array(), $filter->get_args()[0][0] );
    303287    }
    304288
    … …  
    307291     *
    308292     * @ticket 60761
    309      *
    310      * @covers ::print_client_interactivity_data
     293     * @ticket 61512
    311294     */
    312295    public function test_state_printed_correctly_with_nested_empty_array() {
    313         $this->interactivity->state( 'myPlugin', array( 'emptyArray' => array() ) );
    314         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    315         $expected       = <<<'SCRIPT_TAG'
    316 <script type="application/json" id="wp-interactivity-data">
    317 {"state":{"myPlugin":{"emptyArray":[]}}}
    318 </script>
    319 
    320 SCRIPT_TAG;
    321 
    322         $this->assertSameIgnoreEOL( $expected, $printed_script );
     296        $filter = $this->get_script_data_filter_result(
     297            function () {
     298                $this->interactivity->state( 'myPlugin', array( 'emptyArray' => array() ) );
     299            }
     300        );
     301
     302        $this->assertSame( array( 'state' => array( 'myPlugin' => array( 'emptyArray' => array() ) ) ), $filter->get_args()[0][0] );
    323303    }
    324304
    … …  
    327307     *
    328308     * @ticket 60761
    329      *
    330      * @covers ::print_client_interactivity_data
     309     * @ticket 61512
    331310     */
    332311    public function test_config_not_printed_when_empty_array() {
    333         $this->interactivity->config( 'pluginWithEmptyConfig_prune', array() );
    334         $this->interactivity->config( 'pluginWithConfig_include', array( 'value' => 'excellent' ) );
    335         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    336         $expected       = <<<'SCRIPT_TAG'
    337 <script type="application/json" id="wp-interactivity-data">
    338 {"config":{"pluginWithConfig_include":{"value":"excellent"}}}
    339 </script>
    340 
    341 SCRIPT_TAG;
    342 
    343         $this->assertSameIgnoreEOL( $expected, $printed_script );
     312        $filter = $this->get_script_data_filter_result(
     313            function () {
     314                $this->interactivity->config( 'pluginWithEmptyConfig_prune', array() );
     315                $this->interactivity->config( 'pluginWithConfig_include', array( 'value' => 'excellent' ) );
     316            }
     317        );
     318
     319        $this->assertSame( array( 'config' => array( 'pluginWithConfig_include' => array( 'value' => 'excellent' ) ) ), $filter->get_args()[0][0] );
    344320    }
    345321
    … …  
    348324     *
    349325     * @ticket 60761
    350      *
    351      * @covers ::print_client_interactivity_data
     326     * @ticket 61512
    352327     */
    353328    public function test_config_not_printed_when_only_empty_arrays() {
    354         $this->interactivity->config( 'pluginWithEmptyConfig_prune', array() );
    355         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    356         $this->assertSame( '', $printed_script );
     329        $filter = $this->get_script_data_filter_result(
     330            function () {
     331                $this->interactivity->config( 'pluginWithEmptyConfig_prune', array() );
     332            }
     333        );
     334
     335        $this->assertSame( array(), $filter->get_args()[0][0] );
    357336    }
    358337
    … …  
    361340     *
    362341     * @ticket 60761
    363      *
    364      * @covers ::print_client_interactivity_data
     342     * @ticket 61512
    365343     */
    366344    public function test_config_printed_correctly_with_nested_empty_array() {
    367         $this->interactivity->config( 'myPlugin', array( 'emptyArray' => array() ) );
    368         $printed_script = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    369         $expected       = <<<'SCRIPT_TAG'
    370 <script type="application/json" id="wp-interactivity-data">
    371 {"config":{"myPlugin":{"emptyArray":[]}}}
    372 </script>
    373 
    374 SCRIPT_TAG;
    375 
    376         $this->assertSameIgnoreEOL( $expected, $printed_script );
    377     }
    378 
    379     /**
    380      * Tests that special characters in the initial state and configuration are
    381      * properly escaped.
    382      *
    383      * @ticket 60356
    384      * @ticket 61170
    385      *
    386      * @covers ::state
    387      * @covers ::config
    388      * @covers ::print_client_interactivity_data
    389      */
    390     public function test_state_and_config_escape_special_characters() {
    391         $this->interactivity->state(
    392             'myPlugin',
    393             array(
    394                 'ampersand'                              => '&',
    395                 'less-than sign'                         => '<',
    396                 'greater-than sign'                      => '>',
    397                 'solidus'                                => '/',
    398                 'line separator'                         => "\u{2028}",
    399                 'paragraph separator'                    => "\u{2029}",
    400                 'flag of england'                        => "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
    401                 'malicious script closer'                => '</script>',
    402                 'entity-encoded malicious script closer' => '&lt;/script&gt;',
    403             )
    404         );
    405         $this->interactivity->config( 'myPlugin', array( 'chars' => '&<>/' ) );
    406 
    407         $interactivity_data_markup = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    408         preg_match( '~<script type="application/json" id="wp-interactivity-data">\s*(\{.*\})\s*</script>~s', $interactivity_data_markup, $interactivity_data_string );
    409 
    410         $expected = <<<"JSON"
    411 {"config":{"myPlugin":{"chars":"&\\u003C\\u003E/"}},"state":{"myPlugin":{"ampersand":"&","less-than sign":"\\u003C","greater-than sign":"\\u003E","solidus":"/","line separator":"\u{2028}","paragraph separator":"\u{2029}","flag of england":"\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}","malicious script closer":"\\u003C/script\\u003E","entity-encoded malicious script closer":"&lt;/script&gt;"}}}
    412 JSON;
    413         $this->assertSame( $expected, $interactivity_data_string[1] );
    414     }
    415 
    416     /**
    417      * Tests that special characters in the initial state and configuration are
    418      * properly escaped when the blog_charset is not UTF-8 (unicode compatible).
    419      *
    420      * This this test, unicode and line terminators should be escaped to their
    421      * JSON unicode sequences.
    422      *
    423      * @ticket 61170
    424      *
    425      * @covers ::state
    426      * @covers ::config
    427      * @covers ::print_client_interactivity_data
    428      */
    429     public function test_state_and_config_escape_special_characters_non_utf8() {
    430         add_filter( 'pre_option_blog_charset', array( $this, 'charset_iso_8859_1' ) );
    431         $this->interactivity->state(
    432             'myPlugin',
    433             array(
    434                 'ampersand'                              => '&',
    435                 'less-than sign'                         => '<',
    436                 'greater-than sign'                      => '>',
    437                 'solidus'                                => '/',
    438                 'line separator'                         => "\u{2028}",
    439                 'paragraph separator'                    => "\u{2029}",
    440                 'flag of england'                        => "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
    441                 'malicious script closer'                => '</script>',
    442                 'entity-encoded malicious script closer' => '&lt;/script&gt;',
    443             )
    444         );
    445         $this->interactivity->config( 'myPlugin', array( 'chars' => '&<>/' ) );
    446 
    447         $interactivity_data_markup = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
    448         preg_match( '~<script type="application/json" id="wp-interactivity-data">\s*(\{.*\})\s*</script>~s', $interactivity_data_markup, $interactivity_data_string );
    449 
    450         $expected = <<<"JSON"
    451 {"config":{"myPlugin":{"chars":"&\\u003C\\u003E/"}},"state":{"myPlugin":{"ampersand":"&","less-than sign":"\\u003C","greater-than sign":"\\u003E","solidus":"/","line separator":"\\u2028","paragraph separator":"\\u2029","flag of england":"\\ud83c\\udff4\\udb40\\udc67\\udb40\\udc62\\udb40\\udc65\\udb40\\udc6e\\udb40\\udc67\\udb40\\udc7f","malicious script closer":"\\u003C/script\\u003E","entity-encoded malicious script closer":"&lt;/script&gt;"}}}
    452 JSON;
    453         $this->assertSame( $expected, $interactivity_data_string[1] );
     345        $filter = $this->get_script_data_filter_result(
     346            function () {
     347                $this->interactivity->config( 'myPlugin', array( 'emptyArray' => array() ) );
     348            }
     349        );
     350
     351        $this->assertSame( array( 'config' => array( 'myPlugin' => array( 'emptyArray' => array() ) ) ), $filter->get_args()[0][0] );
    454352    }
    455353
Note: See TracChangeset for help on using the changeset viewer.