Epic: Interactivity API - public 1.0 version #56803
Description
- Part of Block API #41236.
In More core blocks and new store() API, we first worked on preparing Core blocks for WP 6.4, including the new enhanced pagination of the Query block, and after the release of WP 6.4, we also worked on the migration of the new store() API.
For this iteration of the Interactivity API, we want to focus on the preparation of a 1.0 version that can be released publicly in WordPress Core and serve as the base for future enhancements.
We also want to consolidate here the work of the Tracking Issue: Server Directive Processing to keep all the implementation work under the same issue, but we will keep tracking the documentation-related tasks in the Documentation Tracking Issue.
Tasks
This is the list of initial tasks, although we will edit this post as we progress and discover other things that we need to do.
- Directives
- Implement the
wp-rundirective - Expose the
useInitanduseWatchhooks - Add
data-wp-on-windowanddata-wp-on-documentdirectives - Remove the
navigation-linkdirective - Remove the
wp-slotandwp-filldirectives if we don't finally need them - Prevent using components in
data-wp-text, only strings - Remove support for element state until naming and use cases are clearer
- Add support for element attributes
- Update Preact to the latest version and remove the custom
rolelogic in our codebase - Expose
withScopeand add support for async functions (generators) - Add support for
wp-each - Put all the private exports behind a locked proxy
- Remove the non-default
wp-contextsuffix - Use
data-wp-interactive="namespace" - Review the
@wordpress/interactivityexports - Remove the
wp-bodydirective - Fix: Improve the way we merge contexts after navigation
- Fix: Prevent proxifying non-plain objects
- Implement the
- Store
- Re-implement
wp_storeaswp_initial_state - Fix: Merge new SSR state on client-side navigation (discussion)
- Re-implement
- Router
- Create the
core/routerstore and move thenavigateandprefecthactions there - Code-split the
core/routerstore in@wordpress/interactivity/router - Rename
data-wp-navigation-idtodata-wp-router-region - Add a top loading bar on navigation
- Add a screen reader announcement on navigation
- Expose a way to trigger virtual pageviews, like
state.urlin thecore/routerstore - Fix: Fix the initial page cache (code)
-
Populatestate.urlfrom the server- We finally decided to maintain the code that adds it from the
core/routerstore in JS.
- We finally decided to maintain the code that adds it from the
- Switch to global config
config['core/router'].regionNavigation = false - Fix: Add
data-wp-keyto the page numbers
- Create the
- Block metadata
- Add
clientNavigationandinteractiveto block supports metadata. - Move block script module registration to the
render_callbackand usewp_scripts_get_suffix - Use private stores for all the interactive core block stores
- Add
- Server Directive Processing
- Make sure we only process the directives once
- Sort directives by priority
- Add support for
data-wp-interactive='{ "namespace": "..." }' - Improve block identification (check the block name before the md5)
- Render the root interactive blocks
- Encapsulate everything into a single function
wp_interactivity_process_directives() - Make sure it bails out on unbalanced tags
- Add tests for edge cases
- Add processor for
wp-each - Optional: Add a helper function to add
data-wp-contexton PHP - Optional: Add support for private stores
- Fix: Skip SVG and MathML (instead of bail out)
- Debug
- Optional: Show an error in the browser console when the server directive processing fails
- Code Quality
- Optional: Typscript the entire runtime. Add comments to functions. Etc.