Preparation for React 19 Upgrade

WordPress 6.6 will ship with version 18.3 of the React library, which is identical to 18.2 but adds warnings for deprecations and other changes to help developers prepare for the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 19 upgrade once it becomes stable.

It’s recommended to stop using the deprecated features to ensure better compatibility with React 19 when it ships with WordPress. Keeping deprecations unchecked may lead to bugs or unintended behavior in your plugins. Addressing them is important to ensure smooth and reliable functionality.

Removed: defaultProps for function components

When searching the 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 and theme repo for the use of deprecations in React 19, this one was found to be common.

React 19 will remove defaultProps for function components in favor of ES6 default parameters. This change can cause unexpected side effects when a component relies on default values provided by defaultProps.

// Before.
function Welcome( { text } ) {
	return <p>{ text }</p>;
}

Welcome.defaultProps = {
	text: 'Howdy!',
};

// After.
function Welcome( { text = 'Howdy!' } ) {
	return <p>{ text }</p>;
}

Please refer to the official React 19 upgrade guide for a full list of deprecations and changes.


Props to @kirasong for review and @juanmaguitar for proofreading.

#6-6, #dev-note, #dev-notes, #dev-notes-6-6

JSX in WordPress 6.6

WordPress 6.6 introduces the possibility for developers to use the new React JSX transform that was first released in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 17. 

How to use the new JSX in WordPress 6.6

Your build scripts need to apply the following changes in the built files:

  • Add the react-jsx-runtime to your script dependencies.
  • Use ReactJSXRuntime.jsx global as the output of your JSX calls.

In general, this is not something you do manually in your code base. Instead, you’ll use a build tool. The @wordpress/scripts, @wordpress/babel-preset-default and  @wordpress/dependency-extraction-webpack-plugin npm packages have been upgraded to apply these transformations automatically.

Build Tools Compatibility and upgrade path

If you’re using the JSX syntax in your code base, and as long as you don’t update your dev dependencies (including @wordpress/scripts, @wordpress/babel-preset-default or @wordpress/dependency-extraction-webpack-plugin), you will continue to use the old JSX transform. This will allow your 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 and built files to be compatible with WordPress 6.5, earlier versions and WordPress 6.6 as well.

When you’re ready to make WordPress 6.6 the minimum supported version of your plugin, you can update the following dependencies to use the new JSX transform.

  • @wordpress/scripts from version 28.
  • @wordpress/babel-preset-default from version 8.
  • @wordpress/dependency-extraction-webpack-plugin from version 6.

Going forward

The new JSX transform comes with performance improvements and optimization. 

Note that the React team will deprecate the old JSX transform in the upcoming React v19 release (currently in RC). 


Thank you @ramonopoly @justlevine for contributing to and reviewing this post.

#6-6, #dev-note, #dev-notes, #dev-notes-6-6

Font Library update: storage of font files

This post has been superseded by the post WordPress 6.5 release delayed 1 week, in which it’s announced fonts will be uploaded to the fonts sub-directory of the uploads folder.

The Font Library, a new feature of WordPress 6.5, will allow users of blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor themes to upload and customize their site’s fonts. You can learn about the full set of Font Library features in the #dev-note.

As fonts are a new first-class object, there has been some discussion around where to store the associated files while accounting for different file systems used by WordPress sites. The particular challenge has been for file systems that do not allow for the writing of files outside the uploads directory (See Gutenberg#59417 and Gutenberg#59699).

To account for such file systems, it was originally decided to natively fallback to the uploads directory natively in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Revised approach to font file storage

Exploratory work on supporting a fallback directory natively has demonstrated that this approach would lead to a high risk of bugs. Therefore, the original decision is being modified and the new approach will be:

  • WordPress Core will by default only attempt to store font files in the wp-content/fonts directory,
  • For file systems unable to write to or persistently store files in the new directory it is recommended to install the 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 Fonts to Uploads to store the files in the under existing uploads directory, in wp-content/uploads/fonts
  • Developers wishing to modify the directory without using a plugin can use the font_dir filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. documented in the announcement post.

Props @mmaattiiaass and other contributors for working on the exploratory pull request.

Thank you @desrosj, @priethor, @chanthaboune and @jorbin for contributing to and reviewing this post.

#6-5, #dev-notes, #dev-notes-6-5