Skip to content

iAPI Docs: Add client-side navigation compatibility guide#76242

Draft
DAreRodz wants to merge 4 commits intotrunkfrom
docs/iapi-csn-compatibility-guide
Draft

iAPI Docs: Add client-side navigation compatibility guide#76242
DAreRodz wants to merge 4 commits intotrunkfrom
docs/iapi-csn-compatibility-guide

Conversation

@DAreRodz
Copy link
Contributor

@DAreRodz DAreRodz commented Mar 6, 2026

What?

Adds a new documentation page: Client-Side Navigation Compatibility Guide for the Interactivity API.

Why?

Block developers and theme authors need clear guidance on what makes their code compatible with client-side navigation. Without this, developers may unknowingly introduce patterns that break client-side navigation — causing fallbacks to full page reloads or potentially breaking the site, degrading the user experience.

There was no centralized reference for CSN compatibility, nor a checklist that developers could use to verify compatibility before declaring their blocks compatible.

How?

Adds a new document at docs/reference-guides/interactivity-api/core-concepts/client-side-navigation-compatibility.md and links it from the Core Concepts README. The guide covers:

  • Declaring compatibility in block.json via supports.interactivity.clientNavigation.
  • What makes a block compatible — non-interactive blocks, Interactivity API blocks, and blocks using other libraries.
  • CSS requirements — no dynamic CSS injection, no runtime stylesheet modifications, stable CSS selectors (with wp_unique_id_from_values() as the recommended alternative to wp_unique_id()), and selector consistency across navigations.
  • JavaScript requirements — use of script modules instead of regular scripts, and how to handle script modules outside blocks (e.g., classic PHP themes) via wp_register_script_module() with loadOnClientNavigation.
  • HTML requirements — consistent HTML structures, proper use of data-wp-key for dynamic lists, avoiding DOM mutations outside the Interactivity API (with data-wp-watch as the escape hatch), and using attachTo for HTML outside router regions.
  • Compatibility checklist — a pre-flight checklist for developers to verify before marking a block as CSN-compatible.
  • Quick reference table summarizing block types and their compatibility status.

The guide is written to be useful for both block developers and classic PHP theme/plugin authors.

@DAreRodz DAreRodz added [Type] Developer Documentation Documentation for developers [Feature] Interactivity API API to add frontend interactivity to blocks. labels Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant