Interactivity API - Directives are not processed if there is a Math or a SVG in the HTML

[cbravobernal]

When there is a SVG icon in the navigation menu. The Interactivity API is not server-side processing the directives. This is causing a flash effect when the runtime process the JavaScript part.

I'm already working on a fix, and will update this description with some screenshots or screenshares.

When there is a SVG icon in the navigation menu. The Interactivity API is not server-side processing the directives. This is causing a flash effect when the runtime process the JavaScript part.

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

This has been something that @sirreal and I have been working with lately.

#6006

it's complicated, and I might recommend creating something marginally more robust in the meantime, because the rules for the self-closing flag change within SVG and MathML.

that is, non-void elements which contain the self-closing flag are treated as empty elements.

there are escapes from SVG and MathML that I think we can practically overlook for now because the logic for detecting them is complicated, but a new method $p->skip_foreign_content() might serve us better.

this method would be _like_ next_balanced_tag() except it will only pay attention to the current tag.

private function skip_foreign_content() {
	$tag_name = $this->get_tag_name();
	$depth    = 1;

	while ( $depth > && $this->next_tag( $tag_name ) ) {
		if ( $this->has_self_closing_flag() ) {
			continue;
		}

		$depth += $this->is_tag_closer() ? -1 : 1;
	}

	return 0 === $depth;
}

I created the function as suggested, with small tweaks to make it work as expected. I also added some tests in a pair programming session with @michalczaplinski

I would feel much more confident with a second review, thanks @dmsnell!

Sorry @westonruter for re-requesting your review again, but the code has change quite a bit 😅

I addressed the requested changes in ​https://github.com/WordPress/wordpress-develop/pull/6091/commits/23f25c1cc8cdf766510e9f64f2322fef91ed07a3

Just a couple nits left, so I'm pre-approving.

Done in ​https://github.com/WordPress/wordpress-develop/pull/6091/commits/8ea4a695c99b77813fc8fa1b37dd9c94bafb27b3

Ready to commit then!

@dmsnell Is this one good to go in your opinion as well?

@dmsnell Is this one good to go in your opinion as well?

I'm afraid Dennis is AFK until the 26th of February. Not sure if he will answer on time 😅

[swissspidy]

In 57649:

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.

Alright. Committed in https://core.trac.wordpress.org/changeset/57649. We can always commit follow-ups if needed.

@sirreal has a lot of experience with HTML API, he could take a look at it too

👍 The changes as committed here look good to me.

All good from my end too. Of course we could make this more robust, but doing so inches us towards the HTML Processor and isn't worth recreating. I think we're going to start exploring using the HTML Processor for the Interactivity API, so in time this will be a non-issue.