Interactivity API: Mark server-side-rendered style elements for the Interactivity Router - #12963
Draft
DAreRodz wants to merge 2 commits into
Draft
Interactivity API: Mark server-side-rendered style elements for the Interactivity Router#12963DAreRodz wants to merge 2 commits into
DAreRodz wants to merge 2 commits into
Conversation
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Note
This PR is an experiment to gather feedback on the mechanism. The client-side counterpart, the router honoring the attribute, lives in the Gutenberg repository and is not part of this PR.
During client-side navigation, the Interactivity API router diffs the incoming head against the current one and removes style assets missing from the new page. Stylesheets injected by JavaScript after load — theme switchers, consent banners, lazily loaded CSS — are never part of the server-rendered HTML, so the first navigation strips them. The router has no way to tell a server-rendered style asset from a client-injected one.
This PR marks every
<style>and<link rel="stylesheet">in the server-generated HTML with an emptydata-wp-router-managedattribute. A style asset without the attribute is, by elimination, client-injected, and the router can preserve it when diffing the head. The attribute is only emitted when the router can act on it: every rendered block supports client-side navigation, adata-wp-router-regiondirective was processed, andclientNavigationDisabledis not set in thecore/routerconfig. Style assets inside inert<noscript>and<template>subtrees are not marked.Implementation
Marking happens on the full page buffer with
WP_HTML_Tag_Processor— per-tag APIs cannot reach inline<style>elements or the styles printed outsideWP_Styles(custom CSS,WP_Font_Face,WP_Duotone, arbitrarywp_headoutput). Registration is lazy so response streaming is unaffected. Thewp_template_enhancement_output_bufferfilter is added from the router region processor: the buffer-start decision has already been made at that point, so the filter attaches to a running buffer (classic themes enable one by default since 6.9) but can never cause buffering by itself. Block themes with no active buffer start a dedicated fallback buffer fromwp_headatPHP_INT_MINpriority; the block template canvas renders the whole template beforewp_head, so the conditions are final there, and they are re-checked at buffer finalize in case awp_footercallback rendered an incompatible block. Every failure path degrades to no attribute — current router behavior — and partial marking is never produced, since the router would preserve unmarked server styles as stale client ones.See:
Trac ticket:
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Fable 5, Claude Opus 5
Used for: Implementation, tests, adversarial review, and drafting this description.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.