Merge branch 'trunk' into try/interactivity-lazy-hydration

* trunk: (2604 commits)
  Update "Versions in WordPress" page (#63869)
  SelectControl: Fix hover/focus color in wp-admin (#63855)
  Add margin-bottom lint rules for RangeControl (#63821)
  JSON Schema Docgen Rework (#63868)
  JSON Schema Reorganization and Fixes (#63591)
  DataForm: Add a simple story for the DataForm component (#63840)
  Quick Edit: Support bulk selection (#63841)
  Update dataviews docs (#63860)
  Bump the github-actions group across 1 directory with 4 updates (#63808)
  Add unit tests for the gutenberg_render_block_core_post_title() function.
  Make hover block outlines not present in Distraction Free (#63819)
  DataViews: Rename the header property of fields to label (#63843)
  Fix: Error while Calling edit-site getCurrentTemplateTemplateParts selector (#63818)
  Revert "Update HeightControl component to label inputs" (#63839)
  Zoom out: hide vertical toolbar when block is not full width (#63650)
  Latest comments: Add color block support (#63419)
  Core Data: Remove leftover 'todo' comment (#63842)
  Tabs: keep full opacity of focus ring on disabled tabs (#63754)
  Fix selected row styles in table layout (#63811)
  Align checkbox, radio, and toggle input design (#63490)
  ...

.eslintrc.js

@@ -76,6 +76,77 @@ const restrictedImports = [
 		message:
 			"edit-widgets is a WordPress top level package that shouldn't be imported into other packages",
 	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
+];
+
+const restrictedSyntax = [
+	// NOTE: We can't include the forward slash in our regex or
+	// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
+	// here. That's why we use \\u002F in the regexes below.
+	{
+		selector:
+			'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
+		message: 'Path access on WordPress dependencies is not allowed.',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
+			majorMinorRegExp +
+			'/]',
+		message:
+			'Deprecated functions must be removed before releasing this version.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
+		message:
+			'This method is deprecated. You should use the more explicit API methods available.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
+		message: 'Prefer page.waitForSelector instead.',
+	},
+	{
+		selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
+		message:
+			'Do not use string literals for IDs; use withInstanceId instead.',
+	},
+	{
+		// Discourage the usage of `Math.random()` as it's a code smell
+		// for UUID generation, for which we already have a higher-order
+		// component: `withInstanceId`.
+		selector:
+			'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
+		message:
+			'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
+		message:
+			'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
+	},
+	{
+		selector:
+			'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
+		message:
+			'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
+	},
+];
+
+/** `no-restricted-syntax` rules for components. */
+const restrictedSyntaxComponents = [
+	{
+		selector:
+			'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="accessibleWhenDisabled"])) JSXAttribute[name.name="disabled"]',
+		message:
+			'`disabled` used without the `accessibleWhenDisabled` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+	},
 ];
 
 module.exports = {
@@ -87,6 +158,7 @@ module.exports = {
 	],
 	globals: {
 		wp: 'off',
+		globalThis: 'readonly',
 	},
 	settings: {
 		jsdoc: {
@@ -97,8 +169,13 @@ module.exports = {
 	},
 	rules: {
 		'jest/expect-expect': 'off',
+		'react/jsx-boolean-value': 'error',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{ props: 'never', children: 'never' },
+		],
 		'@wordpress/dependency-group': 'error',
-		'@wordpress/is-gutenberg-plugin': 'error',
+		'@wordpress/wp-global-usage': 'error',
 		'@wordpress/react-no-unsafe-timeout': 'error',
 		'@wordpress/i18n-text-domain': [
 			'error',
@@ -136,63 +213,7 @@ module.exports = {
 				disallowTypeAnnotations: false,
 			},
 		],
-		'no-restricted-syntax': [
-			'error',
-			// NOTE: We can't include the forward slash in our regex or
-			// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
-			// here. That's why we use \\u002F in the regexes below.
-			{
-				selector:
-					'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
-				message:
-					'Path access on WordPress dependencies is not allowed.',
-			},
-			{
-				selector:
-					'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
-					majorMinorRegExp +
-					'/]',
-				message:
-					'Deprecated functions must be removed before releasing this version.',
-			},
-			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
-				message:
-					'This method is deprecated. You should use the more explicit API methods available.',
-			},
-			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
-				message: 'Prefer page.waitForSelector instead.',
-			},
-			{
-				selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
-				message:
-					'Do not use string literals for IDs; use withInstanceId instead.',
-			},
-			{
-				// Discourage the usage of `Math.random()` as it's a code smell
-				// for UUID generation, for which we already have a higher-order
-				// component: `withInstanceId`.
-				selector:
-					'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
-				message:
-					'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
-			},
-			{
-				selector:
-					'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
-				message:
-					'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
-			},
-			{
-				selector:
-					'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
-				message:
-					'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
-			},
-		],
+		'no-restricted-syntax': [ 'error', ...restrictedSyntax ],
 	},
 	overrides: [
 		{
@@ -242,6 +263,49 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [
+				'packages/*/src/**/*.[tj]s?(x)',
+				'storybook/stories/**/*.[tj]s?(x)',
+			],
+			excludedFiles: [ '**/*.native.js' ],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+				],
+			},
+		},
+		{
+			// Temporary rules until we're ready to officially deprecate the bottom margins.
+			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
+			excludedFiles: [
+				'packages/components/src/**/@(test|stories)/**',
+				'**/*.@(native|ios|android).js',
+			],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					...[
+						'CheckboxControl',
+						'ComboboxControl',
+						'FocalPointPicker',
+						'RangeControl',
+						'SearchControl',
+						'TextareaControl',
+						'TreeSelect',
+					].map( ( componentName ) => ( {
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,
+						message:
+							componentName +
+							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
+					} ) ),
+				],
+			},
+		},
 		{
 			files: [
 				// Components package.
@@ -354,20 +418,27 @@ module.exports = {
 		},
 		{
 			files: [ 'packages/components/src/**' ],
-			excludedFiles: [ 'packages/components/src/utils/colors-values.js' ],
+			excludedFiles: [
+				'packages/components/src/utils/colors-values.js',
+				'packages/components/src/theme/**',
+			],
 			rules: {
 				'no-restricted-syntax': [
 					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
 					{
-						selector: 'Literal[value=/--wp-admin-theme-/]',
+						selector:
+							':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])',
 						message:
 							'--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
 					},
 					{
 						selector:
-							'TemplateElement[value.cooked=/--wp-admin-theme-/]',
+							// Allow overriding definitions, but not access with var()
+							':matches(Literal[value=/var\\(\\s*--wp-components-color-/],TemplateElement[value.cooked=/var\\(\\s*--wp-components-color-/])',
 						message:
-							'--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
+							'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
 					},
 				],
 			},
@@ -378,6 +449,26 @@ module.exports = {
 			plugins: [ 'ssr-friendly' ],
 			extends: [ 'plugin:ssr-friendly/recommended' ],
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					// The `ariakit` and `framer-motion` APIs are meant to be consumed via
+					// the `@wordpress/components` package, hence why importing those
+					// dependencies should be allowed in the components package.
+					{
+						paths: restrictedImports.filter(
+							( { name } ) =>
+								! [
+									'@ariakit/react',
+									'framer-motion',
+								].includes( name )
+						),
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/block-editor/**' ],
 			rules: {
@@ -401,6 +492,24 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/edit-post/**', 'packages/edit-site/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						paths: [
+							...restrictedImports,
+							{
+								name: '@wordpress/interface',
+								message:
+									'The edit-post and edit-site package should not directly import the interface package. They should import them from the private APIs of the editor package instead.',
+							},
+						],
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/interactivity*/src/**' ],
 			rules: {

.git-blame-ignore-revs

@@ -12,3 +12,12 @@ c56e8a1910ed74f405b74bbb12fe81dea974e5c3
 
 # Prettier upgrade to 3.0.3.
 0bee15148fe4330c20cf372cb46a33693e45cb5f
+
+# ESLint: Enable react/jsx-boolean-value
+9a34927870df80ac3b2da14d71f81d20ec23e2b6
+
+# Autofix eslint curly rule.
+0221522f253e094b277a1485b7a2d186cb172632
+
+# ESLint: Enable react/jsx-curly-brace-presence
+5d4baa9ab5f57d207cc3a048003216a8574574d9

.gitattributes

@@ -11,3 +11,15 @@
 *.jpg binary
 *.png binary
 *.ttf binary
+
+# Directories with vendored code.
+packages/edit-site/lib/** linguist-vendored
+
+# The changelog.txt file is authored as markdown.
+changelog.txt linguist-language=Markdown
+
+# Flag docs directory as documentation for GitHub stats.
+docs/** linguist-documentation
+
+# TSConfig files use jsonc.
+tsconfig*.json linguist-language=jsonc