WordPress 7.0 introduces a significant enhancement to its Interactivity API with the addition of a new watch() function. This update empowers developers to programmatically observe changes in reactive values, offering a refined way to manage side effects and state synchronization at the store level.
The watch() function, part of the @wordpress/interactivity package, allows developers to subscribe to changes in any reactive value accessed within a callback. This function will rerun the callback whenever those values change. The feature enables developers to tie the Interactivity API’s data-wp-watch to a DOM element’s lifecycle, thus providing a robust mechanism for reacting to state changes.
For developers seeking to observe changes independently of the DOM, the watch() function fills a crucial gap. It can be utilized to set up logging or synchronize state between stores. Importantly, the function returns an unwatch callback that can be used to stop the watcher when needed. This offers flexibility in managing lifecycle events and side effects efficiently.
Deprecated state.navigation Properties in core/router
Alongside the introduction of the watch() function, WordPress 7.0 also deprecates certain properties in the core/router store. The state.navigation.hasStarted and state.navigation.hasFinished properties, initially intended as internal implementation details, are now deprecated. Accessing these properties will trigger a console warning in development mode, signaling developers to transition away from their usage.
These changes are part of a broader effort to refine the API. In a future version, accessing state.navigation directly will be completely disabled. WordPress 7.1 plans to introduce an official mechanism for tracking navigation states, providing a more reliable solution for developers.
Server-Side Initialization of state.url
A notable improvement in WordPress 7.0 is the server-side initialization of state.url in the core/router store. Previously, this value was initialized on the client side, leading to potential issues with undefined states until the @wordpress/interactivity-router module finished loading. This often required developers to guard against the initial undefined state.
With the server-side initialization in WordPress 7.0, state.url is set during directive processing, eliminating the need for such guards. This change ensures the value remains consistent until the first client-side navigation occurs. Developers can now reliably track client-side navigations using the watch() function combined with state.url, such as sending analytics on virtual page views.
What To Do
- Developers: Explore the new watch() function to enhance your application’s interactivity and handle state changes more efficiently. Transition away from using deprecated state.navigation properties.
- Site Operators: Ensure compatibility by updating custom themes or plugins that may rely on the deprecated properties. Test analytics tracking implementations to leverage the new server-side state.url initialization.
