Commit Graph

14 Commits

Author SHA1 Message Date
dmsnell a3b5efe883 Improve legibility of JSON-encoded Interactivity API store data.
The Interactivity API has been rendering client data in a SCRIPT element with the
type `application/json` so that it's not executed as a script, but is available
to one. The data runs through `wp_json_encode()` and is encoded with some flags
to ensure that potentially-dangerous characters are escaped.

However, this can lead to some challenges. Eagerly escaping when not necessary
can make the data difficult to comprehend when reading the output HTML. For example,
all non-ASCII Unicode characters are escaped with their code point equivalent.
This results in `\ud83c\udd70` instead of `🅰`.

In this patch, the flags for JSON encoding are refined to ensure what's necessary
while relaxing other rules (leaving in those Unicode characters if the blog charset
is UTF-8). This makes for Interactivity API data that's quicker as a human reader
to decipher and diagnose.

In summary:

 - This data is JSON encoded and printed in a `<script type="application/json">` tag.

 - If we ensure that `<` is never printed inside the data, it should be impossible to
   break out of the script tag and the browser treats everything as the element's `textContent`.

 - All other escaping becomes unnecessary at that point, including unicode escaping 
   if the page uses the UTF-8 charset (the same encoding as JSON).

See https://github.com/WordPress/wordpress-develop/pull/6433#pullrequestreview-2043218338

Developed in https://github.com/WordPress/wordpress-develop/pull/6520
Discussed in https://core.trac.wordpress.org/ticket/61170

Fixes: #61170
Follow-up to: [57563].
Props: bjorsch, dmsnell, jonsurrell, sabernhardt, westonruter.

Built from https://develop.svn.wordpress.org/trunk@58159


git-svn-id: http://core.svn.wordpress.org/trunk@57622 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-05-15 17:42:10 +00:00
gziolo 6edbf28fec Interactivity API: Cannot be used from wp-admin
Interactivity API has hooks that run on the frontend, but not in wp-admin. This means that interactivity data was not printed to the HTML and the interactivity Script Modules were not registered.

Fixes #61087.
Props jonsurrell, cbravobernal, gziolo.


Built from https://develop.svn.wordpress.org/trunk@58127


git-svn-id: http://core.svn.wordpress.org/trunk@57592 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-05-10 09:13:05 +00:00
Pascal Birchler bf346251a3 Interactivity API: Do not print state if it’s an empty array.
This prunes stores and configurations that are empty arrays, as stores are expected to be JSON objects.
By not printing empty configurations, less redundant data is serialized into the HTML.

Props jonsurrell, luisherranz, darerodz, gziolo, swissspidy.
Fixes #60761.
Built from https://develop.svn.wordpress.org/trunk@57841


git-svn-id: http://core.svn.wordpress.org/trunk@57342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-15 12:12:09 +00:00
Pascal Birchler 78ea9f4ee6 Interactivity API: Prevent warning when using a bind directive with a short attribute name.
Adds new tests and improves existing ones by using `assertSame` to do type comparison as well.

Props jonsurrell, cbravobernal, swissspidy, gziolo.
Fixes #60758.
Built from https://develop.svn.wordpress.org/trunk@57835


git-svn-id: http://core.svn.wordpress.org/trunk@57336 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-14 15:30:09 +00:00
Pascal Birchler 0a308a97bb Interactivity API: Do not propagate context from void tags to its siblings.
Resolves an issue where context on a void tag element such as `<img>` was incorrectly passed to following elements.
Adds tests.

Props santosguillamot, luisherranz, cbravobernal, dmsnell, gziolo, swissspidy.
Fixes #60768.
Built from https://develop.svn.wordpress.org/trunk@57832


git-svn-id: http://core.svn.wordpress.org/trunk@57333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-14 13:34:13 +00:00
Pascal Birchler 858da6cbc5 Interactivity API: Increase hook priority for processing directives.
Use a priority of 100 to ensure that other filters can add additional directives before the processing starts.
This way, directives will be processed even if the `$parsed_block` variable is edited by a filter.

Props cbravobernal, swissspidy, flixos90, joemcgill, gziolo.
Fixes #60743.
Built from https://develop.svn.wordpress.org/trunk@57826


