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