New watch() function WordPress 7.0 introduces a watch() function in the @wordpress/interactivity package. It subscribes to changes in any reactive value accessed inside a callback, re-running the callback whenever those values change. Currently, the Interactivity API provides data-wp-watch as a directive tied to a DOM element's lifecycle for reacting to state changes. However, there is…

WordPressCore's platform is a central hub for WordPress developers and contributors, offering insights into WordPress core development, plugin development, and theme customization. Through articles, tutorials, and community forums, WordPressCore offers insights into WordPress architecture, development best practices, and contributing to the WordPress open-source project. Readers can learn about WordPress coding standards, security guidelines, and performance optimization techniques to build powerful and secure websites with WordPress.

Make WordPress Core

WordPress 7.0 introduces three notable changes to the Interactivity API. First, a new programmatic `watch()` function in `@wordpress/interactivity` lets developers subscribe to reactive state changes outside of DOM directives, with support for cleanup callbacks and an `unwatch()` return value. Second, the `state.navigation.hasStarted` and `state.navigation.hasFinished` properties in `core/router` are deprecated and will trigger console warnings, with a proper navigation tracking API planned for 7.1. Third, `state.url` in `core/router` is now server-populated instead of client-initialized, eliminating the need to guard against an initial `undefined` value and enabling reliable client-side navigation tracking combined with `watch()`.

Changes to the Interactivity API in WordPress 7.0

Deprecated state.navigation properties in core/router

state.url from core/router is now populated on the server