React: Upgrade to the new JSX transform

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' );
 

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",

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)

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(),

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",

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 ) => (
-				<ColorPanelDropdown
-					key={ item.key }
-					{ ...item }
-					colorGradientControlSettings={ {
-						colors,
-						disableCustomColors: ! areCustomSolidsEnabled,
-						gradients,
-						disableCustomGradients: ! areCustomGradientsEnabled,
-					} }
-					panelId={ panelId }
-				/>
-			) ) }
+			{ items.map( ( item ) => {
+				const { key, ...restItem } = item;
+				return (
+					<ColorPanelDropdown
+						key={ key }
+						{ ...restItem }
+						colorGradientControlSettings={ {
+							colors,
+							disableCustomColors: ! areCustomSolidsEnabled,
+							gradients,
+							disableCustomGradients: ! areCustomGradientsEnabled,
+						} }
+						panelId={ panelId }
+					/>
+				);
+			} ) }
 			{ children }
 		</Wrapper>
 	);

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

packages/components/src/custom-select-control/index.js

@@ -185,12 +185,11 @@ export default function CustomSelectControl( props ) {
 					<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 						{ isOpen &&
 							items.map( ( item, index ) => (
-								// eslint-disable-next-line react/jsx-key
 								<li
+									key={ item.key }
 									{ ...getItemProps( {
 										item,
 										index,
-										key: item.key,
 										className: clsx(
 											item.className,
 											'components-custom-select-control__item',

packages/components/src/form-token-field/index.tsx

@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )

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' ) ) {

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 <Provider value={ contextStack }>{ children }</Provider>;
+			return createElement( Provider, { value: contextStack }, children );
 		},
 		{ priority: 5 }
 	);
@@ -481,12 +480,10 @@ export default () => {
 		} ) => {
 			// Preserve the initial inner HTML.
 			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
 		}
 	);
 
@@ -549,10 +546,10 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return (
-					<Provider value={ mergedContext } key={ key }>
-						{ element.props.content }
-					</Provider>
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
 				);
 			} );
 		},

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 ? (
-			<Directives
-				directives={ directives }
-				priorityLevels={ nextPriorityLevels }
-				element={ element }
-				originalProps={ originalProps }
-				previousScope={ scope }
-			/>
-		) : (
-			element
-		);
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
 
 	const props = { ...originalProps, children };
 	const directiveArgs = {

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

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,