JSX in WordPress 6.6

Welcome!

The WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:

Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Create a ticket in the bug tracker.

Want to contribute? Get started quickly with tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on the reports page, like patches needing testing, and on feature projects page.

Other questions? Here is a detailed handbook for contributors, complete with tutorials.

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

Lovekesh Kumar 7:19 am on June 11, 2024

For instructions on how to polyfill the new JSX runtime in older WordPress versions, rather than bundling your ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. with the old JSX runtime, refer to https://github.com/WordPress/gutenberg/issues/62202#issuecomment-2156796649

Please note that this polyfill will not be applicable for WordPress versions earlier than 5.9 and 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/ versions earlier than 10.9.0, as they do not include React v17 or later, which is required for the new JSX runtime. For more information, see Introducing the New JSX Transform.
- David Levine 9:37 am on June 11, 2024
  
  This IMO should be part of the dev-note itself, and the dev-note should be added in the changelogs.
  
  In general hoping this prompts a larger conversation on how we can better convey release changes (breaking or otherwise) 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/ packages, and establish clearer guidelines for those using those packages while supporting multiple versions of WordPress
Matt Knighton 8:23 am on July 16, 2024

I tried to use the latest create-guten-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. today and the npm install does not result in rendered blocks. This means that you get blocks looking like they are rendered but the index.asset.php dependency array is incorrect (loads reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. at the start with the wrong setup) and causes the block to not load as all dependency items are marked as missing.

Im not really sure where to note this or how to raise a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. but Im happy to do a video / loom or something to show the issue.
- Riad Benguella 8:08 am on July 17, 2024
  
  Hi Matt! create-guten-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. looks to be archived and not maintained anymore. Did you try using `wordpress/create-block` instead?

Comments are closed.

Welcome!

Communication

How to use the new JSX in WordPress 6.6

Build Tools Compatibility and upgrade path

Going forward

Share this: