Make WordPress Core

Opened 3 months ago

Closed 3 months ago

#60768 closed defect (bug) (fixed)

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

Reported by: santosguillamot's profile santosguillamot Owned by: swissspidy's profile swissspidy
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.5
Component: General Keywords: has-patch has-unit-tests commit fixed-major dev-reviewed
Focuses: Cc:

Description

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.

Change History (12)

This ticket was mentioned in PR #6267 on WordPress/wordpress-develop by @santosguillamot.


3 months ago
#1

  • Keywords has-patch has-unit-tests added

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

@swissspidy commented on PR #6267:


3 months ago
#2

cc @c4rl0sbr4v0 @luisherranz

#3 @swissspidy
3 months ago

  • Milestone changed from Awaiting Review to 6.5
  • Version set to trunk

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

@cbravobernal commented on PR #6267:


3 months ago
#4

cc @dmsnell

@gziolo commented on PR #6267:


3 months ago
#5

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.

@santosguillamot commented on PR #6267:


3 months ago
#6

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.

#7 @gziolo
3 months ago

@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.

#8 @swissspidy
3 months ago

  • Owner set to swissspidy
  • Resolution set to fixed
  • Status changed from new to closed

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.

#10 @swissspidy
3 months ago

  • Keywords commit dev-feedback fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

@gziolo I trust your judgement :)

#11 @gziolo
3 months ago

  • Keywords dev-reviewed added; dev-feedback removed

6.5.0 it is then :)

#12 @swissspidy
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.