git-svn-id: http://core.svn.wordpress.org/trunk@57327 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-13 10:48:11 +00:00
Pascal Birchler 9958729416 Interactivity API: Do not process directives when there aren’t any.
Short-circuits directive processing when the markup does not actually contain any `data-wp-*` attributes.
This reduces function calls and memory usage for the best case scenario due to not involving `WP_HTML_Tag_Processor`.

Props joemcgill, swissspidy, gziolo, cbravobernal, flixos90.
Fixes #60749.
Built from https://develop.svn.wordpress.org/trunk@57824


git-svn-id: http://core.svn.wordpress.org/trunk@57325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-13 10:41:14 +00:00
audrasjb 31569e11d0 Docs: Add missing `@global` mention in `wp_interactivity()`.
This merges a changeset updated upstream in the Gutenberg repository.
See https://github.com/WordPress/gutenberg/pull/59522.

Props wildworks.
Fixes #60677.
See #59651.




Built from https://develop.svn.wordpress.org/trunk@57774


git-svn-id: http://core.svn.wordpress.org/trunk@57275 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-05 13:39:13 +00:00
Pascal Birchler f98a921c98 Interactivity API: Rename `data_wp_context()` to `wp_interactivity_data_wp_context()`.
Increases clarity about where the function belongs to, bringing it in line with other related functions.

After initially merging this change in [57742] and reverting it in [57743], this reintroduces it now that the Gutenberg packages have been updated accordingly in [57760].

Props swissspidy, gziolo, cbravobernal, youknowriad, ankitmaru, westonruter, luisherranz, darerodz.
Fixes #60575.
Built from https://develop.svn.wordpress.org/trunk@57762


git-svn-id: http://core.svn.wordpress.org/trunk@57263 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-03-04 15:39:15 +00:00
Pascal Birchler e265c6d012 Interactivity API: Revert [57742] pending a Gutenberg package update.
This function can only be renamed after updating Gutenberg npm packages, as some of the core blocks already use this function.

See #60575.
Built from https://develop.svn.wordpress.org/trunk@57743


git-svn-id: http://core.svn.wordpress.org/trunk@57244 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-29 14:30:12 +00:00
Pascal Birchler fbeaad601c Interactivity API: Rename `data_wp_context()` to `wp_interactivity_data_wp_context()`.
Increases clarity about where the function belongs to, bringing it in line with other related functions.

Props swissspidy, gziolo, cbravobernal, youknowriad, ankitmaru, westonruter, luisherranz, darerodz.
Fixes #60575.
Built from https://develop.svn.wordpress.org/trunk@57742


git-svn-id: http://core.svn.wordpress.org/trunk@57243 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-29 12:28:09 +00:00
Pascal Birchler 41532d5638 Interactivity API: Skip instead of bail out if HTML contains `SVG` or `MATH`.
Addresses an issue with server-side processing of directives when there is e.g. an SVG icon a navigation menu.

Props cbravobernal, westonruter, dmsnell, swissspidy.
Fixes #60517.
Built from https://develop.svn.wordpress.org/trunk@57649


git-svn-id: http://core.svn.wordpress.org/trunk@57150 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-17 15:28:04 +00:00
Pascal Birchler 61f8789d9f Interactivity API: Use string instead of object in `data-wp-interactive` attribute.
The server directive processing, integrated in [57563], supports a simplified format for passing the namespace to `data-wp-interactive`.

Props cbravobernal, gziolo.
Fixes #60542.
See #60356.
Built from https://develop.svn.wordpress.org/trunk@57646


git-svn-id: http://core.svn.wordpress.org/trunk@57147 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-17 13:19:16 +00:00
gziolo 802c251971 Interactivity API: Integrate Server Directive Processing
The Interactivity API enables WordPress developers to create dynamic and interactive web experiences with ease using a set of special HTML attributes called directives. Please refer to the [Interactivity API proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) for further details. 

It syncs the changes from the Gutenberg plugin: https://github.com/WordPress/gutenberg/pull/58066.

Fixes #60356.
Props luisherranz, jonsurrell, swissspidy, westonruter, gziolo.


Built from https://develop.svn.wordpress.org/trunk@57563


git-svn-id: http://core.svn.wordpress.org/trunk@57064 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-08 09:13:09 +00:00