diff --git a/lib/client-assets.php b/lib/client-assets.php
index 13884f90fb3ea5..a159bc53e6a591 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) {
array( 'react' ),
'18'
);
+
+ gutenberg_override_script(
+ $scripts,
+ 'react-jsx-runtime',
+ gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ),
+ array( 'react' ),
+ '18'
+ );
}
add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
diff --git a/package-lock.json b/package-lock.json
index 35ea50b60b7ada..c178dd55e5be54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,8 +80,7 @@
"@wordpress/warning": "file:packages/warning",
"@wordpress/widgets": "file:packages/widgets",
"@wordpress/wordcount": "file:packages/wordcount",
- "es-module-shims": "^1.8.2",
- "wicg-inert": "3.1.2"
+ "es-module-shims": "^1.8.2"
},
"devDependencies": {
"@actions/core": "1.9.1",
@@ -52371,11 +52370,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/wicg-inert": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
- "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
- },
"node_modules/wide-align": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -53163,7 +53157,6 @@
"@babel/preset-env": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@babel/runtime": "^7.16.0",
- "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
"@wordpress/browserslist-config": "file:../browserslist-config",
"@wordpress/warning": "file:../warning",
"browserslist": "^4.21.10",
@@ -68510,7 +68503,6 @@
"@babel/preset-env": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@babel/runtime": "^7.16.0",
- "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
"@wordpress/browserslist-config": "file:../browserslist-config",
"@wordpress/warning": "file:../warning",
"browserslist": "^4.21.10",
@@ -96252,11 +96244,6 @@
"has-tostringtag": "^1.0.0"
}
},
- "wicg-inert": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
- "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
- },
"wide-align": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/package.json b/package.json
index 7995d6a9755a7e..422b9678b238b8 100644
--- a/package.json
+++ b/package.json
@@ -92,8 +92,7 @@
"@wordpress/warning": "file:packages/warning",
"@wordpress/widgets": "file:packages/widgets",
"@wordpress/wordcount": "file:packages/wordcount",
- "es-module-shims": "^1.8.2",
- "wicg-inert": "3.1.2"
+ "es-module-shims": "^1.8.2"
},
"devDependencies": {
"@actions/core": "1.9.1",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 5735008dd472dc..15ced9c9dde12c 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Breaking Changes
+
+- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
## 7.42.0 (2024-05-16)
## 7.41.0 (2024-05-02)
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 40f7c31bb3c25b..45ec6473be3cbc 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -75,21 +75,10 @@ module.exports = ( api ) => {
],
plugins: [
require.resolve( '@wordpress/warning/babel-plugin' ),
- [
- require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
- {
- scopeVariable: 'createElement',
- scopeVariableFrag: 'Fragment',
- source: 'react',
- isDefault: false,
- },
- ],
[
require.resolve( '@babel/plugin-transform-react-jsx' ),
{
- pragma: 'createElement',
- pragmaFrag: 'Fragment',
- useSpread: true,
+ runtime: 'automatic',
},
],
maybeGetPluginTransformRuntime(),
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 4b12101565b45c..438cce0f47b96b 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -35,7 +35,6 @@
"@babel/preset-env": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@babel/runtime": "^7.16.0",
- "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
"@wordpress/browserslist-config": "file:../browserslist-config",
"@wordpress/warning": "file:../warning",
"browserslist": "^4.21.10",
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 7a20953af428cd..55c6dfbe4cc977 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -712,19 +712,22 @@ export default function ColorPanel( {
onChange={ onChange }
panelId={ panelId }
>
- { items.map( ( item ) => (
-
- ) ) }
+ { items.map( ( item ) => {
+ const { key, ...restItem } = item;
+ return (
+
+ );
+ } ) }
{ children }
);
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7ada9626797d45..4e965c7960b8e3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
- `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
+### Internal
+
+- Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
## 27.6.0 (2024-05-16)
### Internal
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 46bc4f4d9a4fb1..979aa0f7bdff8d 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -185,12 +185,11 @@ export default function CustomSelectControl( props ) {
{ isOpen &&
items.map( ( item, index ) => (
- // eslint-disable-next-line react/jsx-key
- = maxLength )
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index 92fdcff11612ea..55a908c31a7ab9 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -42,6 +42,10 @@ function defaultRequestToExternal( request ) {
case 'react-dom':
return 'ReactDOM';
+
+ case 'react/jsx-runtime':
+ case 'react/jsx-dev-runtime':
+ return 'ReactJSXRuntime';
}
if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -117,6 +121,9 @@ function defaultRequestToHandle( request ) {
case 'lodash-es':
return 'lodash';
+
+ case 'react/jsx-runtime':
+ return 'react-jsx-runtime';
}
if ( request.includes( 'react-refresh/runtime' ) ) {
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index b0b78bb27efe50..d0619bb37d4c7f 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -1,8 +1,6 @@
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react-hooks/exhaustive-deps */
-/* @jsx createElement */
-
/**
* External dependencies
*/
@@ -231,6 +229,7 @@ export default () => {
// data-wp-context
directive(
'context',
+ // @ts-ignore-next-line
( {
directives: { context },
props: { children },
@@ -260,7 +259,7 @@ export default () => {
return proxifyContext( currentValue.current, inheritedValue );
}, [ defaultEntry, inheritedValue ] );
- return { children };
+ return createElement( Provider, { value: contextStack }, children );
},
{ priority: 5 }
);
@@ -481,12 +480,10 @@ export default () => {
} ) => {
// Preserve the initial inner HTML.
const cached = useMemo( () => innerHTML, [] );
- return (
-
- );
+ return createElement( Type, {
+ dangerouslySetInnerHTML: { __html: cached },
+ ...rest,
+ } );
}
);
@@ -549,10 +546,10 @@ export default () => {
? getEvaluate( { scope } )( eachKey[ 0 ] )
: item;
- return (
-
- { element.props.content }
-
+ return createElement(
+ Provider,
+ { value: mergedContext, key },
+ element.props.content
);
} );
},
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 735ed26aabc8cc..4d4e2d6d6f6629 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -1,5 +1,3 @@
-/* @jsx createElement */
-
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react-hooks/exhaustive-deps */
@@ -352,17 +350,15 @@ const Directives = ( {
// Recursively render the wrapper for the next priority level.
const children =
- nextPriorityLevels.length > 0 ? (
-
- ) : (
- element
- );
+ nextPriorityLevels.length > 0
+ ? createElement( Directives, {
+ directives,
+ priorityLevels: nextPriorityLevels,
+ element,
+ originalProps,
+ previousScope: scope,
+ } )
+ : element;
const props = { ...originalProps, children };
const directiveArgs = {
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 8bc3319e52836c..8c5aa8c623ef09 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Breaking Changes
+
+- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
## 27.9.0 (2024-05-16)
### New Features
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 0a4b8cef574464..899ee36ec93813 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -102,34 +102,6 @@ const exportDefaultPackages = [
'warning',
];
-const vendors = {
- react: [
- 'react/umd/react.development.js',
- 'react/umd/react.production.min.js',
- ],
- 'react-dom': [
- 'react-dom/umd/react-dom.development.js',
- 'react-dom/umd/react-dom.production.min.js',
- ],
- 'inert-polyfill': [
- 'wicg-inert/dist/inert.js',
- 'wicg-inert/dist/inert.min.js',
- ],
-};
-const vendorsCopyConfig = Object.entries( vendors ).flatMap(
- ( [ key, [ devFilename, prodFilename ] ] ) => {
- return [
- {
- from: `node_modules/${ devFilename }`,
- to: `build/vendors/${ key }.js`,
- },
- {
- from: `node_modules/${ prodFilename }`,
- to: `build/vendors/${ key }.min.js`,
- },
- ];
- }
-);
module.exports = {
...baseConfig,
name: 'packages',
@@ -176,8 +148,7 @@ module.exports = {
transform: stylesTransform,
noErrorOnMissing: true,
} ) )
- .concat( bundledPackagesPhpConfig )
- .concat( vendorsCopyConfig ),
+ .concat( bundledPackagesPhpConfig ),
} ),
new MomentTimezoneDataPlugin( {
startYear: 2000,
diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js
new file mode 100644
index 00000000000000..d21c029f6c3971
--- /dev/null
+++ b/tools/webpack/vendors.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+const importedVendors = {
+ react: { import: 'react', global: 'React' },
+ 'react-dom': { import: 'react-dom', global: 'ReactDOM' },
+ 'react-jsx-runtime': {
+ import: 'react/jsx-runtime',
+ global: 'ReactJSXRuntime',
+ },
+};
+
+module.exports = [
+ ...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => {
+ return [ 'production', 'development' ].map( ( mode ) => {
+ return {
+ mode,
+ target: 'browserslist',
+ output: {
+ filename:
+ mode === 'development'
+ ? `vendors/[name].js`
+ : `vendors/[name].min.js`,
+ path: join( __dirname, '..', '..', 'build' ),
+ },
+ entry: {
+ [ name ]: {
+ import: config.import,
+ library: {
+ name: config.global,
+ type: 'window',
+ },
+ },
+ },
+
+ externals:
+ name === 'react'
+ ? {}
+ : {
+ react: 'React',
+ },
+ };
+ } );
+ } ),
+];
diff --git a/webpack.config.js b/webpack.config.js
index 8558707f4bc9fa..45b22cc5354dcf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,10 +5,12 @@ const blocksConfig = require( './tools/webpack/blocks' );
const developmentConfigs = require( './tools/webpack/development' );
const interactivity = require( './tools/webpack/interactivity' );
const packagesConfig = require( './tools/webpack/packages' );
+const vendorsConfig = require( './tools/webpack/vendors' );
module.exports = [
...blocksConfig,
interactivity,
packagesConfig,
...developmentConfigs,
+ ...vendorsConfig,
];