How to Prepare Your WordPress Plugins and Themes for the React 19 Upgrade

How to Prepare Your WordPress Plugins and Themes for the React 19 Upgrade

React 19 is coming to WordPress — and this time it is sticking. After being deferred from WordPress 7.1 “Mary Lou” due to plugin compatibility issues, the React 18 to React 19 upgrade is now firmly targeted for WordPress 7.2 in December 2026. If you build or maintain WordPress plugins or themes that touch the block editor (Gutenberg), now is the time to act.

Here is a step-by-step guide to auditing, testing, and updating your code before the upgrade lands in core.

Why React 19 Matters for WordPress Developers

React 19 introduces breaking changes that affect how components render and how certain APIs behave. WordPress’s Gutenberg editor is built on React, meaning any plugin or theme that registers blocks, uses @wordpress/element, or hooks into the editor UI is potentially affected. React 19 actively rejects elements generated by the React 18 runtime, so untested code can break silently — or loudly — after the upgrade.

Step 1: Enable the React 19 Experiment in Gutenberg

The React 19 upgrade is currently available as an opt-in experiment in the Gutenberg plugin (version 23.4+):

  1. Install or update the Gutenberg plugin to version 23.4 or later.
  2. Go to Settings → Gutenberg in your WordPress admin.
  3. Enable the React 19 experiment checkbox.
  4. Test your plugins and themes thoroughly in this mode.

This is the closest you can get to a production preview of WordPress 7.2’s React environment today.

Step 2: Audit for Deprecated React Patterns

React 19 removes several APIs that were deprecated in React 18. Search your codebase for these common culprits:

  • String refs — Replace with useRef() or callback refs.
  • Legacy Context API (contextTypes, childContextTypes) — Migrate to the modern React.createContext() API.
  • findDOMNode() — Replace with ref forwarding.
  • ReactDOM.render() — Replace with ReactDOM.createRoot().
  • Deprecated lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) — Migrate to their safe equivalents or hooks.

Step 3: Update @wordpress/element Usage

WordPress wraps React in the @wordpress/element package. Make sure you are importing from this package rather than directly from React, and update to the latest version:

// Good — use @wordpress/element
import { useState, useEffect } from '@wordpress/element';

// Avoid — direct React imports can cause version mismatches
import { useState } from 'react';

Step 4: Run the React 19 Codemod

The React team provides an official codemod to automate many of the migration tasks:

npx codemod@latest react/19/migration-recipe

This will automatically update deprecated patterns in your JavaScript and JSX files. Review all changes carefully before committing.

Step 5: Test with WordPress 7.1.1 RC1

WordPress 7.1.1 RC1 dropped on September 10, 2026. While React 19 is not in core yet, testing against the latest release ensures your code is compatible with the current stable environment and ready for the 7.2 transition.

  • Use the WordPress Beta Tester plugin to install RC builds.
  • Test all block registration, editor integrations, and admin UI components.
  • Check the browser console for React deprecation warnings — these will become errors in React 19.

Step 6: Update Your CI/CD Pipeline

Add a React 19 compatibility check to your automated testing workflow. Install @wordpress/scripts@latest and run your test suite against the React 19 build. Consider adding a dedicated test environment that mirrors the Gutenberg React 19 experiment configuration.

Step 7: Monitor the WordPress Make Blog

The WordPress core team posts all React 19 migration updates on the Make WordPress Core blog. Subscribe to stay ahead of any last-minute changes before the WordPress 7.2 release in December 2026.

Key Takeaway

The React 19 upgrade was deferred once — it will not be deferred again. WordPress 7.2 is the target, and December 2026 is approaching fast. Start testing with the Gutenberg React 19 experiment today, audit your deprecated patterns, and run the official codemod. The developers who prepare now will have a smooth transition; those who wait may face broken plugins and frustrated users on release day.

Hashtags: #WordPress #React19 #Gutenberg #WordPressDevelopment #ReactJS #WebDevelopment #WPDev #JavaScript

Resources:

Search

Categories

Archives