@wordpress/eslint-plugin 25.6.0 → 25.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "25.6.0",
+	"version": "25.7.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,9 +44,9 @@
 		"@babel/eslint-parser": "^7.28.6",
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.7.0",
 		"@eslint/compat": "^2.0.0",
-		"@wordpress/babel-preset-default": "^8.50.0",
-		"@wordpress/prettier-config": "^4.50.0",
-		"@wordpress/theme": "^0.17.0",
+		"@wordpress/babel-preset-default": "^8.51.0",
+		"@wordpress/prettier-config": "^4.51.0",
+		"@wordpress/theme": "^1.0.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^10.0.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -64,8 +64,10 @@
 	},
 	"devDependencies": {
 		"@types/eslint": "^9",
-		"@types/estree": "^1.0.5",
-		"eslint": "^10.0.0"
+		"@types/estree": "^1.0.8",
+		"@typescript-eslint/parser": "^8.57.1",
+		"eslint": "^10.0.0",
+		"typescript": "npm:@typescript/typescript6@^6.0.2"
 	},
 	"peerDependencies": {
 		"@babel/core": ">=7",
@@ -84,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

package/rules/__tests__/components-no-missing-40px-size-prop.js

@@ -22,18 +22,18 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				<Button __next40pxDefaultSize />
 			`,
 		},
-		// Component with __next40pxDefaultSize={true}
+		// Component with non-default size prop
 		{
 			code: `
-				import { InputControl } from '@wordpress/components';
-				<InputControl __next40pxDefaultSize={true} />
+				import { Button } from '@wordpress/components';
+				<Button size="small" />
 			`,
 		},
-		// Component with non-default size prop
+		// SelectControl no longer requires __next40pxDefaultSize
 		{
 			code: `
-				import { Button } from '@wordpress/components';
-				<Button size="small" />
+				import { SelectControl } from '@wordpress/components';
+				<SelectControl />
 			`,
 		},
 		// Component with size="compact"
@@ -71,20 +71,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				<WPButton __next40pxDefaultSize />
 			`,
 		},
-		// FormFileUpload with render prop (special case)
-		{
-			code: `
-				import { FormFileUpload } from '@wordpress/components';
-				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
-			`,
-		},
-		// FormFileUpload with __next40pxDefaultSize
-		{
-			code: `
-				import { FormFileUpload } from '@wordpress/components';
-				<FormFileUpload __next40pxDefaultSize />
-			`,
-		},
 		// Component with dynamic size prop (assumes it could be non-default)
 		{
 			code: `
@@ -110,40 +96,19 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 		{
 			code: `
 				import {
-					BorderBoxControl,
-					BorderControl,
-					ComboboxControl,
-					CustomSelectControl,
-					FontAppearanceControl,
-					FontFamilyControl,
-					FontSizePicker,
-					FormTokenField,
 					InputControl,
-					LetterSpacingControl,
-					LineHeightControl,
 					NumberControl,
 					RangeControl,
 					SelectControl,
 					ToggleGroupControl,
-					UnitControl,
 				} from '@wordpress/components';
 				<>
-					<BorderBoxControl __next40pxDefaultSize />
-					<BorderControl __next40pxDefaultSize />
-					<ComboboxControl __next40pxDefaultSize />
-					<CustomSelectControl __next40pxDefaultSize />
-					<FontAppearanceControl __next40pxDefaultSize />
-					<FontFamilyControl __next40pxDefaultSize />
-					<FontSizePicker __next40pxDefaultSize />
-					<FormTokenField __next40pxDefaultSize />
-					<InputControl __next40pxDefaultSize />
-					<LetterSpacingControl __next40pxDefaultSize />
-					<LineHeightControl __next40pxDefaultSize />
-					<NumberControl __next40pxDefaultSize />
-					<RangeControl __next40pxDefaultSize />
-					<SelectControl __next40pxDefaultSize />
-					<ToggleGroupControl __next40pxDefaultSize />
-					<UnitControl __next40pxDefaultSize />
+					<FormTokenField />
+					<InputControl />
+					<NumberControl />
+					<RangeControl />
+					<SelectControl />
+					<ToggleGroupControl />
 				</>
 			`,
 		},
@@ -162,29 +127,16 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				},
 			],
 		},
-		// InputControl without __next40pxDefaultSize
-		{
-			code: `
-				import { InputControl } from '@wordpress/components';
-				<InputControl value={value} onChange={onChange} />
-			`,
-			errors: [
-				{
-					messageId: 'missingProp',
-					data: { component: 'InputControl' },
-				},
-			],
-		},
 		// Component with __next40pxDefaultSize={false}
 		{
 			code: `
-				import { SelectControl } from '@wordpress/components';
-				<SelectControl __next40pxDefaultSize={false} />
+				import { Button } from '@wordpress/components';
+				<Button __next40pxDefaultSize={false} />
 			`,
 			errors: [
 				{
 					messageId: 'missingProp',
-					data: { component: 'SelectControl' },
+					data: { component: 'Button' },
 				},
 			],
 		},
@@ -201,47 +153,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				},
 			],
 		},
-		// Aliased import without __next40pxDefaultSize
-		{
-			code: `
-				import { InputControl as MyInputControl } from '@wordpress/components';
-				<MyInputControl />
-			`,
-			errors: [
-				{
-					messageId: 'missingProp',
-					data: { component: 'InputControl' },
-				},
-			],
-		},
-		// FormFileUpload without __next40pxDefaultSize or render
-		{
-			code: `
-				import { FormFileUpload } from '@wordpress/components';
-				<FormFileUpload onChange={handleChange} />
-			`,
-			errors: [
-				{
-					messageId: 'missingPropFormFileUpload',
-				},
-			],
-		},
-		// Multiple components, some invalid
-		{
-			code: `
-				import { Button, InputControl } from '@wordpress/components';
-				<>
-					<Button __next40pxDefaultSize />
-					<InputControl />
-				</>
-			`,
-			errors: [
-				{
-					messageId: 'missingProp',
-					data: { component: 'InputControl' },
-				},
-			],
-		},
 		// Multiple invalid components
 		{
 			code: `
@@ -256,10 +167,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 					messageId: 'missingProp',
 					data: { component: 'Button' },
 				},
