React 19: punted beyond WordPress 7.1, experiment in Gutenberg

WordPress 7.1 continues to use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org 18.3

React 19 upgrade won’t be a part of WordPress 7.1. After briefly enabling it in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ we discovered unexpected incompatibilities in how old and new version of React interact with each other, and in the ways how plugins use React, and we were forced to revert the change. We’ll need a considerable testing period where we improve and fine-tune the compatibility layer that allows the existing plugins to run seamlessly.

Experimental flag in Gutenberg

Instead, there is a new experiment in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. (since version 23.4) that enables React 19 on your WordPress site, intended for testing plugin compatibility. To enable the experiment, install the Gutenberg plugin and check a checkbox on the Gutenberg Experiments page (under Settings › Gutenberg):

Testing plugins

Testing a plugin compatibility generally means trying to use all parts of the plugin that uses React, typically Gutenberg blocks and extensions, and also custom WP Adminadmin (and super admin) pages, and verifying that the UIUI User interface is not broken and there are no errors logged in the browser console.

What kind of errors to look for

Typical failure modes for plugins are:

1. Bundling the react/jsx-runtime code directly in the plugin JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com code instead of using the “externalized” react-jsx-runtime script provided by WordPress itself. Such bundling leads to a mixture of React 18 (bundled) and React 19 (provided by WordPress) running together and passing data structures created by the old version to the new runtime. If everyone was bundling their JavaScript correctly, the majority of compat issues wouldn’t happen at all.
2. Using really old React features that were removed in React 19, after being deprecated for a long time (at least 6 years). String refs, default props on function components, legacy ways of defining context, … Some of them we’re polyfilling in the compat layer. A more detailed overview can be found in the “Removed APIs” section of an earlier post about the React 19 upgrade.

There is also work in progress to automatically detect these issues as part of the Plugin Check plugin.

Everyone is invited to test and update their plugins, and report issues in the Gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ repo.

---

Props to @tyxla, @aduth, @simison, @wildworks and @mamaduka for contributions, feedback and code reviews.

Props to @tyxla and @aduth for reviewing a draft of this post.

#7-1, #dev-notes, #dev-notes-7-1