Interactivity API - SSR context included in void tags shouldn't propagate to following elements

[santosguillamot]

From my tests, when the same context is used in an inner void tag element and its parent, it is overwritten when it shouldn't. For example, in this use case:

<div data-wp-context='{"text": "outer"}'>
<img data-wp-context='{"text": "inner"}'>
<p data-wp-text="context.text"></p>
</div>

The last paragraph should receive the parent div context "outer" instead of the img "inner.

From what I've seen in the code, this specific case hasn't been considered while processing data-wp-context, and it just removes the context from the stack when it finds a closing tag.

In my tests, checking if it is a void tag in the directives processing, and removing the context in that case, seems to solve the issue. Although I must say I am still unfamiliar with the SSR of the directives.

From my tests, when the same context is used in an inner void tag element and its parent, it is overwritten when it shouldn't. For example, in this use case:

<div data-wp-context='{"text": "outer"}'>
<img data-wp-context='{"text": "inner"}'>
<p data-wp-text="context.text"></p>
</div>

The last paragraph should receive the parent div context "outer" instead of the img "inner.

From what I've seen in the code, this specific case hasn't been considered while processing data-wp-context, and it just removes the context from the stack when it finds a closing tag: ​link.

In my tests, checking if it is a void tag in the directives processing and removing the context in that case, seems to solve the issue. Although I must say I am still unfamiliar with the SSR of the directives.

I've also added a test to cover this use case.

Trac ticket: https://core.trac.wordpress.org/ticket/60768

cc @c4rl0sbr4v0 @luisherranz

[swissspidy]

Moving to 6.5 for visibility/consideration, but given it seems more like an edge case, could also be punted to 6.6

cc @dmsnell

If we find a way to cover also data-wp-interactivity directive with a test as noted in ​https://github.com/WordPress/wordpress-develop/pull/6267#discussion_r1524540439, I will feel confident about landing this patch in WordPress 6.5.

I've added ​this test to cover data-wp-interactive as you mentioned. Prior to this pull request, it would bind the "void" value because the namespace is not removed. After this pull request, it returns null because that state doesn't exist. Let me know if that's what you had in mind.

[gziolo]

@swissspidy, it's ready to go and covered with two additional test cases illustrating the issue with two different directives. I'd be in favor of landing this patch in 6.5.0 or eventually postponing it to 6.5.1 if you think it's too risky so late in the release cycle.

[swissspidy]

In 57832:

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.

Committed in https://core.trac.wordpress.org/changeset/57832

[swissspidy]

@gziolo I trust your judgement :)

[gziolo]

6.5.0 it is then :)

[swissspidy]

In 57834:

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.

Reviewed by gziolo.
Merges [57832] to the to the 6.5 branch.

Props santosguillamot, luisherranz, cbravobernal, dmsnell, gziolo, swissspidy.
Fixes #60768.