-				{
-					messageId: 'missingProp',
-					data: { component: 'SelectControl' },
-				},
 			],
 		},
 		// Relative import with checkLocalImports enabled
@@ -276,20 +183,6 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 				},
 			],
 		},
-		// Default import from input-control path with checkLocalImports enabled
-		{
-			code: `
-				import InputControl from '../input-control';
-				<InputControl />
-			`,
-			options: [ { checkLocalImports: true } ],
-			errors: [
-				{
-					messageId: 'missingProp',
-					data: { component: 'InputControl' },
-				},
-			],
-		},
 	],
 } );
 
@@ -311,7 +204,7 @@ ruleTester.run(
 			{
 				code: `
 				import InputControl from './input-control';
-				<InputControl __next40pxDefaultSize />
+				<InputControl />
 			`,
 				options: [ { checkLocalImports: true } ],
 			},
@@ -337,14 +230,6 @@ ruleTester.run(
 				<InputControl />
 			`,
 			},
-			// FormFileUpload relative import with render prop
-			{
-				code: `
-				import { FormFileUpload } from '../form-file-upload';
-				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
-			`,
-				options: [ { checkLocalImports: true } ],
-			},
 		],
 		invalid: [],
 	}

package/rules/__tests__/no-unsafe-wp-apis.js

@@ -54,6 +54,13 @@ ruleTester.run( 'no-unsafe-wp-apis', rule, {
 			options,
 		},
 		{ code: "import * as s from '@wordpress/package';", options },
+		{
+			// String-literal imports (e.g. `import { 'a' as b }`) have a
+			// non-identifier `imported` node and are ignored by the rule.
+			code: "import { '__experimentalUnsafe' as s } from '@wordpress/package';",
+			options,
+			languageOptions: { sourceType: 'module', ecmaVersion: 2022 },
+		},
 	],
 
 	invalid: [

package/rules/components-no-missing-40px-size-prop.js

@@ -12,40 +12,9 @@ const { hasTruthyJsxAttribute } = require( '../utils' );
  * These can be exempted if they have a non-default `size` prop.
  */
 const COMPONENTS_REQUIRING_40PX = new Set( [
-	'BorderBoxControl',
-	'BorderControl',
 	'Button',
 	'ClipboardButton',
-	'ComboboxControl',
-	'CustomSelectControl',
-	'FontAppearanceControl',
-	'FontFamilyControl',
-	'FontSizePicker',
-	'FormTokenField',
 	'IconButton',
-	'InputControl',
-	'LetterSpacingControl',
-	'LineHeightControl',
-	'NumberControl',
-	'Radio',
-	'RangeControl',
-	'SelectControl',
-	'TreeSelect',
-	'ToggleGroupControl',
-	'UnitControl',
-] );
-
-/**
- * Components that can use the `render` prop as an alternative to __next40pxDefaultSize.
- */
-const COMPONENTS_WITH_RENDER_EXEMPTION = new Set( [ 'FormFileUpload' ] );
-
-/**
- * All tracked component names for path-based detection.
- */
-const ALL_TRACKED_COMPONENTS = new Set( [
-	...COMPONENTS_REQUIRING_40PX,
-	...COMPONENTS_WITH_RENDER_EXEMPTION,
 ] );
 
 module.exports = {
@@ -67,8 +36,6 @@ module.exports = {
 		messages: {
 			missingProp:
 				'{{ component }} should have the `__next40pxDefaultSize` prop when using the default size.',
-			missingPropFormFileUpload:
-				'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 		},
 	},
 	create( context ) {
@@ -121,7 +88,7 @@ module.exports = {
 				.join( '' );
 
 			// Check if it's one of our tracked components
-			if ( ALL_TRACKED_COMPONENTS.has( pascalCase ) ) {
+			if ( COMPONENTS_REQUIRING_40PX.has( pascalCase ) ) {
 				return pascalCase;
 			}
 
@@ -166,21 +133,6 @@ module.exports = {
 			return false;
 		}
 
-		/**
-		 * Check if the `render` prop exists.
-		 *
-		 * @param {Array} attributes - JSX attributes array
-		 * @return {boolean} Whether render prop exists
-		 */
-		function hasRenderProp( attributes ) {
-			return attributes.some(
-				( a ) =>
-					a.type === 'JSXAttribute' &&
-					a.name &&
-					a.name.name === 'render'
-			);
-		}
-
 		/**
 		 * Check if the `variant` prop has the value "link".
 		 * Button with variant="link" doesn't need __next40pxDefaultSize.
@@ -230,10 +182,7 @@ module.exports = {
 					const localName = specifier.local.name;
 
 					// Track components that require the prop
-					if (
-						COMPONENTS_REQUIRING_40PX.has( importedName ) ||
-						COMPONENTS_WITH_RENDER_EXEMPTION.has( importedName )
-					) {
+					if ( COMPONENTS_REQUIRING_40PX.has( importedName ) ) {
 						trackedImports.set( localName, importedName );
 					}
 				} );
@@ -254,7 +203,7 @@ module.exports = {
 							// Support patterns like `import ClipboardButton from '.';`
 							// (common in component folder examples/tests).
 							// If the local name matches a tracked component, treat it as such.
-							if ( ALL_TRACKED_COMPONENTS.has( localName ) ) {
+							if ( COMPONENTS_REQUIRING_40PX.has( localName ) ) {
 								trackedImports.set( localName, localName );
 							}
 						}
@@ -285,20 +234,6 @@ module.exports = {
 					return;
 				}
 
-				// Handle FormFileUpload special case
-				if ( COMPONENTS_WITH_RENDER_EXEMPTION.has( importedName ) ) {
-					// FormFileUpload is valid if it has a `render` prop
-					if ( hasRenderProp( attributes ) ) {
-						return;
-					}
-
-					context.report( {
-						node,
-						messageId: 'missingPropFormFileUpload',
-					} );
-					return;
-				}
-
 				// For other components, check if size prop has a non-default value
 				if ( hasNonDefaultSize( attributes ) ) {
 					return;

package/rules/no-unsafe-wp-apis.js

@@ -63,6 +63,11 @@ function makeListener( { allowedImports, context } ) {
 				return;
 			}
 
+			/* `imported` may be a string literal (e.g. `import { 'a' as b }`); only identifiers are relevant here. */
+			if ( specifierNode.imported.type !== 'Identifier' ) {
+				return;
+			}
+
 			const importedName = specifierNode.imported.name;
 
 			if (

package/rules/use-recommended-components.js

@@ -23,6 +23,7 @@ const ALLOWLIST = {
 			'EmptyState',
 			'Icon',
 			'Link',
+			'Skeleton',
 			'Stack',
 			'Tabs',
 			'Text',