From 4efb352e8b3e84daf69d02209d45cc000c4a2efa Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Tue, 6 Aug 2024 15:45:58 -0400
Subject: [PATCH 001/205] Update data-core.md (#64309)

Fix heading level causing issues with sidebar menu
---
 docs/reference-guides/data/data-core.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index f4138c49dc8d6b..f08fbc960b8b28 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -2,7 +2,7 @@
 
 Namespace: `core`.
 
-### Dynamically generated selectors
+## Dynamically generated selectors
 
 There are a number of user-friendly selectors that are wrappers of the more generic `getEntityRecord` and `getEntityRecords` that can be used to retrieve information for the various entities.
 

From 0f81a4262f394139b411035b4db3a29c938b0947 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 05:57:06 +0900
Subject: [PATCH 002/205] Add margin-bottom lint rules for ToggleControl
 (#64213)

* Fix in ImageSettingsPanel

* Fix in block hooks

* Fix in Avatar block

* Fix in Details block

* Fix in Latest posts block

* Fix in Query Loop block

* Fix in Tag Cloud block

* Fix in Add New Pattern modal

* Fix in Create pattern modal

* Fix in ReusableBlockConvertButton

* Add eslint rule

* Add prop to docs

* Fix up

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                             | 1 +
 .../src/components/global-styles/image-settings-panel.js | 1 +
 packages/block-editor/src/hooks/block-hooks.js           | 1 +
 packages/block-library/src/avatar/edit.js                | 1 +
 packages/block-library/src/details/edit.js               | 1 +
 packages/block-library/src/latest-posts/edit.js          | 1 +
 .../inspector-controls/enhanced-pagination-control.js    | 1 +
 packages/block-library/src/tag-cloud/edit.js             | 1 +
 packages/components/src/toggle-control/README.md         | 9 +++++++++
 packages/components/src/toggle-control/index.tsx         | 1 +
 .../edit-post/src/components/init-pattern-modal/index.js | 1 +
 packages/patterns/src/components/create-pattern-modal.js | 1 +
 .../reusable-block-convert-button.js                     | 1 +
 13 files changed, 21 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 97c9f395194f35..cb132fbb3d7aba 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -297,6 +297,7 @@ module.exports = {
 						'SearchControl',
 						'TextControl',
 						'TextareaControl',
+						'ToggleControl',
 						'ToggleGroupControl',
 						'TreeSelect',
 					].map( ( componentName ) => ( {
diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
index f668e7e5efc244..4ebc20ab201983 100644
--- a/packages/block-editor/src/components/global-styles/image-settings-panel.js
+++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -67,6 +67,7 @@ export default function ImageSettingsPanel( {
 					panelId={ panelId }
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
index 04cd6d4cfc0233..b1fab1b124f8dc 100644
--- a/packages/block-editor/src/hooks/block-hooks.js
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -201,6 +201,7 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
 										label={
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
index 4fad0fb09f883b..8309bc5e878a0e 100644
--- a/packages/block-library/src/avatar/edit.js
+++ b/packages/block-library/src/avatar/edit.js
@@ -58,6 +58,7 @@ const AvatarInspectorControls = ( {
 			/>
 			{ attributes.isLink && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 3432c00d7ab0c5..314556ba6d5919 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open by default' ) }
 						checked={ showContent }
 						onChange={ () =>
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index ce8f75c671c833..49a24b08f68d77 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -202,6 +202,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Post content' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post content' ) }
 					checked={ displayPostContent }
 					onChange={ ( value ) =>
diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
index 293baead3f5c62..e1001cda4dab39 100644
--- a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Force page reload' ) }
 				help={ help }
 				checked={
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index 17ca150bc4d75f..9a2b531b30f8ab 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -169,6 +169,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					required
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show tag counts' ) }
 					checked={ showTagCounts }
 					onChange={ () =>
diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index 3a77ef6942d2e5..cf480360265ed4 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -15,6 +15,7 @@ const MyToggleControl = () => {
 
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -78,3 +79,11 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index 2c405352ab215f..5c64d57d3d0249 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -113,6 +113,7 @@ function UnforwardedToggleControl(
  *
  *   return (
  *     <ToggleControl
+ *       __nextHasNoMarginBottom
  *       label="Fixed Background"
  *       checked={ value }
  *       onChange={ () => setValue( ( state ) => ! state ) }
diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
index a40ffc5dc58562..bb448953364f05 100644
--- a/packages/edit-post/src/components/init-pattern-modal/index.js
+++ b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -74,6 +74,7 @@ export default function InitPatternModal() {
 								__next40pxDefaultSize
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
index 226f48eb6c9e6f..dd86709acbca30 100644
--- a/packages/patterns/src/components/create-pattern-modal.js
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -131,6 +131,7 @@ export function CreatePatternModalContents( {
 					categoryMap={ categoryMap }
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ _x( 'Synced', 'pattern (singular)' ) }
 					help={ __(
 						'Sync this pattern across multiple locations.'
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index 40f056a3a73885..21f3d0a61be042 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -176,6 +176,7 @@ export default function ReusableBlockConvertButton( {
 								placeholder={ __( 'My pattern' ) }
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'

From de33f914b41ca3eec510aa2fd0c7841c6eb7e1ab Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 07:08:17 +0900
Subject: [PATCH 003/205] SelectControl: Infer `value` type from `options`
 (#64069)

* SelectControl: Infer `value` type from `options`

* Don't infer onChange

* Add static type tests

Co-authored-by: Mikey Binns <hello@mikeybinns.com>

* Rename generic to `V` (for `value`)

* Add changelog

* Simplify return type

---------

Co-authored-by: Mikey Binns <hello@mikeybinns.com>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: mikeybinns <mikeybinns@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   1 +
 .../components/src/date-time/time/index.tsx   |  35 ++---
 .../components/src/query-controls/index.tsx   |   6 +-
 .../components/src/select-control/index.tsx   |  20 ++-
 .../select-control/test/select-control.tsx    | 125 ++++++++++++++++++
 .../components/src/select-control/types.ts    | 118 +++++++++--------
 6 files changed, 226 insertions(+), 79 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a71b5a0ddef35f..8ecbf1528d6f08 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,6 +13,7 @@
 
 -   `TimeInput`: Expose as subcomponent of `TimePicker` ([#63145](https://github.com/WordPress/gutenberg/pull/63145)).
 -   `RadioControl`: add support for option help text ([#63751](https://github.com/WordPress/gutenberg/pull/63751)).
+-   `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)).
 -   `Guide`: Add `__next40pxDefaultSize` to buttons ([#64181](https://github.com/WordPress/gutenberg/pull/64181)).
 -   `SelectControl`: Pass through `options` props ([#64211](https://github.com/WordPress/gutenberg/pull/64211)).
 
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index 809376d99d3036..5f706d69190095 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -77,10 +77,28 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
 	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
 			hours: format( date, 'HH' ),
@@ -146,20 +164,7 @@ export function TimePicker( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx
index de53c63a9b8a82..3557335ebac5a0 100644
--- a/packages/components/src/query-controls/index.tsx
+++ b/packages/components/src/query-controls/index.tsx
@@ -85,7 +85,11 @@ export function QueryControls( {
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
-						value={ `${ orderBy }/${ order }` }
+						value={
+							orderBy === undefined || order === undefined
+								? undefined
+								: `${ orderBy }/${ order }`
+						}
 						options={ [
 							{
 								label: __( 'Newest to oldest' ),
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 874b6ace1ea949..8a3b6bda68a160 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -42,8 +42,8 @@ function SelectOptions( {
 	} );
 }
 
-function UnforwardedSelectControl(
-	props: WordPressComponentProps< SelectControlProps, 'select', false >,
+function UnforwardedSelectControl< V extends string >(
+	props: WordPressComponentProps< SelectControlProps< V >, 'select', false >,
 	ref: React.ForwardedRef< HTMLSelectElement >
 ) {
 	const {
@@ -82,12 +82,14 @@ function UnforwardedSelectControl(
 			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
-			const newValues = selectedOptions.map( ( { value } ) => value );
+			const newValues = selectedOptions.map(
+				( { value } ) => value as V
+			);
 			props.onChange?.( newValues, { event } );
 			return;
 		}
 
-		props.onChange?.( event.target.value, { event } );
+		props.onChange?.( event.target.value as V, { event } );
 	};
 
 	const classes = clsx( 'components-select-control', className );
@@ -164,6 +166,14 @@ function UnforwardedSelectControl(
  * };
  * ```
  */
-export const SelectControl = forwardRef( UnforwardedSelectControl );
+export const SelectControl = forwardRef( UnforwardedSelectControl ) as <
+	V extends string,
+>(
+	props: WordPressComponentProps<
+		SelectControlProps< V >,
+		'select',
+		false
+	> & { ref?: React.Ref< HTMLSelectElement > }
+) => React.JSX.Element | null;
 
 export default SelectControl;
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index f2da74d9a6e911..0e8a6891087043 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -100,4 +100,129 @@ describe( 'SelectControl', () => {
 			screen.getByRole( 'option', { name: 'Aria label' } )
 		).toBeInTheDocument();
 	} );
+
+	/* eslint-disable jest/expect-expect */
+	describe( 'static typing', () => {
+		describe( 'single', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: ( value: 'foo' | 'bar' ) => void = () => {};
+
+				<SelectControl
+					value="narrow"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<SelectControl
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error "string" is not "narrow" or "value"
+					onChange={ ( value ) => value === 'string' }
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<SelectControl< 'narrow' | 'value' >
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+
+		describe( 'multiple', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: (
+					value: ( 'foo' | 'bar' )[]
+				) => void = () => {};
+
+				<SelectControl
+					multiple
+					value={ [ 'narrow' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<SelectControl
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					onChange={ ( value ) =>
+						// @ts-expect-error "string" is not "narrow" or "value"
+						value.forEach( ( v ) => v === 'string' )
+					}
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<SelectControl< 'narrow' | 'value' >
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+	} );
+	/* eslint-enable jest/expect-expect */
 } );
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index a5d0d740c593cc..4e7211ab9abfb2 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -9,7 +9,7 @@ import type { ChangeEvent, ReactNode } from 'react';
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
 
-type SelectControlBaseProps = Pick<
+type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
 	| '__next40pxDefaultSize'
@@ -27,7 +27,7 @@ type SelectControlBaseProps = Pick<
 		 * each with a `label` and `value` property, as well as any other
 		 * `<option>` attributes.
 		 */
-		options?: ( {
+		options?: readonly ( {
 			/**
 			 * The label to be shown to the user.
 			 */
@@ -36,7 +36,7 @@ type SelectControlBaseProps = Pick<
 			 * The internal value used to choose the selected value.
 			 * This is also the value passed to `onChange` when the option is selected.
 			 */
-			value: string;
+			value: V;
 		} & Omit<
 			React.OptionHTMLAttributes< HTMLOptionElement >,
 			'label' | 'value'
@@ -54,60 +54,62 @@ type SelectControlBaseProps = Pick<
 		variant?: 'default' | 'minimal';
 	};
 
-export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple?: false;
-	/**
-	 * The value of the selected option.
-	 *
-	 * If `multiple` is true, the `value` should be an array with the values of the selected options.
-	 */
-	value?: string;
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string,
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlSingleSelectionProps< V extends string = string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple?: false;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >;
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >,
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple: true;
-	/**
-	 * The value of the selected option.
-	 *
-	 * If `multiple` is true, the `value` should be an array with the values of the selected options.
-	 */
-	value?: string[];
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string[],
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlMultipleSelectionProps< V extends string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple: true;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >[];
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >[],
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlProps =
-	| SelectControlSingleSelectionProps
-	| SelectControlMultipleSelectionProps;
+export type SelectControlProps< V extends string = string > =
+	| SelectControlSingleSelectionProps< V >
+	| SelectControlMultipleSelectionProps< V >;

From 8e9034c7aa2a7f79a087e94138b1f73d5e6582bd Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:48:49 +1000
Subject: [PATCH 004/205] Quote: Prevent block theme styles overriding global
 border and padding (#64045)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 packages/block-library/src/quote/theme.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index 5bcccbd60eefc4..2c5983003986a1 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -10,19 +10,21 @@
 		font-style: normal;
 	}
 
-	&.has-text-align-right {
+	&:where(.has-text-align-right) {
 		border-left: none;
 		border-right: 0.25em solid currentColor;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&.has-text-align-center {
+	&:where(.has-text-align-center) {
 		border: none;
 		padding-left: 0;
 	}
 	// .is-style-large and .is-large are kept for backwards compatibility.
-	&.is-style-plain,
+	// They are not wrapped in `:where()` to keep specificity as it was before
+	// they were deprecated.
+	&:where(.is-style-plain),
 	&.is-style-large,
 	&.is-large {
 		border: none;

From 254400be75ffe17e036f233692482840951a3836 Mon Sep 17 00:00:00 2001
From: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:58:29 +1000
Subject: [PATCH 005/205] Editor: Improve inline docs for parent page popup
 (#64226).

Modify the inline documentation for the parent page selection popup:

* Replace single quotes with double quotes per [documentation standards](https://make.wordpress.org/docs/style-guide/punctuation/quotation-marks/),
* Replace industry specific example with a generic example that applies across multiple industries.

Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: kristastevens <kristastevens@git.wordpress.org>
---
 .../src/components/page-attributes/parent.js  | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
index f83f700c969882..d53d82914f7c1e 100644
--- a/packages/editor/src/components/page-attributes/parent.js
+++ b/packages/editor/src/components/page-attributes/parent.js
@@ -14,11 +14,16 @@ import {
 	ExternalLink,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -217,6 +222,10 @@ function PostParentToggle( { isOpen, onClick } ) {
 }
 
 export function ParentRow() {
+	const homeUrl = useSelect(
+		( select ) => select( coreStore ).getUnstableBase()?.home,
+		[]
+	);
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -249,12 +258,21 @@ export function ParentRow() {
 							onClose={ onClose }
 						/>
 						<div>
-							{
-								/* translators: The domain name should be a reserved domain name to prevent linking to third party sites outside the WordPress project's control. You may also wish to use wordpress.org or a wordpress.org sub-domain. */
-								__(
-									"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services', its URL would be example.org/services/web-design."
-								)
-							}
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+									__(
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+									),
+									filterURLForDisplay( homeUrl ).replace(
+										/([/.])/g,
+										'<wbr />$1'
+									)
+								),
+								{
+									wbr: <wbr />,
+								}
+							) }
 							<p>
 								{ __(
 									'They also show up as sub-items in the default navigation menu. '

From 4aeaf7fe207cdb09fbebf610028c626b9646b41c Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Wed, 7 Aug 2024 07:16:33 +0530
Subject: [PATCH 006/205] Post Terms: Add border block support (#64246)

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 packages/block-library/src/post-terms/block.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index 957181affb722c..165f50109616e7 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -60,6 +60,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

From 8c0bcdda4114e9fc681bb1d00da61c512a6d2dc5 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Wed, 7 Aug 2024 07:32:30 +0530
Subject: [PATCH 007/205] Comment Template: Add Border Block Support (#64238)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 .../block-library/src/comment-template/block.json    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 70238c45a3d929..08fd591b42409b 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -31,6 +31,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-comment-template"

From 5693867520dfa933a1d43ec0dfa15646520180d2 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Wed, 7 Aug 2024 08:20:58 +0530
Subject: [PATCH 008/205] Post Comments Form: Add Border Block Support (#64233)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../block-library/src/post-comments-form/block.json  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index ff157beb5ced9c..af893ccb67a082 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -37,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",

From 9a55d5ffa14d9154537904fdeb4f293cf38ac586 Mon Sep 17 00:00:00 2001
From: Tom de Visser <118618474+tomdevisser@users.noreply.github.com>
Date: Wed, 7 Aug 2024 06:02:40 +0200
Subject: [PATCH 009/205] Add anchor block support to List Items (#48758)

Co-authored-by: tomdevisser <thomasdevisser@git.wordpress.org>
Co-authored-by: ejnwebmaster <ejnwebmaster@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: adamwoodnz <adamwood@git.wordpress.org>
Co-authored-by: pbiron <pbiron@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
---
 docs/reference-guides/core-blocks.md            | 2 +-
 packages/block-library/src/list-item/block.json | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 72281a53c3dd18..5beb712c80a113 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -426,7 +426,7 @@ An individual item within a list. ([Source](https://github.com/WordPress/gutenbe
 -	**Category:** text
 -	**Parent:** core/list
 -	**Allowed Blocks:** core/list
--	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** content, placeholder
 
 ## Login/out
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 32a552c3779cd3..fc7117d1b792fc 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -20,6 +20,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": false,
 		"splitting": true,
 		"color": {

From 879a2a3eae4250c3f2cfda0e4b3e57ca88f36d90 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:53:10 +1000
Subject: [PATCH 010/205] Background image: remove toolspanel placeholder
 component (#64242)

The dummy tools panel was originally there to allow feature toggling, which hides and shows non-default toolspanel controls.
However, now that the background panel is in a popover, space is not so much of an issue. Furthermore for now, background images and their properties can be treated as a control group.


Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 .../global-styles/background-panel.js         | 97 ++++++++++---------
 .../src/components/global-styles/style.scss   |  6 --
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 7a99a46943dbc6..e6b1517b420e8c 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -720,55 +720,56 @@ export default function BackgroundPanel( {
 					}
 				) }
 			>
-				{ shouldShowBackgroundImageControls ? (
-					<BackgroundControlsPanel
-						label={ title }
-						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-						onToggle={ setIsDropDownOpen }
-						hasImageValue={ hasImageValue }
-					>
-						<VStack spacing={ 3 } className="single-column">
-							<BackgroundImageControls
-								onChange={ onChange }
-								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-								displayInPanel
-								onRemoveImage={ () => {
-									setIsDropDownOpen( false );
-									resetBackground();
-								} }
-							/>
-							<BackgroundSizeControls
-								onChange={ onChange }
-								panelId={ panelId }
-								style={ value }
-								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-							/>
-						</VStack>
-					</BackgroundControlsPanel>
-				) : (
-					<BackgroundImageControls
-						onChange={ onChange }
-						style={ value }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				) }
+				<ToolsPanelItem
+					hasValue={ () => hasImageValue }
+					label={ __( 'Image' ) }
+					onDeselect={ resetBackground }
+					isShownByDefault={ defaultControls.backgroundImage }
+					panelId={ panelId }
+				>
+					{ shouldShowBackgroundImageControls ? (
+						<BackgroundControlsPanel
+							label={ title }
+							filename={ title }
+							url={ getResolvedThemeFilePath(
+								url,
+								themeFileURIs
+							) }
+							onToggle={ setIsDropDownOpen }
+							hasImageValue={ hasImageValue }
+						>
+							<VStack spacing={ 3 } className="single-column">
+								<BackgroundImageControls
+									onChange={ onChange }
+									style={ value }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+									displayInPanel
+									onRemoveImage={ () => {
+										setIsDropDownOpen( false );
+										resetBackground();
+									} }
+								/>
+								<BackgroundSizeControls
+									onChange={ onChange }
+									panelId={ panelId }
+									style={ value }
+									defaultValues={ defaultValues }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+								/>
+							</VStack>
+						</BackgroundControlsPanel>
+					) : (
+						<BackgroundImageControls
+							onChange={ onChange }
+							style={ value }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					) }
+				</ToolsPanelItem>
 			</div>
-
-			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
-			<ToolsPanelItem
-				hasValue={ () => hasImageValue }
-				label={ __( 'Image' ) }
-				onDeselect={ resetBackground }
-				isShownByDefault={ defaultControls.backgroundImage }
-				panelId={ panelId }
-				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
-			/>
 		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 0bab29a9a3f2ad..b8dd3700a77f88 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -211,12 +211,6 @@
 	}
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0;
-	width: 0;
-	position: absolute;
-}
-
 // Push control panel into the background when the media modal is open.
 .modal-open .block-editor-global-styles-background-panel__popover {
 	z-index: z-index(".block-editor-global-styles-background-panel__popover");

From c384bb6bacc574687c9e23a93e129b29e9ca46b2 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:06:08 +1000
Subject: [PATCH 011/205] Background images: ensure appropriate default values
 (#64192)

* First commit:
- ensure that global styles background image blocks with user-uploaded images receive default values

* First commit:
- ensure that global styles background image blocks with user-uploaded images receive default values

* Linterino

* Add Core changelog

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 backport-changelog/6.7/7137.md                |  3 ++
 lib/class-wp-theme-json-gutenberg.php         | 11 +++++
 .../global-styles/background-panel.js         | 30 +++++++-----
 .../test/use-global-styles-output.js          | 37 ++++++++++++++
 .../global-styles/use-global-styles-output.js |  2 +-
 phpunit/class-wp-theme-json-test.php          | 49 +++++++++++++------
 6 files changed, 102 insertions(+), 30 deletions(-)
 create mode 100644 backport-changelog/6.7/7137.md

diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md
new file mode 100644
index 00000000000000..834cb29a21e6d9
--- /dev/null
+++ b/backport-changelog/6.7/7137.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7137
+
+* https://github.com/WordPress/gutenberg/pull/64192
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index cfe0c4d55ceed7..ad8722091c2d48 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2383,6 +2383,17 @@ protected static function compute_style_properties( $styles, $settings = array()
 
 			// Processes background styles.
 			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
+				/*
+				 * For user-uploaded images at the block level, assign defaults.
+				 * Matches defaults applied in the editor and in block supports: background.php.
+				 */
+				if ( static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
+					$styles['background']['backgroundSize'] = $styles['background']['backgroundSize'] ?? 'cover';
+					// If the background size is set to `contain` and no position is set, set the position to `center`.
+					if ( 'contain' === $styles['background']['backgroundSize'] && empty( $styles['background']['backgroundPosition'] ) ) {
+						$styles['background']['backgroundPosition'] = 'center';
+					}
+				}
 				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
 				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index e6b1517b420e8c..61f572f970b762 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -318,8 +318,12 @@ function BackgroundImageControls( {
 			return;
 		}
 
-		const sizeValue = style?.background?.backgroundSize;
-		const positionValue = style?.background?.backgroundPosition;
+		const sizeValue =
+			style?.background?.backgroundSize ||
+			inheritedValue?.background?.backgroundSize;
+		const positionValue =
+			style?.background?.backgroundPosition ||
+			inheritedValue?.background?.backgroundPosition;
 
 		onChange(
 			setImmutably( style, [ 'background' ], {
@@ -334,6 +338,7 @@ function BackgroundImageControls( {
 					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
 						? '50% 0'
 						: positionValue,
+				backgroundSize: sizeValue,
 			} )
 		);
 	};
@@ -448,6 +453,9 @@ function BackgroundSizeControls( {
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
+	const isUploadedImage =
+		style?.background?.backgroundImage?.id ||
+		inheritedValue?.background?.backgroundImage?.id;
 	const positionValue =
 		style?.background?.backgroundPosition ||
 		inheritedValue?.background?.backgroundPosition;
@@ -456,19 +464,15 @@ function BackgroundSizeControls( {
 		inheritedValue?.background?.backgroundAttachment;
 
 	/*
-	 * An `undefined` value is replaced with any supplied
-	 * default control value for the toggle group control.
-	 * An empty string is treated as `auto` - this allows a user
-	 * to select "Size" and then enter a custom value, with an
-	 * empty value being treated as `auto`.
+	 * Set default values for uploaded images.
+	 * The default values are passed by the consumer.
+	 * Block-level controls may have different defaults to root-level controls.
+	 * A falsy value is treated by default as `auto` (Tile).
 	 */
 	const currentValueForToggle =
-		( sizeValue !== undefined &&
-			sizeValue !== 'cover' &&
-			sizeValue !== 'contain' ) ||
-		sizeValue === ''
-			? 'auto'
-			: sizeValue || defaultValues?.backgroundSize;
+		! sizeValue && isUploadedImage
+			? defaultValues?.backgroundSize
+			: sizeValue || 'auto';
 
 	/*
 	 * If the current value is `cover` and the repeat value is `undefined`, then
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 3f7fb5462e377c..f648e1db845b87 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -1028,6 +1028,43 @@ describe( 'global styles renderer', () => {
 				'letter-spacing: 2px',
 			] );
 		} );
+		it( 'should set default values for block background styles', () => {
+			const backgroundStyles = {
+				background: {
+					backgroundImage: {
+						url: 'https://wordpress.org/assets/image.jpg',
+						id: 123,
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( backgroundStyles, '.wp-block-group' )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-size: cover',
+			] );
+			// Test with root-level styles.
+			expect(
+				getStylesDeclarations( backgroundStyles, ROOT_BLOCK_SELECTOR )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+			] );
+			expect(
+				getStylesDeclarations(
+					{
+						background: {
+							...backgroundStyles.background,
+							backgroundSize: 'contain',
+						},
+					},
+					'.wp-block-group'
+				)
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-position: center',
+				'background-size: contain',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 6d3e29f360200a..9190733d5b6607 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -404,7 +404,7 @@ export function getStylesDeclarations(
 		 * Set default values for block background styles.
 		 * Top-level styles are an exception as they are applied to the body.
 		 */
-		if ( ! isRoot ) {
+		if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) {
 			blockStyles = {
 				...blockStyles,
 				background: {
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 8d2f470efe60fe..b77b54ecc7d872 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -4808,7 +4808,6 @@ public function test_get_top_level_background_image_styles() {
 						'backgroundImage'      => array(
 							'url' => 'http://example.org/image.png',
 						),
-						'backgroundSize'       => 'contain',
 						'backgroundRepeat'     => 'no-repeat',
 						'backgroundPosition'   => 'center center',
 						'backgroundAttachment' => 'fixed',
@@ -4822,7 +4821,7 @@ public function test_get_top_level_background_image_styles() {
 			'selector' => 'body',
 		);
 
-		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
+		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
 		$this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
 
 		$theme_json = new WP_Theme_JSON_Gutenberg(
@@ -4853,7 +4852,6 @@ public function test_get_block_background_image_styles() {
 						'core/group' => array(
 							'background' => array(
 								'backgroundImage'      => "url('http://example.org/group.png')",
-								'backgroundSize'       => 'cover',
 								'backgroundRepeat'     => 'no-repeat',
 								'backgroundPosition'   => 'center center',
 								'backgroundAttachment' => 'fixed',
@@ -4861,12 +4859,19 @@ public function test_get_block_background_image_styles() {
 						),
 						'core/quote' => array(
 							'background' => array(
-								'backgroundImage'    => array(
+								'backgroundImage' => array(
 									'url' => 'http://example.org/quote.png',
+									'id'  => 321,
+								),
+								'backgroundSize'  => 'contain',
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'http://example.org/verse.png',
+									'id'  => 123,
 								),
-								'backgroundSize'     => 'cover',
-								'backgroundRepeat'   => 'no-repeat',
-								'backgroundPosition' => 'center center',
 							),
 						),
 					),
@@ -4874,6 +4879,18 @@ public function test_get_block_background_image_styles() {
 			)
 		);
 
+		$group_node = array(
+			'name'      => 'core/group',
+			'path'      => array( 'styles', 'blocks', 'core/group' ),
+			'selector'  => '.wp-block-group',
+			'selectors' => array(
+				'root' => '.wp-block-group',
+			),
+		);
+
+		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
+		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with core/group background styles as string type do not match expectations' );
+
 		$quote_node = array(
 			'name'      => 'core/quote',
 			'path'      => array( 'styles', 'blocks', 'core/quote' ),
@@ -4883,20 +4900,20 @@ public function test_get_block_background_image_styles() {
 			),
 		);
 
-		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
-		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
+		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center;background-size: contain;}";
+		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with core/quote default background styles do not match expectations' );
 
-		$group_node = array(
-			'name'      => 'core/group',
-			'path'      => array( 'styles', 'blocks', 'core/group' ),
-			'selector'  => '.wp-block-group',
+		$verse_node = array(
+			'name'      => 'core/verse',
+			'path'      => array( 'styles', 'blocks', 'core/verse' ),
+			'selector'  => '.wp-block-verse',
 			'selectors' => array(
-				'root' => '.wp-block-group',
+				'root' => '.wp-block-verse',
 			),
 		);
 
-		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
-		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
+		$verse_styles = ":root :where(.wp-block-verse){background-image: url('http://example.org/verse.png');background-size: cover;}";
+		$this->assertSameCSS( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations' );
 	}
 
 	/**

From bd9ba413cee207338de17cd7d2141debff527074 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Wed, 7 Aug 2024 10:27:06 +0200
Subject: [PATCH 012/205] Interactivity API: Refactor internal proxy and
 signals system (#62734)

* WIP

* More WIP

* Restore previous packages

* Fix current tests

* Add computation tests

* Fix getter call

* Fix for..in on new properties

* Refactor code a little

* Add tests for getters with scope

* Move namespaces to properties

* Fix a problem with object references

* Add store handlers

* Add signals-core dependency

* Rename Property to PropSignal

* Move withScope inside PropSignal logic

* Create proxies folder

* Attempt to make the context work

* Reorganize code

* Make peek() return only the value inside signalValue

* A bit of refactoring

* Return the computed value with `peek()`

* Rename DEFAULT_SCOPE to NO_SCOPE

* Remove deepsignal

* Handle functions inside state

* Fix withScope in this PR

* Fix context proxification

* Move store root logic to store proxy handlers

* Move store initialization inside init

* Add TODO comment inside `peek()`

* Fix store root assignments

* Fix lint error

* Enable skipped test for non-initialized getters

* Rename get(State|Store)Proxy to proxify(State|Store)

* Make `getContext` throw when there is no scope

* Fix `proxifyState` types

* Rename some variables in tests

* Add test for object reference keeping

* Rename test suite for state proxy

* Add tests for getters and functions with scope

* Add tests for prop subscription inside functions

* Allow functions to use `this`

* Minor fixes

* Add tests to store proxies

* Throw an error when an object cannot be proxified

* Change peek implementation

* Add tests for peek and unsupported structures

* Test peeking getters that access scope or other namespaces

* Ignore well-known symbols

* Minor comment format fix

* Move namespace arg to first position in proxify functions

* chore: Update jest.config.js to stop ignoring deepsignal because we removed it as dependency

* Add comments to proxy registry

* Remove namespace from PropSignal

* Remove unused `peekValueSignal` method

* Simplify PropSignal methods

* Add TSDocs to PropSignal

* Disable unused vars lint rule in state-proxy tests

* Remove descriptor alias

* Expand `getProxyNs` docs

* Add more comments in `state`

* Refactor state functions and add tsdocs

* Fix some grammar issues

* Fix default namespace for setters

* Replace `isNotRoot` with `isRoot`

* Update comments in store.ts

* Move `isPlainObject` to utils

* Remove remaining deepSignal references

* Delete unnecessary @ts-ignore-next-line

* Use `isPlainObject` from utils inside store

* Move scopes and namespaces to separate files

* Call `init` outside `DOMContentLoaded`

* Replace `signals-core` imports with `signals`

* Rename `proxiedStore` to `proxifiedStore`

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Remove unnecessary `peek()` call

* Throw more descriptive errors from getContext and getElement

* Use more descriptive name for proxy functions

* Use destructured `get` inside `setGetter` call

* Add comment to explain `objToIterable` signals subscription

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Change line comment to block comment

* Replace `?` with `!` operator

* Wrap Interactivity API tests with appropriate `describe`

* Remove unnecessary `setNamespace` calls in tests

* Remove duplicated test

* Fix typo

* Add extra tests for getter modification

* Test the right namespace is used inside getters

* Fix test name

* Check if length's PropSignal exists before updating its value

* Add deepMerge tests and prevent server overwritting

* Make sure context inheritance is shallow and server props don't overwrite

* Refactor wp-each to use new proxifyContext structure

---------

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: otakupahp <otakupahp@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
---
 package-lock.json                             |   32 -
 .../directive-each/render.php                 |    4 +-
 .../interactive-blocks/directive-each/view.js |   10 +-
 .../directive-priorities/view.js              |   10 +-
 packages/interactivity-router/src/index.ts    |    8 +-
 packages/interactivity/package.json           |    1 -
 packages/interactivity/src/directives.tsx     |   75 +-
 packages/interactivity/src/hooks.tsx          |   93 +-
 packages/interactivity/src/index.ts           |   21 +-
 packages/interactivity/src/namespaces.ts      |   10 +
 packages/interactivity/src/proxies/index.ts   |    5 +
 .../interactivity/src/proxies/registry.ts     |   82 ++
 packages/interactivity/src/proxies/signals.ts |  143 ++
 packages/interactivity/src/proxies/state.ts   |  250 ++++
 packages/interactivity/src/proxies/store.ts   |   79 +
 .../src/proxies/test/state-proxy.ts           | 1269 +++++++++++++++++
 .../src/proxies/test/store-proxy.ts           |  123 ++
 packages/interactivity/src/scopes.ts          |   98 ++
 packages/interactivity/src/store.ts           |  192 +--
 packages/interactivity/src/test/utils.ts      |  337 ++++-
 packages/interactivity/src/utils.ts           |   67 +-
 .../interactivity/deferred-store.spec.ts      |    4 +-
 .../interactivity/directive-context.spec.ts   |   50 +-
 .../interactivity/directive-each.spec.ts      |    9 +-
 .../interactivity/router-navigate.spec.ts     |   31 +-
 test/unit/jest.config.js                      |    2 +-
 26 files changed, 2571 insertions(+), 434 deletions(-)
 create mode 100644 packages/interactivity/src/namespaces.ts
 create mode 100644 packages/interactivity/src/proxies/index.ts
 create mode 100644 packages/interactivity/src/proxies/registry.ts
 create mode 100644 packages/interactivity/src/proxies/signals.ts
 create mode 100644 packages/interactivity/src/proxies/state.ts
 create mode 100644 packages/interactivity/src/proxies/store.ts
 create mode 100644 packages/interactivity/src/proxies/test/state-proxy.ts
 create mode 100644 packages/interactivity/src/proxies/test/store-proxy.ts
 create mode 100644 packages/interactivity/src/scopes.ts

diff --git a/package-lock.json b/package-lock.json
index 23f504d7cbf460..e2cab9e63002d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53739,7 +53739,6 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
-				"deepsignal": "^1.4.0",
 				"preact": "^10.19.3"
 			},
 			"engines": {
@@ -53774,31 +53773,6 @@
 				"preact": "10.x"
 			}
 		},
-		"packages/interactivity/node_modules/deepsignal": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.4.0.tgz",
-			"integrity": "sha512-x0XUMT48s+xQRLc2fPFfxnYLCJ46vffw47OQ5NcHFzacOjfW5eA0NrEmI0bhQHL6MgUHkBVT4TIiWTVwzTEwpg==",
-			"peerDependencies": {
-				"@preact/signals": "^1.1.4",
-				"@preact/signals-core": "^1.5.1",
-				"@preact/signals-react": "^1.3.8 || ^2.0.0",
-				"preact": "^10.16.0"
-			},
-			"peerDependenciesMeta": {
-				"@preact/signals": {
-					"optional": true
-				},
-				"@preact/signals-core": {
-					"optional": true
-				},
-				"@preact/signals-react": {
-					"optional": true
-				},
-				"preact": {
-					"optional": true
-				}
-			}
-		},
 		"packages/interactivity/node_modules/preact": {
 			"version": "10.19.3",
 			"resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
@@ -68293,7 +68267,6 @@
 			"version": "file:packages/interactivity",
 			"requires": {
 				"@preact/signals": "^1.2.2",
-				"deepsignal": "^1.4.0",
 				"preact": "^10.19.3"
 			},
 			"dependencies": {
@@ -68305,11 +68278,6 @@
 						"@preact/signals-core": "^1.4.0"
 					}
 				},
-				"deepsignal": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.4.0.tgz",
-					"integrity": "sha512-x0XUMT48s+xQRLc2fPFfxnYLCJ46vffw47OQ5NcHFzacOjfW5eA0NrEmI0bhQHL6MgUHkBVT4TIiWTVwzTEwpg=="
-				},
 				"preact": {
 					"version": "10.19.3",
 					"resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
index 27fd6c7d172939..47eb351d837e78 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -220,14 +220,14 @@
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>beta</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
index e19821a2a2aff1..6ceef82864d9db 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -169,14 +169,14 @@ const html = `
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "a": 1, "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>alpha</p>
@@ -187,6 +187,12 @@ const html = `
 `;
 
 store( 'directive-each', {
+	state: {
+		get list() {
+			const ctx = getContext();
+			return Object.keys( ctx ).sort();
+		},
+	},
 	actions: {
 		*navigate() {
 			const { actions } = yield import(
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index c6cdf31b4909c8..5a46908f77d87b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -8,7 +8,7 @@ import {
 	privateApis,
 } from '@wordpress/interactivity';
 
-const { directive, deepSignal, h } = privateApis(
+const { directive, proxifyState, h } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
 );
 
@@ -41,12 +41,12 @@ directive(
 	'test-context',
 	( { context: { Provider }, props: { children } } ) => {
 		executionProof( 'context' );
-		const value = deepSignal( {
-			[ namespace ]: {
+		const value = {
+			[ namespace ]: proxifyState( namespace, {
 				attribute: 'from context',
 				text: 'from context',
-			},
-		} );
+			} ),
+		};
 		return h( Provider, { value }, children );
 	},
 	{ priority: 8 }
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 79b67eeb98e656..c6e1087b038a55 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -14,8 +14,8 @@ const {
 	initialVdom,
 	toVdom,
 	render,
-	parseInitialData,
-	populateInitialData,
+	parseServerData,
+	populateServerData,
 	batch,
 } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
@@ -103,7 +103,7 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 		} );
 	}
 	const title = dom.querySelector( 'title' )?.innerText;
-	const initialData = parseInitialData( dom );
+	const initialData = parseServerData( dom );
 	return { regions, head, title, initialData };
 };
 
@@ -119,7 +119,7 @@ const renderRegions = ( page: Page ) => {
 			}
 		}
 		if ( navigationMode === 'regionBased' ) {
-			populateInitialData( page.initialData );
+			populateServerData( page.initialData );
 			const attrName = `data-${ directivePrefix }-router-region`;
 			document
 				.querySelectorAll( `[${ attrName }]` )
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 835063ccc76992..332254684bdc9b 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -28,7 +28,6 @@
 	"types": "build-types",
 	"dependencies": {
 		"@preact/signals": "^1.2.2",
-		"deepsignal": "^1.4.0",
 		"preact": "^10.19.3"
 	},
 	"publishConfig": {
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 60ddf13375a8a1..357fe203399be3 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -6,14 +6,24 @@
  */
 import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-import { deepSignal, peek, type DeepSignal } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+import { proxifyState, peek } from './proxies';
 
 /**
  * Internal dependencies
  */
-import { useWatch, useInit, kebabToCamelCase, warn, splitTask } from './utils';
-import type { DirectiveEntry } from './hooks';
-import { directive, getScope, getEvaluate } from './hooks';
+import {
+	useWatch,
+	useInit,
+	kebabToCamelCase,
+	warn,
+	splitTask,
+	isPlainObject,
+} from './utils';
+import { directive, getEvaluate, type DirectiveEntry } from './hooks';
+import { getScope } from './scopes';
 
 // Assigned objects should be ignored during proxification.
 const contextAssignedObjects = new WeakMap();
@@ -23,9 +33,6 @@ const contextObjectToProxy = new WeakMap();
 const contextProxyToObject = new WeakMap();
 const contextObjectToFallback = new WeakMap();
 
-const isPlainObject = ( item: unknown ): boolean =>
-	Boolean( item && typeof item === 'object' && item.constructor === Object );
-
 const descriptor = Reflect.getOwnPropertyDescriptor;
 
 /**
@@ -47,7 +54,7 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 	contextObjectToFallback.set( current, inherited );
 	if ( ! contextObjectToProxy.has( current ) ) {
 		const proxy = new Proxy( current, {
-			get: ( target: DeepSignal< any >, k ) => {
+			get: ( target: object, k: string ) => {
 				const fallback = contextObjectToFallback.get( current );
 				// Always subscribe to prop changes in the current context.
 				const currentProp = target[ k ];
@@ -61,9 +68,9 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 				if (
 					k in target &&
 					! contextAssignedObjects.get( target )?.has( k ) &&
-					isPlainObject( peek( target, k ) )
+					isPlainObject( currentProp )
 				) {
-					return proxifyContext( currentProp, fallback[ k ] );
+					return proxifyContext( currentProp );
 				}
 
 				// Return the stored proxy for `currentProp` when it exists.
@@ -125,22 +132,19 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 };
 
 /**
- * Recursively update values within a deepSignal object.
+ * Recursively update values within a context object.
  *
- * @param target A deepSignal instance.
+ * @param target A context instance.
  * @param source Object with properties to update in `target`.
  */
-const updateSignals = (
-	target: DeepSignal< any >,
-	source: DeepSignal< any >
-) => {
+const updateContext = ( target: any, source: any ) => {
 	for ( const k in source ) {
 		if (
 			isPlainObject( peek( target, k ) ) &&
-			isPlainObject( peek( source, k ) )
+			isPlainObject( source[ k ] )
 		) {
-			updateSignals( target[ `$${ k }` ].peek(), source[ k ] );
-		} else {
+			updateContext( peek( target, k ) as object, source[ k ] );
+		} else if ( ! ( k in target ) ) {
 			target[ k ] = source[ k ];
 		}
 	}
@@ -257,18 +261,21 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
-		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
 			context: inheritedContext,
 		} ) => {
 			const { Provider } = inheritedContext;
-			const inheritedValue = useContext( inheritedContext );
-			const currentValue = useRef( deepSignal( {} ) );
 			const defaultEntry = context.find(
 				( { suffix } ) => suffix === 'default'
 			);
+			const inheritedValue = useContext( inheritedContext );
+
+			const ns = defaultEntry!.namespace;
+			const currentValue = useRef( {
+				[ ns ]: proxifyState( ns, {} ),
+			} );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
@@ -280,11 +287,16 @@ export default () => {
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
-					updateSignals( currentValue.current, {
-						[ namespace ]: deepClone( value ),
-					} );
+					updateContext(
+						currentValue.current[ namespace ],
+						deepClone( value ) as object
+					);
+					currentValue.current[ namespace ] = proxifyContext(
+						currentValue.current[ namespace ],
+						inheritedValue[ namespace ]
+					);
 				}
-				return proxifyContext( currentValue.current, inheritedValue );
+				return currentValue.current;
 			}, [ defaultEntry, inheritedValue ] );
 
 			return createElement( Provider, { value: contextStack }, children );
@@ -677,11 +689,14 @@ export default () => {
 			return list.map( ( item ) => {
 				const itemProp =
 					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
-				const itemContext = deepSignal( { [ namespace ]: {} } );
-				const mergedContext = proxifyContext(
-					itemContext,
-					inheritedValue
+				const itemContext = proxifyContext(
+					proxifyState( namespace, {} ),
+					inheritedValue[ namespace ]
 				);
+				const mergedContext = {
+					...inheritedValue,
+					[ namespace ]: itemContext,
+				};
 
 				// Set the item after proxifying the context.
 				mergedContext[ namespace ][ itemProp ] = item;
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 9af6fb00d6aba5..215da8afef9b5b 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -12,13 +12,14 @@ import {
 	type ComponentChildren,
 } from 'preact';
 import { useRef, useCallback, useContext } from 'preact/hooks';
-import type { VNode, Context, RefObject } from 'preact';
+import type { VNode, Context } from 'preact';
 
 /**
  * Internal dependencies
  */
 import { store, stores, universalUnlock } from './store';
 import { warn } from './utils';
+import { getScope, setScope, resetScope, type Scope } from './scopes';
 export interface DirectiveEntry {
 	value: string | object;
 	namespace: string;
@@ -56,7 +57,7 @@ interface DirectiveArgs {
 }
 
 interface DirectiveCallback {
-	( args: DirectiveArgs ): VNode | null | void;
+	( args: DirectiveArgs ): VNode< any > | null | void;
 }
 
 interface DirectiveOptions {
@@ -69,14 +70,7 @@ interface DirectiveOptions {
 	priority?: number;
 }
 
-interface Scope {
-	evaluate: Evaluate;
-	context: object;
-	ref: RefObject< HTMLElement >;
-	attributes: createElement.JSX.HTMLAttributes;
-}
-
-interface Evaluate {
+export interface Evaluate {
 	( entry: DirectiveEntry, ...args: any[] ): any;
 }
 
@@ -101,85 +95,6 @@ interface DirectivesProps {
 // Main context.
 const context = createContext< any >( {} );
 
-// Wrap the element props to prevent modifications.
-const immutableMap = new WeakMap();
-const immutableError = () => {
-	throw new Error(
-		'Please use `data-wp-bind` to modify the attributes of an element.'
-	);
-};
-const immutableHandlers: ProxyHandler< object > = {
-	get( target, key, receiver ) {
-		const value = Reflect.get( target, key, receiver );
-		return !! value && typeof value === 'object'
-			? deepImmutable( value )
-			: value;
-	},
-	set: immutableError,
-	deleteProperty: immutableError,
-};
-const deepImmutable = < T extends object = {} >( target: T ): T => {
-	if ( ! immutableMap.has( target ) ) {
-		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
-	}
-	return immutableMap.get( target );
-};
-
-// Store stacks for the current scope and the default namespaces and export APIs
-// to interact with them.
-const scopeStack: Scope[] = [];
-const namespaceStack: string[] = [];
-
-/**
- * Retrieves the context inherited by the element evaluating a function from the
- * store. The returned value depends on the element and the namespace where the
- * function calling `getContext()` exists.
- *
- * @param namespace Store namespace. By default, the namespace where the calling
- *                  function exists is used.
- * @return The context content.
- */
-export const getContext = < T extends object >( namespace?: string ): T =>
-	getScope()?.context[ namespace || getNamespace() ];
-
-/**
- * Retrieves a representation of the element where a function from the store
- * is being evalutated. Such representation is read-only, and contains a
- * reference to the DOM element, its props and a local reactive state.
- *
- * @return Element representation.
- */
-export const getElement = () => {
-	if ( ! getScope() ) {
-		throw Error(
-			'Cannot call `getElement()` outside getters and actions used by directives.'
-		);
-	}
-	const { ref, attributes } = getScope();
-	return Object.freeze( {
-		ref: ref.current,
-		attributes: deepImmutable( attributes ),
-	} );
-};
-
-export const getScope = () => scopeStack.slice( -1 )[ 0 ];
-
-export const setScope = ( scope: Scope ) => {
-	scopeStack.push( scope );
-};
-export const resetScope = () => {
-	scopeStack.pop();
-};
-
-export const getNamespace = () => namespaceStack.slice( -1 )[ 0 ];
-
-export const setNamespace = ( namespace: string ) => {
-	namespaceStack.push( namespace );
-};
-export const resetNamespace = () => {
-	namespaceStack.pop();
-};
-
 // WordPress Directives.
 const directiveCallbacks: Record< string, DirectiveCallback > = {};
 const directivePriorities: Record< string, number > = {};
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index a43534509bb5ac..336c2a97226db7 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -3,7 +3,6 @@
  */
 import { h, cloneElement, render } from 'preact';
 import { batch } from '@preact/signals';
-import { deepSignal } from 'deepsignal';
 
 /**
  * Internal dependencies
@@ -12,11 +11,13 @@ import registerDirectives from './directives';
 import { init, getRegionRootFragment, initialVdom } from './init';
 import { directivePrefix } from './constants';
 import { toVdom } from './vdom';
-import { directive, getNamespace } from './hooks';
-import { parseInitialData, populateInitialData } from './store';
+import { directive } from './hooks';
+import { getNamespace } from './namespaces';
+import { parseServerData, populateServerData } from './store';
+import { proxifyState } from './proxies';
 
 export { store, getConfig } from './store';
-export { getContext, getElement } from './hooks';
+export { getContext, getElement } from './scopes';
 export {
 	withScope,
 	useWatch,
@@ -45,9 +46,9 @@ export const privateApis = ( lock ): any => {
 			h,
 			cloneElement,
 			render,
-			deepSignal,
-			parseInitialData,
-			populateInitialData,
+			proxifyState,
+			parseServerData,
+			populateServerData,
 			batch,
 		};
 	}
@@ -55,7 +56,5 @@ export const privateApis = ( lock ): any => {
 	throw new Error( 'Forbidden access.' );
 };
 
-document.addEventListener( 'DOMContentLoaded', async () => {
-	registerDirectives();
-	await init();
-} );
+registerDirectives();
+init();
diff --git a/packages/interactivity/src/namespaces.ts b/packages/interactivity/src/namespaces.ts
new file mode 100644
index 00000000000000..9103f3c76e67bb
--- /dev/null
+++ b/packages/interactivity/src/namespaces.ts
@@ -0,0 +1,10 @@
+const namespaceStack: string[] = [];
+
+export const getNamespace = () => namespaceStack.slice( -1 )[ 0 ];
+
+export const setNamespace = ( namespace: string ) => {
+	namespaceStack.push( namespace );
+};
+export const resetNamespace = () => {
+	namespaceStack.pop();
+};
diff --git a/packages/interactivity/src/proxies/index.ts b/packages/interactivity/src/proxies/index.ts
new file mode 100644
index 00000000000000..d64fb59fa6bccf
--- /dev/null
+++ b/packages/interactivity/src/proxies/index.ts
@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export { proxifyState, peek } from './state';
+export { proxifyStore } from './store';
diff --git a/packages/interactivity/src/proxies/registry.ts b/packages/interactivity/src/proxies/registry.ts
new file mode 100644
index 00000000000000..767a3730dbae2d
--- /dev/null
+++ b/packages/interactivity/src/proxies/registry.ts
@@ -0,0 +1,82 @@
+/**
+ * Proxies for each object.
+ */
+const objToProxy = new WeakMap< object, object >();
+
+/**
+ * Namespaces for each created proxy.
+ */
+const proxyToNs = new WeakMap< object, string >();
+
+/**
+ * Object types that can be proxied.
+ */
+const supported = new Set( [ Object, Array ] );
+
+/**
+ * Returns a proxy to the passed object with the given handlers, assigning the
+ * specified namespace to it. If a proxy for the passed object was created
+ * before, that proxy is returned.
+ *
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj       The object to proxify.
+ * @param handlers  Handlers that the proxy will use.
+ *
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The created proxy.
+ */
+export const createProxy = < T extends object >(
+	namespace: string,
+	obj: T,
+	handlers: ProxyHandler< T >
+): T => {
+	if ( ! shouldProxy( obj ) ) {
+		throw Error( 'This object cannot be proxified.' );
+	}
+	if ( ! objToProxy.has( obj ) ) {
+		const proxy = new Proxy( obj, handlers );
+		objToProxy.set( obj, proxy );
+		proxyToNs.set( proxy, namespace );
+	}
+	return objToProxy.get( obj ) as T;
+};
+
+/**
+ * Returns the proxy for the given object. If there is no associated proxy, the
+ * function returns `undefined`.
+ *
+ * @param obj Object from which to know the proxy.
+ * @return Associated proxy or `undefined`.
+ */
+export const getProxyFromObject = < T extends object >( obj: T ): T =>
+	objToProxy.get( obj ) as T;
+
+/**
+ * Gets the namespace associated with the given proxy.
+ *
+ * Proxies have a namespace assigned upon creation. See {@link createProxy}.
+ *
+ * @param proxy Proxy.
+ * @return Namespace.
+ */
+export const getNamespaceFromProxy = ( proxy: object ): string =>
+	proxyToNs.get( proxy )!;
+
+/**
+ * Checks if a given object can be proxied.
+ *
+ * @param candidate Object to know whether it can be proxied.
+ * @return True if the passed instance can be proxied.
+ */
+export const shouldProxy = (
+	candidate: any
+): candidate is Object | Array< unknown > => {
+	if ( typeof candidate !== 'object' || candidate === null ) {
+		return false;
+	}
+	return (
+		! proxyToNs.has( candidate ) && supported.has( candidate.constructor )
+	);
+};
diff --git a/packages/interactivity/src/proxies/signals.ts b/packages/interactivity/src/proxies/signals.ts
new file mode 100644
index 00000000000000..6a3f41c149e134
--- /dev/null
+++ b/packages/interactivity/src/proxies/signals.ts
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import {
+	computed,
+	signal,
+	batch,
+	type Signal,
+	type ReadonlySignal,
+} from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { getNamespaceFromProxy } from './registry';
+import { getScope } from '../scopes';
+import { setNamespace, resetNamespace } from '../namespaces';
+import { withScope } from '../utils';
+
+/**
+ * Identifier for property computeds not associated to any scope.
+ */
+const NO_SCOPE = Symbol();
+
+/**
+ * Structure that manages reactivity for a property in a state object. It uses
+ * signals to keep track of property value or getter modifications.
+ */
+export class PropSignal {
+	/**
+	 * Proxy that holds the property this PropSignal is associated with.
+	 */
+	private owner: object;
+
+	/**
+	 * Relation of computeds by scope. These computeds are read-only signals
+	 * that depend on whether the property is a value or a getter and,
+	 * therefore, can return different values depending on the scope in which
+	 * the getter is accessed.
+	 */
+	private computedsByScope: WeakMap< WeakKey, ReadonlySignal >;
+
+	/**
+	 * Signal with the value assigned to the related property.
+	 */
+	private valueSignal?: Signal;
+
+	/**
+	 * Signal with the getter assigned to the related property.
+	 */
+	private getterSignal?: Signal< ( () => any ) | undefined >;
+
+	/**
+	 * Structure that manages reactivity for a property in a state object, using
+	 * signals to keep track of property value or getter modifications.
+	 *
+	 * @param owner Proxy that holds the property this instance is associated
+	 *              with.
+	 */
+	constructor( owner: object ) {
+		this.owner = owner;
+		this.computedsByScope = new WeakMap();
+	}
+
+	/**
+	 * Changes the internal value. If a getter was set before, it is set to
+	 * `undefined`.
+	 *
+	 * @param value New value.
+	 */
+	public setValue( value: unknown ) {
+		this.update( { value } );
+	}
+
+	/**
+	 * Changes the internal getter. If a value was set before, it is set to
+	 * `undefined`.
+	 *
+	 * @param getter New getter.
+	 */
+	public setGetter( getter: () => any ) {
+		this.update( { get: getter } );
+	}
+
+	/**
+	 * Returns the computed that holds the result of evaluating the prop in the
+	 * current scope.
+	 *
+	 * These computeds are read-only signals that depend on whether the property
+	 * is a value or a getter and, therefore, can return different values
+	 * depending on the scope in which the getter is accessed.
+	 *
+	 * @return Computed that depends on the scope.
+	 */
+	public getComputed(): ReadonlySignal {
+		const scope = getScope() || NO_SCOPE;
+
+		if ( ! this.valueSignal && ! this.getterSignal ) {
+			this.update( {} );
+		}
+
+		if ( ! this.computedsByScope.has( scope ) ) {
+			const callback = () => {
+				const getter = this.getterSignal?.value;
+				return getter
+					? getter.call( this.owner )
+					: this.valueSignal?.value;
+			};
+
+			setNamespace( getNamespaceFromProxy( this.owner ) );
+			this.computedsByScope.set(
+				scope,
+				computed( withScope( callback ) )
+			);
+			resetNamespace();
+		}
+
+		return this.computedsByScope.get( scope )!;
+	}
+
+	/**
+	 *  Update the internal signals for the value and the getter of the
+	 *  corresponding prop.
+	 *
+	 * @param param0
+	 * @param param0.get   New getter.
+	 * @param param0.value New value.
+	 */
+	private update( { get, value }: { get?: () => any; value?: unknown } ) {
+		if ( ! this.valueSignal ) {
+			this.valueSignal = signal( value );
+			this.getterSignal = signal( get );
+		} else if (
+			value !== this.valueSignal.peek() ||
+			get !== this.getterSignal!.peek()
+		) {
+			batch( () => {
+				this.valueSignal!.value = value;
+				this.getterSignal!.value = get;
+			} );
+		}
+	}
+}
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
new file mode 100644
index 00000000000000..0978fa2ccd0264
--- /dev/null
+++ b/packages/interactivity/src/proxies/state.ts
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import { signal, type Signal } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import {
+	createProxy,
+	getProxyFromObject,
+	getNamespaceFromProxy,
+	shouldProxy,
+} from './registry';
+import { PropSignal } from './signals';
+import { setNamespace, resetNamespace } from '../namespaces';
+
+/**
+ * Set of built-in symbols.
+ */
+const wellKnownSymbols = new Set(
+	Object.getOwnPropertyNames( Symbol )
+		.map( ( key ) => Symbol[ key ] )
+		.filter( ( value ) => typeof value === 'symbol' )
+);
+
+/**
+ * Relates each proxy with a map of {@link PropSignal} instances, representing
+ * the proxy's accessed properties.
+ */
+const proxyToProps: WeakMap<
+	object,
+	Map< string | symbol, PropSignal >
+> = new WeakMap();
+
+/**
+ * Returns the {@link PropSignal | `PropSignal`} instance associated with the
+ * specified prop in the passed proxy.
+ *
+ * The `PropSignal` instance is generated if it doesn't exist yet, using the
+ * `initial` parameter to initialize the internal signals.
+ *
+ * @param proxy   Proxy of a state object or array.
+ * @param key     The property key.
+ * @param initial Initial data for the `PropSignal` instance.
+ * @return The `PropSignal` instance.
+ */
+const getPropSignal = (
+	proxy: object,
+	key: string | number | symbol,
+	initial?: PropertyDescriptor
+) => {
+	if ( ! proxyToProps.has( proxy ) ) {
+		proxyToProps.set( proxy, new Map() );
+	}
+	key = typeof key === 'number' ? `${ key }` : key;
+	const props = proxyToProps.get( proxy )!;
+	if ( ! props.has( key ) ) {
+		const ns = getNamespaceFromProxy( proxy );
+		const prop = new PropSignal( proxy );
+		props.set( key, prop );
+		if ( initial ) {
+			const { get, value } = initial;
+			if ( get ) {
+				prop.setGetter( get );
+			} else {
+				prop.setValue(
+					shouldProxy( value ) ? proxifyState( ns, value ) : value
+				);
+			}
+		}
+	}
+	return props.get( key )!;
+};
+
+/**
+ * Relates each proxied object (i.e., the original object) with a signal that
+ * tracks changes in the number of properties.
+ */
+const objToIterable = new WeakMap< object, Signal< number > >();
+
+/**
+ * When this flag is `true`, it avoids any signal subscription, overriding state
+ * props' "reactive" behavior.
+ */
+let peeking = false;
+
+/**
+ * Handlers for reactive objects and arrays in the state.
+ */
+const stateHandlers: ProxyHandler< object > = {
+	get( target: object, key: string | symbol, receiver: object ): any {
+		/*
+		 * The property should not be reactive for the following cases:
+		 * 1. While using the `peek` function to read the property.
+		 * 2. The property exists but comes from the Object or Array prototypes.
+		 * 3. The property key is a known symbol.
+		 */
+		if (
+			peeking ||
+			( ! target.hasOwnProperty( key ) && key in target ) ||
+			( typeof key === 'symbol' && wellKnownSymbols.has( key ) )
+		) {
+			return Reflect.get( target, key, receiver );
+		}
+
+		// At this point, the property should be reactive.
+		const desc = Object.getOwnPropertyDescriptor( target, key );
+		const prop = getPropSignal( receiver, key, desc );
+		const result = prop.getComputed().value;
+
+		/*
+		 * Check if the property is a synchronous function. If it is, set the
+		 * default namespace. Synchronous functions always run in the proper scope,
+		 * which is set by the Directives component.
+		 */
+		if ( typeof result === 'function' ) {
+			const ns = getNamespaceFromProxy( receiver );
+			return ( ...args: unknown[] ) => {
+				setNamespace( ns );
+				try {
+					return result.call( receiver, ...args );
+				} finally {
+					resetNamespace();
+				}
+			};
+		}
+
+		return result;
+	},
+
+	set(
+		target: object,
+		key: string,
+		value: unknown,
+		receiver: object
+	): boolean {
+		setNamespace( getNamespaceFromProxy( receiver ) );
+		try {
+			return Reflect.set( target, key, value, receiver );
+		} finally {
+			resetNamespace();
+		}
+	},
+
+	defineProperty(
+		target: object,
+		key: string,
+		desc: PropertyDescriptor
+	): boolean {
+		const isNew = ! ( key in target );
+		const result = Reflect.defineProperty( target, key, desc );
+
+		if ( result ) {
+			const receiver = getProxyFromObject( target );
+			const prop = getPropSignal( receiver, key );
+			const { get, value } = desc;
+			if ( get ) {
+				prop.setGetter( get );
+			} else {
+				const ns = getNamespaceFromProxy( receiver );
+				prop.setValue(
+					shouldProxy( value ) ? proxifyState( ns, value ) : value
+				);
+			}
+
+			if ( isNew && objToIterable.has( target ) ) {
+				objToIterable.get( target )!.value++;
+			}
+
+			/*
+			 * Modify the `length` property value only if the related
+			 * `PropSignal` exists, which means that there are subscriptions to
+			 * this property.
+			 */
+			if (
+				Array.isArray( target ) &&
+				proxyToProps.get( receiver )?.has( 'length' )
+			) {
+				const length = getPropSignal( receiver, 'length' );
+				length.setValue( target.length );
+			}
+		}
+
+		return result;
+	},
+
+	deleteProperty( target: object, key: string ): boolean {
+		const result = Reflect.deleteProperty( target, key );
+
+		if ( result ) {
+			const prop = getPropSignal( getProxyFromObject( target ), key );
+			prop.setValue( undefined );
+
+			if ( objToIterable.has( target ) ) {
+				objToIterable.get( target )!.value++;
+			}
+		}
+
+		return result;
+	},
+
+	ownKeys( target: object ): ( string | symbol )[] {
+		if ( ! objToIterable.has( target ) ) {
+			objToIterable.set( target, signal( 0 ) );
+		}
+		/*
+		 *This subscribes to the signal while preventing the minifier from
+		 * deleting this line in production.
+		 */
+		( objToIterable as any )._ = objToIterable.get( target )!.value;
+		return Reflect.ownKeys( target );
+	},
+};
+
+/**
+ * Returns the proxy associated with the given state object, creating it if it
+ * does not exist.
+ *
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj       The object to proxify.
+ *
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The associated proxy.
+ */
+export const proxifyState = < T extends object >(
+	namespace: string,
+	obj: T
+): T => createProxy( namespace, obj, stateHandlers ) as T;
+
+/**
+ * Reads the value of the specified property without subscribing to it.
+ *
+ * @param obj The object to read the property from.
+ * @param key The property key.
+ * @return The property value.
+ */
+export const peek = < T extends object, K extends keyof T >(
+	obj: T,
+	key: K
+): T[ K ] => {
+	peeking = true;
+	try {
+		return obj[ key ];
+	} finally {
+		peeking = false;
+	}
+};
diff --git a/packages/interactivity/src/proxies/store.ts b/packages/interactivity/src/proxies/store.ts
new file mode 100644
index 00000000000000..506b8c3b097bae
--- /dev/null
+++ b/packages/interactivity/src/proxies/store.ts
@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { createProxy, getNamespaceFromProxy, shouldProxy } from './registry';
+/**
+ * External dependencies
+ */
+import { setNamespace, resetNamespace } from '../namespaces';
+import { withScope, isPlainObject } from '../utils';
+
+/**
+ * Identifies the store proxies handling the root objects of each store.
+ */
+const storeRoots = new WeakSet();
+
+/**
+ * Handlers for store proxies.
+ */
+const storeHandlers: ProxyHandler< object > = {
+	get: ( target: any, key: string | symbol, receiver: any ) => {
+		const result = Reflect.get( target, key );
+		const ns = getNamespaceFromProxy( receiver );
+
+		/*
+		 * Check if the proxy is the store root and no key with that name exist. In
+		 * that case, return an empty object for the requested key.
+		 */
+		if ( typeof result === 'undefined' && storeRoots.has( receiver ) ) {
+			const obj = {};
+			Reflect.set( target, key, obj );
+			return proxifyStore( ns, obj, false );
+		}
+
+		/*
+		 * Check if the property is a function. If it is, add the store
+		 * namespace to the stack and wrap the function with the current scope.
+		 * The `withScope` util handles both synchronous functions and generator
+		 * functions.
+		 */
+		if ( typeof result === 'function' ) {
+			setNamespace( ns );
+			const scoped = withScope( result );
+			resetNamespace();
+			return scoped;
+		}
+
+		// Check if the property is an object. If it is, proxyify it.
+		if ( isPlainObject( result ) && shouldProxy( result ) ) {
+			return proxifyStore( ns, result, false );
+		}
+
+		return result;
+	},
+};
+
+/**
+ * Returns the proxy associated with the given store object, creating it if it
+ * does not exist.
+ *
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj       The object to proxify.
+ *
+ * @param isRoot    Whether the passed object is the store root object.
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The associated proxy.
+ */
+export const proxifyStore = < T extends object >(
+	namespace: string,
+	obj: T,
+	isRoot = true
+): T => {
+	const proxy = createProxy( namespace, obj, storeHandlers );
+	if ( proxy && isRoot ) {
+		storeRoots.add( proxy );
+	}
+	return proxy as T;
+};
diff --git a/packages/interactivity/src/proxies/test/state-proxy.ts b/packages/interactivity/src/proxies/test/state-proxy.ts
new file mode 100644
index 00000000000000..92500189fc8309
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/state-proxy.ts
@@ -0,0 +1,1269 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+/**
+ * Internal dependencies
+ */
+import { proxifyState, peek } from '../';
+import { setScope, resetScope, getContext, getElement } from '../../scopes';
+import { setNamespace, resetNamespace } from '../../namespaces';
+
+type State = {
+	a?: number;
+	nested: { b?: number };
+	array: ( number | State[ 'nested' ] )[];
+};
+
+const withScopeAndNs = ( scope, ns, callback ) => () => {
+	setScope( scope );
+	setNamespace( ns );
+	try {
+		return callback();
+	} finally {
+		resetNamespace();
+		resetScope();
+	}
+};
+
+describe( 'Interactivity API', () => {
+	describe( 'state proxy', () => {
+		let nested = { b: 2 };
+		let array = [ 3, nested ];
+		let raw: State = { a: 1, nested, array };
+		let state = proxifyState( 'test', raw );
+
+		const window = globalThis as any;
+
+		beforeEach( () => {
+			nested = { b: 2 };
+			array = [ 3, nested ];
+			raw = { a: 1, nested, array };
+			state = proxifyState( 'test', raw );
+		} );
+
+		describe( 'get', () => {
+			it( 'should return plain objects/arrays', () => {
+				expect( state.nested ).toEqual( { b: 2 } );
+				expect( state.array ).toEqual( [ 3, { b: 2 } ] );
+				expect( state.array[ 1 ] ).toEqual( { b: 2 } );
+			} );
+
+			it( 'should return plain primitives', () => {
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+				expect( state.array[ 0 ] ).toBe( 3 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 2 );
+				expect( state.array.length ).toBe( 2 );
+			} );
+
+			it( 'should support reading from getters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				expect( state.double ).toBe( 2 );
+				state.counter = 2;
+				expect( state.double ).toBe( 4 );
+			} );
+
+			it( 'should support getters returning other parts of the state', () => {
+				const state = proxifyState( 'test', {
+					switch: 'a',
+					a: { data: 'a' },
+					b: { data: 'b' },
+					get aOrB() {
+						return state.switch === 'a' ? state.a : state.b;
+					},
+				} );
+				expect( state.aOrB.data ).toBe( 'a' );
+				state.switch = 'b';
+				expect( state.aOrB.data ).toBe( 'b' );
+			} );
+
+			it( 'should support getters using ownKeys traps', () => {
+				const state = proxifyState( 'test', {
+					x: {
+						a: 1,
+						b: 2,
+					},
+					get y() {
+						return Object.values( state.x );
+					},
+				} );
+
+				expect( state.y ).toEqual( [ 1, 2 ] );
+			} );
+
+			it( 'should support getters accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					get y() {
+						const ctx = getContext< { value: string } >();
+						return ctx.value;
+					},
+				} );
+
+				const scope = { context: { test: { value: 'from context' } } };
+				try {
+					setScope( scope as any );
+					expect( state.y ).toBe( 'from context' );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should use its namespace by default inside getters', () => {
+				const state = proxifyState( 'test/right', {
+					get value() {
+						const ctx = getContext< { value: string } >();
+						return ctx.value;
+					},
+				} );
+
+				const scope = {
+					context: {
+						'test/right': { value: 'OK' },
+						'test/other': { value: 'Wrong' },
+					},
+				};
+
+				try {
+					setScope( scope as any );
+					setNamespace( 'test/other' );
+					expect( state.value ).toBe( 'OK' );
+				} finally {
+					resetNamespace();
+					resetScope();
+				}
+			} );
+
+			it( 'should work with normal functions', () => {
+				const state = proxifyState( 'test', {
+					value: 1,
+					isBigger: ( newValue: number ): boolean =>
+						state.value < newValue,
+					sum( newValue: number ): number {
+						return state.value + newValue;
+					},
+					replace: ( newValue: number ): void => {
+						state.value = newValue;
+					},
+				} );
+				expect( state.isBigger( 2 ) ).toBe( true );
+				expect( state.sum( 2 ) ).toBe( 3 );
+				expect( state.value ).toBe( 1 );
+				state.replace( 2 );
+				expect( state.value ).toBe( 2 );
+			} );
+
+			it( 'should work with normal functions accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					sumContextValue( newValue: number ): number {
+						const ctx = getContext< { value: number } >();
+						return ctx.value + newValue;
+					},
+				} );
+
+				const scope = { context: { test: { value: 1 } } };
+				try {
+					setScope( scope as any );
+					expect( state.sumContextValue( 2 ) ).toBe( 3 );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should allow using `this` inside functions', () => {
+				const state = proxifyState( 'test', {
+					value: 1,
+					sum( newValue: number ): number {
+						return this.value + newValue;
+					},
+				} );
+				expect( state.sum( 2 ) ).toBe( 3 );
+			} );
+		} );
+
+		describe( 'set', () => {
+			it( 'should update like plain objects/arrays', () => {
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+				state.a = 2;
+				state.nested.b = 3;
+				expect( state.a ).toBe( 2 );
+				expect( state.nested.b ).toBe( 3 );
+			} );
+
+			it( 'should support setting values with setters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+					set double( val ) {
+						state.counter = val / 2;
+					},
+				} );
+				expect( state.counter ).toBe( 1 );
+				state.double = 4;
+				expect( state.counter ).toBe( 2 );
+			} );
+
+			it( 'should update array length', () => {
+				expect( state.array.length ).toBe( 2 );
+				state.array.push( 4 );
+				expect( state.array.length ).toBe( 3 );
+				state.array.splice( 1, 2 );
+				expect( state.array.length ).toBe( 1 );
+			} );
+
+			it( 'should support setting getters on the fly', () => {
+				const state = proxifyState< {
+					counter: number;
+					double?: number;
+				} >( 'test', {
+					counter: 1,
+				} );
+				Object.defineProperty( state, 'double', {
+					get() {
+						return state.counter * 2;
+					},
+				} );
+				expect( state.double ).toBe( 2 );
+				state.counter = 2;
+				expect( state.double ).toBe( 4 );
+			} );
+
+			it( 'should support getter modification', () => {
+				const state = proxifyState< {
+					counter: number;
+					double: number;
+				} >( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+
+				const scope = {
+					context: { test: { counter: 2 } },
+				};
+
+				expect( state.double ).toBe( 2 );
+
+				Object.defineProperty( state, 'double', {
+					get() {
+						const ctx = getContext< { counter: number } >();
+						return ctx.counter * 2;
+					},
+				} );
+
+				try {
+					setScope( scope as any );
+					expect( state.double ).toBe( 4 );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should copy object like plain JavaScript', () => {
+				const state = proxifyState< {
+					a?: { id: number; nested: { id: number } };
+					b: { id: number; nested: { id: number } };
+				} >( 'test', {
+					b: { id: 1, nested: { id: 1 } },
+				} );
+
+				state.a = state.b;
+
+				expect( state.a.id ).toBe( 1 );
+				expect( state.b.id ).toBe( 1 );
+				expect( state.a.nested.id ).toBe( 1 );
+				expect( state.b.nested.id ).toBe( 1 );
+
+				state.a.id = 2;
+				state.a.nested.id = 2;
+				expect( state.a.id ).toBe( 2 );
+				expect( state.b.id ).toBe( 2 );
+				expect( state.a.nested.id ).toBe( 2 );
+				expect( state.b.nested.id ).toBe( 2 );
+
+				state.b.id = 3;
+				state.b.nested.id = 3;
+				expect( state.b.id ).toBe( 3 );
+				expect( state.a.id ).toBe( 3 );
+				expect( state.a.nested.id ).toBe( 3 );
+				expect( state.b.nested.id ).toBe( 3 );
+
+				state.a.id = 4;
+				state.a.nested.id = 4;
+				expect( state.a.id ).toBe( 4 );
+				expect( state.b.id ).toBe( 4 );
+				expect( state.a.nested.id ).toBe( 4 );
+				expect( state.b.nested.id ).toBe( 4 );
+			} );
+
+			it( 'should be able to reset values with Object.assign', () => {
+				const initialNested = { ...nested };
+				const initialState = { ...raw, nested: initialNested };
+				state.a = 2;
+				state.nested.b = 3;
+				Object.assign( state, initialState );
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+			} );
+
+			it( 'should keep assigned object references internally', () => {
+				const obj = {};
+				state.nested = obj;
+				expect( raw.nested ).toBe( obj );
+			} );
+
+			it( 'should keep object references across namespaces', () => {
+				const raw1 = { obj: {} };
+				const raw2 = { obj: {} };
+				const state1 = proxifyState( 'test-1', raw1 );
+				const state2 = proxifyState( 'test-2', raw2 );
+				state2.obj = state1.obj;
+				expect( state2.obj ).toBe( state1.obj );
+				expect( raw2.obj ).toBe( state1.obj );
+			} );
+
+			it( 'should use its namespace by default inside setters', () => {
+				const state = proxifyState( 'test/right', {
+					set counter( val: number ) {
+						const ctx = getContext< { counter: number } >();
+						ctx.counter = val;
+					},
+				} );
+
+				const scope = {
+					context: {
+						'test/other': { counter: 0 },
+						'test/right': { counter: 0 },
+					},
+				};
+
+				try {
+					setScope( scope as any );
+					setNamespace( 'test/other' );
+					state.counter = 4;
+					expect( scope.context[ 'test/right' ].counter ).toBe( 4 );
+				} finally {
+					resetNamespace();
+					resetScope();
+				}
+			} );
+		} );
+
+		describe( 'computations', () => {
+			it( 'should subscribe to values mutated with setters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+					set double( val ) {
+						state.counter = val / 2;
+					},
+				} );
+				let counter = 0;
+				let double = 0;
+
+				effect( () => {
+					counter = state.counter;
+					double = state.double;
+				} );
+
+				expect( counter ).toBe( 1 );
+				expect( double ).toBe( 2 );
+				state.double = 4;
+				expect( counter ).toBe( 2 );
+				expect( double ).toBe( 4 );
+			} );
+
+			it( 'should subscribe to changes when an item is removed from the array', () => {
+				const state = proxifyState( 'test', [ 0, 0, 0 ] );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					sum = state.reduce( ( sum ) => sum + 1, 0 );
+				} );
+
+				expect( sum ).toBe( 3 );
+				state.splice( 2, 1 );
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to for..in loops', () => {
+				const raw: Record< string, number > = { a: 0, b: 0 };
+				const state = proxifyState( 'test', raw );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					for ( const _ in state ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+
+				delete state.c;
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+			} );
+
+			it( 'should subscribe to changes for Object.getOwnPropertyNames()', () => {
+				const raw: Record< string, number > = { a: 1, b: 2 };
+				const state = proxifyState( 'test', raw );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					const keys = Object.getOwnPropertyNames( state );
+					for ( const _ of keys ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+
+				delete state.a;
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to Object.keys/values/entries()', () => {
+				const raw: Record< string, number > = { a: 1, b: 2 };
+				const state = proxifyState( 'test', raw );
+				let keys = 0;
+				let values = 0;
+				let entries = 0;
+
+				effect( () => {
+					keys = 0;
+					Object.keys( state ).forEach( () => ( keys += 1 ) );
+				} );
+
+				effect( () => {
+					values = 0;
+					Object.values( state ).forEach( () => ( values += 1 ) );
+				} );
+
+				effect( () => {
+					entries = 0;
+					Object.entries( state ).forEach( () => ( entries += 1 ) );
+				} );
+
+				expect( keys ).toBe( 2 );
+				expect( values ).toBe( 2 );
+				expect( entries ).toBe( 2 );
+
+				state.c = 0;
+				expect( keys ).toBe( 3 );
+				expect( values ).toBe( 3 );
+				expect( entries ).toBe( 3 );
+
+				delete state.a;
+				expect( keys ).toBe( 2 );
+				expect( values ).toBe( 2 );
+				expect( entries ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to for..of loops', () => {
+				const state = proxifyState( 'test', [ 0, 0 ] );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					for ( const _ of state ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.push( 0 );
+				expect( sum ).toBe( 3 );
+
+				state.splice( 0, 1 );
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to implicit changes in length', () => {
+				const state = proxifyState( 'test', [ 'foo', 'bar' ] );
+				let x = '';
+
+				effect( () => {
+					x = state.join( ' ' );
+				} );
+
+				expect( x ).toBe( 'foo bar' );
+
+				state.push( 'baz' );
+				expect( x ).toBe( 'foo bar baz' );
+
+				state.splice( 0, 1 );
+				expect( x ).toBe( 'bar baz' );
+			} );
+
+			it( 'should subscribe to changes when deleting properties', () => {
+				let x, y;
+
+				effect( () => {
+					x = state.a;
+				} );
+
+				effect( () => {
+					y = state.nested.b;
+				} );
+
+				expect( x ).toBe( 1 );
+				delete state.a;
+				expect( x ).toBe( undefined );
+
+				expect( y ).toBe( 2 );
+				delete state.nested.b;
+				expect( y ).toBe( undefined );
+			} );
+
+			it( 'should subscribe to changes when mutating objects', () => {
+				let x, y;
+
+				const state = proxifyState< {
+					a?: { id: number; nested: { id: number } };
+					b: { id: number; nested: { id: number } }[];
+				} >( 'test', {
+					b: [
+						{ id: 1, nested: { id: 1 } },
+						{ id: 2, nested: { id: 2 } },
+					],
+				} );
+
+				effect( () => {
+					x = state.a?.id;
+				} );
+
+				effect( () => {
+					y = state.a?.nested.id;
+				} );
+
+				expect( x ).toBe( undefined );
+				expect( y ).toBe( undefined );
+
+				state.a = state.b[ 0 ];
+
+				expect( x ).toBe( 1 );
+				expect( y ).toBe( 1 );
+
+				state.a = state.b[ 1 ];
+				expect( x ).toBe( 2 );
+				expect( y ).toBe( 2 );
+
+				state.a = undefined;
+				expect( x ).toBe( undefined );
+				expect( y ).toBe( undefined );
+
+				state.a = state.b[ 1 ];
+				expect( x ).toBe( 2 );
+				expect( y ).toBe( 2 );
+			} );
+
+			it( 'should trigger effects after mutations happen', () => {
+				let x;
+				effect( () => {
+					x = state.a;
+				} );
+				expect( x ).toBe( 1 );
+				state.a = 11;
+				expect( x ).toBe( 11 );
+			} );
+
+			it( 'should subscribe corretcly from getters', () => {
+				let x;
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				effect( () => ( x = state.double ) );
+				expect( x ).toBe( 2 );
+				state.counter = 2;
+				expect( x ).toBe( 4 );
+			} );
+
+			it( 'should subscribe corretcly from getters returning other parts of the state', () => {
+				let data;
+				const state = proxifyState( 'test', {
+					switch: 'a',
+					a: { data: 'a' },
+					b: { data: 'b' },
+					get aOrB() {
+						return state.switch === 'a' ? state.a : state.b;
+					},
+				} );
+				effect( () => ( data = state.aOrB.data ) );
+				expect( data ).toBe( 'a' );
+				state.switch = 'b';
+				expect( data ).toBe( 'b' );
+			} );
+
+			it( 'should subscribe to changes', () => {
+				const spy1 = jest.fn( () => state.a );
+				const spy2 = jest.fn( () => state.nested );
+				const spy3 = jest.fn( () => state.nested.b );
+				const spy4 = jest.fn( () => state.array[ 0 ] );
+				const spy5 = jest.fn(
+					() =>
+						typeof state.array[ 1 ] === 'object' &&
+						state.array[ 1 ].b
+				);
+
+				effect( spy1 );
+				effect( spy2 );
+				effect( spy3 );
+				effect( spy4 );
+				effect( spy5 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+
+				state.a = 11;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+
+				state.nested.b = 22;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 2 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 ); // nested also exists array[1]
+
+				state.nested = { b: 222 };
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 ); // now state.nested has a different reference
+
+				state.array[ 0 ] = 33;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 );
+
+				if ( typeof state.array[ 1 ] === 'object' ) {
+					state.array[ 1 ].b = 2222;
+				}
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 3 );
+
+				state.array[ 1 ] = { b: 22222 };
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array.push( 4 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array[ 3 ] = 5;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array = [ 333, { b: 222222 } ];
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 3 );
+				expect( spy5 ).toHaveBeenCalledTimes( 5 );
+			} );
+
+			it( 'should subscribe to array length', () => {
+				const array = [ 1 ];
+				const state = proxifyState( 'test', { array } );
+				const spy1 = jest.fn( () => state.array.length );
+				const spy2 = jest.fn( () =>
+					state.array.map( ( i: number ) => i )
+				);
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+
+				state.array.push( 2 );
+				expect( state.array.length ).toBe( 2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+
+				state.array[ 2 ] = 3;
+				expect( state.array.length ).toBe( 3 );
+				expect( spy1 ).toHaveBeenCalledTimes( 3 );
+				expect( spy2 ).toHaveBeenCalledTimes( 3 );
+
+				state.array = state.array.filter( ( i: number ) => i <= 2 );
+				expect( state.array.length ).toBe( 2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 4 );
+				expect( spy2 ).toHaveBeenCalledTimes( 4 );
+			} );
+
+			it( 'should be able to reset values with Object.assign and still react to changes', () => {
+				const initialNested = { ...nested };
+				const initialState = { ...raw, nested: initialNested };
+				let a, b;
+
+				effect( () => {
+					a = state.a;
+				} );
+				effect( () => {
+					b = state.nested.b;
+				} );
+
+				state.a = 2;
+				state.nested.b = 3;
+
+				expect( a ).toBe( 2 );
+				expect( b ).toBe( 3 );
+
+				Object.assign( state, initialState );
+
+				expect( a ).toBe( 1 );
+				expect( b ).toBe( 2 );
+			} );
+
+			it( 'should keep subscribed to properties that become getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => 3,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+			} );
+
+			it( 'should keep subscribed to modified getters', () => {
+				const state = proxifyState< {
+					counter: number;
+					double: number;
+				} >( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+
+				const scope = {
+					context: { test: { counter: 2 } },
+				};
+
+				let double = 0;
+
+				effect(
+					withScopeAndNs( scope, 'test', () => {
+						double = state.double;
+					} )
+				);
+
+				expect( double ).toBe( 2 );
+
+				Object.defineProperty( state, 'double', {
+					get() {
+						const ctx = getContext< { counter: number } >();
+						return ctx.counter * 2;
+					},
+				} );
+
+				expect( double ).toBe( 4 );
+			} );
+
+			it( 'should react to changes in props inside getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => state.otherNumber,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+			} );
+
+			it( 'should react to changes in props inside getters if they become getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => state.otherNumber,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+				Object.defineProperty( state, 'otherNumber', {
+					get: () => 5,
+					configurable: true,
+				} );
+				expect( number ).toBe( 5 );
+			} );
+
+			it( 'should allow getters to use `this`', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get() {
+						return this.otherNumber;
+					},
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+			} );
+
+			it( 'should support different scopes for the same getter', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					get numWithTag() {
+						let tag = 'No scope';
+						try {
+							tag = getContext< any >().tag;
+						} catch ( e ) {}
+						return `${ tag }: ${ this.number }`;
+					},
+				} );
+
+				const scopeA = {
+					context: { test: { tag: 'A' } },
+				};
+				const scopeB = {
+					context: { test: { tag: 'B' } },
+				};
+
+				let resultA = '';
+				let resultB = '';
+				let resultNoScope = '';
+
+				effect(
+					withScopeAndNs( scopeA, 'test', () => {
+						resultA = state.numWithTag;
+					} )
+				);
+				effect(
+					withScopeAndNs( scopeB, 'test', () => {
+						resultB = state.numWithTag;
+					} )
+				);
+				effect( () => {
+					resultNoScope = state.numWithTag;
+				} );
+
+				expect( resultA ).toBe( 'A: 1' );
+				expect( resultB ).toBe( 'B: 1' );
+				expect( resultNoScope ).toBe( 'No scope: 1' );
+				state.number = 2;
+				expect( resultA ).toBe( 'A: 2' );
+				expect( resultB ).toBe( 'B: 2' );
+				expect( resultNoScope ).toBe( 'No scope: 2' );
+			} );
+
+			it( 'should throw an error in getters that require a scope', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					get sumValueFromContext() {
+						const ctx = getContext();
+						return ctx
+							? this.number + ( ctx as any ).value
+							: this.number;
+					},
+					get sumValueFromElement() {
+						const element = getElement();
+						return element
+							? this.number + element.attributes.value
+							: this.number;
+					},
+				} );
+
+				expect( () => state.sumValueFromContext ).toThrow();
+				expect( () => state.sumValueFromElement ).toThrow();
+			} );
+
+			it( 'should react to changes in props inside functions', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+					sum( value: number ) {
+						return state.number + state.otherNumber + value;
+					},
+				} );
+
+				let result = 0;
+
+				effect( () => {
+					result = state.sum( 2 );
+				} );
+
+				expect( result ).toBe( 6 );
+				state.number = 2;
+				expect( result ).toBe( 7 );
+				state.otherNumber = 4;
+				expect( result ).toBe( 8 );
+			} );
+		} );
+
+		describe( 'peek', () => {
+			it( 'should return correct values when using peek()', () => {
+				expect( peek( state, 'a' ) ).toBe( 1 );
+				expect( peek( state.nested, 'b' ) ).toBe( 2 );
+				expect( peek( state.array, 0 ) ).toBe( 3 );
+				const nested = peek( state, 'array' )[ 1 ];
+				expect( typeof nested === 'object' && nested.b ).toBe( 2 );
+				expect( peek( state.array, 'length' ) ).toBe( 2 );
+			} );
+
+			it( 'should not subscribe to changes when peeking', () => {
+				const spy1 = jest.fn( () => peek( state, 'a' ) );
+				const spy2 = jest.fn( () => peek( state, 'nested' ) );
+				const spy3 = jest.fn( () => peek( state, 'nested' ).b );
+				const spy4 = jest.fn( () => peek( state, 'array' )[ 0 ] );
+				const spy5 = jest.fn( () => {
+					const nested = peek( state, 'array' )[ 1 ];
+					return typeof nested === 'object' && nested.b;
+				} );
+				const spy6 = jest.fn( () => peek( state, 'array' ).length );
+
+				effect( spy1 );
+				effect( spy2 );
+				effect( spy3 );
+				effect( spy4 );
+				effect( spy5 );
+				effect( spy6 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+				expect( spy6 ).toHaveBeenCalledTimes( 1 );
+
+				state.a = 11;
+				state.nested.b = 22;
+				state.nested = { b: 222 };
+				state.array[ 0 ] = 33;
+				if ( typeof state.array[ 1 ] === 'object' ) {
+					state.array[ 1 ].b = 2222;
+				}
+				state.array.push( 4 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+				expect( spy6 ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'should subscribe to some changes but not other when peeking inside an object', () => {
+				const spy1 = jest.fn( () => peek( state.nested, 'b' ) );
+				effect( spy1 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				state.nested.b = 22;
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				state.nested = { b: 222 };
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				state.nested.b = 2222;
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+			} );
+
+			it( 'should support returning peek from getters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				expect( peek( state, 'double' ) ).toBe( 2 );
+				state.counter = 2;
+				expect( peek( state, 'double' ) ).toBe( 4 );
+			} );
+
+			it( 'should support peeking getters accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					get double() {
+						const { counter } = getContext< { counter: number } >();
+						return counter * 2;
+					},
+				} );
+
+				const context = proxifyState( 'test', { counter: 1 } );
+				const scope = { context: { test: context } };
+				const peekStateDouble = withScopeAndNs( scope, 'test', () =>
+					peek( state, 'double' )
+				);
+
+				const spy = jest.fn( peekStateDouble );
+				effect( spy );
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 2 );
+
+				context.counter = 2;
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 4 );
+			} );
+
+			it( 'should support peeking getters accessing other namespaces', () => {
+				const state2 = proxifyState( 'test2', {
+					get counter() {
+						const { counter } = getContext< { counter: number } >();
+						return counter;
+					},
+				} );
+				const context2 = proxifyState( 'test-2', { counter: 1 } );
+
+				const state1 = proxifyState( 'test1', {
+					get double() {
+						return state2.counter * 2;
+					},
+				} );
+
+				const peekStateDouble = withScopeAndNs(
+					{ context: { test2: context2 } },
+					'test2',
+					() => peek( state1, 'double' )
+				);
+
+				const spy = jest.fn( peekStateDouble );
+				effect( spy );
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 2 );
+
+				context2.counter = 2;
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 4 );
+			} );
+		} );
+
+		describe( 'refs', () => {
+			it( 'should preserve object references', () => {
+				expect( state.nested ).toBe( state.array[ 1 ] );
+
+				state.nested.b = 22;
+
+				expect( state.nested ).toBe( state.array[ 1 ] );
+				expect( state.nested.b ).toBe( 22 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 22 );
+
+				state.nested = { b: 222 };
+
+				expect( state.nested ).not.toBe( state.array[ 1 ] );
+				expect( state.nested.b ).toBe( 222 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 22 );
+			} );
+
+			it( 'should return the same proxy if initialized more than once', () => {
+				const raw = {};
+				const state1 = proxifyState( 'test', raw );
+				const state2 = proxifyState( 'test', raw );
+				expect( state1 ).toBe( state2 );
+			} );
+
+			it( 'should throw when trying to re-proxify a state object', () => {
+				const state = proxifyState( 'test', {} );
+				expect( () => proxifyState( 'test', state ) ).toThrow();
+			} );
+		} );
+
+		describe( 'unsupported data structures', () => {
+			it( 'should throw when trying to proxify a class instance', () => {
+				class MyClass {}
+				const obj = new MyClass();
+				expect( () => proxifyState( 'test', obj ) ).toThrow();
+			} );
+
+			it( 'should not wrap a class instance', () => {
+				class MyClass {}
+				const obj = new MyClass();
+				const state = proxifyState( 'test', { obj } );
+				expect( state.obj ).toBe( obj );
+			} );
+
+			it( 'should not wrap built-ins in proxies', () => {
+				window.MyClass = class MyClass {};
+				const obj = new window.MyClass();
+				const state = proxifyState( 'test', { obj } );
+				expect( state.obj ).toBe( obj );
+			} );
+
+			it( 'should not wrap elements in proxies', () => {
+				const el = window.document.createElement( 'div' );
+				const state = proxifyState( 'test', { el } );
+				expect( state.el ).toBe( el );
+			} );
+
+			it( 'should wrap global objects', () => {
+				window.obj = { b: 2 };
+				const state = proxifyState( 'test', window.obj );
+				expect( state ).not.toBe( window.obj );
+				expect( state ).toStrictEqual( { b: 2 } );
+			} );
+
+			it( 'should not wrap dates', () => {
+				const date = new Date();
+				const state = proxifyState( 'test', { date } );
+				expect( state.date ).toBe( date );
+			} );
+
+			it( 'should not wrap regular expressions', () => {
+				const regex = new RegExp( '' );
+				const state = proxifyState( 'test', { regex } );
+				expect( state.regex ).toBe( regex );
+			} );
+
+			it( 'should not wrap Map', () => {
+				const map = new Map();
+				const state = proxifyState( 'test', { map } );
+				expect( state.map ).toBe( map );
+			} );
+
+			it( 'should not wrap Set', () => {
+				const set = new Set();
+				const state = proxifyState( 'test', { set } );
+				expect( state.set ).toBe( set );
+			} );
+		} );
+
+		describe( 'symbols', () => {
+			it( 'should observe symbols', () => {
+				const key = Symbol( 'key' );
+				let x;
+				const store = proxifyState< { [ key: symbol ]: any } >(
+					'test',
+					{}
+				);
+				effect( () => ( x = store[ key ] ) );
+
+				expect( store[ key ] ).toBe( undefined );
+				expect( x ).toBe( undefined );
+
+				store[ key ] = true;
+
+				expect( store[ key ] ).toBe( true );
+				expect( x ).toBe( true );
+			} );
+
+			it( 'should not observe well-known symbols', () => {
+				const key = Symbol.isConcatSpreadable;
+				let x;
+				const state = proxifyState< { [ key: symbol ]: any } >(
+					'test',
+					{}
+				);
+				effect( () => ( x = state[ key ] ) );
+
+				expect( state[ key ] ).toBe( undefined );
+				expect( x ).toBe( undefined );
+
+				state[ key ] = true;
+				expect( state[ key ] ).toBe( true );
+				expect( x ).toBe( undefined );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/store-proxy.ts b/packages/interactivity/src/proxies/test/store-proxy.ts
new file mode 100644
index 00000000000000..225621072929d0
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/store-proxy.ts
@@ -0,0 +1,123 @@
+/**
+ * Internal dependencies
+ */
+import { proxifyStore, proxifyState } from '../';
+import { setScope, resetScope, getContext } from '../../scopes';
+import { setNamespace, resetNamespace } from '../../namespaces';
+
+describe( 'Interactivity API', () => {
+	describe( 'store proxy', () => {
+		describe( 'get', () => {
+			it( 'should initialize properties at the top level if they do not exist', () => {
+				const store = proxifyStore< any >( 'test', {} );
+				expect( store.state.props ).toBeUndefined();
+				expect( store.state ).toEqual( {} );
+			} );
+
+			it( 'should wrap sync functions with the store namespace and current scope', () => {
+				let result = '';
+
+				const syncFunc = () => {
+					const ctx = getContext< { value: string } >();
+					result = ctx.value;
+				};
+
+				const storeTest = proxifyStore( 'test', {
+					callbacks: {
+						syncFunc,
+						nested: { syncFunc },
+					},
+				} );
+
+				const scope = {
+					context: {
+						test: { value: 'test' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+
+				storeTest.callbacks.syncFunc();
+				expect( result ).toBe( 'test' );
+				storeTest.callbacks.nested.syncFunc();
+				expect( result ).toBe( 'test' );
+
+				resetScope();
+				resetNamespace();
+			} );
+
+			it( 'should wrap generators into async functions', async () => {
+				const asyncFunc = function* () {
+					const data = yield Promise.resolve( 'data' );
+					const ctx = getContext< { value: string } >();
+					return `${ data } from ${ ctx.value }`;
+				};
+
+				const storeTest = proxifyStore( 'test', {
+					callbacks: { asyncFunc, nested: { asyncFunc } },
+				} );
+
+				const scope = {
+					context: {
+						test: { value: 'test' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+				const promise1 = storeTest.callbacks.asyncFunc();
+				const promise2 = storeTest.callbacks.nested.asyncFunc();
+				resetScope();
+				resetNamespace();
+
+				expect( await promise1 ).toBe( 'data from test' );
+				expect( await promise2 ).toBe( 'data from test' );
+			} );
+
+			it( 'should allow async functions to call functions from other stores', async () => {
+				const asyncFunc = function* () {
+					const data = yield Promise.resolve( 'data' );
+					const ctx = getContext< { value: string } >();
+					return `${ data } from ${ ctx.value }`;
+				};
+
+				const storeTest1 = proxifyStore( 'test1', {
+					callbacks: { asyncFunc },
+				} );
+
+				const storeTest2 = proxifyStore( 'test2', {
+					callbacks: {
+						*asyncFunc() {
+							const result =
+								yield storeTest1.callbacks.asyncFunc();
+							return result;
+						},
+					},
+				} );
+
+				const scope = {
+					context: {
+						test1: { value: 'test1' },
+						test2: { value: 'test2' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+				const promise = storeTest2.callbacks.asyncFunc();
+				resetScope();
+				resetNamespace();
+
+				expect( await promise ).toBe( 'data from test1' );
+			} );
+
+			it( 'should not wrap other proxified objects with a store proxy', () => {
+				const state = proxifyState( 'test', {} );
+				const store = proxifyStore( 'test', { state } );
+
+				expect( store.state ).toBe( state );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/scopes.ts b/packages/interactivity/src/scopes.ts
new file mode 100644
index 00000000000000..2e78755ec4bbe6
--- /dev/null
+++ b/packages/interactivity/src/scopes.ts
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { h as createElement, RefObject } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import { getNamespace } from './namespaces';
+import type { Evaluate } from './hooks';
+
+export interface Scope {
+	evaluate: Evaluate;
+	context: object;
+	ref: RefObject< HTMLElement >;
+	attributes: createElement.JSX.HTMLAttributes;
+}
+
+// Store stacks for the current scope and the default namespaces and export APIs
+// to interact with them.
+const scopeStack: Scope[] = [];
+
+export const getScope = () => scopeStack.slice( -1 )[ 0 ];
+
+export const setScope = ( scope: Scope ) => {
+	scopeStack.push( scope );
+};
+export const resetScope = () => {
+	scopeStack.pop();
+};
+
+// Wrap the element props to prevent modifications.
+const immutableMap = new WeakMap();
+const immutableError = () => {
+	throw new Error(
+		'Please use `data-wp-bind` to modify the attributes of an element.'
+	);
+};
+const immutableHandlers: ProxyHandler< object > = {
+	get( target, key, receiver ) {
+		const value = Reflect.get( target, key, receiver );
+		return !! value && typeof value === 'object'
+			? deepImmutable( value )
+			: value;
+	},
+	set: immutableError,
+	deleteProperty: immutableError,
+};
+const deepImmutable = < T extends object = {} >( target: T ): T => {
+	if ( ! immutableMap.has( target ) ) {
+		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
+	}
+	return immutableMap.get( target );
+};
+
+/**
+ * Retrieves the context inherited by the element evaluating a function from the
+ * store. The returned value depends on the element and the namespace where the
+ * function calling `getContext()` exists.
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ *                  function exists is used.
+ * @return The context content.
+ */
+export const getContext = < T extends object >( namespace?: string ): T => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	return scope.context[ namespace || getNamespace() ];
+};
+
+/**
+ * Retrieves a representation of the element where a function from the store
+ * is being evalutated. Such representation is read-only, and contains a
+ * reference to the DOM element, its props and a local reactive state.
+ *
+ * @return Element representation.
+ */
+export const getElement = () => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getElement()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	const { ref, attributes } = scope;
+	return Object.freeze( {
+		ref: ref.current,
+		attributes: deepImmutable( attributes ),
+	} );
+};
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index 281a6c266021e1..25fa64eb6e160e 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -1,175 +1,18 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { deepSignal } from 'deepsignal';
-import { computed } from '@preact/signals';
-
+import { proxifyState, proxifyStore } from './proxies';
 /**
- * Internal dependencies
+ * External dependencies
  */
-import {
-	getScope,
-	setScope,
-	resetScope,
-	getNamespace,
-	setNamespace,
-	resetNamespace,
-} from './hooks';
-const isObject = ( item: unknown ): item is Record< string, unknown > =>
-	Boolean( item && typeof item === 'object' && item.constructor === Object );
-
-const deepMerge = ( target: any, source: any ) => {
-	if ( isObject( target ) && isObject( source ) ) {
-		for ( const key in source ) {
-			const getter = Object.getOwnPropertyDescriptor( source, key )?.get;
-			if ( typeof getter === 'function' ) {
-				Object.defineProperty( target, key, { get: getter } );
-			} else if ( isObject( source[ key ] ) ) {
-				if ( ! target[ key ] ) {
-					target[ key ] = {};
-				}
-				deepMerge( target[ key ], source[ key ] );
-			} else {
-				try {
-					target[ key ] = source[ key ];
-				} catch ( e ) {
-					// Assignemnts fail for properties that are only getters.
-					// When that's the case, the assignment is simply ignored.
-				}
-			}
-		}
-	}
-};
+import { getNamespace } from './namespaces';
+import { deepMerge, isPlainObject } from './utils';
 
 export const stores = new Map();
 const rawStores = new Map();
 const storeLocks = new Map();
 const storeConfigs = new Map();
 
-const objToProxy = new WeakMap();
-const proxyToNs = new WeakMap();
-const scopeToGetters = new WeakMap();
-
-const proxify = ( obj: any, ns: string ) => {
-	if ( ! objToProxy.has( obj ) ) {
-		const proxy = new Proxy( obj, handlers );
-		objToProxy.set( obj, proxy );
-		proxyToNs.set( proxy, ns );
-	}
-	return objToProxy.get( obj );
-};
-
-const handlers = {
-	get: ( target: any, key: string | symbol, receiver: any ) => {
-		const ns = proxyToNs.get( receiver );
-
-		// Check if the property is a getter and we are inside an scope. If that is
-		// the case, we clone the getter to avoid overwriting the scoped
-		// dependencies of the computed each time that getter runs.
-		const getter = Object.getOwnPropertyDescriptor( target, key )?.get;
-		if ( getter ) {
-			const scope = getScope();
-			if ( scope ) {
-				const getters =
-					scopeToGetters.get( scope ) ||
-					scopeToGetters.set( scope, new Map() ).get( scope );
-				if ( ! getters.has( getter ) ) {
-					getters.set(
-						getter,
-						computed( () => {
-							setNamespace( ns );
-							setScope( scope );
-							try {
-								return getter.call( target );
-							} finally {
-								resetScope();
-								resetNamespace();
-							}
-						} )
-					);
-				}
-				return getters.get( getter ).value;
-			}
-		}
-
-		const result = Reflect.get( target, key );
-
-		// Check if the proxy is the store root and no key with that name exist. In
-		// that case, return an empty object for the requested key.
-		if ( typeof result === 'undefined' && receiver === stores.get( ns ) ) {
-			const obj = {};
-			Reflect.set( target, key, obj );
-			return proxify( obj, ns );
-		}
-
-		// Check if the property is a generator. If it is, we turn it into an
-		// asynchronous function where we restore the default namespace and scope
-		// each time it awaits/yields.
-		if ( result?.constructor?.name === 'GeneratorFunction' ) {
-			return async ( ...args: unknown[] ) => {
-				const scope = getScope();
-				const gen: Generator< any > = result( ...args );
-
-				let value: unknown;
-				let it: IteratorResult< any >;
-
-				while ( true ) {
-					setNamespace( ns );
-					setScope( scope );
-					try {
-						it = gen.next( value );
-					} finally {
-						resetScope();
-						resetNamespace();
-					}
-
-					try {
-						value = await it.value;
-					} catch ( e ) {
-						setNamespace( ns );
-						setScope( scope );
-						gen.throw( e );
-					} finally {
-						resetScope();
-						resetNamespace();
-					}
-
-					if ( it.done ) {
-						break;
-					}
-				}
-
-				return value;
-			};
-		}
-
-		// Check if the property is a synchronous function. If it is, set the
-		// default namespace. Synchronous functions always run in the proper scope,
-		// which is set by the Directives component.
-		if ( typeof result === 'function' ) {
-			return ( ...args: unknown[] ) => {
-				setNamespace( ns );
-				try {
-					return result( ...args );
-				} finally {
-					resetNamespace();
-				}
-			};
-		}
-
-		// Check if the property is an object. If it is, proxyify it.
-		if ( isObject( result ) ) {
-			return proxify( result, ns );
-		}
-
-		return result;
-	},
-	// Prevents passing the current proxy as the receiver to the deepSignal.
-	set( target: any, key: string, value: any ) {
-		return Reflect.set( target, key, value );
-	},
-};
-
 /**
  * Get the defined config for the store with the passed namespace.
  *
@@ -280,13 +123,15 @@ export function store(
 			storeLocks.set( namespace, lock );
 		}
 		const rawStore = {
-			state: deepSignal( isObject( state ) ? state : {} ),
+			state: proxifyState(
+				namespace,
+				isPlainObject( state ) ? state : {}
+			),
 			...block,
 		};
-		const proxiedStore = new Proxy( rawStore, handlers );
+		const proxifiedStore = proxifyStore( namespace, rawStore );
 		rawStores.set( namespace, rawStore );
-		stores.set( namespace, proxiedStore );
-		proxyToNs.set( proxiedStore, namespace );
+		stores.set( namespace, proxifiedStore );
 	} else {
 		// Lock the store if it wasn't locked yet and the passed lock is
 		// different from the universal unlock. If no lock is given, the store
@@ -318,7 +163,7 @@ export function store(
 	return stores.get( namespace );
 }
 
-export const parseInitialData = ( dom = document ) => {
+export const parseServerData = ( dom = document ) => {
 	const jsonDataScriptTag =
 		// Preferred Script Module data passing form
 		dom.getElementById(
@@ -334,16 +179,17 @@ export const parseInitialData = ( dom = document ) => {
 	return {};
 };
 
-export const populateInitialData = ( data?: {
+export const populateServerData = ( data?: {
 	state?: Record< string, unknown >;
 	config?: Record< string, unknown >;
 } ) => {
-	if ( isObject( data?.state ) ) {
+	if ( isPlainObject( data?.state ) ) {
 		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
-			store( namespace, { state }, { lock: universalUnlock } );
+			const st = store< any >( namespace, {}, { lock: universalUnlock } );
+			deepMerge( st.state, state, false );
 		} );
 	}
-	if ( isObject( data?.config ) ) {
+	if ( isPlainObject( data?.config ) ) {
 		Object.entries( data!.config ).forEach( ( [ namespace, config ] ) => {
 			storeConfigs.set( namespace, config );
 		} );
@@ -351,5 +197,5 @@ export const populateInitialData = ( data?: {
 };
 
 // Parse and populate the initial state and config.
-const data = parseInitialData();
-populateInitialData( data );
+const data = parseServerData();
+populateServerData( data );
diff --git a/packages/interactivity/src/test/utils.ts b/packages/interactivity/src/test/utils.ts
index ff564fa7c4c250..2ea0d2f04fadf7 100644
--- a/packages/interactivity/src/test/utils.ts
+++ b/packages/interactivity/src/test/utils.ts
@@ -1,26 +1,321 @@
 /**
  * Internal dependencies
  */
-import { kebabToCamelCase } from '../utils';
-
-describe( 'kebabToCamelCase', () => {
-	it( 'should work exactly as the PHP version', async () => {
-		expect( kebabToCamelCase( '' ) ).toBe( '' );
-		expect( kebabToCamelCase( 'item' ) ).toBe( 'item' );
-		expect( kebabToCamelCase( 'my-item' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my_item' ) ).toBe( 'my_item' );
-		expect( kebabToCamelCase( 'My-iTem' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my-item-with-multiple-hyphens' ) ).toBe(
-			'myItemWithMultipleHyphens'
-		);
-		expect( kebabToCamelCase( 'my-item-with--double-hyphens' ) ).toBe(
-			'myItemWith-DoubleHyphens'
-		);
-		expect( kebabToCamelCase( 'my-item-with_under-score' ) ).toBe(
-			'myItemWith_underScore'
-		);
-		expect( kebabToCamelCase( '-my-item' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my-item-' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
+import { deepMerge, kebabToCamelCase } from '../utils';
+
+describe( 'Interactivity API', () => {
+	describe( 'deepMerge', () => {
+		it( 'should merge two plain objects', () => {
+			const target = { a: 1, b: 2 };
+			const source = { b: 3, c: 4 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 3, c: 4 } );
+		} );
+
+		it( 'should handle nested objects', () => {
+			const target = { a: { x: 1 }, b: 2 };
+			const source = { a: { y: 2 }, c: 3 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: { x: 1, y: 2 }, b: 2, c: 3 } );
+		} );
+
+		it( 'should not override existing properties when override is false', () => {
+			const target = { a: 1, b: { x: 10 } };
+			const source = { a: 2, b: { y: 20 }, c: 3 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 1, b: { x: 10, y: 20 }, c: 3 } );
+		} );
+
+		it( 'should handle getters', () => {
+			const target = {
+				get a() {
+					return 1;
+				},
+				b: 1,
+			};
+			const source = {
+				a: 2,
+				get b() {
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result.a ).toBe( 2 );
+			expect( result.b ).toBe( 2 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeUndefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.get
+			).toBeDefined();
+		} );
+
+		it( 'should not execute getters when performing the deep merge', () => {
+			let targetExecuted = false;
+			let sourceExecuted = false;
+			const target = {
+				get a() {
+					targetExecuted = true;
+					return 1;
+				},
+			};
+			const source = {
+				get b() {
+					sourceExecuted = true;
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( targetExecuted ).toBe( false );
+			expect( sourceExecuted ).toBe( false );
+		} );
+
+		https: it( 'should handle setters', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				a: 3,
+				get b() {
+					return 2;
+				},
+				set b( value ) {
+					sourceValue = value;
+				},
+			};
+
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+
+			result.a = 5;
+			expect( targetValue ).toBe( 5 );
+			expect( result.a ).toBe( 5 );
+
+			deepMerge( result, source );
+
+			result.a = 6;
+			expect( targetValue ).toBe( 5 );
+
+			result.b = 7;
+			expect( sourceValue ).toBe( 7 );
+
+			expect( result.a ).toBe( 6 );
+			expect( result.b ).toBe( 2 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeUndefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.set
+			).toBeDefined();
+		} );
+
+		it( 'should handle setters when overwrite is false', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				a: 3,
+				get b() {
+					return 2;
+				},
+				set b( value ) {
+					sourceValue = value;
+				},
+			};
+
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+
+			result.a = 6;
+			expect( targetValue ).toBe( 6 );
+
+			result.b = 7;
+			expect( sourceValue ).toBe( 2 );
+
+			expect( result.a ).toBe( 6 );
+			expect( result.b ).toBe( 7 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.set
+			).toBeUndefined();
+		} );
+
+		it( 'should handle getters and setters together', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				get a() {
+					return 3;
+				},
+				set a( value ) {
+					sourceValue = value;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+
+			// Test if setters and getters are copied correctly
+			result.a = 5;
+			expect( targetValue ).toBe( 1 ); // Should not change
+			expect( sourceValue ).toBe( 5 ); // Should change
+			expect( result.a ).toBe( 3 ); // Should return the getter's value
+
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeDefined();
+		} );
+
+		it( 'should handle getters when overwrite is false', () => {
+			const target = {
+				get a() {
+					return 1;
+				},
+				b: 1,
+			};
+			const source = {
+				a: 2,
+				get b() {
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result.a ).toBe( 1 );
+			expect( result.b ).toBe( 1 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.get
+			).toBeUndefined();
+		} );
+
+		it( 'should ignore non-plain objects', () => {
+			const target = { a: 1 };
+			const source = new Date();
+			const result = { ...target };
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1 } );
+		} );
+
+		it( 'should handle arrays', () => {
+			const target = { a: [ 1, 2 ] };
+			const source = { a: [ 3, 4 ] };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: [ 3, 4 ] } );
+		} );
+
+		it( 'should handle arrays when overwrite is false', () => {
+			const target = { a: [ 1, 2 ] };
+			const source = { a: [ 3, 4 ] };
+			const result = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: [ 1, 2 ] } );
+		} );
+
+		it( 'should handle null values', () => {
+			const target = { a: 1, b: null };
+			const source = { b: 2, c: null };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: null } );
+		} );
+
+		it( 'should handle undefined values', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: undefined } );
+		} );
+
+		it( 'should handle undefined values when overwrite is false', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 1, b: undefined, c: undefined } );
+		} );
+
+		it( 'should handle deleted values when overwrite is false', () => {
+			const target = { a: 1 };
+			const source = { a: 2 };
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			delete result.a;
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 2 } );
+		} );
+	} );
+
+	describe( 'kebabToCamelCase', () => {
+		it( 'should work exactly as the PHP version', async () => {
+			expect( kebabToCamelCase( '' ) ).toBe( '' );
+			expect( kebabToCamelCase( 'item' ) ).toBe( 'item' );
+			expect( kebabToCamelCase( 'my-item' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my_item' ) ).toBe( 'my_item' );
+			expect( kebabToCamelCase( 'My-iTem' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my-item-with-multiple-hyphens' ) ).toBe(
+				'myItemWithMultipleHyphens'
+			);
+			expect( kebabToCamelCase( 'my-item-with--double-hyphens' ) ).toBe(
+				'myItemWith-DoubleHyphens'
+			);
+			expect( kebabToCamelCase( 'my-item-with_under-score' ) ).toBe(
+				'myItemWith_underScore'
+			);
+			expect( kebabToCamelCase( '-my-item' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my-item-' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
+		} );
 	} );
 } );
diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts
index 3c880d43f17065..ee0cf1ba084dc8 100644
--- a/packages/interactivity/src/utils.ts
+++ b/packages/interactivity/src/utils.ts
@@ -14,14 +14,8 @@ import { effect } from '@preact/signals';
 /**
  * Internal dependencies
  */
-import {
-	getScope,
-	setScope,
-	resetScope,
-	getNamespace,
-	setNamespace,
-	resetNamespace,
-} from './hooks';
+import { getScope, setScope, resetScope } from './scopes';
+import { getNamespace, setNamespace, resetNamespace } from './namespaces';
 
 interface Flusher {
 	readonly flush: () => void;
@@ -145,18 +139,26 @@ export function withScope( func: ( ...args: unknown[] ) => unknown ) {
 				try {
 					it = gen.next( value );
 				} finally {
-					resetNamespace();
 					resetScope();
+					resetNamespace();
 				}
+
 				try {
 					value = await it.value;
 				} catch ( e ) {
+					setNamespace( ns );
+					setScope( scope );
 					gen.throw( e );
+				} finally {
+					resetScope();
+					resetNamespace();
 				}
+
 				if ( it.done ) {
 					break;
 				}
 			}
+
 			return value;
 		};
 	}
@@ -346,3 +348,50 @@ export const warn = ( message: string ): void => {
 		logged.add( message );
 	}
 };
+
+/**
+ * Checks if the passed `candidate` is a plain object with just the `Object`
+ * prototype.
+ *
+ * @param candidate The item to check.
+ * @return Whether `candidate` is a plain object.
+ */
+export const isPlainObject = (
+	candidate: unknown
+): candidate is Record< string, unknown > =>
+	Boolean(
+		candidate &&
+			typeof candidate === 'object' &&
+			candidate.constructor === Object
+	);
+
+export const deepMerge = (
+	target: any,
+	source: any,
+	override: boolean = true
+) => {
+	if ( isPlainObject( target ) && isPlainObject( source ) ) {
+		for ( const key in source ) {
+			const desc = Object.getOwnPropertyDescriptor( source, key );
+			if (
+				typeof desc?.get === 'function' ||
+				typeof desc?.set === 'function'
+			) {
+				if ( override || ! ( key in target ) ) {
+					Object.defineProperty( target, key, {
+						...desc,
+						configurable: true,
+						enumerable: true,
+					} );
+				}
+			} else if ( isPlainObject( source[ key ] ) ) {
+				if ( ! target[ key ] ) {
+					target[ key ] = {};
+				}
+				deepMerge( target[ key ], source[ key ], override );
+			} else if ( override || ! ( key in target ) ) {
+				Object.defineProperty( target, key, desc! );
+			}
+		}
+	}
+};
diff --git a/test/e2e/specs/interactivity/deferred-store.spec.ts b/test/e2e/specs/interactivity/deferred-store.spec.ts
index b6a7853c40dcd4..0ddbcb0a60d2f4 100644
--- a/test/e2e/specs/interactivity/deferred-store.spec.ts
+++ b/test/e2e/specs/interactivity/deferred-store.spec.ts
@@ -27,9 +27,7 @@ test.describe( 'deferred store', () => {
 		await expect( resultInput ).toHaveText( 'Hello, world!' );
 	} );
 
-	// There is a known issue for deferred getters right now.
-	// eslint-disable-next-line playwright/no-skipped-test
-	test.skip( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
+	test( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
 		page,
 	} ) => {
 		const resultInput = page.getByTestId( 'result-getter' );
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
index 41afa274155a28..e806049ff55e75 100644
--- a/test/e2e/specs/interactivity/directive-context.spec.ts
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -38,7 +38,7 @@ test.describe( 'data-wp-context', () => {
 		} );
 	} );
 
-	test( 'is correctly extended', async ( { page } ) => {
+	test( 'is correctly extended (shallow)', async ( { page } ) => {
 		const childContext = await parseContent(
 			page.getByTestId( 'child context' )
 		);
@@ -47,12 +47,12 @@ test.describe( 'data-wp-context', () => {
 			prop1: 'parent',
 			prop2: 'child',
 			prop3: 'child',
-			obj: { prop4: 'parent', prop5: 'child', prop6: 'child' },
+			obj: { prop5: 'child', prop6: 'child' },
 			array: [ 4, 5, 6 ],
 		} );
 	} );
 
-	test( 'changes in inherited properties are reflected (child)', async ( {
+	test( "changes in inherited properties are reflected and don't leak down (child)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'child prop1' ).click();
@@ -70,10 +70,10 @@ test.describe( 'data-wp-context', () => {
 		);
 
 		expect( parentContext.prop1 ).toBe( 'modifiedFromChild' );
-		expect( parentContext.obj.prop4 ).toBe( 'modifiedFromChild' );
+		expect( parentContext.obj.prop4 ).toBe( 'parent' );
 	} );
 
-	test( 'changes in inherited properties are reflected (parent)', async ( {
+	test( "changes in inherited properties are reflected and don't leak up (parent)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'parent prop1' ).click();
@@ -84,7 +84,7 @@ test.describe( 'data-wp-context', () => {
 		);
 
 		expect( childContext.prop1 ).toBe( 'modifiedFromParent' );
-		expect( childContext.obj.prop4 ).toBe( 'modifiedFromParent' );
+		expect( childContext.obj.prop4 ).toBeUndefined();
 
 		const parentContext = await parseContent(
 			page.getByTestId( 'parent context' )
@@ -170,7 +170,7 @@ test.describe( 'data-wp-context', () => {
 		expect( childContext.array ).toMatchObject( [ 4, 5, 6 ] );
 	} );
 
-	test( 'overwritten objects updates inherited values', async ( {
+	test( "overwritten objects don't inherit values (shallow)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'parent replace' ).click();
@@ -182,7 +182,7 @@ test.describe( 'data-wp-context', () => {
 		expect( childContext.obj.prop4 ).toBeUndefined();
 		expect( childContext.obj.prop5 ).toBe( 'child' );
 		expect( childContext.obj.prop6 ).toBe( 'child' );
-		expect( childContext.obj.overwritten ).toBe( true );
+		expect( childContext.obj.overwritten ).toBeUndefined();
 
 		const parentContext = await parseContent(
 			page.getByTestId( 'parent context' )
@@ -230,13 +230,13 @@ test.describe( 'data-wp-context', () => {
 		await expect( element ).toHaveAttribute( 'value', 'Text 1' );
 	} );
 
-	test( 'should replace values on navigation', async ( { page } ) => {
+	test( 'should preserve values on navigation', async ( { page } ) => {
 		const element = page.getByTestId( 'navigation text' );
 		await expect( element ).toHaveText( 'first page' );
 		await page.getByTestId( 'toggle text' ).click();
 		await expect( element ).toHaveText( 'changed dynamically' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'changed dynamically' );
 	} );
 
 	test( 'should preserve the previous context values', async ( { page } ) => {
@@ -248,16 +248,16 @@ test.describe( 'data-wp-context', () => {
 		await expect( element ).toHaveText( 'some new text' );
 	} );
 
-	test( 'should update values when navigating back or forward', async ( {
+	test( 'should preserve values when navigating back or forward', async ( {
 		page,
 	} ) => {
 		const element = page.getByTestId( 'navigation text' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'first page' );
 		await page.goBack();
 		await expect( element ).toHaveText( 'first page' );
 		await page.goForward();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'first page' );
 	} );
 
 	test( 'should inherit values on navigation', async ( { page } ) => {
@@ -270,15 +270,14 @@ test.describe( 'data-wp-context', () => {
 		await page.getByTestId( 'add text2' ).click();
 		await expect( text2 ).toHaveText( 'some new text' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( text ).toHaveText( 'second page' );
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 		await page.goBack();
-		await expect( text ).toHaveText( 'first page' );
-		// text2 maintains its value as it is not defined in the first page.
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 		await page.goForward();
-		await expect( text ).toHaveText( 'second page' );
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 	} );
 
 	test( 'should maintain the same context reference on async actions', async ( {
@@ -289,11 +288,14 @@ test.describe( 'data-wp-context', () => {
 		await page.getByTestId( 'async navigate' ).click();
 		await expect( element ).toHaveText( 'changed from async action' );
 	} );
+
 	test( 'should bail out if the context is not a default directive', async ( {
 		page,
 	} ) => {
-		// This test is to ensure that the context directive is only applied to the default directive
-		// and not to any other directive.
+		/*
+		 * This test is to ensure that the context directive is only applied to the
+		 * default directive and not to any other directive.
+		 */
 		const defaultElement = page.getByTestId( 'default suffix context' );
 		await expect( defaultElement ).toHaveText( 'default' );
 		const element = page.getByTestId( 'non-default suffix context' );
@@ -363,7 +365,7 @@ test.describe( 'data-wp-context', () => {
 			page.getByTestId( 'child context' )
 		);
 
-		expect( childContextBefore.obj2.prop4 ).toBe( 'parent' );
+		expect( childContextBefore.obj2.prop4 ).toBeUndefined();
 		expect( childContextBefore.obj2.prop5 ).toBe( 'child' );
 		expect( childContextBefore.obj2.prop6 ).toBe( 'child' );
 
@@ -376,6 +378,6 @@ test.describe( 'data-wp-context', () => {
 		expect( childContextAfter.obj2.prop4 ).toBeUndefined();
 		expect( childContextAfter.obj2.prop5 ).toBe( 'child' );
 		expect( childContextAfter.obj2.prop6 ).toBe( 'child' );
-		expect( childContextAfter.obj2.overwritten ).toBe( true );
+		expect( childContextAfter.obj2.overwritten ).toBeUndefined();
 	} );
 } );
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
index 9dbd1e47a2ef1c..511b38e7ddbb8b 100644
--- a/test/e2e/specs/interactivity/directive-each.spec.ts
+++ b/test/e2e/specs/interactivity/directive-each.spec.ts
@@ -314,19 +314,14 @@ test.describe( 'data-wp-each', () => {
 			} )
 		);
 
-		await expect( elements ).toHaveText( [ 'beta', 'gamma', 'delta' ] );
+		await expect( elements ).toHaveText( [ 'b', 'c', 'd' ] );
 
 		await page
 			.getByTestId( 'navigation-updated list' )
 			.getByTestId( 'navigate' )
 			.click();
 
-		await expect( elements ).toHaveText( [
-			'alpha',
-			'beta',
-			'gamma',
-			'delta',
-		] );
+		await expect( elements ).toHaveText( [ 'a', 'b', 'c', 'd' ] );
 
 		// Get the tags. They should not have disappeared or changed,
 		// except for the newly created element.
diff --git a/test/e2e/specs/interactivity/router-navigate.spec.ts b/test/e2e/specs/interactivity/router-navigate.spec.ts
index 872fe9ea7ea52e..d1ac30783ee2b7 100644
--- a/test/e2e/specs/interactivity/router-navigate.spec.ts
+++ b/test/e2e/specs/interactivity/router-navigate.spec.ts
@@ -6,10 +6,6 @@ import { test, expect } from './fixtures';
 test.describe( 'Router navigate', () => {
 	test.beforeAll( async ( { interactivityUtils: utils } ) => {
 		await utils.activatePlugins();
-		const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
-			alias: 'router navigate - link 2',
-			attributes: { title: 'Link 2' },
-		} );
 		const link1 = await utils.addPostWithBlock( 'test/router-navigate', {
 			alias: 'router navigate - link 1',
 			attributes: {
@@ -21,6 +17,10 @@ test.describe( 'Router navigate', () => {
 				},
 			},
 		} );
+		const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - link 2',
+			attributes: { title: 'Link 2' },
+		} );
 		const link3 = await utils.addPostWithBlock( 'test/router-navigate', {
 			alias: 'router navigate - disabled',
 			attributes: {
@@ -211,29 +211,26 @@ test.describe( 'Router navigate', () => {
 		await expect( count ).toHaveText( '0' );
 	} );
 
-	test( 'should overwrite the state with the one serialized in the new page', async ( {
+	test( 'should merge the state with the one serialized in the new page', async ( {
 		page,
 	} ) => {
 		const prop1 = page.getByTestId( 'prop1' );
 		const prop2 = page.getByTestId( 'prop2' );
 		const prop3 = page.getByTestId( 'prop3' );
+		const title = page.getByTestId( 'title' );
 
 		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toBeEmpty();
 
 		await page.getByTestId( 'link 1' ).click();
-
-		// New values for existing properties should change.
-		// Old values not overwritten should remain the same.
-		// New properties should appear.
-		await expect( prop1 ).toHaveText( 'link 1' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toHaveText( 'link 1' );
 
 		await page.goBack();
-
-		// New added properties are preserved.
+		await expect( title ).toHaveText( 'Main' );
 		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toHaveText( 'link 1' );
@@ -245,26 +242,20 @@ test.describe( 'Router navigate', () => {
 		const title = page.getByTestId( 'title' );
 		const getter = page.getByTestId( 'getterProp' );
 
-		// Title should start in 'Main' and the getter prop should be the one
-		// returned once hydrated.
 		await expect( title ).toHaveText( 'Main' );
 		await expect( getter ).toHaveText( 'value from getter (main)' );
 
 		await page.getByTestId( 'link 1' ).click();
-
-		// Title should have changed. If not, that means there was an error
-		// during render. The getter should return the correct value.
 		await expect( title ).toHaveText( 'Link 1' );
-		await expect( getter ).toHaveText( 'value from getter (link 1)' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
 
-		// Same behavior navigating back and forward.
 		await page.goBack();
 		await expect( title ).toHaveText( 'Main' );
 		await expect( getter ).toHaveText( 'value from getter (main)' );
 
 		await page.goForward();
 		await expect( title ).toHaveText( 'Link 1' );
-		await expect( getter ).toHaveText( 'value from getter (link 1)' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
 	} );
 
 	test( 'should force a page reload when navigating to a page with `clientNavigationDisabled`', async ( {
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 4a19d5bb37f316..4a3bb647a7879f 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -40,7 +40,7 @@ module.exports = {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
 	transformIgnorePatterns: [
-		'/node_modules/(?!(docker-compose|yaml|preact|@preact|deepsignal)/)',
+		'/node_modules/(?!(docker-compose|yaml|preact|@preact)/)',
 		'\\.pnp\\.[^\\/]+$',
 	],
 	snapshotSerializers: [

From b3ccf2247b01e6a4970f08d218b19d664ccb293c Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 7 Aug 2024 14:00:56 +0400
Subject: [PATCH 013/205] Data Views: Don't render action modal when there are
 no eligible items (#64250)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../src/components/dataviews-bulk-actions/index.tsx          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
index 2047307bd7e90e..d671b8a8c62d96 100644
--- a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -89,6 +89,11 @@ function ActionWithModal< Item >( {
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+
+	if ( ! eligibleItems.length ) {
+		return null;
+	}
+
 	const label =
 		typeof action.label === 'string'
 			? action.label

From 2b2e7fb2e8c121ef54b7c37f2195f91da05b522a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 19:27:44 +0900
Subject: [PATCH 014/205] Components: Add missing `__nextHasNoMarginBottom`
 docs (#64313)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../components/src/text-control/README.md     |  1 +
 .../components/src/text-control/index.tsx     |  1 +
 .../README.md                                 |  2 +-
 .../component.tsx                             | 28 +++++++++----------
 .../toggle-group-control-option/README.md     |  7 ++++-
 .../toggle-group-control-option/component.tsx |  7 ++++-
 .../toggle-group-control/README.md            | 14 +++++++++-
 .../toggle-group-control/component.tsx        |  7 ++++-
 8 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
index 2a95e4c46864b8..4e2bfccb786d22 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -62,6 +62,7 @@ const MyTextControl = () => {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index e964f918c119e0..1643c5bc37c347 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -75,6 +75,7 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index 8b96470e21301e..a0e3a44cf74607 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl>
+		<ToggleGroupControl __nextHasNoMarginBottom>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
index ec009d82344c39..352b4acee71844 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -51,20 +51,20 @@ function UnforwardedToggleGroupControlOptionIcon(
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
  *
  * function Example() {
- *	return (
- *		<ToggleGroupControl>
- *			<ToggleGroupControlOptionIcon
- *				value="uppercase"
- *				label="Uppercase"
- *				icon={ formatUppercase }
- *			/>
- *			<ToggleGroupControlOptionIcon
- *				value="lowercase"
- *				label="Lowercase"
- *				icon={ formatLowercase }
- *			/>
- *		</ToggleGroupControl>
- *	);
+ *  return (
+ *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *      <ToggleGroupControlOptionIcon
+ *        value="uppercase"
+ *        label="Uppercase"
+ *        icon={ formatUppercase }
+ *      />
+ *      <ToggleGroupControlOptionIcon
+ *        value="lowercase"
+ *        label="Lowercase"
+ *        icon={ formatLowercase }
+ *      />
+ *    </ToggleGroupControl>
+ *  );
  * }
  * ```
  */
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
index 7f9f4d32f29fc3..2e7c55bd688361 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
@@ -17,7 +17,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index e4b9cff4b80330..b71d37e81cf25f 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -48,7 +48,12 @@ function UnforwardedToggleGroupControlOption(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md
index 64e0489f4171b7..6db7ec20544185 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md
@@ -20,7 +20,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
@@ -82,3 +87,10 @@ Callback when a segment is selected.
 The value of the `ToggleGroupControl`.
 
 -   Required: No
+
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 520b2c414d70b9..8138b76505fe50 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -115,7 +115,12 @@ function UnconnectedToggleGroupControl(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

From ccd8dac274b13f8e887727b6251ba56184322d70 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 7 Aug 2024 20:07:41 +0900
Subject: [PATCH 015/205] Autocompleter UI: Fix text color when hovering
 selected item (#64294)

* Autocompleter UI: Fix text color when hovering selected item

* Update changelog

* Restore `is-selected` CSS class

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/components/CHANGELOG.md                          | 1 +
 packages/components/src/autocomplete/autocompleter-ui.tsx | 2 ++
 packages/components/src/autocomplete/style.scss           | 6 ------
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8ecbf1528d6f08..3c4a5b679791f9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 -   `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)).
 -   `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)).
 -   `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)).
+-   `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)).
 
 ### Enhancements
 
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index 1a5aacf1438abc..c6c1b94deb577e 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -64,9 +64,11 @@ function ListBox( {
 						'components-autocomplete__result',
 						className,
 						{
+							// Unused, for backwards compatibility.
 							'is-selected': index === selectedIndex,
 						}
 					) }
+					variant={ index === selectedIndex ? 'primary' : undefined }
 					onClick={ () => onSelect( option ) }
 				>
 					{ option.label }
diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
index fdb29fe577f206..75b219210f42e2 100644
--- a/packages/components/src/autocomplete/style.scss
+++ b/packages/components/src/autocomplete/style.scss
@@ -13,10 +13,4 @@
 	&:focus:not(:disabled) {
 		@include block-toolbar-button-style__focus();
 	}
-
-	&.is-selected,
-	&:not(:disabled,[aria-disabled="true"]):active {
-		background: $components-color-accent;
-		color: $white;
-	}
 }

From e6627e04b0b27e45ef095303d5d6cf42b390044f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2024 13:25:54 +0200
Subject: [PATCH 016/205] DataForm: Fix SelectControl size and spacing (#64324)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/dataviews/src/field-types/text.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 227c70033cae09..2e33ab57ecaa33 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -67,6 +67,8 @@ function Edit< Item >( {
 				value={ value }
 				options={ elements }
 				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 			/>
 		);
 	}

From ab103f2d044eb598a98053500b83495f7b8a019c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:25:38 +0200
Subject: [PATCH 017/205] DataViews: consider layout url parameter when loading
 a default/custom view (#64306)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../src/components/post-list/index.js         | 35 +++++++++++--------
 .../sidebar-dataviews/dataview-item.js        |  4 +--
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 74bbee05246178..35ecaaa8424fd4 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -93,18 +93,22 @@ function useView( postType ) {
 		[ activeView, isCustom ]
 	);
 	const [ view, setView ] = useState( () => {
+		let initialView;
 		if ( isCustom === 'true' ) {
-			return (
-				getCustomView( editedEntityRecord ) ?? {
-					type: layout ?? LAYOUT_LIST,
-				}
-			);
-		}
-		return (
-			getDefaultView( defaultViews, activeView ) ?? {
+			initialView = getCustomView( editedEntityRecord ) ?? {
 				type: layout ?? LAYOUT_LIST,
-			}
-		);
+			};
+		} else {
+			initialView = getDefaultView( defaultViews, activeView ) ?? {
+				type: layout ?? LAYOUT_LIST,
+			};
+		}
+
+		const type = layout ?? initialView.type;
+		return {
+			...initialView,
+			type,
+		};
 	} );
 
 	const setViewWithUrlUpdate = useCallback(
@@ -146,8 +150,7 @@ function useView( postType ) {
 		} ) );
 	}, [ layout ] );
 
-	// When activeView or isCustom URL parameters change,
-	// reset the view & update the layout URL param to match the view's type.
+	// When activeView or isCustom URL parameters change, reset the view.
 	useEffect( () => {
 		let newView;
 		if ( isCustom === 'true' ) {
@@ -157,9 +160,13 @@ function useView( postType ) {
 		}
 
 		if ( newView ) {
-			setViewWithUrlUpdate( newView );
+			const type = layout ?? newView.type;
+			setView( {
+				...newView,
+				type,
+			} );
 		}
-	}, [ activeView, isCustom, defaultViews, editedEntityRecord ] );
+	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
 
 	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
 }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
index 0b5f93546875e5..1e12d6706d81b5 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -29,7 +29,7 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { postType, layout },
+		params: { postType },
 	} = useLocation();
 
 	const iconToUse =
@@ -41,7 +41,7 @@ export default function DataViewItem( {
 	}
 	const linkInfo = useLink( {
 		postType,
-		layout,
+		layout: type,
 		activeView,
 		isCustom: isCustom ? 'true' : undefined,
 	} );

From c97587e3f9af303461883c89d9ecae0628e12429 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 7 Aug 2024 22:01:54 +0900
Subject: [PATCH 018/205] Block Autocompleter: Force icon color to text color
 when item is selected (#61376)

* Block Autocompleter: Force icon color to text color when item is selected

* Don't rely on  css class

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/block-editor/src/autocompleters/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/autocompleters/style.scss b/packages/block-editor/src/autocompleters/style.scss
index 5380ddcfbe48b2..43acc4efc16a5e 100644
--- a/packages/block-editor/src/autocompleters/style.scss
+++ b/packages/block-editor/src/autocompleters/style.scss
@@ -4,6 +4,10 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-10;
 	}
+
+	&[aria-selected="true"] .block-editor-block-icon {
+		color: inherit !important;
+	}
 }
 
 .block-editor-autocompleters__link {

From 59fd812fa46973f9a7319870edf7ef59a9643e23 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2024 15:12:13 +0200
Subject: [PATCH 019/205] DataForm: Support multiple layouts and introduce the
 panel layout (#64299)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   1 +
 packages/components/src/heading/types.ts      |   5 +-
 packages/dataviews/CHANGELOG.md               |   5 +
 .../src/components/dataform/index.tsx         |  54 +-----
 .../dataform/stories/index.story.tsx          |  17 +-
 .../src/components/dataviews-layout/index.tsx |   2 +-
 .../dataviews-view-config/index.tsx           |   2 +-
 .../src/components/dataviews/index.tsx        |   2 +-
 .../dataviews/src/dataforms-layouts/index.tsx |  20 +++
 .../src/dataforms-layouts/panel/index.tsx     | 164 ++++++++++++++++++
 .../src/dataforms-layouts/panel/style.scss    |  59 +++++++
 .../src/dataforms-layouts/regular/index.tsx   |  41 +++++
 .../grid/density-picker.tsx                   |   0
 .../grid/index.tsx                            |   0
 .../grid/style.scss                           |   0
 .../{layouts => dataviews-layouts}/index.ts   |   0
 .../list/index.tsx                            |   0
 .../list/style.scss                           |   0
 .../table/column-header-menu.tsx              |   0
 .../table/index.tsx                           |   0
 .../table/style.scss                          |   0
 .../dataviews/src/field-types/integer.tsx     |   3 +
 packages/dataviews/src/field-types/text.tsx   |   3 +
 packages/dataviews/src/index.ts               |   2 +-
 packages/dataviews/src/style.scss             |   8 +-
 packages/dataviews/src/test/validation.ts     |  16 +-
 packages/dataviews/src/types.ts               |  11 +-
 packages/dataviews/src/validation.ts          |   2 +-
 .../src/components/post-edit/index.js         |   3 +-
 .../src/components/post-fields/index.js       |   8 +-
 .../src/components/post-actions/actions.js    |   4 +-
 31 files changed, 357 insertions(+), 75 deletions(-)
 create mode 100644 packages/dataviews/src/dataforms-layouts/index.tsx
 create mode 100644 packages/dataviews/src/dataforms-layouts/panel/index.tsx
 create mode 100644 packages/dataviews/src/dataforms-layouts/panel/style.scss
 create mode 100644 packages/dataviews/src/dataforms-layouts/regular/index.tsx
 rename packages/dataviews/src/{layouts => dataviews-layouts}/grid/density-picker.tsx (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/grid/index.tsx (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/grid/style.scss (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/index.ts (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/list/index.tsx (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/list/style.scss (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/table/column-header-menu.tsx (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/table/index.tsx (100%)
 rename packages/dataviews/src/{layouts => dataviews-layouts}/table/style.scss (100%)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 3c4a5b679791f9..5cfc4eb2185b63 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 -   `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)).
 -   `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)).
 -   `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)).
+-   `Heading`: Add the missing `size` prop to the component's props type ([#64299](https://github.com/WordPress/gutenberg/pull/64299)).
 
 ### Enhancements
 
diff --git a/packages/components/src/heading/types.ts b/packages/components/src/heading/types.ts
index 4767c0407d5a03..6ec3f0a82ef2eb 100644
--- a/packages/components/src/heading/types.ts
+++ b/packages/components/src/heading/types.ts
@@ -17,10 +17,7 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit<
-	TextProps,
-	'size' | 'isBlock' | 'color' | 'weight'
-> & {
+export type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 881d666aa0613b..8dd3ade7fd7749 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -13,6 +13,11 @@
 -   `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids.
 -   `setSelection` prop has been removed. Please use `onChangeSelection` instead.
 -   `header` field property has been renamed to `label`.
+-   `DataForm`'s `visibleFields` prop has been renamed to `fields`.
+
+### New features
+
+-   Support multiple layouts in `DataForm` component and introduce the `panel` layout.
 
 ## 3.0.0 (2024-07-10)
 
diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
index 02953b2930bd1f..58f0bf06afb414 100644
--- a/packages/dataviews/src/components/dataform/index.tsx
+++ b/packages/dataviews/src/components/dataform/index.tsx
@@ -1,55 +1,17 @@
-/**
- * External dependencies
- */
-import type { Dispatch, SetStateAction } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import { normalizeFields } from '../../normalize-fields';
-import type { Field, Form } from '../../types';
-
-type DataFormProps< Item > = {
-	data: Item;
-	fields: Field< Item >[];
-	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
+import type { DataFormProps } from '../../types';
+import { getFormLayout } from '../../dataforms-layouts';
 
 export default function DataForm< Item >( {
-	data,
-	fields,
 	form,
-	onChange,
+	...props
 }: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				fields.filter(
-					( { id } ) => !! form.visibleFields?.includes( id )
-				)
-			),
-		[ fields, form.visibleFields ]
-	);
+	const layout = getFormLayout( form.type ?? 'regular' );
+	if ( ! layout ) {
+		return null;
+	}
 
-	return (
-		<VStack spacing={ 4 }>
-			{ visibleFields.map( ( field ) => {
-				return (
-					<field.Edit
-						key={ field.id }
-						data={ data }
-						field={ field }
-						onChange={ onChange }
-					/>
-				);
-			} ) }
-		</VStack>
-	);
+	return <layout.component form={ form } { ...props } />;
 }
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 6acf0c65d9bd4f..4863eb24b4ede4 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -11,6 +11,14 @@ import DataForm from '../index';
 const meta = {
 	title: 'DataViews/DataForm',
 	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the layout of the form. "regular" is the default layout.',
+			options: [ 'regular', 'panel' ],
+		},
+	},
 };
 export default meta;
 
@@ -45,7 +53,7 @@ const fields = [
 	},
 ];
 
-export const Default = () => {
+export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
 		order: 2,
@@ -54,14 +62,17 @@ export const Default = () => {
 	} );
 
 	const form = {
-		visibleFields: [ 'title', 'order', 'author', 'status' ],
+		fields: [ 'title', 'order', 'author', 'status' ],
 	};
 
 	return (
 		<DataForm
 			data={ post }
 			fields={ fields }
-			form={ form }
+			form={ {
+				...form,
+				type,
+			} }
 			onChange={ setPost }
 		/>
 	);
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
index eac70763e143c1..bae4071fe2f773 100644
--- a/packages/dataviews/src/components/dataviews-layout/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -12,7 +12,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { VIEW_LAYOUTS } from '../../layouts';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { ViewBaseProps } from '../../types';
 
 export default function DataViewsLayout() {
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 9f0cb87fa01a2e..b89e964f6a5d08 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -20,7 +20,7 @@ import { cog } from '@wordpress/icons';
  */
 import { unlock } from '../../lock-unlock';
 import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { NormalizedField, View, SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
 
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index f6f408065058d2..337912b04e59c5 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -27,7 +27,7 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-import DensityPicker from '../../layouts/grid/density-picker';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
diff --git a/packages/dataviews/src/dataforms-layouts/index.tsx b/packages/dataviews/src/dataforms-layouts/index.tsx
new file mode 100644
index 00000000000000..9434ea724ed4ca
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import FormRegular from './regular';
+import FormPanel from './panel';
+
+const FORM_LAYOUTS = [
+	{
+		type: 'regular',
+		component: FormRegular,
+	},
+	{
+		type: 'panel',
+		component: FormPanel,
+	},
+];
+
+export function getFormLayout( type: string ) {
+	return FORM_LAYOUTS.find( ( layout ) => layout.type === type );
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
new file mode 100644
index 00000000000000..3dc52db0adc879
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -0,0 +1,164 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import type { DataFormProps, NormalizedField } from '../../types';
+
+interface FormFieldProps< Item > {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: ( value: any ) => void;
+}
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+				{ onClose && (
+					<Button
+						className="dataforms-layouts-panel__dropdown-header-action"
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function FormField< Item >( {
+	data,
+	field,
+	onChange,
+}: FormFieldProps< Item > ) {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
+		null
+	);
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<HStack
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field"
+		>
+			<div className="dataforms-layouts-panel__field-label">
+				{ field.label }
+			</div>
+			<div>
+				<Dropdown
+					contentClassName="dataforms-layouts-panel__field-dropdown"
+					popoverProps={ popoverProps }
+					focusOnMount
+					toggleProps={ {
+						size: 'compact',
+						variant: 'tertiary',
+						tooltipPosition: 'middle left',
+					} }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="dataforms-layouts-panel__field-control"
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Field name.
+								__( 'Edit %s' ),
+								field.label
+							) }
+							onClick={ onToggle }
+						>
+							<field.render item={ data } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<DropdownHeader
+								title={ field.label }
+								onClose={ onClose }
+							/>
+							<field.Edit
+								key={ field.id }
+								data={ data }
+								field={ field }
+								onChange={ onChange }
+								hideLabelFromVision
+							/>
+						</>
+					) }
+				/>
+			</div>
+		</HStack>
+	);
+}
+
+export default function FormPanel< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+			),
+		[ fields, form.fields ]
+	);
+
+	return (
+		<VStack spacing={ 2 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<FormField
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
new file mode 100644
index 00000000000000..e6840bed9d6e0b
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -0,0 +1,59 @@
+.dataforms-layouts-panel__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.dataforms-layouts-panel__field-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-panel__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		white-space: normal;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
+}
+
+.dataforms-layouts-panel__field-dropdown .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
+
+.dataforms-layouts-panel__dropdown-header {
+	margin-bottom: $grid-unit-20;
+}
+
+[class].dataforms-layouts-panel__dropdown-header-action {
+	height: $icon-size;
+
+	&.has-icon {
+		min-width: $icon-size;
+		padding: 0;
+	}
+
+	&:not(.has-icon) {
+		text-decoration: underline;
+	}
+}
diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
new file mode 100644
index 00000000000000..1164a61196a699
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import type { DataFormProps } from '../../types';
+
+export default function FormRegular< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+			),
+		[ fields, form.fields ]
+	);
+
+	return (
+		<VStack spacing={ 4 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<field.Edit
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/layouts/grid/density-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
similarity index 100%
rename from packages/dataviews/src/layouts/grid/density-picker.tsx
rename to packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
similarity index 100%
rename from packages/dataviews/src/layouts/grid/index.tsx
rename to packages/dataviews/src/dataviews-layouts/grid/index.tsx
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
similarity index 100%
rename from packages/dataviews/src/layouts/grid/style.scss
rename to packages/dataviews/src/dataviews-layouts/grid/style.scss
diff --git a/packages/dataviews/src/layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
similarity index 100%
rename from packages/dataviews/src/layouts/index.ts
rename to packages/dataviews/src/dataviews-layouts/index.ts
diff --git a/packages/dataviews/src/layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
similarity index 100%
rename from packages/dataviews/src/layouts/list/index.tsx
rename to packages/dataviews/src/dataviews-layouts/list/index.tsx
diff --git a/packages/dataviews/src/layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
similarity index 100%
rename from packages/dataviews/src/layouts/list/style.scss
rename to packages/dataviews/src/dataviews-layouts/list/style.scss
diff --git a/packages/dataviews/src/layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
similarity index 100%
rename from packages/dataviews/src/layouts/table/column-header-menu.tsx
rename to packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
diff --git a/packages/dataviews/src/layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
similarity index 100%
rename from packages/dataviews/src/layouts/table/index.tsx
rename to packages/dataviews/src/dataviews-layouts/table/index.tsx
diff --git a/packages/dataviews/src/layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
similarity index 100%
rename from packages/dataviews/src/layouts/table/style.scss
rename to packages/dataviews/src/dataviews-layouts/table/style.scss
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index bf757776249b42..1233c3ab555567 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -45,6 +45,7 @@ function Edit< Item >( {
 	data,
 	field,
 	onChange,
+	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
@@ -78,6 +79,7 @@ function Edit< Item >( {
 				onChange={ onChangeControl }
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
 			/>
 		);
 	}
@@ -89,6 +91,7 @@ function Edit< Item >( {
 			value={ value }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
 		/>
 	);
 }
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 2e33ab57ecaa33..c6efb85f6f446b 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -35,6 +35,7 @@ function Edit< Item >( {
 	data,
 	field,
 	onChange,
+	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, label, placeholder } = field;
 	const value = field.getValue( { item: data } );
@@ -69,6 +70,7 @@ function Edit< Item >( {
 				onChange={ onChangeControl }
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
+				hideLabelFromVision={ hideLabelFromVision }
 			/>
 		);
 	}
@@ -81,6 +83,7 @@ function Edit< Item >( {
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
 		/>
 	);
 }
diff --git a/packages/dataviews/src/index.ts b/packages/dataviews/src/index.ts
index 95a8ab4c2e5e8d..4ca0cf3db0bd3f 100644
--- a/packages/dataviews/src/index.ts
+++ b/packages/dataviews/src/index.ts
@@ -1,6 +1,6 @@
 export { default as DataViews } from './components/dataviews';
 export { default as DataForm } from './components/dataform';
-export { VIEW_LAYOUTS } from './layouts';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
 export { isItemValid } from './validation';
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 49d897d9cc4d97..7cf737b9a3849f 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -6,6 +6,8 @@
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 
-@import "./layouts/grid/style.scss";
-@import "./layouts/list/style.scss";
-@import "./layouts/table/style.scss";
+@import "./dataviews-layouts/grid/style.scss";
+@import "./dataviews-layouts/list/style.scss";
+@import "./dataviews-layouts/table/style.scss";
+
+@import "./dataforms-layouts/panel/style.scss";
diff --git a/packages/dataviews/src/test/validation.ts b/packages/dataviews/src/test/validation.ts
index 4e52ca47353f78..6a81ba16425f85 100644
--- a/packages/dataviews/src/test/validation.ts
+++ b/packages/dataviews/src/test/validation.ts
@@ -17,7 +17,7 @@ describe( 'validation', () => {
 				type: 'integer',
 			},
 		];
-		const form = { visibleFields: [ 'valid_order' ] };
+		const form = { fields: [ 'valid_order' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( true );
 	} );
@@ -30,7 +30,7 @@ describe( 'validation', () => {
 				id: 'order',
 			},
 		];
-		const form = { visibleFields: [ 'order' ] };
+		const form = { fields: [ 'order' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( true );
 	} );
@@ -43,7 +43,7 @@ describe( 'validation', () => {
 				type: 'integer',
 			},
 		];
-		const form = { visibleFields: [ 'order' ] };
+		const form = { fields: [ 'order' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( false );
 	} );
@@ -56,7 +56,7 @@ describe( 'validation', () => {
 				type: 'integer',
 			},
 		];
-		const form = { visibleFields: [ 'order' ] };
+		const form = { fields: [ 'order' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( false );
 	} );
@@ -73,7 +73,7 @@ describe( 'validation', () => {
 				],
 			},
 		];
-		const form = { visibleFields: [ 'author' ] };
+		const form = { fields: [ 'author' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( false );
 	} );
@@ -90,7 +90,7 @@ describe( 'validation', () => {
 				],
 			},
 		];
-		const form = { visibleFields: [ 'author' ] };
+		const form = { fields: [ 'author' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( false );
 	} );
@@ -106,7 +106,7 @@ describe( 'validation', () => {
 				],
 			},
 		];
-		const form = { visibleFields: [ 'author' ] };
+		const form = { fields: [ 'author' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( false );
 	} );
@@ -124,7 +124,7 @@ describe( 'validation', () => {
 				isValid: () => true, // Overrides the validation provided for integer types.
 			},
 		];
-		const form = { visibleFields: [ 'order' ] };
+		const form = { fields: [ 'order' ] };
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( true );
 	} );
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 7fb157465b41f4..25e603d8cfa234 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -164,13 +164,15 @@ export type Data< Item > = Item[];
  * The form configuration.
  */
 export type Form = {
-	visibleFields?: string[];
+	type?: 'regular' | 'panel';
+	fields?: string[];
 };
 
 export type DataFormControlProps< Item > = {
 	data: Item;
 	field: NormalizedField< Item >;
 	onChange: Dispatch< SetStateAction< Item > >;
+	hideLabelFromVision?: boolean;
 };
 
 /**
@@ -497,3 +499,10 @@ export interface SupportedLayouts {
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
 }
+
+export interface DataFormProps< Item > {
+	data: Item;
+	fields: Field< Item >[];
+	form: Form;
+	onChange: Dispatch< SetStateAction< Item > >;
+}
diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts
index e350be68d54219..cc0b031f6c96c6 100644
--- a/packages/dataviews/src/validation.ts
+++ b/packages/dataviews/src/validation.ts
@@ -10,7 +10,7 @@ export function isItemValid< Item >(
 	form: Form
 ): boolean {
 	const _fields = normalizeFields(
-		fields.filter( ( { id } ) => !! form.visibleFields?.includes( id ) )
+		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
 	);
 	return _fields.every( ( field ) => {
 		return field.isValid( item, { elements: field.elements } );
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 6a6efc23861841..86e2bf4d6edea1 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -46,7 +46,8 @@ function PostEditForm( { postType, postId } ) {
 	const { saveEntityRecord } = useDispatch( coreDataStore );
 	const { fields } = usePostFields();
 	const form = {
-		visibleFields: [ 'title', 'author' ],
+		type: 'panel',
+		fields: [ 'title', 'author' ],
 	};
 	const [ edits, setEdits ] = useState( {} );
 	const itemWithEdits = useMemo( () => {
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index dcca7d49ab708b..f476b676264ed8 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -186,6 +186,10 @@ function usePostFields( viewType ) {
 					const addLink =
 						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
 						item.status !== 'trash';
+					const renderedTitle =
+						typeof item.title === 'string'
+							? item.title
+							: item.title?.rendered;
 					const title = addLink ? (
 						<Link
 							params={ {
@@ -194,12 +198,12 @@ function usePostFields( viewType ) {
 								canvas: 'edit',
 							} }
 						>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</Link>
 					) : (
 						<span>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</span>
 					);
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 4afa2f614fa2c3..983cc33b29e622 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -55,11 +55,11 @@ const fields = [
 ];
 
 const formDuplicateAction = {
-	visibleFields: [ 'title' ],
+	fields: [ 'title' ],
 };
 
 const formOrderAction = {
-	visibleFields: [ 'menu_order' ],
+	fields: [ 'menu_order' ],
 };
 
 /**

From 19f4826cd88ed7c1144c55ee50b427f86cb9eea9 Mon Sep 17 00:00:00 2001
From: Rishit Gupta <rishitgupta2013@gmail.com>
Date: Wed, 7 Aug 2024 09:53:36 -0400
Subject: [PATCH 020/205] Add WP Studio to list of tools in docs (#64327)

Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
---
 docs/getting-started/devenv/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index 1c2b9ed9070d30..4539dacbdf5047 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -54,6 +54,7 @@ Refer to the [Get started with `wp-env`](/docs/getting-started/devenv/get-starte
 This list is not exhaustive, but here are several additional options to choose from if you prefer not to use `wp-env`:
 
 - [Local](https://localwp.com/)
+- [WP Studio](https://developer.wordpress.com/studio/)
 - [XAMPP](https://www.apachefriends.org/)
 - [MAMP](https://www.mamp.info/en/mamp/mac/)
 - [Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/) (VVV)

From 9ec153d297b14f5f958ba2a29ec961ae35772bb3 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2024 15:56:48 +0200
Subject: [PATCH 021/205] Components: Update the TextControl padding to match
 the rest of the controls (#64326)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                | 1 +
 packages/components/src/text-control/style.scss | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 5cfc4eb2185b63..e8c1a0d90052b6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -10,6 +10,7 @@
 -   `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)).
 -   `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)).
 -   `Heading`: Add the missing `size` prop to the component's props type ([#64299](https://github.com/WordPress/gutenberg/pull/64299)).
+-   `TextControl`: Fix the padding of the component to be consistent with the rest of the controls. ([#64326](https://github.com/WordPress/gutenberg/pull/64326)).
 
 ### Enhancements
 
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 1e8477b255b9b1..d6819f86b84bf1 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -20,5 +20,10 @@
 
 	&.is-next-40px-default-size {
 		height: $grid-unit-50;
+
+		// Subtract 1px to account for the border, which isn't included on the element
+		// on newer components like InputControl, SelectControl, etc.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
 	}
 }

From 19a2d835ee596132b5bcfb4550898ec433ae12e4 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 7 Aug 2024 23:01:07 +0900
Subject: [PATCH 022/205] DataViews: Restore focus style in Grid view (#64298)

* DataViews: Restore focus style in Grid view

* Prevent previews from bleeding outside the container

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/dataviews/src/dataviews-layouts/grid/style.scss    | 1 -
 packages/edit-site/src/components/page-patterns/style.scss  | 1 +
 packages/edit-site/src/components/page-templates/style.scss | 3 ++-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index ebe039ea7543b0..8f71953e155981 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -38,7 +38,6 @@
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;
 		position: relative;
-		overflow: hidden;
 
 		img {
 			object-fit: cover;
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index f457624d100c1f..ffcefd1924a535 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -6,6 +6,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	border-radius: $radius-medium;
 
 	.dataviews-view-table & {
 		width: 96px;
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
index 0313da00f89944..4e21ca2c25be28 100644
--- a/packages/edit-site/src/components/page-templates/style.scss
+++ b/packages/edit-site/src/components/page-templates/style.scss
@@ -3,6 +3,7 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
+	border-radius: $radius-medium;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +14,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: $grid-unit-05;
+		border-radius: $radius-medium;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

From dc54a90ff2fbda1476cd5bc83b7565ee85de1fb4 Mon Sep 17 00:00:00 2001
From: djcowan <dj.cowan@icloud.com>
Date: Thu, 8 Aug 2024 00:45:47 +1000
Subject: [PATCH 023/205] Update api-reference.md (#64325)

minor code example correction. Removed duplicate HTML span element closing tags `>>` on lines 58 and 69
[wp-interactive API](<https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-interactive>)

Co-authored-by: djcowan <djcowan@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 docs/reference-guides/interactivity-api/api-reference.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
index 00030465415323..a4b400b8c0276b 100644
--- a/docs/reference-guides/interactivity-api/api-reference.md
+++ b/docs/reference-guides/interactivity-api/api-reference.md
@@ -55,7 +55,7 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element
   data-wp-interactive="myPlugin"
   data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
 >
-  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">>and I can use directives!</span></p>
+  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
   <div>
     <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
   </div>
@@ -66,7 +66,7 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element
   data-wp-interactive='{ "namespace": "myPlugin" }'
   data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
 >
-  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">>and I can use directives!</span></p>
+  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
   <div>
     <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
   </div>

From 50419e55466a4ebf1be49d823f86a683484c238b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:29:05 +0200
Subject: [PATCH 024/205] DataForm: provide a better default for render when
 field has elements (#64338)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/dataviews/src/normalize-fields.ts | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 3c3f6b07a0c296..860341cc946269 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type { Field, NormalizedField, ItemRecord } from './types';
+import type { Field, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -18,7 +18,7 @@ export function normalizeFields< Item >(
 
 		const getValue =
 			field.getValue ||
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );
 
 		const sort =
 			field.sort ??
@@ -41,11 +41,25 @@ export function normalizeFields< Item >(
 
 		const Edit = field.Edit || fieldTypeDefinition.Edit;
 
+		const renderFromElements = ( { item }: { item: Item } ) => {
+			const value = getValue( { item } );
+			const label = field?.elements?.find( ( element ) => {
+				// Intentionally using == here to allow for type coercion.
+				// eslint-disable-next-line eqeqeq
+				return element.value == value;
+			} )?.label;
+
+			return label || value;
+		};
+
+		const render =
+			field.render || ( field.elements ? renderFromElements : getValue );
+
 		return {
 			...field,
 			label: field.label || field.id,
 			getValue,
-			render: field.render || getValue,
+			render,
 			sort,
 			isValid,
 			Edit,

From fd540c3dab11cae2f53f5f03ee60263d7f3ff51a Mon Sep 17 00:00:00 2001
From: Dani Guardiola <hi@daniguardio.la>
Date: Wed, 7 Aug 2024 17:52:26 +0200
Subject: [PATCH 025/205] Try: Improved tabbed sidebar styles (#61974)

* Fix tabs indicator.

* Improve styles.

* Update after unified sidebar work.

Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .../src/components/tabbed-sidebar/style.scss      | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
index 374a012173e230..f7fba1c0003467 100644
--- a/packages/block-editor/src/components/tabbed-sidebar/style.scss
+++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -23,22 +23,7 @@
 }
 
 .block-editor-tabbed-sidebar__tablist {
-	box-sizing: border-box;
-	flex-grow: 1;
-	margin-bottom: -$border-width;
-	width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-	flex-grow: 1;
 	margin-bottom: -$border-width;
-
-	&[id$="reusable"] {
-		flex-grow: inherit;
-		// These are to align the `reusable` icon with the search icon.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-	}
 }
 
 .block-editor-tabbed-sidebar__tabpanel {

From ea7d3b6c94b3b12c4b88f56da60c0987fa5840a2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 8 Aug 2024 01:29:09 +0900
Subject: [PATCH 026/205] Button: Fix tertiary destructive hover style (#64152)

* Button: Fix tertiary destructive hover style

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md          |  1 +
 packages/components/src/button/style.scss | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e8c1a0d90052b6..837fe973d1022a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 -   `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)).
 -   `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)).
 -   `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)).
+-   `Button`: Fix tertiary destructive hover style ([#64152](https://github.com/WordPress/gutenberg/pull/64152)).
 -   `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)).
 -   `Heading`: Add the missing `size` prop to the component's props type ([#64299](https://github.com/WordPress/gutenberg/pull/64299)).
 -   `TextControl`: Fix the padding of the component to be consistent with the rest of the controls. ([#64326](https://github.com/WordPress/gutenberg/pull/64326)).
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index fcbd363e17c7dd..7d67dcc0748b85 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -215,6 +215,16 @@
 				color: $gray-600;
 			}
 		}
+
+		&.is-tertiary {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.04);
+			}
+
+			&:active:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.08);
+			}
+		}
 	}
 
 	/**

From b6478258875bebe7023bce45dc0316cb404a88eb Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 19:35:37 +0200
Subject: [PATCH 027/205] Graduate data view options out of a menu to allow
 more design expression (#64175)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 package-lock.json                             |   2 +
 packages/dataviews/package.json               |   1 +
 .../dataviews-view-config/index.tsx           | 528 +++++++++---------
 .../dataviews-view-config/style.scss          |  44 ++
 packages/dataviews/src/constants.ts           |   5 +
 packages/dataviews/src/style.scss             |   1 +
 packages/dataviews/tsconfig.json              |   3 +-
 .../site-editor/new-templates-list.spec.js    |   6 +-
 8 files changed, 328 insertions(+), 262 deletions(-)
 create mode 100644 packages/dataviews/src/components/dataviews-view-config/style.scss

diff --git a/package-lock.json b/package-lock.json
index e2cab9e63002d4..c340c58c0b4f6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52990,6 +52990,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
@@ -67763,6 +67764,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index d95192957a1a43..53cfa97c275c60 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -38,6 +38,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/warning": "file:../warning",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index b89e964f6a5d08..28e151079008eb 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,131 +8,92 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
-	privateApis as componentsPrivateApis,
+	Popover,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	SelectControl,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { memo, useContext } from '@wordpress/element';
-import { cog } from '@wordpress/icons';
+import { memo, useContext, useState, useMemo } from '@wordpress/element';
+import { cog, seen, unseen } from '@wordpress/icons';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
-import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
 
 const {
 	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
 	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
 interface ViewTypeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	defaultLayouts?: SupportedLayouts;
-}
-
-interface PageSizeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface FieldsVisibilityMenuProps< Item > {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	fields: NormalizedField< Item >[];
-}
-
-interface SortMenuProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface ViewActionsProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
 function ViewTypeMenu( {
-	view,
-	onChangeView,
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
 	if ( availableLayouts.length <= 1 ) {
 		return null;
 	}
-	return availableLayouts.map( ( layout ) => {
-		const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
-		if ( ! config ) {
-			return null;
-		}
-		return (
-			<DropdownMenuRadioItem
-				key={ layout }
-				value={ layout }
-				name="view-actions-available-view"
-				checked={ layout === view.type }
-				hideOnClick
-				onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-					switch ( e.target.value ) {
-						case 'list':
-						case 'grid':
-						case 'table':
-							return onChangeView( {
-								...view,
-								type: e.target.value,
-								...defaultLayouts[ e.target.value ],
-							} );
-					}
-					throw new Error( 'Invalid dataview' );
-				} }
-			>
-				<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>
-			</DropdownMenuRadioItem>
-		);
-	} );
-}
-
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
 		<DropdownMenu
 			trigger={
-				<DropdownMenuItem
-					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Items per page' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
+				<Button
+					size="compact"
+					icon={ activeView?.icon }
+					label={ __( 'Layout' ) }
+				/>
 			}
 		>
-			{ PAGE_SIZE_VALUES.map( ( size ) => {
+			{ availableLayouts.map( ( layout ) => {
+				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+				if ( ! config ) {
+					return null;
+				}
 				return (
 					<DropdownMenuRadioItem
-						key={ size }
-						value={ size }
-						name="view-actions-page-size"
-						checked={ view.perPage === size }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								// `e.target.value` holds the same value as `size` but as a string,
-								// so we use `size` directly to avoid parsing to int.
-								perPage: size,
-								page: 1,
-							} );
+						key={ layout }
+						value={ layout }
+						name="view-actions-available-view"
+						checked={ layout === view.type }
+						hideOnClick
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										...defaultLayouts[ e.target.value ],
+									} );
+							}
+							warning( 'Invalid dataview' );
 						} }
 					>
-						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
+						<DropdownMenuItemLabel>
+							{ config.label }
+						</DropdownMenuItemLabel>
 					</DropdownMenuRadioItem>
 				);
 			} ) }
@@ -140,11 +101,125 @@ function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	);
 }
 
-function FieldsVisibilityMenu< Item >( {
-	view,
-	onChangeView,
-	fields,
-}: FieldsVisibilityMenuProps< Item > ) {
+interface ViewActionsProps {
+	defaultLayouts?: SupportedLayouts;
+}
+
+function SortFieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const orderOptions = useMemo( () => {
+		const sortableFields = fields.filter(
+			( field ) => field.enableSorting !== false
+		);
+		return sortableFields.map( ( field ) => {
+			return {
+				label: field.label,
+				value: field.id,
+			};
+		} );
+	}, [ fields ] );
+
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Sort by' ) }
+			value={ view.sort?.field }
+			options={ orderOptions }
+			onChange={ ( value: string ) => {
+				onChangeView( {
+					...view,
+					sort: {
+						direction: view?.sort?.direction || 'desc',
+						field: value,
+					},
+				} );
+			} }
+		/>
+	);
+}
+
+function SortDirectionControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			className="dataviews-view-config__sort-direction"
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Order' ) }
+			value={ view.sort?.direction || 'desc' }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newDirection ) => {
+				if ( ! view?.sort?.field ) {
+					return;
+				}
+				if ( newDirection === 'asc' || newDirection === 'desc' ) {
+					onChangeView( {
+						...view,
+						sort: {
+							direction: newDirection,
+							field: view.sort.field,
+						},
+					} );
+					return;
+				}
+				warning( 'Invalid direction' );
+			} }
+		>
+			{ SORTING_DIRECTIONS.map( ( direction ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ direction }
+						value={ direction }
+						icon={ sortIcons[ direction ] }
+						label={ sortLabels[ direction ] }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
+function ItemsPerPageControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Items per page' ) }
+			value={ view.perPage || 10 }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newItemsPerPage ) => {
+				const newItemsPerPageNumber =
+					typeof newItemsPerPage === 'number' ||
+					newItemsPerPage === undefined
+						? newItemsPerPage
+						: parseInt( newItemsPerPage, 10 );
+				onChangeView( {
+					...view,
+					perPage: newItemsPerPageNumber,
+					page: 1,
+				} );
+			} }
+		>
+			{ PAGE_SIZE_VALUES.map( ( value ) => {
+				return (
+					<ToggleGroupControlOption
+						key={ value }
+						value={ value }
+						label={ value.toString() }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const mandatoryFields = getMandatoryFields( view );
 	const hidableFields = fields.filter(
 		( field ) =>
@@ -156,185 +231,124 @@ function FieldsVisibilityMenu< Item >( {
 		return null;
 	}
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>
-						{ __( 'Fields' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
+		<ItemGroup isBordered isSeparated>
 			{ hidableFields?.map( ( field ) => {
+				const isVisible = viewFields.includes( field.id );
 				return (
-					<DropdownMenuCheckboxItem
-						key={ field.id }
-						value={ field.id }
-						checked={ viewFields.includes( field.id ) }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								fields: viewFields.includes( field.id )
-									? viewFields.filter(
-											( id ) => id !== field.id
-									  )
-									: [ ...viewFields, field.id ],
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ field.label }
-						</DropdownMenuItemLabel>
-					</DropdownMenuCheckboxItem>
+					<Item key={ field.id }>
+						<HStack expanded>
+							<span>{ field.label }</span>
+							<Button
+								className="'dataviews-view-config__field-control-button"
+								size="compact"
+								onClick={ () =>
+									onChangeView( {
+										...view,
+										fields: isVisible
+											? viewFields.filter(
+													( id ) => id !== field.id
+											  )
+											: [ ...viewFields, field.id ],
+									} )
+								}
+								icon={ isVisible ? seen : unseen }
+								label={
+									isVisible
+										? __( 'Hide field' )
+										: __( 'Show field' )
+								}
+							/>
+						</HStack>
+					</Item>
 				);
 			} ) }
-		</DropdownMenu>
+		</ItemGroup>
 	);
 }
 
-function SortMenu< Item >( {
-	fields,
-	view,
-	onChangeView,
-}: SortMenuProps< Item > ) {
-	const sortableFields = fields.filter(
-		( field ) => field.enableSorting !== false
-	);
-	if ( ! sortableFields?.length ) {
-		return null;
-	}
-	const currentSortedField = fields.find(
-		( field ) => field.id === view.sort?.field
-	);
+function SettingsSection( {
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+} ) {
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={
-						<span aria-hidden="true">
-							{ currentSortedField?.label }
-						</span>
-					}
+		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
+			<div className="dataviews-settings-section__sidebar">
+				<Heading
+					level={ 2 }
+					className="dataviews-settings-section__title"
 				>
-					<DropdownMenuItemLabel>
-						{ __( 'Sort by' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
-			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = view.sort?.direction;
-				return (
-					<DropdownMenu
-						key={ field.id }
-						trigger={
-							<DropdownMenuItem>
-								<DropdownMenuItemLabel>
-									{ field.label }
-								</DropdownMenuItemLabel>
-							</DropdownMenuItem>
-						}
-						style={ {
-							minWidth: '220px',
-						} }
+					{ title }
+				</Heading>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
 					>
-						{ SORTING_DIRECTIONS.map( ( direction ) => {
-							const isChecked =
-								currentSortedField !== undefined &&
-								sortedDirection === direction &&
-								field.id === currentSortedField.id;
-
-							const value = `${ field.id }-${ direction }`;
+						{ description }
+					</Text>
+				) }
+			</div>
+			<Grid
+				columns={ 8 }
+				gap={ 4 }
+				className="dataviews-settings-section__content"
+			>
+				{ children }
+			</Grid>
+		</Grid>
+	);
+}
 
-							return (
-								<DropdownMenuRadioItem
-									key={ value }
-									// All sorting radio items share the same name, so that
-									// selecting a sorting option automatically deselects the
-									// previously selected one, even if it is displayed in
-									// another submenu. The field and direction are passed via
-									// the `value` prop.
-									name="view-actions-sorting"
-									value={ value }
-									checked={ isChecked }
-									onChange={ () => {
-										onChangeView( {
-											...view,
-											sort: {
-												field: field.id,
-												direction,
-											},
-										} );
-									} }
-								>
-									<DropdownMenuItemLabel>
-										{ sortLabels[ direction ] }
-									</DropdownMenuItemLabel>
-								</DropdownMenuRadioItem>
-							);
-						} ) }
-					</DropdownMenu>
-				);
-			} ) }
-		</DropdownMenu>
+function DataviewsViewConfigContent() {
+	return (
+		<VStack className="dataviews-view-config" spacing={ 6 }>
+			<SettingsSection title={ __( 'Appearance' ) }>
+				<HStack expanded className="is-divided-in-two">
+					<SortFieldControl />
+					<SortDirectionControl />
+				</HStack>
+				<ItemsPerPageControl />
+			</SettingsSection>
+			<SettingsSection title={ __( 'Properties' ) }>
+				<FieldControl />
+			</SettingsSection>
+		</VStack>
 	);
 }
 
-function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
-	const { view, fields, onChangeView } = useContext( DataViewsContext );
-	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
+function _DataViewsViewConfig( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewActionsProps ) {
+	const [ isShowingViewPopover, setIsShowingViewPopover ] =
+		useState< boolean >( false );
+
 	return (
 		<>
-			<HStack
-				spacing={ 1 }
-				expanded={ false }
-				style={ { flexShrink: 0 } }
-			>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ activeView?.icon }
-							label={ __( 'Layout' ) }
-						/>
-					}
-				>
-					<ViewTypeMenu
-						view={ view }
-						onChangeView={ onChangeView }
-						defaultLayouts={ defaultLayouts }
-					/>
-				</DropdownMenu>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-						/>
-					}
-				>
-					<DropdownMenuGroup>
-						<SortMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<FieldsVisibilityMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<PageSizeMenu
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					</DropdownMenuGroup>
-				</DropdownMenu>
-			</HStack>
+			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<div>
+				<Button
+					size="compact"
+					icon={ cog }
+					label={ _x( 'View options', 'View is used as a noun' ) }
+					onClick={ () => setIsShowingViewPopover( true ) }
+				/>
+				{ isShowingViewPopover && (
+					<Popover
+						placement="bottom-end"
+						onClose={ () => {
+							setIsShowingViewPopover( false );
+						} }
+						focusOnMount
+					>
+						<DataviewsViewConfigContent />
+					</Popover>
+				) }
+			</div>
 		</>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
new file mode 100644
index 00000000000000..85e86722f7b614
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -0,0 +1,44 @@
+.dataviews-view-config {
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	padding: $grid-unit-20;
+}
+.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
+	text-transform: uppercase;
+}
+
+.dataviews-settings-section__title.dataviews-settings-section__title {
+	line-height: $grid-unit-30;
+	font-size: 15px;
+}
+
+.dataviews-settings-section__sidebar {
+	grid-column: span 4;
+}
+
+.dataviews-settings-section__content,
+.dataviews-settings-section__content > * {
+	grid-column: span 8;
+}
+
+.dataviews-settings-section__content .is-divided-in-two {
+	display: contents;
+	& > * {
+		grid-column: span 4;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 500px) {
+	.dataviews-settings-section.dataviews-settings-section {
+		grid-template-columns: repeat(2, 1fr);
+		.dataviews-settings-section__sidebar {
+			grid-column: span 2;
+		}
+
+		.dataviews-settings-section__content {
+			grid-column: span 2;
+		}
+	}
+}
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 48753470280d0c..5ae94c7eb4a135 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +59,10 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
+};
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 7cf737b9a3849f..b780c9c3a587d5 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -5,6 +5,7 @@
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
+@import "./components/dataviews-view-config/style.scss";
 
 @import "./dataviews-layouts/grid/style.scss";
 @import "./dataviews-layouts/list/style.scss";
diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
index 869f9fcfb9b499..78e68b5a7c98b4 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -14,7 +14,8 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../primitives" },
-		{ "path": "../private-apis" }
+		{ "path": "../private-apis" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }
diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 878f0ed2eb48c3..31dbe9af814d2e 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -24,9 +24,7 @@ test.describe( 'Templates', () => {
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Sort by' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Template' } ).click();
-		await page.getByRole( 'menuitemradio', { name: 'descending' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {
 				name: 'Template',
@@ -37,7 +35,7 @@ test.describe( 'Templates', () => {
 		await expect( firstTitle ).toHaveText( 'Tag Archives' );
 
 		// Ascending by title.
-		await page.getByRole( 'menuitemradio', { name: 'ascending' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort ascending' } ).click();
 		await expect( firstTitle ).toHaveText( 'Category Archives' );
 	} );
 

From b43e05e8e5a136261ae04445355ee4e82a794d87 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 8 Aug 2024 02:37:57 +0900
Subject: [PATCH 028/205] Add margin-bottom lint rules for SelectControl
 (#64283)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix in ResolutionTool

Doesn't matter because this is wrapped in a ToolsPanelItem, which already does normalization on BaseControl margins.

* Fix in test

* Fix in Form block

* Fix in Post Navigation block

* Fix in Font Library ▸ Install Fonts

* Add eslint rule

* Fix in DataForm text field type

* Add prop to JSDoc

* Fix in Query Loop block

* Remove unnecessary additions in DataForm

* TreeSelect: Fix up JSDoc formatting

* Add to InspectorControls readme

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                                | 1 +
 .../src/components/inspector-controls/README.md             | 5 +++++
 .../block-editor/src/components/resolution-tool/index.js    | 1 +
 .../src/components/responsive-block-control/test/index.js   | 6 +++++-
 packages/block-library/src/form/edit.js                     | 5 +++--
 packages/block-library/src/post-navigation-link/edit.js     | 2 ++
 .../src/query/edit/inspector-controls/order-control.js      | 1 +
 packages/components/src/select-control/index.tsx            | 1 +
 packages/components/src/tree-select/index.tsx               | 3 +--
 .../global-styles/font-library-modal/font-collection.js     | 2 ++
 .../components/global-styles/font-library-modal/style.scss  | 1 +
 11 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cb132fbb3d7aba..81408499bd34f4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -295,6 +295,7 @@ module.exports = {
 						'FocalPointPicker',
 						'RangeControl',
 						'SearchControl',
+						'SelectControl',
 						'TextControl',
 						'TextareaControl',
 						'ToggleControl',
diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
index cc68c7cae7c78e..fd4847f53472b2 100644
--- a/packages/block-editor/src/components/inspector-controls/README.md
+++ b/packages/block-editor/src/components/inspector-controls/README.md
@@ -96,6 +96,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -114,6 +115,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
+							__nextHasNoMarginBottom
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -121,12 +123,14 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
+							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -203,6 +207,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {
diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js
index 42fea6e8655a8e..df43cb6acb096d 100644
--- a/packages/block-editor/src/components/resolution-tool/index.js
+++ b/packages/block-editor/src/components/resolution-tool/index.js
@@ -44,6 +44,7 @@ export default function ResolutionTool( {
 			panelId={ panelId }
 		>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Resolution' ) }
 				value={ displayValue }
 				options={ options }
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index 5d01d8e35ff20b..57944b591108d7 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -39,7 +39,11 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl label={ labelComponent } options={ sizeOptions } />
+			<SelectControl
+				label={ labelComponent }
+				options={ sizeOptions }
+				__nextHasNoMarginBottom
+			/>
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index bea513a3785dcd..2738644878660a 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -77,8 +77,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
-						// __nextHasNoMarginBottom
-						// size={ '__unstable-large' }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Submissions method' ) }
 						options={ [
 							// TODO: Allow plugins to add their own submission methods.
@@ -108,6 +108,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 					{ submissionMethod === 'email' && (
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Email for form submissions' ) }
 							value={ email }
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index 25cabe442b9c09..b181e677acae98 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -157,6 +157,8 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }
diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js
index d50d3349bcbafd..2f6fa0e589d473 100644
--- a/packages/block-library/src/query/edit/inspector-controls/order-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js
@@ -27,6 +27,7 @@ const orderOptions = [
 function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 8a3b6bda68a160..ca9966fc675b86 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -153,6 +153,7 @@ function UnforwardedSelectControl< V extends string >(
  *
  *   return (
  *     <SelectControl
+ *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }
  *       options={ [
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index 626fb0fda3a01c..599dee4402ec72 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -37,7 +37,7 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
- *      __nextHasNoMarginBottom
+ * 			__nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -73,7 +73,6 @@ function getSelectOptions(
  * }
  * ```
  */
-
 export function TreeSelect( props: TreeSelectProps ) {
 	const {
 		label,
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 6f8a27a8aa8927..357bcba1d93137 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -315,6 +315,8 @@ function FontCollection( { slug } ) {
 								</FlexItem>
 								<FlexItem>
 									<SelectControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
 										label={ __( 'Category' ) }
 										value={ filters.category }
 										onChange={ handleCategoryFilter }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 10b5b816cb9bdc..ce5197a73cabf9 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -69,6 +69,7 @@ $footer-height: 70px;
 	color: $gray-900;
 }
 
+// TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
 .font-library-modal__tabpanel-layout .components-base-control__field {
 	margin-bottom: 0;
 }

From 7cfd3c648aed8c05795536b21cb574800698f0b7 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 7 Aug 2024 18:05:08 +0000
Subject: [PATCH 029/205] Bump plugin version to 19.0.0-rc.1

---
 gutenberg.php     | 2 +-
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/gutenberg.php b/gutenberg.php
index b12c3467410603..6ec0a56f00e74d 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.5
  * Requires PHP: 7.2
- * Version: 18.9.0
+ * Version: 19.0.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index c340c58c0b4f6c..a28512799804aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "18.9.0",
+	"version": "19.0.0-rc.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "18.9.0",
+			"version": "19.0.0-rc.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index 53e8d0876ed621..fac57093a852c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.9.0",
+	"version": "19.0.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 32f0d30bab8c39347fc72fcd8de240079f166951 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 7 Aug 2024 18:24:21 +0000
Subject: [PATCH 030/205] Update Changelog for 19.0.0-rc.1

---
 changelog.txt | 368 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 368 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index b7bbdf821f374e..e85895547e87d1 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,373 @@
 == Changelog ==
 
+= 19.0.0-rc.1 =
+
+
+## Changelog
+
+### Enhancements
+
+- Add alt edit field to the inline image in the format library ([64124](https://github.com/WordPress/gutenberg/pull/64124))
+- Update copy from "No Title" to "No title" across multiple places on the editor. ([64184](https://github.com/WordPress/gutenberg/pull/64184))
+- Update column input to be 40px by default. ([64190](https://github.com/WordPress/gutenberg/pull/64190))
+
+#### Block Library
+- Add anchor block support to List Items. ([48758](https://github.com/WordPress/gutenberg/pull/48758))
+- Unset the rowStart and columnStart attributes when a block inside the Grid is removed from a manual layout. ([64186](https://github.com/WordPress/gutenberg/pull/64186))
+- Update Group block example. ([63114](https://github.com/WordPress/gutenberg/pull/63114))
+- Make SiteLogoReplaceFlow always available in the Site Logo block toolbar. ([63499](https://github.com/WordPress/gutenberg/pull/63499))
+- Make Query Loop settings more intuitive with a ToggleGroup and simplified help text. ([63739](https://github.com/WordPress/gutenberg/pull/63739))
+- Move gallery link controls to the block toolbar. ([62762](https://github.com/WordPress/gutenberg/pull/62762))
+- Hide loading when the overlay menu is selected. ([64262](https://github.com/WordPress/gutenberg/pull/64262))
+- Move the Site Logo tooltip to the middle right. ([64296](https://github.com/WordPress/gutenberg/pull/64296))
+- Prevent duplicate spacing on Tag Cloud block. ([63832](https://github.com/WordPress/gutenberg/pull/63832))
+- Fix 'can user edit' Template Part check. ([64137](https://github.com/WordPress/gutenberg/pull/64137))
+- Add clearfix in Post content. ([63690](https://github.com/WordPress/gutenberg/pull/63690))
+- Tweak Tag Cloud controls and description. ([64151](https://github.com/WordPress/gutenberg/pull/64151))
+- Tweak list block. ([64025](https://github.com/WordPress/gutenberg/pull/64025))
+- Update MediaUpload button for the site logo from "Add media" to "Choose logo". ([63498](https://github.com/WordPress/gutenberg/pull/63498))
+- Update help text for sticky control in Query loop. ([63999](https://github.com/WordPress/gutenberg/pull/63999))
+- Add border support to the following blocks:
+    - [Time To Read](https://github.com/WordPress/gutenberg/pull/63776)
+    - [Categories List](https://github.com/WordPress/gutenberg/pull/63950)
+    - [Post Date](https://github.com/WordPress/gutenberg/pull/64023)
+    - [Post Excerpt](https://github.com/WordPress/gutenberg/pull/64022)
+    - [Post Terms](https://github.com/WordPress/gutenberg/pull/64246)
+    - [Post Title](https://github.com/WordPress/gutenberg/pull/64024)
+    - [Site Tagline](https://github.com/WordPress/gutenberg/pull/63778)
+    - [Site Title](https://github.com/WordPress/gutenberg/pull/63631)
+    - [Table of contents](https://github.com/WordPress/gutenberg/pull/63578)
+
+#### Extensibility
+- Add an async `__unstablePreSavePost` hook; resolving with false prevents saving. ([58022](https://github.com/WordPress/gutenberg/pull/58022))
+- Enable heading level curation. ([63535](https://github.com/WordPress/gutenberg/pull/63535))
+- Addition of `levelOptions` attribute to control available heading levels in [Post Title](https://github.com/WordPress/gutenberg/pull/64106), [Query Title](https://github.com/WordPress/gutenberg/pull/64107), [Site Tagline](https://github.com/WordPress/gutenberg/pull/64113), [Site Title](https://github.com/WordPress/gutenberg/pull/64111), and [Comments Title](https://github.com/WordPress/gutenberg/pull/64103).
+
+#### Data Views
+- Be more clear with the copy of the "hide" action. ([63047](https://github.com/WordPress/gutenberg/pull/63047))
+- Graduate data view options out of a menu to allow more design expression. ([64175](https://github.com/WordPress/gutenberg/pull/64175))
+- Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers. ([63203](https://github.com/WordPress/gutenberg/pull/63203))
+- Update field line-height across grid/list layouts. ([63945](https://github.com/WordPress/gutenberg/pull/63945))
+- Update template description in table layout. ([63942](https://github.com/WordPress/gutenberg/pull/63942))
+- De-emphasise bulk actions on Grid layout. ([64209](https://github.com/WordPress/gutenberg/pull/64209))
+- Update the copy of some of the strings on dataviews actions. ([64099](https://github.com/WordPress/gutenberg/pull/64099))
+
+##### Dataviews Extensibility
+
+- Allow unregistering of the following post actions: [permanently delete](https://github.com/WordPress/gutenberg/pull/64088), [restore post](https://github.com/WordPress/gutenberg/pull/64134), and [trash post](https://github.com/WordPress/gutenberg/pull/64087).
+
+#### Dataform
+
+- Add author to quick edit page/post list. ([63983](https://github.com/WordPress/gutenberg/pull/63983))
+- If a field of type `text` declare `elements`, render it as a `SelectControl` in `edit`. ([64251](https://github.com/WordPress/gutenberg/pull/64251))
+- Migrate order action modal and introduce form validation. ([63895](https://github.com/WordPress/gutenberg/pull/63895))
+
+
+
+#### Components
+- Add radius scale. ([64007](https://github.com/WordPress/gutenberg/pull/64007))
+- Support generic props type on CustomSelectControl. ([63985](https://github.com/WordPress/gutenberg/pull/63985))
+- Guide: Add __next40pxDefaultSize to buttons. ([64181](https://github.com/WordPress/gutenberg/pull/64181))
+- Image: Make Placeholder white when there is a <Spinner /> on top. ([63885](https://github.com/WordPress/gutenberg/pull/63885))
+- SelectControl: Infer `value` type from `options`. ([64069](https://github.com/WordPress/gutenberg/pull/64069))
+- SelectControl: Pass through `options` props. ([64211](https://github.com/WordPress/gutenberg/pull/64211))
+- TimeInput: Expose as subcomponent of TimePicker. ([63145](https://github.com/WordPress/gutenberg/pull/63145))
+- Update radius variables in components configuration. ([64133](https://github.com/WordPress/gutenberg/pull/64133))
+- `RadioControl`: Add support for option help text. ([63751](https://github.com/WordPress/gutenberg/pull/63751))
+
+#### Block Editor
+- Block Autocompleter: Force icon color to text color when item is selected. ([61376](https://github.com/WordPress/gutenberg/pull/61376))
+- Don't overlap canvas with inserter panel at large screens. ([64110](https://github.com/WordPress/gutenberg/pull/64110))
+- Format Library: Polish inline image format popover. ([64016](https://github.com/WordPress/gutenberg/pull/64016))
+- LineHeightControl: Hard deprecate bottom margin. ([64281](https://github.com/WordPress/gutenberg/pull/64281))
+- New useBlockElementRef hook for storing block element into a ref. ([63799](https://github.com/WordPress/gutenberg/pull/63799))
+- Improved tabbed sidebar styles. ([61974](https://github.com/WordPress/gutenberg/pull/61974))
+- URLInput: Hard deprecate bottom margin. ([64282](https://github.com/WordPress/gutenberg/pull/64282))
+
+#### Global Styles
+- Add a typesets section to Typography. ([62539](https://github.com/WordPress/gutenberg/pull/62539))
+- Add tooltips to the heading level selectors. ([64039](https://github.com/WordPress/gutenberg/pull/64039))
+- Background images: Ensure appropriate default values. ([64192](https://github.com/WordPress/gutenberg/pull/64192))
+- Create new public function to make it easier to expose style variations from other themes. ([63318](https://github.com/WordPress/gutenberg/pull/63318))
+- Style Book: Clearly denote heading levels. ([64038](https://github.com/WordPress/gutenberg/pull/64038))
+
+#### Design Tools
+- Column: Enable border radius support. ([63924](https://github.com/WordPress/gutenberg/pull/63924))
+- Comment Template: Add Border Block Support. ([64238](https://github.com/WordPress/gutenberg/pull/64238))
+- Post Comments Form: Add Border Block Support. ([64233](https://github.com/WordPress/gutenberg/pull/64233))
+
+#### Zoom Out
+- Add a control to enter and leave zoom out mode. ([63870](https://github.com/WordPress/gutenberg/pull/63870))
+- Improve zoom transition. ([64179](https://github.com/WordPress/gutenberg/pull/64179))
+
+#### Site Editor
+- Clarify that the site icon is a back button using an animation. ([63986](https://github.com/WordPress/gutenberg/pull/63986))
+- Site Icon: Add back filter effect to make it work for all kind of site icons. ([64172](https://github.com/WordPress/gutenberg/pull/64172))
+
+#### Post Editor
+- Tweak Create custom template modal. ([64255](https://github.com/WordPress/gutenberg/pull/64255))
+
+#### Icons
+- Add new "send" icon. ([64130](https://github.com/WordPress/gutenberg/pull/64130))
+
+#### Plugin
+- Bump minimum required WordPress version to 6.5. ([64126](https://github.com/WordPress/gutenberg/pull/64126))
+
+#### Font Library
+- Include a "Select All" options for google fonts. ([63893](https://github.com/WordPress/gutenberg/pull/63893))
+
+#### Block bindings
+- Allow bindings bootstrap after registration. ([63797](https://github.com/WordPress/gutenberg/pull/63797))
+
+#### Interactivity API
+- Refactor internal proxy and signals system. ([62734](https://github.com/WordPress/gutenberg/pull/62734))
+
+
+### New APIs
+
+- Make useStyleOverride public. ([63656](https://github.com/WordPress/gutenberg/pull/63656))
+
+
+### Bug Fixes
+
+- Core Data: Fix 'getEntityRecordPermissions' memoization. ([64091](https://github.com/WordPress/gutenberg/pull/64091))
+- Document bar: Fix long title with no spaces causing layout issue. ([64092](https://github.com/WordPress/gutenberg/pull/64092))
+- Fix density slider minus to be correct. ([64185](https://github.com/WordPress/gutenberg/pull/64185))
+- Fix: Deleting a pattern throws a notice saying undefined deleted. ([64301](https://github.com/WordPress/gutenberg/pull/64301))
+- Primitives: Add missing peer dependency. ([64218](https://github.com/WordPress/gutenberg/pull/64218))
+- Site Icon: Fix position in distraction free mode. ([64261](https://github.com/WordPress/gutenberg/pull/64261))
+
+#### Data Views
+- Add context to trash string. ([64249](https://github.com/WordPress/gutenberg/pull/64249))
+- Conditionally shows the description field in Template Grid layout. ([64043](https://github.com/WordPress/gutenberg/pull/64043))
+- Consider layout URL parameter when loading a default/custom view. ([64306](https://github.com/WordPress/gutenberg/pull/64306))
+- Display published date for pages/posts with published status. ([64049](https://github.com/WordPress/gutenberg/pull/64049))
+- Sort author by name + allow custom sort function. ([64064](https://github.com/WordPress/gutenberg/pull/64064))
+- Don't render action modal when there are no eligible items. ([64250](https://github.com/WordPress/gutenberg/pull/64250))
+- Pages: Update `useView` logic. ([63889](https://github.com/WordPress/gutenberg/pull/63889))
+- Update template preview dimensions in table layout. ([63938](https://github.com/WordPress/gutenberg/pull/63938))
+- Update template preview dimensions in table layout. ([63938](https://github.com/WordPress/gutenberg/pull/63938))
+
+#### Dataform
+
+- Fix SelectControl size and spacing. ([64324](https://github.com/WordPress/gutenberg/pull/64324))
+- Provide a better default for render when field has elements. ([64338](https://github.com/WordPress/gutenberg/pull/64338))
+
+#### Components
+- Autocompleter UI: Fix text color when hovering selected item. ([64294](https://github.com/WordPress/gutenberg/pull/64294))
+- BaseControl: change label's display: Block. ([63911](https://github.com/WordPress/gutenberg/pull/63911))
+- Button: Fix tertiary destructive hover style. ([64152](https://github.com/WordPress/gutenberg/pull/64152))
+- ColorPalette: Remove extra bottom margin when `CircularOptionPicker` is unneeded. ([63961](https://github.com/WordPress/gutenberg/pull/63961))
+- DropdownMenuV2: Break menu item help text on multiple lines for better truncation. ([63916](https://github.com/WordPress/gutenberg/pull/63916))
+- Fix modal dismissers in development mode. ([64132](https://github.com/WordPress/gutenberg/pull/64132))
+- Fix toggle help indentation. ([63903](https://github.com/WordPress/gutenberg/pull/63903))
+- Update the TextControl padding to match the rest of the controls. ([64326](https://github.com/WordPress/gutenberg/pull/64326))
+
+#### Global Styles
+- Fix block custom CSS pseudo element selectors. ([63980](https://github.com/WordPress/gutenberg/pull/63980))
+- Fix block library and global styles stylesheet ordering when a block style variation is active. ([63918](https://github.com/WordPress/gutenberg/pull/63918))
+- Style Book: Fix critical error when heading block is not registered. ([64047](https://github.com/WordPress/gutenberg/pull/64047))
+- TypesetButton: Check if variations exist before running logic. ([64139](https://github.com/WordPress/gutenberg/pull/64139))
+
+#### Site Editor
+- Centrally align entity in focused edit mode. ([64143](https://github.com/WordPress/gutenberg/pull/64143))
+- Don't trigger template ID resolution for multi-selected posts. ([64254](https://github.com/WordPress/gutenberg/pull/64254))
+- Long slugs breaking summary panel UI. ([64053](https://github.com/WordPress/gutenberg/pull/64053))
+
+#### Zoom Out
+- Keep top-level block selection if entering zoom out mode. ([64178](https://github.com/WordPress/gutenberg/pull/64178))
+- Use the block editor for insertion point data. ([63934](https://github.com/WordPress/gutenberg/pull/63934))
+
+#### Block Library
+- Fix a typo in use-image-sizes.js. ([64100](https://github.com/WordPress/gutenberg/pull/64100))
+- Template Part: Fix capability checks for inner blocks. ([64159](https://github.com/WordPress/gutenberg/pull/64159))
+- Update useTaxonomies hook to check for taxonomies for passed post type. ([64145](https://github.com/WordPress/gutenberg/pull/64145))
+
+#### Design Tools
+- Quote: Prevent block theme styles overriding global border and padding. ([64045](https://github.com/WordPress/gutenberg/pull/64045))
+- Spacing controls: Using CustomSelectControlV2 for >= 8 spacing sizes. ([64284](https://github.com/WordPress/gutenberg/pull/64284))
+
+#### Post Editor
+- Avoid errors for post types without a 'menu_icon'. ([64015](https://github.com/WordPress/gutenberg/pull/64015))
+- Post: Add a max length to the post password protected field. ([64156](https://github.com/WordPress/gutenberg/pull/64156))
+
+#### Grid layout
+- Fix grid resizer drag over embed. ([64098](https://github.com/WordPress/gutenberg/pull/64098))
+- Move resizer popover slot to fix display on mobile. ([63920](https://github.com/WordPress/gutenberg/pull/63920))
+
+#### Block Editor
+- Fix unexpected drag & rrop row/gallery creation logic. ([64241](https://github.com/WordPress/gutenberg/pull/64241))
+
+#### Icons
+- Remove hardcoded color from sidesAxial and sidesBottom icons. ([64174](https://github.com/WordPress/gutenberg/pull/64174))
+
+#### Document Settings
+- Display empty option when post author is missing. ([64165](https://github.com/WordPress/gutenberg/pull/64165))
+
+#### Patterns
+- Enable cross-browser support for pattern uploading. ([64123](https://github.com/WordPress/gutenberg/pull/64123))
+
+#### Commands
+- Fix 'Preferences' and 'Shortcuts' commands in StrictMode. ([64019](https://github.com/WordPress/gutenberg/pull/64019))
+
+#### Meta Boxes
+- Prevent popover from being hidden by metaboxes. ([63939](https://github.com/WordPress/gutenberg/pull/63939))
+
+#### Page Content Focus
+- TemplateContentPanel: Don't show content blocks that are in a Query Loop. ([63732](https://github.com/WordPress/gutenberg/pull/63732))
+
+#### Font Library
+- Fix item font family item height in the sidebar. ([63125](https://github.com/WordPress/gutenberg/pull/63125))
+
+#### Block API
+- Block categories - ensure that categories are unique by slug. ([62954](https://github.com/WordPress/gutenberg/pull/62954))
+
+
+### Accessibility
+
+- Restore focus style in dataviews grid view. ([64298](https://github.com/WordPress/gutenberg/pull/64298))
+- A11y text for site editor. ([62648](https://github.com/WordPress/gutenberg/pull/62648))
+- Accessibility issue of device preview options. ([63958](https://github.com/WordPress/gutenberg/pull/63958))
+
+#### Components
+- Improve the aria-disabled focus style of the Button. ([62480](https://github.com/WordPress/gutenberg/pull/62480))
+- Restore `describedBy` functionality on CustomSelectControl. ([63957](https://github.com/WordPress/gutenberg/pull/63957))
+
+#### Block Library
+- Fix unlabeled Spacer block controls. ([63806](https://github.com/WordPress/gutenberg/pull/63806))
+- Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls. ([58207](https://github.com/WordPress/gutenberg/pull/58207))
+
+#### Font Library
+-  Remove notice context and add message when fonts are updated. ([64030](https://github.com/WordPress/gutenberg/pull/64030))
+
+
+### Performance
+
+- Add User Timings for the Interactivity API. ([60522](https://github.com/WordPress/gutenberg/pull/60522))
+
+#### Data Views
+- Optimize the patterns dataviews by extracting the fields definition. ([63927](https://github.com/WordPress/gutenberg/pull/63927))
+
+#### Layout
+- Avoid iterating auto grid inner blocks unless mode specifically changed. ([64194](https://github.com/WordPress/gutenberg/pull/64194))
+
+#### Block bindings
+- Move logic to merge `usesContext` outside the reducer. ([63941](https://github.com/WordPress/gutenberg/pull/63941))
+
+
+### Experiments
+
+- Adds experimental blocks flag. ([64121](https://github.com/WordPress/gutenberg/pull/64121))
+
+#### DataForm
+- Support multiple layouts and introduce the panel layout. ([64299](https://github.com/WordPress/gutenberg/pull/64299))
+
+#### DataViews Extensibility
+- Add a hook to allow third-party scripts to register/unregister post type actions. ([64138](https://github.com/WordPress/gutenberg/pull/64138))
+
+#### Grid Interactivity
+- Fix block mover layout and styles. ([64021](https://github.com/WordPress/gutenberg/pull/64021))
+
+#### Block bindings
+- UI for connecting bindings. ([62880](https://github.com/WordPress/gutenberg/pull/62880))
+
+
+### Documentation
+
+- .wp-env.json schema: Fix schema and add unit tests. ([63281](https://github.com/WordPress/gutenberg/pull/63281))
+- Add WP Studio to list of tools in documentation. ([64327](https://github.com/WordPress/gutenberg/pull/64327))
+- Add documentation for some dynamically generated selectors in the core-data store. ([64269](https://github.com/WordPress/gutenberg/pull/64269))
+- Block Editor: Update 'getBlocksByName' JSDoc. ([63919](https://github.com/WordPress/gutenberg/pull/63919))
+- Components: Add missing `__nextHasNoMarginBottom` documentation. ([64313](https://github.com/WordPress/gutenberg/pull/64313))
+- Corrected @deprecated doc Order in Inline Documentation. ([64013](https://github.com/WordPress/gutenberg/pull/64013))
+- Add documentation for `render_block` and `register_block_type_args` to Block Filters. ([64118](https://github.com/WordPress/gutenberg/pull/64118))
+- Fix interactivity API documentation link. ([64060](https://github.com/WordPress/gutenberg/pull/64060))
+- Fix non working link to an interactivity API example block. ([64061](https://github.com/WordPress/gutenberg/pull/64061))
+- Fix WampServer links. ([64062](https://github.com/WordPress/gutenberg/pull/64062))
+- FormToggle, ToggleControl: Fix docgen in Storybook. ([64065](https://github.com/WordPress/gutenberg/pull/64065))
+- Provide a better example for the PluginSidebar slotfill. ([64206](https://github.com/WordPress/gutenberg/pull/64206))
+- Update data-core.md to use correct headings. ([64309](https://github.com/WordPress/gutenberg/pull/64309))
+
+
+### Code Quality
+
+- Add margin-bottom lint rules ([64212](https://github.com/WordPress/gutenberg/pull/64212)),([64213](https://github.com/WordPress/gutenberg/pull/64213)) and ([63960](https://github.com/WordPress/gutenberg/pull/63960))
+- Add new useEntityRecordsWithPermissions hook. ([63857](https://github.com/WordPress/gutenberg/pull/63857))
+- Fix deprecated sass usage. ([63990](https://github.com/WordPress/gutenberg/pull/63990))
+- Remove an unnecessary wrapper component. ([63989](https://github.com/WordPress/gutenberg/pull/63989))
+- Theme JSON: Update core theme json resolver class use to Gutenberg version. ([63981](https://github.com/WordPress/gutenberg/pull/63981))
+- Zoom out: Get store action outside the loop. ([63936](https://github.com/WordPress/gutenberg/pull/63936))
+- Remove Speak from device menu selection. ([64115](https://github.com/WordPress/gutenberg/pull/64115))
+
+#### Block Editor
+- BlockDraggable: Remove invalid aria-hidden attribute from button. ([64228](https://github.com/WordPress/gutenberg/pull/64228))
+- FontFamilyControl: Deprecate bottom margin. ([64280](https://github.com/WordPress/gutenberg/pull/64280))
+- Remove unnecessary/incorrect `unlock` call in `setEditorMode` action. ([64073](https://github.com/WordPress/gutenberg/pull/64073))
+
+#### Data Views
+- Formalize text field type definition. ([64168](https://github.com/WordPress/gutenberg/pull/64168))
+- Use items with permissions and avoid hooks to register actions. ([63923](https://github.com/WordPress/gutenberg/pull/63923))
+
+#### DataForm
+- Centralize edit logic in field type definitions. ([64171](https://github.com/WordPress/gutenberg/pull/64171))
+- Move validation logic to the field type definition. ([64164](https://github.com/WordPress/gutenberg/pull/64164))
+
+#### Global Styles
+- Background image: Remove toolspanel placeholder component. ([64242](https://github.com/WordPress/gutenberg/pull/64242))
+- Consolidate theme.json ref and URI resolution. ([64182](https://github.com/WordPress/gutenberg/pull/64182))
+
+#### Plugin
+- Remove compat layers for WP 6.4 and 6.5. ([64096](https://github.com/WordPress/gutenberg/pull/64096))
+- Remove leftover 'WP_Rest_Customizer_Nonces' controller. ([64221](https://github.com/WordPress/gutenberg/pull/64221))
+
+#### Site Editor
+- Use `structuredClone` for deep cloning. ([64203](https://github.com/WordPress/gutenberg/pull/64203))
+
+#### Block Library
+- Add stylelint rule to prevent usage of flex-direction reverse values. ([63081](https://github.com/WordPress/gutenberg/pull/63081))
+- Image Block Lightbox: Fix warning error when resizing. ([63995](https://github.com/WordPress/gutenberg/pull/63995))
+
+#### Icons
+- Fix invalid prop for `homeButton` icon. ([64191](https://github.com/WordPress/gutenberg/pull/64191))
+
+#### Post Editor
+- Remove resolvers hack for post actions. ([64094](https://github.com/WordPress/gutenberg/pull/64094))
+
+#### Components
+- Upgrade Ariakit. ([64066](https://github.com/WordPress/gutenberg/pull/64066))
+
+#### Page Content Focus
+- Fix the 'getBlocksByName' selector call. ([63922](https://github.com/WordPress/gutenberg/pull/63922))
+
+
+### Tools
+
+#### Testing
+- Components: Cleanup flaky unit test `sleep()` hacks. ([64205](https://github.com/WordPress/gutenberg/pull/64205))
+- Fix flaky DataViews list layout end-to-end tests. ([64244](https://github.com/WordPress/gutenberg/pull/64244))
+- Fix typo in 'Verify Core Backport Changelog' job title. ([64058](https://github.com/WordPress/gutenberg/pull/64058))
+- Improve `Button` matrix in visual regression test. ([64120](https://github.com/WordPress/gutenberg/pull/64120))
+- Improve theme.json test failure messages by pretty printing css for a more accurate diff. ([64077](https://github.com/WordPress/gutenberg/pull/64077))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @Chrico: Block categories - ensure that categories are unique by slug. ([62954](https://github.com/WordPress/gutenberg/pull/62954))
+- @djcowan: Update api-reference.md. ([64325](https://github.com/WordPress/gutenberg/pull/64325))
+- @meteorlxy: CustomSelectControl: Support generic props type. ([63985](https://github.com/WordPress/gutenberg/pull/63985))
+- @Rishit30G: Add WP Studio to list of tools in documentation. ([64327](https://github.com/WordPress/gutenberg/pull/64327))
+- @wzieba:  ([64044](https://github.com/WordPress/gutenberg/pull/64044))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @akasunil @Aljullu @amitraj2203 @andrewserong @carolinan @cbravobernal @Chrico @ciampo @creativecoder @DaniGuardiola @DAreRodz @djcowan @ellatrix @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kebbet @kmanijak @Mamaduka @matiasbenedetto @meteorlxy @mikachan @mirka @mtias @ndiego @noisysocks @oandregal @ramonjd @richtabor @Rishit30G @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @simison @stokesman @t-hamano @talldan @tomdevisser @tomjn @tyxla @up1512001 @wzieba @youknowriad
+
+
 = 18.9.0 =
 
 ## Changelog

From 77d294a16e59eaaa643706637e247f6d14fd4a4a Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 7 Aug 2024 18:15:10 +0000
Subject: [PATCH 031/205] Update changelog files

---
 packages/a11y/CHANGELOG.md                                 | 2 ++
 packages/a11y/package.json                                 | 2 +-
 packages/annotations/CHANGELOG.md                          | 2 ++
 packages/annotations/package.json                          | 2 +-
 packages/api-fetch/CHANGELOG.md                            | 2 ++
 packages/api-fetch/package.json                            | 2 +-
 packages/autop/CHANGELOG.md                                | 2 ++
 packages/autop/package.json                                | 2 +-
 packages/babel-plugin-import-jsx-pragma/CHANGELOG.md       | 2 ++
 packages/babel-plugin-import-jsx-pragma/package.json       | 2 +-
 packages/babel-plugin-makepot/CHANGELOG.md                 | 2 ++
 packages/babel-plugin-makepot/package.json                 | 2 +-
 packages/babel-preset-default/CHANGELOG.md                 | 2 ++
 packages/babel-preset-default/package.json                 | 2 +-
 packages/base-styles/CHANGELOG.md                          | 2 ++
 packages/base-styles/package.json                          | 2 +-
 packages/blob/CHANGELOG.md                                 | 2 ++
 packages/blob/package.json                                 | 2 +-
 packages/block-directory/CHANGELOG.md                      | 2 ++
 packages/block-directory/package.json                      | 2 +-
 packages/block-editor/CHANGELOG.md                         | 2 ++
 packages/block-editor/package.json                         | 2 +-
 packages/block-library/CHANGELOG.md                        | 2 ++
 packages/block-library/package.json                        | 2 +-
 packages/block-serialization-default-parser/CHANGELOG.md   | 2 ++
 packages/block-serialization-default-parser/package.json   | 2 +-
 packages/block-serialization-spec-parser/CHANGELOG.md      | 2 ++
 packages/block-serialization-spec-parser/package.json      | 2 +-
 packages/blocks/CHANGELOG.md                               | 2 ++
 packages/blocks/package.json                               | 2 +-
 packages/browserslist-config/CHANGELOG.md                  | 2 ++
 packages/browserslist-config/package.json                  | 2 +-
 packages/commands/CHANGELOG.md                             | 2 ++
 packages/commands/package.json                             | 2 +-
 packages/components/CHANGELOG.md                           | 2 ++
 packages/components/package.json                           | 2 +-
 packages/compose/CHANGELOG.md                              | 2 ++
 packages/compose/package.json                              | 2 +-
 packages/core-commands/CHANGELOG.md                        | 2 ++
 packages/core-commands/package.json                        | 2 +-
 packages/core-data/CHANGELOG.md                            | 2 ++
 packages/core-data/package.json                            | 2 +-
 packages/create-block-interactive-template/CHANGELOG.md    | 2 ++
 packages/create-block-interactive-template/package.json    | 2 +-
 packages/create-block-tutorial-template/CHANGELOG.md       | 2 ++
 packages/create-block-tutorial-template/package.json       | 2 +-
 packages/create-block/CHANGELOG.md                         | 2 ++
 packages/create-block/package.json                         | 2 +-
 packages/customize-widgets/CHANGELOG.md                    | 2 ++
 packages/customize-widgets/package.json                    | 2 +-
 packages/data-controls/CHANGELOG.md                        | 2 ++
 packages/data-controls/package.json                        | 2 +-
 packages/data/CHANGELOG.md                                 | 2 ++
 packages/data/package.json                                 | 2 +-
 packages/dataviews/CHANGELOG.md                            | 2 ++
 packages/dataviews/package.json                            | 2 +-
 packages/date/CHANGELOG.md                                 | 2 ++
 packages/date/package.json                                 | 2 +-
 packages/dependency-extraction-webpack-plugin/CHANGELOG.md | 2 ++
 packages/dependency-extraction-webpack-plugin/package.json | 2 +-
 packages/deprecated/CHANGELOG.md                           | 2 ++
 packages/deprecated/package.json                           | 2 +-
 packages/docgen/CHANGELOG.md                               | 2 ++
 packages/docgen/package.json                               | 2 +-
 packages/dom-ready/CHANGELOG.md                            | 2 ++
 packages/dom-ready/package.json                            | 2 +-
 packages/dom/CHANGELOG.md                                  | 2 ++
 packages/dom/package.json                                  | 2 +-
 packages/e2e-test-utils-playwright/CHANGELOG.md            | 2 ++
 packages/e2e-test-utils-playwright/package.json            | 2 +-
 packages/e2e-test-utils/CHANGELOG.md                       | 2 ++
 packages/e2e-test-utils/package.json                       | 2 +-
 packages/e2e-tests/CHANGELOG.md                            | 2 ++
 packages/e2e-tests/package.json                            | 2 +-
 packages/edit-post/CHANGELOG.md                            | 2 ++
 packages/edit-post/package.json                            | 2 +-
 packages/edit-site/CHANGELOG.md                            | 2 ++
 packages/edit-site/package.json                            | 2 +-
 packages/edit-widgets/CHANGELOG.md                         | 2 ++
 packages/edit-widgets/package.json                         | 2 +-
 packages/editor/CHANGELOG.md                               | 2 ++
 packages/editor/package.json                               | 2 +-
 packages/element/CHANGELOG.md                              | 2 ++
 packages/element/package.json                              | 2 +-
 packages/env/CHANGELOG.md                                  | 2 ++
 packages/env/package.json                                  | 2 +-
 packages/escape-html/CHANGELOG.md                          | 2 ++
 packages/escape-html/package.json                          | 2 +-
 packages/eslint-plugin/CHANGELOG.md                        | 2 ++
 packages/eslint-plugin/package.json                        | 2 +-
 packages/format-library/CHANGELOG.md                       | 2 ++
 packages/format-library/package.json                       | 2 +-
 packages/hooks/CHANGELOG.md                                | 2 ++
 packages/hooks/package.json                                | 2 +-
 packages/html-entities/CHANGELOG.md                        | 2 ++
 packages/html-entities/package.json                        | 2 +-
 packages/i18n/CHANGELOG.md                                 | 2 ++
 packages/i18n/package.json                                 | 2 +-
 packages/icons/CHANGELOG.md                                | 2 ++
 packages/icons/package.json                                | 2 +-
 packages/interactivity-router/CHANGELOG.md                 | 2 ++
 packages/interactivity-router/package.json                 | 2 +-
 packages/interactivity/CHANGELOG.md                        | 2 ++
 packages/interactivity/package.json                        | 2 +-
 packages/interface/CHANGELOG.md                            | 2 ++
 packages/interface/package.json                            | 2 +-
 packages/is-shallow-equal/CHANGELOG.md                     | 2 ++
 packages/is-shallow-equal/package.json                     | 2 +-
 packages/jest-console/CHANGELOG.md                         | 2 ++
 packages/jest-console/package.json                         | 2 +-
 packages/jest-preset-default/CHANGELOG.md                  | 2 ++
 packages/jest-preset-default/package.json                  | 2 +-
 packages/jest-puppeteer-axe/CHANGELOG.md                   | 2 ++
 packages/jest-puppeteer-axe/package.json                   | 2 +-
 packages/keyboard-shortcuts/CHANGELOG.md                   | 2 ++
 packages/keyboard-shortcuts/package.json                   | 2 +-
 packages/keycodes/CHANGELOG.md                             | 2 ++
 packages/keycodes/package.json                             | 2 +-
 packages/lazy-import/CHANGELOG.md                          | 2 ++
 packages/lazy-import/package.json                          | 2 +-
 packages/list-reusable-blocks/CHANGELOG.md                 | 2 ++
 packages/list-reusable-blocks/package.json                 | 2 +-
 packages/media-utils/CHANGELOG.md                          | 2 ++
 packages/media-utils/package.json                          | 2 +-
 packages/notices/CHANGELOG.md                              | 2 ++
 packages/notices/package.json                              | 2 +-
 packages/npm-package-json-lint-config/CHANGELOG.md         | 2 ++
 packages/npm-package-json-lint-config/package.json         | 2 +-
 packages/nux/CHANGELOG.md                                  | 2 ++
 packages/nux/package.json                                  | 2 +-
 packages/patterns/CHANGELOG.md                             | 2 ++
 packages/patterns/package.json                             | 2 +-
 packages/plugins/CHANGELOG.md                              | 2 ++
 packages/plugins/package.json                              | 2 +-
 packages/postcss-plugins-preset/CHANGELOG.md               | 2 ++
 packages/postcss-plugins-preset/package.json               | 2 +-
 packages/postcss-themes/CHANGELOG.md                       | 2 ++
 packages/postcss-themes/package.json                       | 2 +-
 packages/preferences-persistence/CHANGELOG.md              | 2 ++
 packages/preferences-persistence/package.json              | 2 +-
 packages/preferences/CHANGELOG.md                          | 2 ++
 packages/preferences/package.json                          | 2 +-
 packages/prettier-config/CHANGELOG.md                      | 2 ++
 packages/prettier-config/package.json                      | 2 +-
 packages/primitives/CHANGELOG.md                           | 2 ++
 packages/primitives/package.json                           | 2 +-
 packages/priority-queue/CHANGELOG.md                       | 2 ++
 packages/priority-queue/package.json                       | 2 +-
 packages/private-apis/CHANGELOG.md                         | 2 ++
 packages/private-apis/package.json                         | 2 +-
 packages/project-management-automation/CHANGELOG.md        | 2 ++
 packages/project-management-automation/package.json        | 2 +-
 packages/react-i18n/CHANGELOG.md                           | 2 ++
 packages/react-i18n/package.json                           | 2 +-
 packages/readable-js-assets-webpack-plugin/CHANGELOG.md    | 2 ++
 packages/readable-js-assets-webpack-plugin/package.json    | 2 +-
 packages/redux-routine/CHANGELOG.md                        | 2 ++
 packages/redux-routine/package.json                        | 2 +-
 packages/reusable-blocks/CHANGELOG.md                      | 2 ++
 packages/reusable-blocks/package.json                      | 2 +-
 packages/rich-text/CHANGELOG.md                            | 2 ++
 packages/rich-text/package.json                            | 2 +-
 packages/router/CHANGELOG.md                               | 2 ++
 packages/router/package.json                               | 2 +-
 packages/scripts/CHANGELOG.md                              | 2 ++
 packages/scripts/package.json                              | 2 +-
 packages/server-side-render/CHANGELOG.md                   | 2 ++
 packages/server-side-render/package.json                   | 2 +-
 packages/shortcode/CHANGELOG.md                            | 2 ++
 packages/shortcode/package.json                            | 2 +-
 packages/style-engine/CHANGELOG.md                         | 2 ++
 packages/style-engine/package.json                         | 2 +-
 packages/stylelint-config/CHANGELOG.md                     | 2 ++
 packages/stylelint-config/package.json                     | 2 +-
 packages/sync/CHANGELOG.md                                 | 2 ++
 packages/sync/package.json                                 | 2 +-
 packages/token-list/CHANGELOG.md                           | 2 ++
 packages/token-list/package.json                           | 2 +-
 packages/undo-manager/CHANGELOG.md                         | 2 ++
 packages/undo-manager/package.json                         | 2 +-
 packages/url/CHANGELOG.md                                  | 2 ++
 packages/url/package.json                                  | 2 +-
 packages/viewport/CHANGELOG.md                             | 2 ++
 packages/viewport/package.json                             | 2 +-
 packages/warning/CHANGELOG.md                              | 2 ++
 packages/warning/package.json                              | 2 +-
 packages/widgets/CHANGELOG.md                              | 2 ++
 packages/widgets/package.json                              | 2 +-
 packages/wordcount/CHANGELOG.md                            | 2 ++
 packages/wordcount/package.json                            | 2 +-
 190 files changed, 285 insertions(+), 95 deletions(-)

diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 3253a926865bd1..7e7a192fe2cec7 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 3af093baa98c91..139bc42bd01f46 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index a8a78b900448f3..4fd75757858130 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index 147b032d256498..1d571c8b372985 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index f55dea9482a288..38185a29d5e723 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index ad48bede6c2029..837df14c307778 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index a039d571429dba..28c66fc53c0218 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index f96a7afc7887fe..dbb5712928574c 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index f99035b53ad4f2..a8b85caf3939cb 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 2be402163fdffe..bae71e052d9018 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index 4d876ac3629bc8..ad77a8bda2e3cd 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index 3ce5e4ac321f97..f255736856caaf 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index ed74690aef3a17..39ff7b2098ba71 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.5.0 (2024-08-07)
+
 ## 8.4.0 (2024-07-24)
 
 ## 8.3.0 (2024-07-10)
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 10792a258407f4..311b9fd1594fd4 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.4.0",
+	"version": "8.5.0-prerelease",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index 48e715441a86ff..c68e328b68421b 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index ff59ac8cf960ed..1a0e6ac2c176cf 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index 9963ce05042c70..56c1ee2a2554b0 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index ca6820770afe08..ae216a1f5aaa01 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index 99d27f9b06ca0d..8c25a168e585c8 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 20afdad09cb53b..9b67833be0ec8e 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index bc7d1b88bc9b0a..09792d9dca5dac 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.0.0 (2024-08-07)
+
 ### Breaking Changes
 
 -   `URLInput`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64282](https://github.com/WordPress/gutenberg/pull/64282)).
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index aadf192f3016ec..81f8613fb4e339 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.4.0",
+	"version": "14.0.0-prerelease",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 652c89fd3540e2..b14275fdad3988 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.5.0 (2024-08-07)
+
 ### New Feature
 
 -   Query Loop Block: Moves per page, offset, and pages controls into Inspector Controls. ([#58207](https://github.com/WordPress/gutenberg/pull/58207))
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index c1d27c8691f4fe..83d796ad11b16a 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.4.0",
+	"version": "9.5.0-prerelease",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index e8c14374606de4..97ab311854c9b7 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index de4f74925baf48..34e57586ea52c5 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index 0b9d0e9922ecc6..15d6292a59b6ed 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 84704630d117f7..88851d4b60d793 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 1f77b933104583..9768d958f0382c 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 13.5.0 (2024-08-07)
+
 ## 13.4.0 (2024-07-24)
 
 ## 13.3.0 (2024-07-10)
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 1d10cf69ec8926..f64948af554168 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "13.4.0",
+	"version": "13.5.0-prerelease",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index 538af854cef48f..676c38509b22e5 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index 2dd117762b9dbd..9c3213cb2ba866 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index 2a4b22bb9880a2..228f06635ada65 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 53717ff871d2dc..67ba52b5544e8a 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 837fe973d1022a..ef0108b09a741d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 28.5.0 (2024-08-07)
+
 ### Bug Fixes
 
 -   `ColorPalette`: Remove extra bottom margin when `CircularOptionPicker` is unneeded ([#63961](https://github.com/WordPress/gutenberg/pull/63961)).
diff --git a/packages/components/package.json b/packages/components/package.json
index 784b03d6574940..e188c05ba2a847 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.4.0",
+	"version": "28.5.0-prerelease",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index b5dd1d8712215d..6595c9ae336855 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/compose/package.json b/packages/compose/package.json
index bc295a921bea5f..c5ea618103ca95 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index aab5f1ea832f17..fa46608d63254b 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index bb9acc05139888..13312adcab650a 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 4712b66b8797b6..e3477da97811fe 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 3f4037f290a2c5..e15f84799aea53 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index 9f3b063c6fe9b3..769999da2d4ecc 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 6f679fd47d90ea..33df8821966113 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index a1ee507eb80163..5c5856f174b0eb 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index 891fda996099eb..e2647dbd531f0c 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 3d4cd14732192b..024ef7abc8c69e 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.48.0 (2024-08-07)
+
 ## 4.47.0 (2024-07-24)
 
 ## 4.46.0 (2024-07-10)
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index adaf06606d2550..203816ddf226fb 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.47.0",
+	"version": "4.48.0-prerelease",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 42bc3b04f4c0e1..1065adf40e15d3 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index ce53a53ea80dec..76b152a080f388 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index e01b3f59bea50b..f0d753d95360ca 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index d3c670e5f0690a..9e7f2d26089ee2 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 9789b91dfea0ea..a4686283d050c7 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.5.0 (2024-08-07)
+
 ## 10.4.0 (2024-07-24)
 
 ## 10.3.0 (2024-07-10)
diff --git a/packages/data/package.json b/packages/data/package.json
index a17b3cfd4f4b28..46bd6c4a134c7e 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.4.0",
+	"version": "10.5.0-prerelease",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 8dd3ade7fd7749..239a69651a1f27 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.1.0 (2024-08-07)
+
 ## Internal
 
 -   Upgraded `@ariakit/react` (v0.4.7) ([#64066](https://github.com/WordPress/gutenberg/pull/64066)).
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 53cfa97c275c60..b410f8b9b959e3 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.0.0",
+	"version": "4.1.0-prerelease",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index b5177ac190c5d3..bcd7d0d80a6909 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/date/package.json b/packages/date/package.json
index d7ffeaa8417596..a2f45532505fe4 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 53e1853d8857b2..2fcbf4b78c22c9 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index 6146a8f562d05e..558173f7fe21ab 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 89e574358a5225..6b5c50cb2b55a6 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index 515103487ca3cd..681beb2e25d7d5 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 5279dccdb4c51f..8bde3b25cbbd26 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 86ce19f84b4f9b..cab58965b69936 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index 3e63c4440ae6fd..652b3d9a738ea5 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 76e2f12961a0e6..f80bf5f8d35fba 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index cf5f09613f3154..a337ee7214611f 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 4b1f1ba634f9b5..f1aec564927a25 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index e19452d1e49264..fa56cd3b2aaaee 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index d57f374cc979fa..25f231a39c635f 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index fec97ba250f536..fa27436da8f42a 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 11.5.0 (2024-08-07)
+
 ## 11.4.0 (2024-07-24)
 
 ## 11.3.0 (2024-07-10)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index dee83cb79081c0..c594c0db136340 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.4.0",
+	"version": "11.5.0-prerelease",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index e89296d6606e15..2a9317924a8fec 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.5.0 (2024-08-07)
+
 ## 8.4.0 (2024-07-24)
 
 ## 8.3.0 (2024-07-10)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index b2ccca8dc14f2e..8e89e852e2b962 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.4.0",
+	"version": "8.5.0-prerelease",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 9542749c9d8463..6febaa5df4542c 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.5.0 (2024-08-07)
+
 ## 8.4.0 (2024-07-24)
 
 ## 8.3.0 (2024-07-10)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index ee02f268ac1921..c080209b37e96d 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.4.0",
+	"version": "8.5.0-prerelease",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 1990f26bce3ffb..062bf8c46ff08c 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index f034b853c2cae1..fc3a9e355f2b8a 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index edb26e6c38c1a8..bbe958c401ce6e 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 793e64f5d57caa..8b43279e8dc0e6 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index a5fce0d1f736ad..8e7cbed3a98144 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.5.0 (2024-08-07)
+
 ## 14.4.0 (2024-07-24)
 
 ### Deprecations
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 6c6a22cbbcd8c7..e0d0fd93c9bc83 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.4.0",
+	"version": "14.5.0-prerelease",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index f81c95ef6eb24e..4dbbe1938a0187 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/element/package.json b/packages/element/package.json
index a5a85b145b51ba..fc457a950090d8 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 5e979941fb892d..dadbbb7c89ef9a 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.5.0 (2024-08-07)
+
 ## 10.4.0 (2024-07-24)
 
 ## 10.3.0 (2024-07-10)
diff --git a/packages/env/package.json b/packages/env/package.json
index 354a41163c0ac2..32e332040e4eaf 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.4.0",
+	"version": "10.5.0-prerelease",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 02d7e2bf83a567..8768abbb682494 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 0890a53b4e1743..d1949cb32b974c 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index fb9a16a011a9cf..92499f5b32eb3a 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 20.2.0 (2024-08-07)
+
 ## 20.1.0 (2024-07-24)
 
 ## 20.0.0 (2024-07-10)
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 77c9e2457b490e..0ebe3272154055 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "20.1.0",
+	"version": "20.2.0-prerelease",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index 6d255d2b0b4b10..7914005a0c2b1d 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 5c5f80d1739b68..eb23caf92ef872 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index cd6b23c1609bb3..779306149f2552 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 2bdf8ca3e5c933..2c55175073f2f0 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 0e586385970454..9dafc94de9e18d 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 313438e3b994c6..4416d167e0cda6 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index abe87d0edd1280..8e31279a21a4da 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 96647dd7f64a40..b67d18ec695bba 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 4f279b5593e875..630bbd7cb129ae 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.5.0 (2024-08-07)
+
 ### New Features
 
 -   Add new `send` icon.
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 658e02ba74fa71..0d420d9ae93e62 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.4.0",
+	"version": "10.5.0-prerelease",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 97cd7f368bcbad..38e79f9d503b6f 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index 212162a89ec6ed..1435f19e84ed44 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index d592a5258c3c83..6eb664984e1e53 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 332254684bdc9b..89b98463e08190 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 18e36b68947b45..e60175047ec0e3 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index cbc3a4229bd526..75b5b92621ac7b 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 92e7f633cd150a..7757af92a8472e 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index a92e70d21b6c7a..89d9ecc1155f32 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 3c85c40d1fe650..f72992c321204e 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.5.0 (2024-08-07)
+
 ## 8.4.0 (2024-07-24)
 
 ## 8.3.0 (2024-07-10)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 9775d4c7b7977d..9744a87680c0f2 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.4.0",
+	"version": "8.5.0-prerelease",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index 726b351b71b529..7dc5a2ec0e8963 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.5.0 (2024-08-07)
+
 ## 12.4.0 (2024-07-24)
 
 ## 12.3.0 (2024-07-10)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index db5cf4cf8d7dd2..59c8c7e984dce5 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.4.0",
+	"version": "12.5.0-prerelease",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 14f2cf2e7ef525..710528ab53a242 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index 2a16312d79764e..10c891a939376f 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index 180e1af1be4a66..deee5625cd6879 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index d32cf232e17e5c..4d32c65cf55afd 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index 70d9c6065f1881..1503d7554393f3 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 56a2c8dce89c97..1640c7e831bb41 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index 0db5de62639324..e6305967c12a7d 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 6f0c5501387d47..9e9f77225c1794 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index c64693083af1f5..bd1ee4cd44b12c 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 277ec1e991984c..50a26cb0671713 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 571fe227513ca6..574d3b66273399 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 59adc20770a5f8..5facc75c780b67 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 8bd550869b8b34..8e22055742e287 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index de6ba2f106e723..6b952f566075de 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 661d935ebab8b4..9b83e804acdc1c 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 4c42423e14cd61..3ab2d07913ee37 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index 9c83baed0c0a80..eb7ec981961649 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.5.0 (2024-08-07)
+
 ## 9.4.0 (2024-07-24)
 
 ## 9.3.0 (2024-07-10)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index c8bb71d1ce480f..4fb355fe51f341 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.4.0",
+	"version": "9.5.0-prerelease",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index 499b988bc66c98..0d11c1e9545b14 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index 9f1a9c09fb405f..c544287e6f7404 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index 4135ab1b3a4b42..368cb58e22659e 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 7f2262c2487ed2..530a758d7bc276 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 7a362b300fe71e..2534e127a438e7 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 77e5e62a404631..388855af3b5fdd 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 5f200977e62ff4..5fefbbff21cccd 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 51f78e5dc7d40d..e56ed2c24d1b5d 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index b5bdc72282f80c..4a29b7cabc2535 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 81ff8d0a5452ef..de0a7dbc87164f 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 2ebbd4ad386a9e..4ab14164deede9 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 47c54e52512c28..2a53487932c401 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index c3e02c3891f83a..8556f8d42768dd 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index 33cd14c889db6c..0a6486068067fd 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index abba3f5140d3a6..d698040432ecb8 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 31bf36813d6b0e..f3298b3dfe7ebe 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 063fe05d667f08..06fcc2be6ab09e 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index 27eb90e14f5c44..bd7069f6718141 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index 169c9d8c4a588e..e83cd2047a5c2a 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index 4034d63c0a169b..a46a499716fb10 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index ca47a4ac381d9f..cd83382d0e2485 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 13aa49f5da6290..5efd0e01ef43c1 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index 4907b55755640e..a44fe01322670e 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index d3cb47c584dbb6..89ca7018bf7da8 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 771067204bc156..c3d143fde84693 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index fa04a7266d5d00..596a8a82d4f419 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index 28f2162b322651..989af85ea8f81b 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 2d43d16413efaf..a329e0091f7709 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 37ae70f2cba977..7ad0be3307056a 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 54985450b5dfb9..08d8a71c2aff26 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index 25d2fe65213a50..a83fc8a8b0d751 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.5.0 (2024-08-07)
+
 ## 7.4.0 (2024-07-24)
 
 ## 7.3.0 (2024-07-10)
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index 5d62e30f06d1bc..66ddc465e65ac6 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.4.0",
+	"version": "7.5.0-prerelease",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index aab5f1ea832f17..fa46608d63254b 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/router/package.json b/packages/router/package.json
index 3173f0d51bbf7b..6f9c44faff6e3f 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 2cb0cbbe408d65..3a878e23689092 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 28.5.0 (2024-08-07)
+
 ## 28.4.0 (2024-07-24)
 
 ### New Features
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 1ab69ea501be20..c0b68e73e36827 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "28.4.0",
+	"version": "28.5.0-prerelease",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index a07a67682026e2..6d0fed23681aa3 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.5.0 (2024-08-07)
+
 ## 5.4.0 (2024-07-24)
 
 ## 5.3.0 (2024-07-10)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 1eaa215f097a70..c28611fce5b7f3 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.4.0",
+	"version": "5.5.0-prerelease",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index ed64a536ee8df2..ee2f8b49fcc24e 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index b0db529cd58ec7..89ed91aa947ecb 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index aa2a6e8a62a7b9..d393e427a63071 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.5.0 (2024-08-07)
+
 ## 2.4.0 (2024-07-24)
 
 ## 2.3.0 (2024-07-10)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 54a340e50c2290..84a76d7d0180f0 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.4.0",
+	"version": "2.5.0-prerelease",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index d2a5cba72d5ba3..f258fa93af7a26 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 22.5.0 (2024-08-07)
+
 ## 22.4.0 (2024-07-24)
 
 ## 22.3.0 (2024-07-10)
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 5942073e683ce8..084b7159788c25 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "22.4.0",
+	"version": "22.5.0-prerelease",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index dc4639d721cbd1..5c703cc231dc88 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index e4ecb8f39a5157..bc054732462496 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index 7f70da2e813ee6..5ccb92af128ca0 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 1192c6f7103371..b99cb89e3695ab 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index 2a8795039da055..665d78dd646af3 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.5.0 (2024-08-07)
+
 ## 1.4.0 (2024-07-24)
 
 ## 1.3.0 (2024-07-10)
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 2f945dbc53b653..96961844152818 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.4.0",
+	"version": "1.5.0-prerelease",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index 46aeb33cd56d3a..9715c9512b34c1 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/url/package.json b/packages/url/package.json
index c60ca2c661b9fa..57e7fdacccd271 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 5add422c56ebc2..1e9c4f3d91590d 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.5.0 (2024-08-07)
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index dbea04216570d9..65c9df5b7ecf6c 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.4.0",
+	"version": "6.5.0-prerelease",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index 9d0fea35fd7d82..6b73c6f10df6c0 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.5.0 (2024-08-07)
+
 ## 3.4.0 (2024-07-24)
 
 ## 3.3.0 (2024-07-10)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 980a1afcfb61c4..dd9e01fb6cf95d 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.4.0",
+	"version": "3.5.0-prerelease",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index 7ae2d9c4f32d22..a13d277ace3a21 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index d302e63ee34cfb..b7f87a89d57c3e 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 58632ead7d0819..e3865266e4c2d4 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.5.0 (2024-08-07)
+
 ## 4.4.0 (2024-07-24)
 
 ## 4.3.0 (2024-07-10)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index e6579c01f2c5f9..b507e5ee3e3c84 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.4.0",
+	"version": "4.5.0-prerelease",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

From 4b25473b743ab225dbe59ce10341b8397a06a577 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 7 Aug 2024 18:16:55 +0000
Subject: [PATCH 032/205] chore(release): publish

 - @wordpress/a11y@4.5.0
 - @wordpress/annotations@3.5.0
 - @wordpress/api-fetch@7.5.0
 - @wordpress/autop@4.5.0
 - @wordpress/babel-plugin-import-jsx-pragma@5.5.0
 - @wordpress/babel-plugin-makepot@6.5.0
 - @wordpress/babel-preset-default@8.5.0
 - @wordpress/base-styles@5.5.0
 - @wordpress/blob@4.5.0
 - @wordpress/block-directory@5.5.0
 - @wordpress/block-editor@14.0.0
 - @wordpress/block-library@9.5.0
 - @wordpress/block-serialization-default-parser@5.5.0
 - @wordpress/block-serialization-spec-parser@5.5.0
 - @wordpress/blocks@13.5.0
 - @wordpress/browserslist-config@6.5.0
 - @wordpress/commands@1.5.0
 - @wordpress/components@28.5.0
 - @wordpress/compose@7.5.0
 - @wordpress/core-commands@1.5.0
 - @wordpress/core-data@7.5.0
 - @wordpress/create-block@4.48.0
 - @wordpress/create-block-interactive-template@2.5.0
 - @wordpress/create-block-tutorial-template@4.5.0
 - @wordpress/customize-widgets@5.5.0
 - @wordpress/data@10.5.0
 - @wordpress/data-controls@4.5.0
 - @wordpress/dataviews@4.1.0
 - @wordpress/date@5.5.0
 - @wordpress/dependency-extraction-webpack-plugin@6.5.0
 - @wordpress/deprecated@4.5.0
 - @wordpress/docgen@2.5.0
 - @wordpress/dom@4.5.0
 - @wordpress/dom-ready@4.5.0
 - @wordpress/e2e-test-utils@11.5.0
 - @wordpress/e2e-test-utils-playwright@1.5.0
 - @wordpress/e2e-tests@8.5.0
 - @wordpress/edit-post@8.5.0
 - @wordpress/edit-site@6.5.0
 - @wordpress/edit-widgets@6.5.0
 - @wordpress/editor@14.5.0
 - @wordpress/element@6.5.0
 - @wordpress/env@10.5.0
 - @wordpress/escape-html@3.5.0
 - @wordpress/eslint-plugin@20.2.0
 - @wordpress/format-library@5.5.0
 - @wordpress/hooks@4.5.0
 - @wordpress/html-entities@4.5.0
 - @wordpress/i18n@5.5.0
 - @wordpress/icons@10.5.0
 - @wordpress/interactivity@6.5.0
 - @wordpress/interactivity-router@2.5.0
 - @wordpress/interface@6.5.0
 - @wordpress/is-shallow-equal@5.5.0
 - @wordpress/jest-console@8.5.0
 - @wordpress/jest-preset-default@12.5.0
 - @wordpress/jest-puppeteer-axe@7.5.0
 - @wordpress/keyboard-shortcuts@5.5.0
 - @wordpress/keycodes@4.5.0
 - @wordpress/lazy-import@2.5.0
 - @wordpress/list-reusable-blocks@5.5.0
 - @wordpress/media-utils@5.5.0
 - @wordpress/notices@5.5.0
 - @wordpress/npm-package-json-lint-config@5.5.0
 - @wordpress/nux@9.5.0
 - @wordpress/patterns@2.5.0
 - @wordpress/plugins@7.5.0
 - @wordpress/postcss-plugins-preset@5.5.0
 - @wordpress/postcss-themes@6.5.0
 - @wordpress/preferences@4.5.0
 - @wordpress/preferences-persistence@2.5.0
 - @wordpress/prettier-config@4.5.0
 - @wordpress/primitives@4.5.0
 - @wordpress/priority-queue@3.5.0
 - @wordpress/private-apis@1.5.0
 - @wordpress/project-management-automation@2.5.0
 - @wordpress/react-i18n@4.5.0
 - @wordpress/readable-js-assets-webpack-plugin@3.5.0
 - @wordpress/redux-routine@5.5.0
 - @wordpress/reusable-blocks@5.5.0
 - @wordpress/rich-text@7.5.0
 - @wordpress/router@1.5.0
 - @wordpress/scripts@28.5.0
 - @wordpress/server-side-render@5.5.0
 - @wordpress/shortcode@4.5.0
 - @wordpress/style-engine@2.5.0
 - @wordpress/stylelint-config@22.5.0
 - @wordpress/sync@1.5.0
 - @wordpress/token-list@3.5.0
 - @wordpress/undo-manager@1.5.0
 - @wordpress/url@4.5.0
 - @wordpress/viewport@6.5.0
 - @wordpress/warning@3.5.0
 - @wordpress/widgets@4.5.0
 - @wordpress/wordcount@4.5.0
---
 package-lock.json                             | 188 +++++++++---------
 packages/a11y/package.json                    |   2 +-
 packages/annotations/package.json             |   2 +-
 packages/api-fetch/package.json               |   2 +-
 packages/autop/package.json                   |   2 +-
 .../package.json                              |   2 +-
 packages/babel-plugin-makepot/package.json    |   2 +-
 packages/babel-preset-default/package.json    |   2 +-
 packages/base-styles/package.json             |   2 +-
 packages/blob/package.json                    |   2 +-
 packages/block-directory/package.json         |   2 +-
 packages/block-editor/package.json            |   2 +-
 packages/block-library/package.json           |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 packages/blocks/package.json                  |   2 +-
 packages/browserslist-config/package.json     |   2 +-
 packages/commands/package.json                |   2 +-
 packages/components/package.json              |   2 +-
 packages/compose/package.json                 |   2 +-
 packages/core-commands/package.json           |   2 +-
 packages/core-data/package.json               |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 packages/create-block/package.json            |   2 +-
 packages/customize-widgets/package.json       |   2 +-
 packages/data-controls/package.json           |   2 +-
 packages/data/package.json                    |   2 +-
 packages/dataviews/package.json               |   2 +-
 packages/date/package.json                    |   2 +-
 .../package.json                              |   2 +-
 packages/deprecated/package.json              |   2 +-
 packages/docgen/package.json                  |   2 +-
 packages/dom-ready/package.json               |   2 +-
 packages/dom/package.json                     |   2 +-
 .../e2e-test-utils-playwright/package.json    |   2 +-
 packages/e2e-test-utils/package.json          |   2 +-
 packages/e2e-tests/package.json               |   2 +-
 packages/edit-post/package.json               |   2 +-
 packages/edit-site/package.json               |   2 +-
 packages/edit-widgets/package.json            |   2 +-
 packages/editor/package.json                  |   2 +-
 packages/element/package.json                 |   2 +-
 packages/env/package.json                     |   2 +-
 packages/escape-html/package.json             |   2 +-
 packages/eslint-plugin/package.json           |   2 +-
 packages/format-library/package.json          |   2 +-
 packages/hooks/package.json                   |   2 +-
 packages/html-entities/package.json           |   2 +-
 packages/i18n/package.json                    |   2 +-
 packages/icons/package.json                   |   2 +-
 packages/interactivity-router/package.json    |   2 +-
 packages/interactivity/package.json           |   2 +-
 packages/interface/package.json               |   2 +-
 packages/is-shallow-equal/package.json        |   2 +-
 packages/jest-console/package.json            |   2 +-
 packages/jest-preset-default/package.json     |   2 +-
 packages/jest-puppeteer-axe/package.json      |   2 +-
 packages/keyboard-shortcuts/package.json      |   2 +-
 packages/keycodes/package.json                |   2 +-
 packages/lazy-import/package.json             |   2 +-
 packages/list-reusable-blocks/package.json    |   2 +-
 packages/media-utils/package.json             |   2 +-
 packages/notices/package.json                 |   2 +-
 .../npm-package-json-lint-config/package.json |   2 +-
 packages/nux/package.json                     |   2 +-
 packages/patterns/package.json                |   2 +-
 packages/plugins/package.json                 |   2 +-
 packages/postcss-plugins-preset/package.json  |   2 +-
 packages/postcss-themes/package.json          |   2 +-
 packages/preferences-persistence/package.json |   2 +-
 packages/preferences/package.json             |   2 +-
 packages/prettier-config/package.json         |   2 +-
 packages/primitives/package.json              |   2 +-
 packages/priority-queue/package.json          |   2 +-
 packages/private-apis/package.json            |   2 +-
 .../package.json                              |   2 +-
 packages/react-i18n/package.json              |   2 +-
 .../package.json                              |   2 +-
 packages/redux-routine/package.json           |   2 +-
 packages/reusable-blocks/package.json         |   2 +-
 packages/rich-text/package.json               |   2 +-
 packages/router/package.json                  |   2 +-
 packages/scripts/package.json                 |   2 +-
 packages/server-side-render/package.json      |   2 +-
 packages/shortcode/package.json               |   2 +-
 packages/style-engine/package.json            |   2 +-
 packages/stylelint-config/package.json        |   2 +-
 packages/sync/package.json                    |   2 +-
 packages/token-list/package.json              |   2 +-
 packages/undo-manager/package.json            |   2 +-
 packages/url/package.json                     |   2 +-
 packages/viewport/package.json                |   2 +-
 packages/warning/package.json                 |   2 +-
 packages/widgets/package.json                 |   2 +-
 packages/wordcount/package.json               |   2 +-
 96 files changed, 189 insertions(+), 189 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a28512799804aa..b0eccc961afb78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52014,7 +52014,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52028,7 +52028,7 @@
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52056,7 +52056,7 @@
 		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52070,7 +52070,7 @@
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52082,7 +52082,7 @@
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52095,7 +52095,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52113,7 +52113,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "8.4.0",
+			"version": "8.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52136,7 +52136,7 @@
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52146,7 +52146,7 @@
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52158,7 +52158,7 @@
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52193,7 +52193,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "13.4.0",
+			"version": "14.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52290,7 +52290,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "9.4.0",
+			"version": "9.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52356,7 +52356,7 @@
 		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52368,7 +52368,7 @@
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
@@ -52381,7 +52381,7 @@
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "13.4.0",
+			"version": "13.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52435,7 +52435,7 @@
 		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52445,7 +52445,7 @@
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52618,7 +52618,7 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "28.4.0",
+			"version": "28.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.7",
@@ -52744,7 +52744,7 @@
 		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52781,7 +52781,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52809,7 +52809,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52854,7 +52854,7 @@
 		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.47.0",
+			"version": "4.48.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52882,7 +52882,7 @@
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52892,7 +52892,7 @@
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52930,7 +52930,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "10.4.0",
+			"version": "10.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52959,7 +52959,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52977,7 +52977,7 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "4.0.0",
+			"version": "4.1.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.7",
@@ -53039,7 +53039,7 @@
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53054,7 +53054,7 @@
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53070,7 +53070,7 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53083,7 +53083,7 @@
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53105,7 +53105,7 @@
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53118,7 +53118,7 @@
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53130,7 +53130,7 @@
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "11.4.0",
+			"version": "11.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53153,7 +53153,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53181,7 +53181,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "8.4.0",
+			"version": "8.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53221,7 +53221,7 @@
 		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "8.4.0",
+			"version": "8.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53268,7 +53268,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53330,7 +53330,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53373,7 +53373,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "14.4.0",
+			"version": "14.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53434,7 +53434,7 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53453,7 +53453,7 @@
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "10.4.0",
+			"version": "10.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53595,7 +53595,7 @@
 		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53607,7 +53607,7 @@
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "20.1.0",
+			"version": "20.2.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53650,7 +53650,7 @@
 		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53678,7 +53678,7 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53690,7 +53690,7 @@
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53702,7 +53702,7 @@
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53722,7 +53722,7 @@
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "10.4.0",
+			"version": "10.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53736,7 +53736,7 @@
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
@@ -53749,7 +53749,7 @@
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/interactivity": "file:../interactivity"
@@ -53785,7 +53785,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53814,7 +53814,7 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53826,7 +53826,7 @@
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "8.4.0",
+			"version": "8.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53843,7 +53843,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "12.4.0",
+			"version": "12.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53861,7 +53861,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53884,7 +53884,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53902,7 +53902,7 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53915,7 +53915,7 @@
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53930,7 +53930,7 @@
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53953,7 +53953,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53969,7 +53969,7 @@
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53986,7 +53986,7 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -53999,7 +53999,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "9.4.0",
+			"version": "9.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54022,7 +54022,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54052,7 +54052,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54075,7 +54075,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54092,7 +54092,7 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54105,7 +54105,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54131,7 +54131,7 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54144,7 +54144,7 @@
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54157,7 +54157,7 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54174,7 +54174,7 @@
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54187,7 +54187,7 @@
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54199,7 +54199,7 @@
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54229,7 +54229,7 @@
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54385,7 +54385,7 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54398,7 +54398,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54443,7 +54443,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54470,7 +54470,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "7.4.0",
+			"version": "7.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54494,7 +54494,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54513,7 +54513,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "28.4.0",
+			"version": "28.5.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54967,7 +54967,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "5.4.0",
+			"version": "5.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54993,7 +54993,7 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55006,7 +55006,7 @@
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "2.4.0",
+			"version": "2.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55019,7 +55019,7 @@
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "22.4.0",
+			"version": "22.5.0",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -55036,7 +55036,7 @@
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55057,7 +55057,7 @@
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -55069,7 +55069,7 @@
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55082,7 +55082,7 @@
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55095,7 +55095,7 @@
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "6.4.0",
+			"version": "6.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55113,7 +55113,7 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "3.4.0",
+			"version": "3.5.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -55122,7 +55122,7 @@
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55150,7 +55150,7 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "4.4.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 139bc42bd01f46..c9bff2d5c73752 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index 1d571c8b372985..7706e6e0b345e9 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 837df14c307778..4c5ee98edcd12a 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/package.json b/packages/autop/package.json
index dbb5712928574c..af8830570bd049 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index bae71e052d9018..3cec94c138f99a 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index f255736856caaf..6540cb5bf4cd7d 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 311b9fd1594fd4..0ee883a0d4ee1f 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.5.0-prerelease",
+	"version": "8.5.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 1a0e6ac2c176cf..9c243e87d1f2f1 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/package.json b/packages/blob/package.json
index ae216a1f5aaa01..51987239c14515 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 9b67833be0ec8e..78a786b4c7d497 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 81f8613fb4e339..8ccaee6f0a955c 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.0.0-prerelease",
+	"version": "14.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 83d796ad11b16a..4948fed4e65a5b 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.5.0-prerelease",
+	"version": "9.5.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index 34e57586ea52c5..c3237f9282f749 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 88851d4b60d793..918ad0f2ed78b3 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index f64948af554168..43bcc5c587071e 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "13.5.0-prerelease",
+	"version": "13.5.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index 9c3213cb2ba866..429b3a9f82f339 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 67ba52b5544e8a..ea504a589acfd8 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/package.json b/packages/components/package.json
index e188c05ba2a847..7a33e5840c2311 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.5.0-prerelease",
+	"version": "28.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/compose/package.json b/packages/compose/package.json
index c5ea618103ca95..2a4dcb02803c58 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 13312adcab650a..d29688cfbcedf4 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index e15f84799aea53..d736b2b7b1b936 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 33df8821966113..751243b8b8021b 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index e2647dbd531f0c..2a344a094a4b41 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 203816ddf226fb..f0a91d54c14963 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.48.0-prerelease",
+	"version": "4.48.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 76b152a080f388..f619837ae573e0 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 9e7f2d26089ee2..40dfbdf307d2c2 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/package.json b/packages/data/package.json
index 46bd6c4a134c7e..b987476d49bd90 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.5.0-prerelease",
+	"version": "10.5.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index b410f8b9b959e3..c86a4feb9c0668 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.1.0-prerelease",
+	"version": "4.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/date/package.json b/packages/date/package.json
index a2f45532505fe4..69871d61e284fa 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index 558173f7fe21ab..ebd6e4ef19fd69 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index 681beb2e25d7d5..80f4c62e2a84b9 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index cab58965b69936..b3f6e12e0210cb 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index f80bf5f8d35fba..583f03f75d2ae6 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/package.json b/packages/dom/package.json
index f1aec564927a25..6297fa9d696e12 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 25f231a39c635f..521cbb5c753aa7 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index c594c0db136340..dc36a8fb4194bd 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.5.0-prerelease",
+	"version": "11.5.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 8e89e852e2b962..c826229a6e7a43 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.5.0-prerelease",
+	"version": "8.5.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index c080209b37e96d..8fd1bafe1ab491 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.5.0-prerelease",
+	"version": "8.5.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index fc3a9e355f2b8a..3e7e671fa1fa2f 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 8b43279e8dc0e6..20ff3129330082 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index e0d0fd93c9bc83..cbe42f3b662c68 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.5.0-prerelease",
+	"version": "14.5.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/element/package.json b/packages/element/package.json
index fc457a950090d8..382d0ac50b67c7 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/env/package.json b/packages/env/package.json
index 32e332040e4eaf..2b8efcfbf07af7 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.5.0-prerelease",
+	"version": "10.5.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index d1949cb32b974c..ef6adce54b8cf6 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 0ebe3272154055..bf83ac72435604 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "20.2.0-prerelease",
+	"version": "20.2.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index eb23caf92ef872..72d9a054ae8253 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 2c55175073f2f0..4def8c8e7a0958 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 4416d167e0cda6..ea3a1fe00f0816 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index b67d18ec695bba..50ce8f7a839de8 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0d420d9ae93e62..ad32ed6fca29e6 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.5.0-prerelease",
+	"version": "10.5.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index 1435f19e84ed44..5ac4dcbf9b9fa0 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 89b98463e08190..33d575a0102f9e 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 75b5b92621ac7b..35b41c1b309c93 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 89d9ecc1155f32..f9996eea6c480e 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 9744a87680c0f2..4f36017125015c 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.5.0-prerelease",
+	"version": "8.5.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 59c8c7e984dce5..f69c9465a80fea 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.5.0-prerelease",
+	"version": "12.5.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index 10c891a939376f..8b2b9cd4e179b6 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index 4d32c65cf55afd..d3caa86a85ba0d 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 1640c7e831bb41..4ff043a3370e89 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 9e9f77225c1794..d7737d0fe5a234 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 50a26cb0671713..79c668e8d26ac9 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 5facc75c780b67..d3bb92294fda34 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 6b952f566075de..944003de426ab5 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 3ab2d07913ee37..9fe4005668e106 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/package.json b/packages/nux/package.json
index 4fb355fe51f341..4a3ec7716c8afe 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.5.0-prerelease",
+	"version": "9.5.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index c544287e6f7404..e2e77f1d15267b 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 530a758d7bc276..bb4a9c3ecdd4cd 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 388855af3b5fdd..be6f88e9575b13 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index e56ed2c24d1b5d..20da35b26ebf14 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index de0a7dbc87164f..1d94d3635a51b8 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 2a53487932c401..c433879f01da5a 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index 0a6486068067fd..9d8020c086d90a 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index f3298b3dfe7ebe..5a922c5e243477 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index bd7069f6718141..fb7e4138395040 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index a46a499716fb10..2cb212b07bbb3f 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 5efd0e01ef43c1..03107778fcb1a1 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 89ca7018bf7da8..4b9f1949f7044b 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index 596a8a82d4f419..e084c40bbfab5c 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index a329e0091f7709..69696f72e2c430 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 08d8a71c2aff26..c3b5219f117a45 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index 66ddc465e65ac6..d120411e746731 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.5.0-prerelease",
+	"version": "7.5.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/router/package.json b/packages/router/package.json
index 6f9c44faff6e3f..e3c45b7ef0b525 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index c0b68e73e36827..675d6aa9feb6d5 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "28.5.0-prerelease",
+	"version": "28.5.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index c28611fce5b7f3..642c515c9c0253 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.5.0-prerelease",
+	"version": "5.5.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 89ed91aa947ecb..e5e7e6c382550d 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 84a76d7d0180f0..c41d1524a262a4 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.5.0-prerelease",
+	"version": "2.5.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 084b7159788c25..199822d91c733b 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "22.5.0-prerelease",
+	"version": "22.5.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
diff --git a/packages/sync/package.json b/packages/sync/package.json
index bc054732462496..4380d7261ca457 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index b99cb89e3695ab..3227b4da442eed 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 96961844152818..41d13755280bbf 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.5.0-prerelease",
+	"version": "1.5.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/package.json b/packages/url/package.json
index 57e7fdacccd271..6bee340360a501 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index 65c9df5b7ecf6c..6ef7a28a2a9e33 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.5.0-prerelease",
+	"version": "6.5.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/package.json b/packages/warning/package.json
index dd9e01fb6cf95d..418f16427cd325 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.5.0-prerelease",
+	"version": "3.5.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index b7f87a89d57c3e..b8160fc6cd41ba 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index b507e5ee3e3c84..3e2bcbe2ee4ca4 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.5.0-prerelease",
+	"version": "4.5.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

From ddadd1a95d18270908ac4a1fd8d6e354cfadf61c Mon Sep 17 00:00:00 2001
From: Damon Cook <colorful-tones@users.noreply.github.com>
Date: Wed, 7 Aug 2024 16:57:41 -0400
Subject: [PATCH 033/205] Add clarification about importing css/scss files
 (#61252)

* Add clarification about importing css/scss files

* Wrap in callout and update phrasing for WP scripts

* Fix type in Block Tutorial Styles doc
---
 .../applying-styles-with-stylesheets.md               | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
index 122ee3eaa0c27e..85ac956ff74ba6 100644
--- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
+++ b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
@@ -138,6 +138,17 @@ And a `style.css` file to load on the frontend:
 
 The files will automatically be enqueued when specified in the block.json.
 
+<div class="callout callout-info">
+
+If you are using `@wordpress/scripts` you will need to import your stylesheet within your corresponding JavaScript file in order for `@wordpress/scripts` to process the stylesheet.
+
+Example:
+
+- In `edit.js` you would place `import './editor.scss';`
+- In `index.js` you would place `import './style.scss';`
+- In `view.js` you would place `import './view.scss';` (interactive block template)
+</div>
+
 **Note:** If you have multiple files to include, you can use standard `wp_enqueue_style` functions like any other plugin or theme. You will want to use the following hooks for the block editor:
 
 -   `enqueue_block_editor_assets` - to load only in editor view

From d578bb2370d57a4e9b975da46c05bc92133f06ee Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 8 Aug 2024 09:14:00 +0200
Subject: [PATCH 034/205] DataForm: Use the fields array to define the order of
 the fields (#64335)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Zealth57 <elrae@git.wordpress.org>
---
 packages/dataviews/src/dataforms-layouts/panel/index.tsx  | 8 ++++++--
 .../dataviews/src/dataforms-layouts/regular/index.tsx     | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
index 3dc52db0adc879..151aefed12c24b 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -17,7 +17,7 @@ import { closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, NormalizedField } from '../../types';
+import type { DataFormProps, NormalizedField, Field } from '../../types';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -142,7 +142,11 @@ export default function FormPanel< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);
diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
index 1164a61196a699..0ec427ae010032 100644
--- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps } from '../../types';
+import type { DataFormProps, Field } from '../../types';
 
 export default function FormRegular< Item >( {
 	data,
@@ -19,7 +19,11 @@ export default function FormRegular< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);

From 556219922d5bd4c761c3f36409388cef838e5c0a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 8 Aug 2024 11:21:27 +0200
Subject: [PATCH 035/205] DataViews Extensibility: Allow unregistering the
 reorder-page action (#64199)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/dataviews/src/normalize-fields.ts    |   5 +-
 packages/dataviews/src/types.ts               |  14 +-
 .../src/components/post-actions/actions.js    | 113 +----------------
 .../dataviews/actions/reorder-page.native.tsx |   3 +
 .../src/dataviews/actions/reorder-page.tsx    | 120 ++++++++++++++++++
 packages/editor/src/dataviews/fields/index.ts |  25 ++++
 .../src/dataviews/store/private-actions.ts    |   4 +
 packages/editor/src/dataviews/types.ts        |   7 +
 8 files changed, 171 insertions(+), 120 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/reorder-page.native.tsx
 create mode 100644 packages/editor/src/dataviews/actions/reorder-page.tsx
 create mode 100644 packages/editor/src/dataviews/fields/index.ts

diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 860341cc946269..8cd9051cbb1cc3 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type { Field, NormalizedField } from './types';
+import type { Field, NormalizedField, ItemRecord } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -18,7 +18,8 @@ export function normalizeFields< Item >(
 
 		const getValue =
 			field.getValue ||
-			( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );
+			// @ts-ignore
+			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
 
 		const sort =
 			field.sort ??
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 25e603d8cfa234..64580a089997d1 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -47,7 +47,7 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type ItemRecord = Record< string, unknown >;
+export type ItemRecord = Object;
 
 export type FieldType = 'text' | 'integer';
 
@@ -423,6 +423,12 @@ interface ActionBase< Item > {
 	supportsBulk?: boolean;
 }
 
+export interface RenderModalProps< Item > {
+	items: Item[];
+	closeModal?: () => void;
+	onActionPerformed?: ( items: Item[] ) => void;
+}
+
 export interface ActionModal< Item > extends ActionBase< Item > {
 	/**
 	 * Modal to render when the action is triggered.
@@ -431,11 +437,7 @@ export interface ActionModal< Item > extends ActionBase< Item > {
 		items,
 		closeModal,
 		onActionPerformed,
-	}: {
-		items: Item[];
-		closeModal?: () => void;
-		onActionPerformed?: ( items: Item[] ) => void;
-	} ) => ReactElement;
+	}: RenderModalProps< Item > ) => ReactElement;
 
 	/**
 	 * Whether to hide the modal header.
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 983cc33b29e622..64afec2417cd05 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -11,7 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState, useEffect } from '@wordpress/element';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { parse } from '@wordpress/blocks';
-import { DataForm, isItemValid } from '@wordpress/dataviews';
+import { DataForm } from '@wordpress/dataviews';
 import {
 	Button,
 	TextControl,
@@ -58,10 +58,6 @@ const formDuplicateAction = {
 	fields: [ 'title' ],
 };
 
-const formOrderAction = {
-	fields: [ 'menu_order' ],
-};
-
 /**
  * Check if a template is removable.
  *
@@ -238,110 +234,6 @@ const renamePostAction = {
 	},
 };
 
-function ReorderModal( { items, closeModal, onActionPerformed } ) {
-	const [ item, setItem ] = useState( items[ 0 ] );
-	const orderInput = item.menu_order;
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	async function onOrder( event ) {
-		event.preventDefault();
-
-		if ( ! isItemValid( item, fields, formOrderAction ) ) {
-			return;
-		}
-
-		try {
-			await editEntityRecord( 'postType', item.type, item.id, {
-				menu_order: orderInput,
-			} );
-			closeModal();
-			// Persist edited entity.
-			await saveEditedEntityRecord( 'postType', item.type, item.id, {
-				throwOnError: true,
-			} );
-			createSuccessNotice( __( 'Order updated' ), {
-				type: 'snackbar',
-			} );
-			onActionPerformed?.( items );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the order' );
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
-	return (
-		<form onSubmit={ onOrder }>
-			<VStack spacing="5">
-				<div>
-					{ __(
-						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
-					) }
-				</div>
-				<DataForm
-					data={ item }
-					fields={ fields }
-					form={ formOrderAction }
-					onChange={ setItem }
-				/>
-				<HStack justify="right">
-					<Button
-						__next40pxDefaultSize
-						variant="tertiary"
-						onClick={ () => {
-							closeModal();
-						} }
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						__next40pxDefaultSize
-						variant="primary"
-						type="submit"
-						accessibleWhenDisabled
-						disabled={ isSaveDisabled }
-						__experimentalIsFocusable
-					>
-						{ __( 'Save' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		</form>
-	);
-}
-
-function useReorderPagesAction( postType ) {
-	const supportsPageAttributes = useSelect(
-		( select ) => {
-			const { getPostType } = select( coreStore );
-			const postTypeObject = getPostType( postType );
-
-			return !! postTypeObject?.supports?.[ 'page-attributes' ];
-		},
-		[ postType ]
-	);
-
-	return useMemo(
-		() =>
-			supportsPageAttributes && {
-				id: 'order-pages',
-				label: __( 'Order' ),
-				isEligible( { status } ) {
-					return status !== 'trash';
-				},
-				RenderModal: ReorderModal,
-			},
-		[ supportsPageAttributes ]
-	);
-}
-
 const useDuplicatePostAction = ( postType ) => {
 	const userCanCreatePost = useSelect(
 		( select ) => {
@@ -595,7 +487,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	}, [ registerPostTypeActions, postType ] );
 
 	const duplicatePostAction = useDuplicatePostAction( postType );
-	const reorderPagesAction = useReorderPagesAction( postType );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
 		TEMPLATE_PART_POST_TYPE,
@@ -622,7 +513,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
 			supportsTitle && renamePostAction,
-			reorderPagesAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -693,7 +583,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		isPattern,
 		postTypeObject?.viewable,
 		duplicatePostAction,
-		reorderPagesAction,
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
diff --git a/packages/editor/src/dataviews/actions/reorder-page.native.tsx b/packages/editor/src/dataviews/actions/reorder-page.native.tsx
new file mode 100644
index 00000000000000..61e4733b6c6bd9
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/reorder-page.native.tsx
@@ -0,0 +1,3 @@
+const reorderPage = undefined;
+
+export default reorderPage;
diff --git a/packages/editor/src/dataviews/actions/reorder-page.tsx b/packages/editor/src/dataviews/actions/reorder-page.tsx
new file mode 100644
index 00000000000000..9193904f0f912c
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/reorder-page.tsx
@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action, RenderModalProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, PostWithPageAttributesSupport } from '../types';
+import { orderField } from '../fields';
+
+const fields = [ orderField ];
+const formOrderAction = {
+	fields: [ 'menu_order' ],
+};
+
+function ReorderModal( {
+	items,
+	closeModal,
+	onActionPerformed,
+}: RenderModalProps< PostWithPageAttributesSupport > ) {
+	const [ item, setItem ] = useState( items[ 0 ] );
+	const orderInput = item.menu_order;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onOrder( event: React.FormEvent ) {
+		event.preventDefault();
+
+		if ( ! isItemValid( item, fields, formOrderAction ) ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal?.();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated.' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const typedError = error as CoreDataError;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<DataForm
+					data={ item }
+					fields={ fields }
+					form={ formOrderAction }
+					onChange={ setItem }
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ isSaveDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+const reorderPage: Action< PostWithPageAttributesSupport > = {
+	id: 'order-pages',
+	label: __( 'Order' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ReorderModal,
+};
+
+export default reorderPage;
diff --git a/packages/editor/src/dataviews/fields/index.ts b/packages/editor/src/dataviews/fields/index.ts
new file mode 100644
index 00000000000000..ea30d15dab600b
--- /dev/null
+++ b/packages/editor/src/dataviews/fields/index.ts
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost, PostWithPageAttributesSupport } from '../types';
+
+export const titleField: Field< BasePost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => item.title,
+};
+
+export const orderField: Field< PostWithPageAttributesSupport > = {
+	type: 'integer',
+	id: 'menu_order',
+	label: __( 'Order' ),
+	description: __( 'Determines the order of pages.' ),
+};
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 745cc0ad82e934..d5e12e298039a1 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -14,6 +14,7 @@ import resetPost from '../actions/reset-post';
 import trashPost from '../actions/trash-post';
 import permanentlyDeletePost from '../actions/permanently-delete-post';
 import restorePost from '../actions/restore-post';
+import reorderPage from '../actions/reorder-page';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -73,6 +74,9 @@ export const registerPostTypeActions =
 			.getPostType( postType ) ) as PostType;
 
 		const actions = [
+			postTypeConfig?.supports?.[ 'page-attributes' ]
+				? reorderPage
+				: undefined,
 			postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
 			resetPost,
 			restorePost,
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 47f11c88bfb978..0c31bef195eb9b 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -27,6 +27,10 @@ export interface Pattern extends BasePost {
 	wp_pattern_sync_status: string;
 }
 
+export interface PostWithPageAttributesSupport extends BasePost {
+	menu_order: number;
+}
+
 export type Post = TemplateOrTemplatePart | Pattern | BasePost;
 
 export type PostWithPermissions = Post & {
@@ -38,6 +42,9 @@ export type PostWithPermissions = Post & {
 
 export interface PostType {
 	slug: string;
+	supports?: {
+		'page-attributes'?: boolean;
+	};
 }
 
 // Will be unnecessary after typescript 5.0 upgrade.

From 236250e3fa04ad7337c305540f76ed619b0dde98 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 8 Aug 2024 11:59:28 +0200
Subject: [PATCH 036/205] Components: add "Naming conventions" section (#63714)

* Use update compound suggested notation

* Remove reference to item group as it may not reflect anymore all recent best practices

* Tweak part about experimental APIs

* Fix spacing

* Linter auto-formatting

* Add Naming Conventions section

* Update guidelines to use overloaded convention, remove references to monolithic components

* Added more details to the JSX example

* Grammar

* Split unforwarded component from forwardRef call

* Fix comment + auto-format

* Add section on JSDocs + IntelliSense requirements + recommended best practices

* Use named functions without attributing them to const

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
---
 packages/components/CONTRIBUTING.md | 219 ++++++++++++++++++++--------
 1 file changed, 155 insertions(+), 64 deletions(-)

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index f1245da7a409c6..57a9f2fb049a24 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -6,20 +6,20 @@ The following is a set of guidelines for contributing to the `@wordpress/compone
 
 This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
-For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
-- [Introducing new components](#introducing-new-components)
-- [Compatibility](#compatibility)
-- [Compound components](#compound-components)
-- [Components & Hooks](#components--hooks)
-- [TypeScript](#typescript)
-- [Styling](#styling)
-- [Context system](#context-system)
-- [Unit tests](#unit-tests)
-- [Storybook](#storybook)
-- [Documentation](#documentation)
-- [README example](#README-example)
-- [Folder structure](#folder-structure)
-- [Component versioning](#component-versioning)
+-   [Introducing new components](#introducing-new-components)
+-   [Compatibility](#compatibility)
+-   [Compound components](#compound-components)
+-   [Components & Hooks](#components--hooks)
+-   [Naming Conventions](#naming-conventions)
+-   [TypeScript](#typescript)
+-   [Styling](#styling)
+-   [Context system](#context-system)
+-   [Unit tests](#unit-tests)
+-   [Storybook](#storybook)
+-   [Documentation](#documentation)
+-   [README example](#README-example)
+-   [Folder structure](#folder-structure)
+-   [Component versioning](#component-versioning)
 
 ## Introducing new components
 
@@ -95,13 +95,13 @@ In these situations, one possible approach is to "soft-deprecate" a given legacy
 2. Updating all places in Gutenberg that use that API.
 3. Adding deprecation warnings (only after the previous point is completed, otherwise the Browser Console will be polluted by all those warnings and some e2e tests may fail).
 
-When adding new components or new props to existing components, it's recommended to prefix them with `__unstable` or `__experimental` until they're stable enough to be exposed as part of the public API.
+When adding new components or new props to existing components, it's recommended to create a [private version](/packages/private-apis/README.md)) of the component until the changes are stable enough to be exposed as part of the public API.
 
 ### Learn more
 
-- [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
-- [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis)
-- [Deprecating styles](#deprecating-styles)
+-   [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
+-   [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#legacy-experimental-apis-plugin-only-apis-and-private-apis)
+-   [Deprecating styles](#deprecating-styles)
 
 <!-- ## Polymorphic Components (i.e. the `as` prop)
 
@@ -121,20 +121,16 @@ When creating components that render a list of subcomponents, prefer to expose t
 ```jsx
 // ❌ Don't:
 <List
-	items={ [
-		{ value: 'Item 1' },
-		{ value: 'Item 2' },
-		{ value: 'Item 3' },
-	] }
+	items={ [ { value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' } ] }
 />
 ```
 
 ```jsx
 // ✅ Do:
 <List>
-	<ListItem value="Item 1" />
-	<ListItem value="Item 2" />
-	<ListItem value="Item 3" />
+	<List.Item value="Item 1" />
+	<List.Item value="Item 2" />
+	<List.Item value="Item 3" />
 </List>
 ```
 
@@ -185,25 +181,25 @@ One way to enable reusability and composition is to extract a component's underl
 
 ```tsx
 // in `hook.ts`
-function useExampleComponent( props: PolymorphicComponentProps< ExampleProps, 'div' > ) {
+function useExampleComponent(
+	props: PolymorphicComponentProps< ExampleProps, 'div' >
+) {
 	// Merge received props with the context system.
-	const { isVisible, className, ...otherProps } = useContextSystem( props, 'Example' );
+	const { isVisible, className, ...otherProps } = useContextSystem(
+		props,
+		'Example'
+	);
 
 	// Any other reusable rendering logic (e.g. computing className, state, event listeners...)
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.example,
-				isVisible && styles.visible,
-				className
-			),
+		() => cx( styles.example, isVisible && styles.visible, className ),
 		[ className, isVisible ]
 	);
 
 	return {
 		...otherProps,
-		className: classes
+		className: classes,
 	};
 }
 
@@ -220,8 +216,8 @@ function Example(
 
 A couple of good examples of how hooks are used for composition are:
 
-- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
-- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
+-   the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
+-   the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
 
 <!-- ## API Consinstency
 
@@ -236,6 +232,95 @@ A couple of good examples of how hooks are used for composition are:
 
 TDB -->
 
+## Naming Conventions
+
+It is recommended that compound components use dot notation to separate the namespace from the individual component names. The top-level compound component should be called the namespace (no dot notation).
+
+Dedicated React context should also use dot notation, while hooks should not.
+
+When exporting compound components and preparing them to be consumed, it is important that:
+
+-   the JSDocs appear correctly in IntelliSense;
+-   the top-level component's JSDoc appears in the Storybook docs page;
+-   the top-level and subcomponent's prop types appear correctly in the Storybook props table.
+
+To meet the above requirements, we recommend:
+
+-   using `Object.assign()` to add subcomponents as properties of the top-level component;
+-   using named functions for all components;
+-   setting explicitly the `displayName` on all subcomponents;
+-   adding the top-level JSDoc to the result of the `Object.assign` call;
+-   adding inline subcomponent JSDocs inside the `Object.assign` call.
+
+The following example implements all of the above recommendations.
+
+```tsx
+//=======================
+// Component.tsx
+//=======================
+import { forwardRef, createContext } from '@wordpress/element';
+
+function UnforwardedTopLevelComponent( props, ref ) {
+	/* ... */
+}
+const TopLevelComponent = forwardRef( UnforwardedTopLevelComponent );
+
+function UnforwardedSubComponent( props, ref ) {
+	/* ... */
+}
+const SubComponent = forwardRef( UnforwardedSubComponent );
+SubComponent.displayName = 'Component.SubComponent';
+
+const Context = createContext();
+
+/** The top-level component's JSDoc. */
+export const Component = Object.assign( TopLevelComponent, {
+	/** The subcomponent's JSDoc. */
+	SubComponent,
+	/** The context's JSDoc. */
+	Context,
+} );
+
+/** The hook's JSDoc. */
+export function useComponent() {
+	/* ... */
+}
+
+//=======================
+// App.tsx
+//=======================
+import { Component, useComponent } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+function CompoundComponentExample() {
+	return (
+		<Component>
+			<Component.SubComponent />
+		</Component>
+	);
+}
+
+function ContextProviderExample() {
+	return (
+		<Component.Context.Provider value={ /* ... */ }>
+			{ /* React tree */ }
+		</Component.Context.Provider>
+	);
+}
+
+function ContextConsumerExample() {
+	const componentContext = useContext( Component.Context );
+
+	// etc
+}
+
+function HookExample() {
+	const hookReturnValue = useComponent();
+
+	// etc.
+}
+```
+
 ## TypeScript
 
 We strongly encourage using TypeScript for all new components.
@@ -278,8 +363,10 @@ function UnconnectedMyComponent(
 	//   parameter (`div` in this example)
 	// - the special `as` prop (which marks the component as polymorphic),
 	//   unless the third parameter is `false`
-	props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
-) { /* ... */ }
+	props: WordPressComponentProps< ComponentOwnProps, 'div', true >
+) {
+	/* ... */
+}
 ```
 
 ### Considerations for the docgen
@@ -287,10 +374,15 @@ function UnconnectedMyComponent(
 Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
 
 ```js
-function UnconnectedMyComponent() { /* ... */ }
+function UnconnectedMyComponent() {
+	/* ... */
+}
 
 // 👇 Without this named export, the docgen will not work!
-export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
+export const MyComponent = contextConnect(
+	UnconnectedMyComponent,
+	'MyComponent'
+);
 export default MyComponent;
 ```
 
@@ -314,16 +406,15 @@ Changing the styles of a non-experimental component must be done with care. To p
 import deprecated from '@wordpress/deprecated';
 import { Wrapper } from './styles.ts';
 
-function MyComponent({ __nextHasNoOuterMargins = false }) {
+function MyComponent( { __nextHasNoOuterMargins = false } ) {
 	if ( ! __nextHasNoOuterMargins ) {
 		deprecated( 'Outer margin styles for wp.components.MyComponent', {
 			since: '6.0',
 			version: '6.2', // Set a reasonable grace period depending on impact
-			hint:
-				'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
+			hint: 'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
 		} );
 	}
-	return <Wrapper __nextHasNoOuterMargins={__nextHasNoOuterMargins} />
+	return <Wrapper __nextHasNoOuterMargins={ __nextHasNoOuterMargins } />;
 }
 ```
 
@@ -331,7 +422,7 @@ Styles should be structured so the deprecated styles are cleanly encapsulated, a
 
 ```js
 // styles.ts
-const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
+const deprecatedMargins = ( { __nextHasNoOuterMargins } ) => {
 	if ( ! __nextHasNoOuterMargins ) {
 		return css`
 			margin: 8px;
@@ -342,7 +433,7 @@ const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
 export const Wrapper = styled.div`
 	margin: 0;
 
-	${deprecatedMargins}
+	${ deprecatedMargins }
 `;
 ```
 
@@ -358,14 +449,14 @@ Not all style changes justify a formal deprecation process. The main thing to lo
 
 ##### DOES need formal deprecation
 
-- Removing an outer margin.
-- Substantial changes to width/height, such as adding or removing a size restriction.
+-   Removing an outer margin.
+-   Substantial changes to width/height, such as adding or removing a size restriction.
 
 ##### DOES NOT need formal deprecation
 
-- Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
-- Minor layout shifts of a few pixels.
-- Internal layout changes of a higher-level component.
+-   Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
+-   Minor layout shifts of a few pixels.
+-   Internal layout changes of a higher-level component.
 
 ## Context system
 
@@ -373,9 +464,9 @@ The `@wordpress/components` context system is based on [React's `Context` API](h
 
 Components can use this system via a couple of functions:
 
-- they can provide values using a shared `ContextSystemProvider` component
-- they can connect to the Context via `contextConnect`
-- they can read the "computed" values from the context via `useContextSystem`
+-   they can provide values using a shared `ContextSystemProvider` component
+-   they can connect to the Context via `contextConnect`
+-   they can read the "computed" values from the context via `useContextSystem`
 
 An example of how this is used can be found in the [`Card` component family](/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
 
@@ -400,11 +491,7 @@ export function useCard( props ) {
 import { contextConnect, ContextSystemProvider } from '../../context';
 
 function Card( props, forwardedRef ) {
-	const {
-		size,
-		isBorderless,
-		...otherComputedHookProps
-	} = useCard( props );
+	const { size, isBorderless, ...otherComputedHookProps } = useCard( props );
 
 	// [...]
 
@@ -441,7 +528,10 @@ export function useCardBody( props ) {
 	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
 	// the `size` prop will be the one set by the parent `Card` component via the Context
 	// System (unless the prop gets explicitely set on the `CardBody` component).
-	const { size = 'medium', ...otherDerivedProps } = useContextSystem( props, 'CardBody' );
+	const { size = 'medium', ...otherDerivedProps } = useContextSystem(
+		props,
+		'CardBody'
+	);
 
 	// [...]
 
@@ -457,7 +547,7 @@ Please refer to the [JavaScript Testing Overview docs](/docs/contributors/code/t
 
 All new components should add stories to the project's [Storybook](https://storybook.js.org/). Each [story](https://storybook.js.org/docs/react/get-started/whats-a-story) captures the rendered state of a UI component in isolation. This greatly simplifies working on a given component, while also serving as an interactive form of documentation.
 
-A component's story should be showcasing its different states — for example, the different variants of a  `Button`:
+A component's story should be showcasing its different states — for example, the different variants of a `Button`:
 
 ```jsx
 import Button from '../';
@@ -543,6 +633,7 @@ Prop description. With a new line before and after the description and before an
 Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](/packages/components/src/clipboard-button/README.md) for an example.
 
 <!-- Only add the next section if the component relies on the [Context System](#context-system) -->
+
 ## Context
 
 See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
@@ -601,8 +692,8 @@ As the needs of the package evolve with time, sometimes we may opt to fully rewr
 
 Here is some terminology that will be used in the upcoming sections:
 
-- "Legacy" component: the version(s) of the component that existsted on `trunk` before the rewrite;
-- API surface: the component's public APIs. It includes the list of components (and sub-components) exported from the package, their props, any associated React context. It does not include internal classnames and internal DOM structure of the components.
+-   "Legacy" component: the version(s) of the component that existsted on `trunk` before the rewrite;
+-   API surface: the component's public APIs. It includes the list of components (and subcomponents) exported from the package, their props, any associated React context. It does not include internal classnames and internal DOM structure of the components.
 
 ### Approaches
 

From 7661f457c867906d57ea19f05becef217a1ad31c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 8 Aug 2024 11:01:34 +0100
Subject: [PATCH 037/205] Stop unwanted drag and drop operations within section
 Patterns in Zoom Out mode (#64331)

* Fix conditionals

* Disable horizontal insertion points to prioritise dropping between sections
---
 .../components/block-tools/insertion-point.js | 11 +++++++++++
 .../src/components/inner-blocks/index.js      | 19 ++++++++++---------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index 9dac99e5e93124..469f7e53908cb4 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -38,6 +38,7 @@ function InbetweenInsertionPointPopover( {
 		isInserterShown,
 		isDistractionFree,
 		isNavigationMode,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -48,6 +49,7 @@ function InbetweenInsertionPointPopover( {
 			getNextBlockClientId,
 			getSettings,
 			isNavigationMode: _isNavigationMode,
+			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -79,6 +81,7 @@ function InbetweenInsertionPointPopover( {
 			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );
@@ -145,6 +148,14 @@ function InbetweenInsertionPointPopover( {
 		return null;
 	}
 
+	// Zoom out mode should only show the insertion point for the insert operation.
+	// Other operations such as "group" are when the editor tries to create a row
+	// block by grouping the block being dragged with the block it's being dropped
+	// onto.
+	if ( isZoomOutMode && operation !== 'insert' ) {
+		return null;
+	}
+
 	const orientationClassname =
 		orientation === 'horizontal' || operation === 'group'
 			? 'is-horizontal'
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 27e5064eeb6328..c8db9f8cebf905 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -206,13 +206,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getSettings,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
-			// In zoom out mode, we want to disable the drop zone for the sections.
-			// The inner blocks belonging to the section drop zone is
-			// already disabled by the blocks themselves being disabled.
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
-				_isDropZoneDisabled = clientId !== sectionRootClientId;
-			}
+
 			if ( ! clientId ) {
 				return { isDropZoneDisabled: _isDropZoneDisabled };
 			}
@@ -225,8 +219,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			if ( _isDropZoneDisabled !== undefined ) {
-				_isDropZoneDisabled = blockEditingMode === 'disabled';
+			_isDropZoneDisabled = blockEditingMode === 'disabled';
+
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				// In zoom out mode, we want to disable the drop zone for the sections.
+				// The inner blocks belonging to the section drop zone is
+				// already disabled by the blocks themselves being disabled.
+				const { sectionRootClientId } = unlock( getSettings() );
+
+				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 
 			return {

From 098c1a2e45d3daa1353af6e26e9f518a06392865 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 8 Aug 2024 13:14:59 +0200
Subject: [PATCH 038/205] DataViews: abandon the ItemRecord type (#64367)

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/dataviews/src/normalize-fields.ts |  6 ++----
 packages/dataviews/src/types.ts            | 24 +++++++---------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 8cd9051cbb1cc3..680749df5344a6 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type { Field, NormalizedField, ItemRecord } from './types';
+import type { Field, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -17,9 +17,7 @@ export function normalizeFields< Item >(
 		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
 
 		const getValue =
-			field.getValue ||
-			// @ts-ignore
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			field.getValue || ( ( { item } ) => ( item as any )[ field.id ] );
 
 		const sort =
 			field.sort ??
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 64580a089997d1..b0873e9c677f53 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -47,8 +47,6 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type ItemRecord = Object;
-
 export type FieldType = 'text' | 'integer';
 
 export type ValidationContext = {
@@ -128,21 +126,13 @@ export type Field< Item > = {
 	 * Filter config for the field.
 	 */
 	filterBy?: FilterByConfig | undefined;
-} & ( Item extends ItemRecord
-	? {
-			/**
-			 * Callback used to retrieve the value of the field from the item.
-			 * Defaults to `item[ field.id ]`.
-			 */
-			getValue?: ( args: { item: Item } ) => any;
-	  }
-	: {
-			/**
-			 * Callback used to retrieve the value of the field from the item.
-			 * Defaults to `item[ field.id ]`.
-			 */
-			getValue: ( args: { item: Item } ) => any;
-	  } );
+
+	/**
+	 * Callback used to retrieve the value of the field from the item.
+	 * Defaults to `item[ field.id ]`.
+	 */
+	getValue?: ( args: { item: Item } ) => any;
+};
 
 export type NormalizedField< Item > = Field< Item > & {
 	label: string;

From 3a21676ea456e3484949475c9b654de3e252ac45 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 8 Aug 2024 13:16:01 +0200
Subject: [PATCH 039/205] DataViews Extensibility: Allow unregistering the
 rename post action (#64366)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 132 +---------------
 .../src/dataviews/actions/rename-post.tsx     | 146 ++++++++++++++++++
 .../editor/src/dataviews/actions/utils.ts     |  14 +-
 .../src/dataviews/store/private-actions.ts    |   4 +-
 packages/editor/src/dataviews/types.ts        |  16 +-
 5 files changed, 174 insertions(+), 138 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/rename-post.tsx

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 64afec2417cd05..490bab2cc2fa4b 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -14,7 +14,6 @@ import { parse } from '@wordpress/blocks';
 import { DataForm } from '@wordpress/dataviews';
 import {
 	Button,
-	TextControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -23,7 +22,6 @@ import {
  * Internal dependencies
  */
 import {
-	TEMPLATE_ORIGINS,
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 	PATTERN_POST_TYPE,
@@ -34,7 +32,7 @@ import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 import { getItemTitle } from '../../dataviews/actions/utils';
 
 // Patterns.
-const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
+const { CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
 // TODO: this should be shared with other components (see post-fields in edit-site).
@@ -58,25 +56,6 @@ const formDuplicateAction = {
 	fields: [ 'title' ],
 };
 
-/**
- * Check if a template is removable.
- *
- * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is removable.
- */
-function isTemplateRemovable( template ) {
-	if ( ! template ) {
-		return false;
-	}
-	// In patterns list page we map the templates parts to a different object
-	// than the one returned from the endpoint. This is why we need to check for
-	// two props whether is custom or has a theme file.
-	return (
-		template?.source === TEMPLATE_ORIGINS.custom &&
-		! template?.has_theme_file
-	);
-}
-
 const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -128,112 +107,6 @@ const postRevisionsAction = {
 	},
 };
 
-const renamePostAction = {
-	id: 'rename-post',
-	label: __( 'Rename' ),
-	isEligible( post ) {
-		if ( post.status === 'trash' ) {
-			return false;
-		}
-		// Templates, template parts and patterns have special checks for renaming.
-		if (
-			! [
-				TEMPLATE_POST_TYPE,
-				TEMPLATE_PART_POST_TYPE,
-				...Object.values( PATTERN_TYPES ),
-			].includes( post.type )
-		) {
-			return post.permissions?.update;
-		}
-		// In the case of templates, we can only rename custom templates.
-		if ( post.type === TEMPLATE_POST_TYPE ) {
-			return (
-				isTemplateRemovable( post ) &&
-				post.is_custom &&
-				post.permissions?.update
-			);
-		}
-		// Make necessary checks for template parts and patterns.
-		const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE;
-		const isUserPattern = post.type === PATTERN_TYPES.user;
-		// In patterns list page we map the templates parts to a different object
-		// than the one returned from the endpoint. This is why we need to check for
-		// two props whether is custom or has a theme file.
-		const isCustomPattern =
-			isUserPattern ||
-			( isTemplatePart && post.source === TEMPLATE_ORIGINS.custom );
-		const hasThemeFile = post?.has_theme_file;
-		return isCustomPattern && ! hasThemeFile && post.permissions?.update;
-	},
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ item ] = items;
-		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
-		const { editEntityRecord, saveEditedEntityRecord } =
-			useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-
-		async function onRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord( 'postType', item.type, item.id, {
-					title,
-				} );
-				// Update state before saving rerenders the list.
-				setTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveEditedEntityRecord( 'postType', item.type, item.id, {
-					throwOnError: true,
-				} );
-				createSuccessNotice( __( 'Name updated' ), {
-					type: 'snackbar',
-				} );
-				onActionPerformed?.( items );
-			} catch ( error ) {
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: __( 'An error occurred while updating the name' );
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		}
-
-		return (
-			<form onSubmit={ onRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							type="submit"
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		);
-	},
-};
-
 const useDuplicatePostAction = ( postType ) => {
 	const userCanCreatePost = useSelect(
 		( select ) => {
@@ -494,7 +367,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	const isPattern = postType === PATTERN_POST_TYPE;
 	const isLoaded = !! postTypeObject;
 	const supportsRevisions = !! postTypeObject?.supports?.revisions;
-	const supportsTitle = !! postTypeObject?.supports?.title;
 	return useMemo( () => {
 		if ( ! isLoaded ) {
 			return [];
@@ -512,7 +384,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				userCanCreatePostType &&
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
-			supportsTitle && renamePostAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -586,7 +457,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
-		supportsTitle,
 		context,
 	] );
 }
diff --git a/packages/editor/src/dataviews/actions/rename-post.tsx b/packages/editor/src/dataviews/actions/rename-post.tsx
new file mode 100644
index 00000000000000..ef9da271111ea2
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/rename-post.tsx
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+import {
+	getItemTitle,
+	isTemplateRemovable,
+	isTemplate,
+	isTemplatePart,
+} from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+const renamePost: Action< PostWithPermissions > = {
+	id: 'rename-post',
+	label: __( 'Rename' ),
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return post.permissions?.update;
+		}
+
+		// In the case of templates, we can only rename custom templates.
+		if ( isTemplate( post ) ) {
+			return (
+				isTemplateRemovable( post ) &&
+				post.is_custom &&
+				post.permissions?.update
+			);
+		}
+
+		if ( isTemplatePart( post ) ) {
+			return (
+				post.source === TEMPLATE_ORIGINS.custom &&
+				! post?.has_theme_file &&
+				post.permissions?.update
+			);
+		}
+
+		return post.type === PATTERN_TYPES.user && post.permissions?.update;
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onRename( event: React.FormEvent ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal?.();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice( __( 'Name updated' ), {
+					type: 'snackbar',
+				} );
+				onActionPerformed?.( items );
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while updating the name' );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal?.();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default renamePost;
diff --git a/packages/editor/src/dataviews/actions/utils.ts b/packages/editor/src/dataviews/actions/utils.ts
index 56c8c9f54c8507..7da1f71728365b 100644
--- a/packages/editor/src/dataviews/actions/utils.ts
+++ b/packages/editor/src/dataviews/actions/utils.ts
@@ -12,11 +12,19 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
 
-import type { Post, TemplateOrTemplatePart } from '../types';
+import type { Post, TemplatePart, Template } from '../types';
+
+export function isTemplate( post: Post ): post is Template {
+	return post.type === TEMPLATE_POST_TYPE;
+}
+
+export function isTemplatePart( post: Post ): post is TemplatePart {
+	return post.type === TEMPLATE_PART_POST_TYPE;
+}
 
 export function isTemplateOrTemplatePart(
 	p: Post
-): p is TemplateOrTemplatePart {
+): p is Template | TemplatePart {
 	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
 }
 
@@ -39,7 +47,7 @@ export function getItemTitle( item: Post ) {
  * @param template The template entity to check.
  * @return Whether the template is removable.
  */
-export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
+export function isTemplateRemovable( template: Template | TemplatePart ) {
 	if ( ! template ) {
 		return false;
 	}
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index d5e12e298039a1..a8b1573a528b50 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -13,8 +13,9 @@ import exportPattern from '../actions/export-pattern';
 import resetPost from '../actions/reset-post';
 import trashPost from '../actions/trash-post';
 import permanentlyDeletePost from '../actions/permanently-delete-post';
-import restorePost from '../actions/restore-post';
+import renamePost from '../actions/rename-post';
 import reorderPage from '../actions/reorder-page';
+import restorePost from '../actions/restore-post';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -74,6 +75,7 @@ export const registerPostTypeActions =
 			.getPostType( postType ) ) as PostType;
 
 		const actions = [
+			postTypeConfig.supports?.title ? renamePost : undefined,
 			postTypeConfig?.supports?.[ 'page-attributes' ]
 				? reorderPage
 				: undefined,
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 0c31bef195eb9b..80b6f3c5ceb852 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -13,8 +13,17 @@ export interface BasePost {
 	type: string;
 	id: string | number;
 }
-export interface TemplateOrTemplatePart extends BasePost {
-	type: 'wp_template' | 'wp_template_part';
+
+export interface Template extends BasePost {
+	type: 'wp_template';
+	is_custom: boolean;
+	source: string;
+	has_theme_file: boolean;
+	id: string;
+}
+
+export interface TemplatePart extends BasePost {
+	type: 'wp_template_part';
 	source: string;
 	has_theme_file: boolean;
 	id: string;
@@ -31,7 +40,7 @@ export interface PostWithPageAttributesSupport extends BasePost {
 	menu_order: number;
 }
 
-export type Post = TemplateOrTemplatePart | Pattern | BasePost;
+export type Post = Template | TemplatePart | Pattern | BasePost;
 
 export type PostWithPermissions = Post & {
 	permissions: {
@@ -44,6 +53,7 @@ export interface PostType {
 	slug: string;
 	supports?: {
 		'page-attributes'?: boolean;
+		title?: boolean;
 	};
 }
 

From 5d408ce8849e6183cb39f48b071400b04a1cde78 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 8 Aug 2024 16:19:58 +0200
Subject: [PATCH 040/205] DataViews Extensibility: Allow unregistering the
 duplicate pattern action (#64373)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 27 -------------
 .../dataviews/actions/duplicate-pattern.tsx   | 40 +++++++++++++++++++
 .../src/dataviews/store/private-actions.ts    | 11 +++++
 3 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/duplicate-pattern.tsx

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 490bab2cc2fa4b..fcad5b97a13002 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -9,7 +9,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState, useEffect } from '@wordpress/element';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { parse } from '@wordpress/blocks';
 import { DataForm } from '@wordpress/dataviews';
 import {
@@ -31,10 +30,6 @@ import { unlock } from '../../lock-unlock';
 import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 import { getItemTitle } from '../../dataviews/actions/utils';
 
-// Patterns.
-const { CreatePatternModalContents, useDuplicatePatternProps } =
-	unlock( patternsPrivateApis );
-
 // TODO: this should be shared with other components (see post-fields in edit-site).
 const fields = [
 	{
@@ -268,27 +263,6 @@ const useDuplicatePostAction = ( postType ) => {
 	);
 };
 
-export const duplicatePatternAction = {
-	id: 'duplicate-pattern',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate pattern', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const duplicatedProps = useDuplicatePatternProps( {
-			pattern: item,
-			onSuccess: () => closeModal(),
-		} );
-		return (
-			<CreatePatternModalContents
-				onClose={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-				{ ...duplicatedProps }
-			/>
-		);
-	},
-};
-
 export const duplicateTemplatePartAction = {
 	id: 'duplicate-template-part',
 	label: _x( 'Duplicate', 'action label' ),
@@ -383,7 +357,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 			isTemplateOrTemplatePart &&
 				userCanCreatePostType &&
 				duplicateTemplatePartAction,
-			isPattern && userCanCreatePostType && duplicatePatternAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
diff --git a/packages/editor/src/dataviews/actions/duplicate-pattern.tsx b/packages/editor/src/dataviews/actions/duplicate-pattern.tsx
new file mode 100644
index 00000000000000..98f43a27c3628c
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/duplicate-pattern.tsx
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import type { Pattern } from '../types';
+
+// Patterns.
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+const duplicatePattern: Action< Pattern > = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== 'wp_template_part',
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: item,
+			onSuccess: () => closeModal?.(),
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+export default duplicatePattern;
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index a8b1573a528b50..6854c29bb0c4e4 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -9,6 +9,7 @@ import { doAction } from '@wordpress/hooks';
  * Internal dependencies
  */
 import deletePost from '../actions/delete-post';
+import duplicatePattern from '../actions/duplicate-pattern';
 import exportPattern from '../actions/export-pattern';
 import resetPost from '../actions/reset-post';
 import trashPost from '../actions/trash-post';
@@ -74,7 +75,17 @@ export const registerPostTypeActions =
 			.resolveSelect( coreStore )
 			.getPostType( postType ) ) as PostType;
 
+		const canCreate = await registry
+			.resolveSelect( coreStore )
+			.canUser( 'create', {
+				kind: 'postType',
+				name: postType,
+			} );
+
 		const actions = [
+			canCreate && postTypeConfig.slug === 'wp_block'
+				? duplicatePattern
+				: undefined,
 			postTypeConfig.supports?.title ? renamePost : undefined,
 			postTypeConfig?.supports?.[ 'page-attributes' ]
 				? reorderPage

From c48075b6665ec3910d00677088672c1ba9e24916 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 8 Aug 2024 16:21:26 +0100
Subject: [PATCH 041/205] Reduce gap between steps in SpacingSizesControl, add
 animation, remove first/last marks (#63803)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
---
 .../input-controls/spacing-input-control.js   | 10 +++++----
 .../spacing-sizes-control/style.scss          | 22 ++++++++++++++-----
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
index 4faf05ba254089..5cdfe47c452b23 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -188,10 +188,12 @@ export default function SpacingInputControl( {
 		name: size.name,
 	} ) );
 
-	const marks = spacingSizes.map( ( _newValue, index ) => ( {
-		value: index,
-		label: undefined,
-	} ) );
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
 
 	const sideLabel =
 		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
index 2fb33b5c565fba..69f30a8c7d1e90 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -4,6 +4,18 @@
 		margin-bottom: 0;
 	}
 
+	.is-marked {
+		.components-range-control__track {
+			transition: width ease 0.1s;
+			@include reduce-motion("transition");
+		}
+
+		.components-range-control__thumb-wrapper {
+			transition: left ease 0.1s;
+			@include reduce-motion("transition");
+		}
+	}
+
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		height: 40px;
@@ -20,18 +32,16 @@
 	}
 
 	.components-range-control__mark {
+		transform: translateX(-50%);
 		height: $grid-unit-05;
-		width: 3px;
-		background-color: #fff;
+		width: math.div($grid-unit-05, 2);
+		background-color: $white;
 		z-index: 1;
+		top: -#{$grid-unit-05};
 	}
 
 	.components-range-control__marks {
 		margin-top: 17px;
-
-		:first-child {
-			display: none;
-		}
 	}
 
 	.components-range-control__thumb-wrapper {

From 88127e20ff7386ae75417ee4c6f5e19b11d542ca Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 8 Aug 2024 20:30:54 +0400
Subject: [PATCH 042/205] Block Editor: Don't hide the toolbar for an empty
 default block in HTML mode (#64374)

Unlinked contributors: designsimply.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: Thelmachido <thelmachido@git.wordpress.org>
Co-authored-by: mboynes <mboynes@git.wordpress.org>
---
 .../src/components/block-tools/use-show-block-tools.js       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 33807445b8da74..07e0ebd16a64b0 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -20,6 +20,7 @@ export function useShowBlockTools() {
 			getSelectedBlockClientId,
 			getFirstMultiSelectedBlockClientId,
 			getBlock,
+			getBlockMode,
 			getSettings,
 			hasMultiSelection,
 			__unstableGetEditorMode,
@@ -33,7 +34,9 @@ export function useShowBlockTools() {
 		const editorMode = __unstableGetEditorMode();
 		const hasSelectedBlock = !! clientId && !! block;
 		const isEmptyDefaultBlock =
-			hasSelectedBlock && isUnmodifiedDefaultBlock( block );
+			hasSelectedBlock &&
+			isUnmodifiedDefaultBlock( block ) &&
+			getBlockMode( clientId ) !== 'html';
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&

From c495c7d21e3d0c3a6d3981a332202a0dd5d11ba5 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 8 Aug 2024 20:34:09 +0400
Subject: [PATCH 043/205] Upgrade Playwright to v1.46 (#64372)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>
---
 package-lock.json             | 48 +++++++++++++++++------------------
 package.json                  |  2 +-
 packages/scripts/package.json |  2 +-
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b0eccc961afb78..66c32076d3b364 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -99,7 +99,7 @@
 				"@octokit/rest": "16.26.0",
 				"@octokit/types": "6.34.0",
 				"@octokit/webhooks-types": "5.8.0",
-				"@playwright/test": "1.45.1",
+				"@playwright/test": "1.46.0",
 				"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 				"@react-native/babel-preset": "0.73.10",
 				"@react-native/metro-babel-transformer": "0.73.10",
@@ -6950,12 +6950,12 @@
 			}
 		},
 		"node_modules/@playwright/test": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
-			"integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.0.tgz",
+			"integrity": "sha512-/QYft5VArOrGRP5pgkrfKksqsKA6CEFyGQ/gjNe6q0y4tZ1aaPfq4gIjudr1s3D+pXyrPRdsy4opKDrjBabE5w==",
 			"dev": true,
 			"dependencies": {
-				"playwright": "1.45.1"
+				"playwright": "1.46.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
@@ -41083,12 +41083,12 @@
 			"dev": true
 		},
 		"node_modules/playwright": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
-			"integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.0.tgz",
+			"integrity": "sha512-XYJ5WvfefWONh1uPAUAi0H2xXV5S3vrtcnXe6uAOgdGi3aSpqOSXX08IAjXW34xitfuOJsvXU5anXZxPSEQiJw==",
 			"dev": true,
 			"dependencies": {
-				"playwright-core": "1.45.1"
+				"playwright-core": "1.46.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
@@ -41101,9 +41101,9 @@
 			}
 		},
 		"node_modules/playwright-core": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
-			"integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.0.tgz",
+			"integrity": "sha512-9Y/d5UIwuJk8t3+lhmMSAJyNP1BUC/DqP3cQJDQQL/oWqAiuPTLgy7Q5dzglmTLwcBRdetzgNM/gni7ckfTr6A==",
 			"dev": true,
 			"bin": {
 				"playwright-core": "cli.js"
@@ -54585,7 +54585,7 @@
 				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
-				"@playwright/test": "^1.45.1",
+				"@playwright/test": "^1.46.0",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0"
 			}
@@ -60001,12 +60001,12 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
-			"integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.0.tgz",
+			"integrity": "sha512-/QYft5VArOrGRP5pgkrfKksqsKA6CEFyGQ/gjNe6q0y4tZ1aaPfq4gIjudr1s3D+pXyrPRdsy4opKDrjBabE5w==",
 			"dev": true,
 			"requires": {
-				"playwright": "1.45.1"
+				"playwright": "1.46.0"
 			}
 		},
 		"@pmmmwh/react-refresh-webpack-plugin": {
@@ -87337,19 +87337,19 @@
 			"dev": true
 		},
 		"playwright": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
-			"integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.0.tgz",
+			"integrity": "sha512-XYJ5WvfefWONh1uPAUAi0H2xXV5S3vrtcnXe6uAOgdGi3aSpqOSXX08IAjXW34xitfuOJsvXU5anXZxPSEQiJw==",
 			"dev": true,
 			"requires": {
 				"fsevents": "2.3.2",
-				"playwright-core": "1.45.1"
+				"playwright-core": "1.46.0"
 			}
 		},
 		"playwright-core": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
-			"integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
+			"version": "1.46.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.0.tgz",
+			"integrity": "sha512-9Y/d5UIwuJk8t3+lhmMSAJyNP1BUC/DqP3cQJDQQL/oWqAiuPTLgy7Q5dzglmTLwcBRdetzgNM/gni7ckfTr6A==",
 			"dev": true
 		},
 		"please-upgrade-node": {
diff --git a/package.json b/package.json
index fac57093a852c9..e4466eb4f470e1 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
-		"@playwright/test": "1.45.1",
+		"@playwright/test": "1.46.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 675d6aa9feb6d5..ff8e26b0e00c12 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -93,7 +93,7 @@
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@playwright/test": "^1.45.1",
+		"@playwright/test": "^1.46.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},

From 025125bc3734a46b2a6423f7e4287355032c2e2b Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:48:56 +1000
Subject: [PATCH 044/205] Background image: ensure consistency with defaults
 and fix reset/remove functionality (#64328)

* Fixes miscellaneous bugs in the background image default values and controls.
- checks global styles for uploaded images and applies defaults
- changes the default position from "center" to "50% 50%" so it displays in the controls
- ensures that reset/remove functionality closes the panel and removes image
- do not save already-inherited styles to the block, and don't apply defaults where an inherited style already exists.

* Reduce vertical height a smidge

* Ensure defaults are accurately displayed in the background control panel.
Add defaults for position '50% 50%' for blocks so it can be displayed in the background panel controls
Pass inherited values to setBackgroundStyleDefaults so as not apply/overwrite inherited styles.
Tighten up logic in setBackgroundStyleDefaults so that background position isn't set when an inherited value is contain and the block style is something else.

* Simplify default logic for blocks with uploaded images

* Update tests.

* Adds tests for setBackgroundStyleDefaults

* Simplify the inheritence checks. For uploaded images in global styles and block supports, always apply the defaults.

* Simplify the inheritence checks. For uploaded images, always apply the defaults.

* Changelog

* Revert background.php change and comment in background-panel.js


Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 backport-changelog/6.7/7137.md                |  1 +
 lib/block-supports/background.php             |  2 +-
 lib/class-wp-theme-json-gutenberg.php         |  2 +-
 .../global-styles/background-panel.js         | 74 +++++++++++++------
 .../test/use-global-styles-output.js          |  2 +-
 packages/block-editor/src/hooks/background.js | 39 +++++-----
 .../block-editor/src/hooks/test/background.js | 60 +++++++++++++++
 .../components/global-styles/screen-block.js  |  3 +-
 phpunit/block-supports/background-test.php    | 24 +++---
 phpunit/class-wp-theme-json-test.php          |  2 +-
 10 files changed, 151 insertions(+), 58 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/test/background.js

diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md
index 834cb29a21e6d9..1eba52ebaf5087 100644
--- a/backport-changelog/6.7/7137.md
+++ b/backport-changelog/6.7/7137.md
@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7137
 
 * https://github.com/WordPress/gutenberg/pull/64192
+* https://github.com/WordPress/gutenberg/pull/64328
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 811608127f47ed..a1d99133c1fc09 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -62,7 +62,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
-			$background_styles['backgroundPosition'] = 'center';
+			$background_styles['backgroundPosition'] = '50% 50%';
 		}
 	}
 
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index ad8722091c2d48..7558438dcbe745 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2391,7 +2391,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 					$styles['background']['backgroundSize'] = $styles['background']['backgroundSize'] ?? 'cover';
 					// If the background size is set to `contain` and no position is set, set the position to `center`.
 					if ( 'contain' === $styles['background']['backgroundSize'] && empty( $styles['background']['backgroundPosition'] ) ) {
-						$styles['background']['backgroundPosition'] = 'center';
+						$styles['background']['backgroundPosition'] = '50% 50%';
 					}
 				}
 				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 61f572f970b762..906202206d1b76 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -268,8 +268,10 @@ function BackgroundImageControls( {
 	style,
 	inheritedValue,
 	onRemoveImage = noop,
+	onResetImage = noop,
 	displayInPanel,
 	themeFileURIs,
+	defaultValues,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -319,12 +321,8 @@ function BackgroundImageControls( {
 		}
 
 		const sizeValue =
-			style?.background?.backgroundSize ||
-			inheritedValue?.background?.backgroundSize;
-		const positionValue =
-			style?.background?.backgroundPosition ||
-			inheritedValue?.background?.backgroundPosition;
-
+			style?.background?.backgroundSize || defaultValues?.backgroundSize;
+		const positionValue = style?.background?.backgroundPosition;
 		onChange(
 			setImmutably( style, [ 'background' ], {
 				...style?.background,
@@ -335,6 +333,12 @@ function BackgroundImageControls( {
 					title: media.title || undefined,
 				},
 				backgroundPosition:
+					/*
+					 * A background image uploaded and set in the editor receives a default background position of '50% 0',
+					 * when the background image size is the equivalent of "Tile".
+					 * This is to increase the chance that the image's focus point is visible.
+					 * This is in-editor only to assist with the user experience.
+					 */
 					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
 						? '50% 0'
 						: positionValue,
@@ -372,7 +376,9 @@ function BackgroundImageControls( {
 
 	const onRemove = () =>
 		onChange(
-			setImmutably( style, [ 'background', 'backgroundImage' ], 'none' )
+			setImmutably( style, [ 'background' ], {
+				backgroundImage: 'none',
+			} )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 	const imgLabel =
@@ -413,6 +419,7 @@ function BackgroundImageControls( {
 						onClick={ () => {
 							closeAndFocus();
 							onRemove();
+							onRemoveImage();
 						} }
 					>
 						{ __( 'Remove' ) }
@@ -422,7 +429,7 @@ function BackgroundImageControls( {
 					<MenuItem
 						onClick={ () => {
 							closeAndFocus();
-							onRemoveImage();
+							onResetImage();
 						} }
 					>
 						{ __( 'Reset ' ) }
@@ -453,9 +460,7 @@ function BackgroundSizeControls( {
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
-	const isUploadedImage =
-		style?.background?.backgroundImage?.id ||
-		inheritedValue?.background?.backgroundImage?.id;
+	const isUploadedImage = style?.background?.backgroundImage?.id;
 	const positionValue =
 		style?.background?.backgroundPosition ||
 		inheritedValue?.background?.backgroundPosition;
@@ -469,11 +474,19 @@ function BackgroundSizeControls( {
 	 * Block-level controls may have different defaults to root-level controls.
 	 * A falsy value is treated by default as `auto` (Tile).
 	 */
-	const currentValueForToggle =
+	let currentValueForToggle =
 		! sizeValue && isUploadedImage
 			? defaultValues?.backgroundSize
 			: sizeValue || 'auto';
-
+	/*
+	 * The incoming value could be a value + unit, e.g. '20px'.
+	 * In this case set the value to 'tile'.
+	 */
+	currentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(
+		currentValueForToggle
+	)
+		? 'auto'
+		: currentValueForToggle;
 	/*
 	 * If the current value is `cover` and the repeat value is `undefined`, then
 	 * the toggle should be unchecked as the default state. Otherwise, the toggle
@@ -510,6 +523,7 @@ function BackgroundSizeControls( {
 			 * receives a default background position of '50% 0',
 			 * when the toggle switches to "Tile". This is to increase the chance that
 			 * the image's focus point is visible.
+			 * This is in-editor only to assist with the user experience.
 			 */
 			if ( !! style?.background?.backgroundImage?.id ) {
 				nextPosition = '50% 0';
@@ -562,14 +576,20 @@ function BackgroundSizeControls( {
 			)
 		);
 
+	// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.
+	const backgroundPositionValue =
+		! positionValue && isUploadedImage && 'contain' === sizeValue
+			? defaultValues?.backgroundPosition
+			: positionValue;
+
 	return (
-		<VStack spacing={ 4 } className="single-column">
+		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Focal point' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
-				value={ backgroundPositionToCoords( positionValue ) }
+				value={ backgroundPositionToCoords( backgroundPositionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleControl
@@ -577,9 +597,6 @@ function BackgroundSizeControls( {
 				label={ __( 'Fixed background' ) }
 				checked={ attachmentValue === 'fixed' }
 				onChange={ toggleScrollWithPage }
-				help={ __(
-					'Whether your image should scroll with the page or stay fixed in place.'
-				) }
 			/>
 			<ToggleGroupControl
 				__nextHasNoMarginBottom
@@ -660,7 +677,7 @@ function BackgroundToolsPanel( {
 	return (
 		<VStack
 			as={ ToolsPanel }
-			spacing={ 4 }
+			spacing={ 2 }
 			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
@@ -700,8 +717,13 @@ export default function BackgroundPanel( {
 		hasBackgroundImageValue( value ) ||
 		hasBackgroundImageValue( inheritedValue );
 
+	const imageValue =
+		value?.background?.backgroundImage ||
+		inheritedValue?.background?.backgroundImage;
+
 	const shouldShowBackgroundImageControls =
 		hasImageValue &&
+		'none' !== imageValue &&
 		( settings?.background?.backgroundSize ||
 			settings?.background?.backgroundPosition ||
 			settings?.background?.backgroundRepeat );
@@ -725,7 +747,7 @@ export default function BackgroundPanel( {
 				) }
 			>
 				<ToolsPanelItem
-					hasValue={ () => hasImageValue }
+					hasValue={ () => !! value?.background }
 					label={ __( 'Image' ) }
 					onDeselect={ resetBackground }
 					isShownByDefault={ defaultControls.backgroundImage }
@@ -749,10 +771,14 @@ export default function BackgroundPanel( {
 									inheritedValue={ inheritedValue }
 									themeFileURIs={ themeFileURIs }
 									displayInPanel
-									onRemoveImage={ () => {
+									onResetImage={ () => {
 										setIsDropDownOpen( false );
 										resetBackground();
 									} }
+									onRemoveImage={ () =>
+										setIsDropDownOpen( false )
+									}
+									defaultValues={ defaultValues }
 								/>
 								<BackgroundSizeControls
 									onChange={ onChange }
@@ -770,6 +796,12 @@ export default function BackgroundPanel( {
 							style={ value }
 							inheritedValue={ inheritedValue }
 							themeFileURIs={ themeFileURIs }
+							defaultValues={ defaultValues }
+							onResetImage={ () => {
+								setIsDropDownOpen( false );
+								resetBackground();
+							} }
+							onRemoveImage={ () => setIsDropDownOpen( false ) }
 						/>
 					) }
 				</ToolsPanelItem>
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index f648e1db845b87..e2530fdb85f812 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -1061,7 +1061,7 @@ describe( 'global styles renderer', () => {
 				)
 			).toEqual( [
 				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
-				'background-position: center',
+				'background-position: 50% 50%',
 				'background-size: contain',
 			] );
 		} );
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index cd0b017831b795..0d38068cdefeea 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -23,9 +23,10 @@ import {
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
-// Initial control values where no block style is set.
-const BACKGROUND_DEFAULT_VALUES = {
+// Initial control values.
+export const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 /**
@@ -55,31 +56,28 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 }
 
 export function setBackgroundStyleDefaults( backgroundStyle ) {
-	if ( ! backgroundStyle ) {
+	if ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {
 		return;
 	}
 
-	const backgroundImage = backgroundStyle?.backgroundImage;
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
-		if ( ! backgroundStyle?.backgroundSize ) {
-			backgroundStylesWithDefaults = {
-				backgroundSize: 'cover',
-			};
-		}
-
-		if (
-			'contain' === backgroundStyle?.backgroundSize &&
-			! backgroundStyle?.backgroundPosition
-		) {
-			backgroundStylesWithDefaults = {
-				backgroundPosition: 'center',
-			};
-		}
+	if ( ! backgroundStyle?.backgroundSize ) {
+		backgroundStylesWithDefaults = {
+			backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+		};
 	}
 
+	if (
+		'contain' === backgroundStyle?.backgroundSize &&
+		! backgroundStyle?.backgroundPosition
+	) {
+		backgroundStylesWithDefaults = {
+			backgroundPosition:
+				BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+		};
+	}
 	return backgroundStylesWithDefaults;
 }
 
@@ -147,6 +145,7 @@ export function BackgroundImagePanel( {
 				style: getBlockAttributes( clientId )?.style,
 				_links: _settings[ globalStylesLinksDataKey ],
 				/*
+				 * To ensure we pass down the right inherited values:
 				 * @TODO 1. Pass inherited value down to all block style controls,
 				 *   See: packages/block-editor/src/hooks/style.js
 				 * @TODO 2. Add support for block style variations,
@@ -187,7 +186,7 @@ export function BackgroundImagePanel( {
 			inheritedValue={ inheritedValue }
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
diff --git a/packages/block-editor/src/hooks/test/background.js b/packages/block-editor/src/hooks/test/background.js
new file mode 100644
index 00000000000000..030e88ae67fbd8
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/background.js
@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import {
+	setBackgroundStyleDefaults,
+	BACKGROUND_BLOCK_DEFAULT_VALUES,
+} from '../background';
+
+describe( 'background', () => {
+	describe( 'setBackgroundStyleDefaults', () => {
+		const backgroundStyles = {
+			backgroundImage: { id: 123, url: 'image.png' },
+		};
+		const backgroundStylesContain = {
+			backgroundImage: { id: 123, url: 'image.png' },
+			backgroundSize: 'contain',
+		};
+		const backgroundStylesNoURL = { backgroundImage: { id: 123 } };
+		it.each( [
+			[
+				'return background size default',
+				backgroundStyles,
+				{
+					backgroundSize:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+				},
+			],
+			[ 'return early if no styles are passed', undefined, undefined ],
+			[
+				'return early if images has no id',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return early if images has no URL',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return background position default',
+				backgroundStylesContain,
+				{
+					backgroundPosition:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+				},
+			],
+			[
+				'not apply background position value if one already exists in styles',
+				{
+					...backgroundStylesContain,
+					backgroundPosition: 'center',
+				},
+				undefined,
+			],
+		] )( 'should %s', ( message, styles, expected ) => {
+			const result = setBackgroundStyleDefaults( styles );
+			expect( result ).toEqual( expected );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index a16a01956f5a88..dee921f37f1e8a 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -25,9 +25,10 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
-// Initial control values where no block style is set.
+// Initial control values.
 const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 function applyFallbackStyle( border ) {
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 33e72e9b070106..4c949fa82257d3 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -122,7 +122,7 @@ public function test_background_block_support( $theme_name, $block_name, $backgr
 	 */
 	public function data_background_block_support() {
 		return array(
-			'background image style is applied' => array(
+			'background image style is applied to uploaded images' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
 				'block_name'          => 'test/background-rules-are-output',
 				'background_settings' => array(
@@ -130,8 +130,8 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
+						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -157,14 +157,14 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage'      => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
+						'id'  => 123,
 					),
 					'backgroundRepeat'     => 'no-repeat',
 					'backgroundSize'       => 'contain',
 					'backgroundAttachment' => 'fixed',
 				),
-				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
 			'background image style is appended if a style attribute already exists' => array(
@@ -175,8 +175,8 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
+						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -190,8 +190,8 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
+						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -205,8 +205,8 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
+						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div>Content</div>',
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index b77b54ecc7d872..d366e0df44c4a2 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -4900,7 +4900,7 @@ public function test_get_block_background_image_styles() {
 			),
 		);
 
-		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center;background-size: contain;}";
+		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: 50% 50%;background-size: contain;}";
 		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with core/quote default background styles do not match expectations' );
 
 		$verse_node = array(

From 7c079587eba227e14b09cb34a1cafeeb7b941baa Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:31:12 +0900
Subject: [PATCH 045/205] Don't allow duplicating template parts in
 non-block-based themes (#64379)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
---
 .../editor/src/components/post-actions/actions.js   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index fcad5b97a13002..425636cefede46 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -313,9 +313,15 @@ export const duplicateTemplatePartAction = {
 };
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const { defaultActions, postTypeObject, userCanCreatePostType } = useSelect(
+	const {
+		defaultActions,
+		postTypeObject,
+		userCanCreatePostType,
+		isBlockBasedTheme,
+	} = useSelect(
 		( select ) => {
-			const { getPostType, canUser } = select( coreStore );
+			const { getPostType, canUser, getCurrentTheme } =
+				select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
 			return {
 				postTypeObject: getPostType( postType ),
@@ -324,10 +330,12 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 					kind: 'postType',
 					name: postType,
 				} ),
+				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
 			};
 		},
 		[ postType ]
 	);
+
 	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
 	useEffect( () => {
 		registerPostTypeActions( postType );
@@ -356,6 +364,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				: false,
 			isTemplateOrTemplatePart &&
 				userCanCreatePostType &&
+				isBlockBasedTheme &&
 				duplicateTemplatePartAction,
 			...defaultActions,
 		].filter( Boolean );

From b6da9e018677c06a49fc06db1e69aa4bd1460e40 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:31:53 +0900
Subject: [PATCH 046/205] Fix: Cancel button in duplicate template part modal
 doesn't work (#64377)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/editor/src/components/post-actions/actions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 425636cefede46..5e727376a92258 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -307,6 +307,7 @@ export const duplicateTemplatePartAction = {
 				onCreate={ onTemplatePartSuccess }
 				onError={ closeModal }
 				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				closeModal={ closeModal }
 			/>
 		);
 	},

From 00d28d0e3dcea96b8a1f580bc25192fd197d3567 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 9 Aug 2024 09:45:01 +0800
Subject: [PATCH 047/205] Grid: Prevent highlight of cells when dragging a
 block if block type can't be dropped into grid (#64290)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
---
 .../src/components/grid/grid-visualizer.js           | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
index e1d35f012b4d81..fad2f5cfb14835 100644
--- a/packages/block-editor/src/components/grid/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -206,8 +206,12 @@ function useGridVisualizerDropZone(
 	gridInfo,
 	setHighlightedRect
 ) {
-	const { getBlockAttributes, getBlockRootClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getBlockRootClientId,
+		canInsertBlockType,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const {
 		updateBlockAttributes,
 		moveBlocksToPosition,
@@ -221,6 +225,10 @@ function useGridVisualizerDropZone(
 
 	return useDropZoneWithValidation( {
 		validateDrag( srcClientId ) {
+			const blockName = getBlockName( srcClientId );
+			if ( ! canInsertBlockType( blockName, gridClientId ) ) {
+				return false;
+			}
 			const attributes = getBlockAttributes( srcClientId );
 			const rect = new GridRect( {
 				columnStart: column,

From b11bdc0645a0503437389c29d39ac266ba6cd2bf Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Fri, 9 Aug 2024 09:46:40 +0530
Subject: [PATCH 048/205] Add border support to preformatted block (#64302)

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 packages/block-library/src/preformatted/block.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index fbec3581bc9d42..a1726ee8b0d43c 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -43,6 +43,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-preformatted"

From 0ceac8f5e8b74cbeb7ef36c44009c67ec5fabbf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 9 Aug 2024 09:16:08 +0200
Subject: [PATCH 049/205] Quick edit: add Date as field and `datetime` as field
 type (#64267)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  4 +
 .../components/src/date-time/time/index.tsx   | 38 +++++---
 packages/components/src/date-time/types.ts    | 12 ++-
 .../dataform/stories/index.story.tsx          | 18 +++-
 .../components/dataviews/stories/fixtures.js  | 16 ++++
 .../dataviews/src/field-types/datetime.tsx    | 95 +++++++++++++++++++
 packages/dataviews/src/field-types/index.tsx  |  5 +
 .../src/test/filter-and-sort-data-view.js     | 28 ++++++
 packages/dataviews/src/types.ts               |  2 +-
 .../src/components/post-edit/index.js         |  5 +-
 .../src/components/post-fields/index.js       |  1 +
 11 files changed, 206 insertions(+), 18 deletions(-)
 create mode 100644 packages/dataviews/src/field-types/datetime.tsx

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ef0108b09a741d..47afb0711090d8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
+
 ## 28.5.0 (2024-08-07)
 
 ### Bug Fixes
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index 5f706d69190095..90a8a901354a39 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
+import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimeInputValue, TimePickerProps } from '../types';
@@ -61,6 +62,7 @@ export function TimePicker( {
 	currentTime,
 	onChange,
 	dateOrder: dateOrderProp,
+	hideLabelFromVision = false,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -219,12 +221,18 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Time' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Time' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Time' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -241,12 +249,18 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Date' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Date' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Date' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
diff --git a/packages/components/src/date-time/types.ts b/packages/components/src/date-time/types.ts
index b3716d5c135c64..1f2298d9d450b5 100644
--- a/packages/components/src/date-time/types.ts
+++ b/packages/components/src/date-time/types.ts
@@ -29,6 +29,13 @@ export type TimePickerProps = {
 	 * time as an argument.
 	 */
 	onChange?: ( time: string ) => void;
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
 };
 
 export type TimeInputValue = {
@@ -130,7 +137,10 @@ export type DatePickerProps = {
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
-	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+	Omit<
+		TimePickerProps,
+		'currentTime' | 'onChange' | 'hideLabelFromVision'
+	> & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 4863eb24b4ede4..7808756b7b6557 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -33,6 +33,20 @@ const fields = [
 		label: 'Order',
 		type: 'integer' as const,
 	},
+	{
+		id: 'date',
+		label: 'Date',
+		type: 'datetime' as const,
+	},
+	{
+		id: 'birthdate',
+		label: 'Date as options',
+		type: 'datetime' as const,
+		elements: [
+			{ value: '1970-02-23T12:00:00', label: "Jane's birth date" },
+			{ value: '1950-02-23T12:00:00', label: "John's birth date" },
+		],
+	},
 	{
 		id: 'author',
 		label: 'Author',
@@ -59,10 +73,12 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 		order: 2,
 		author: 1,
 		status: 'draft',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
 	} );
 
 	const form = {
-		fields: [ 'title', 'order', 'author', 'status' ],
+		fields: [ 'title', 'order', 'author', 'status', 'date', 'birthdate' ],
 	};
 
 	return (
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js
index 536c5e66e6ce97..f89cea81e6f15d 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.js
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js
@@ -23,6 +23,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'Space', 'NASA' ],
 		satellites: 0,
+		date: '2021-01-01T00:00:00Z',
 	},
 	{
 		id: 2,
@@ -32,6 +33,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'Space' ],
 		satellites: 0,
+		date: '2019-01-02T00:00:00Z',
 	},
 	{
 		id: 3,
@@ -41,6 +43,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'NASA' ],
 		satellites: 0,
+		date: '2025-01-03T00:00:00Z',
 	},
 	{
 		id: 4,
@@ -50,6 +53,7 @@ export const data = [
 		type: 'Ice giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 14,
+		date: '2020-01-01T00:00:00Z',
 	},
 	{
 		id: 5,
@@ -59,6 +63,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
+		date: '2020-01-02T01:00:00Z',
 	},
 	{
 		id: 6,
@@ -68,6 +73,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
+		date: '2020-01-02T00:00:00Z',
 	},
 	{
 		id: 7,
@@ -77,6 +83,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 1,
+		date: '2023-01-03T00:00:00Z',
 	},
 	{
 		id: 8,
@@ -86,6 +93,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 2,
+		date: '2020-01-01T00:00:00Z',
 	},
 	{
 		id: 9,
@@ -95,6 +103,7 @@ export const data = [
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 95,
+		date: '2017-01-01T00:01:00Z',
 	},
 	{
 		id: 10,
@@ -104,6 +113,7 @@ export const data = [
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 146,
+		date: '2020-02-01T00:02:00Z',
 	},
 	{
 		id: 11,
@@ -113,6 +123,7 @@ export const data = [
 		type: 'Ice giant',
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 		satellites: 28,
+		date: '2020-03-01T00:00:00Z',
 	},
 ];
 
@@ -175,6 +186,11 @@ export const fields = [
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
+	{
+		id: 'date',
+		label: 'Date',
+		type: 'datetime',
+	},
 	{
 		label: 'Type',
 		id: 'type',
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
new file mode 100644
index 00000000000000..3861a0db635d7b
--- /dev/null
+++ b/packages/dataviews/src/field-types/datetime.tsx
@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TimePicker, SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortDirection,
+	ValidationContext,
+	DataFormControlProps,
+} from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function Edit< Item >( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const elements = [
+			/*
+			 * Value can be undefined when:
+			 *
+			 * - the field is not required
+			 * - in bulk editing
+			 *
+			 */
+			{ label: __( 'Select item' ), value: '' },
+			...field.elements,
+		];
+
+		return (
+			<SelectControl
+				label={ label }
+				value={ value }
+				options={ elements }
+				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+			/>
+		);
+	}
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<TimePicker
+				currentTime={ value }
+				onChange={ onChangeControl }
+				hideLabelFromVision
+			/>
+		</fieldset>
+	);
+}
+
+export default {
+	sort,
+	isValid,
+	Edit,
+};
diff --git a/packages/dataviews/src/field-types/index.tsx b/packages/dataviews/src/field-types/index.tsx
index 3d1d824ec36bf2..eb9dada479c6bf 100644
--- a/packages/dataviews/src/field-types/index.tsx
+++ b/packages/dataviews/src/field-types/index.tsx
@@ -4,6 +4,7 @@
 import type { FieldType, SortDirection, ValidationContext } from '../types';
 import { default as integer } from './integer';
 import { default as text } from './text';
+import { default as datetime } from './datetime';
 
 /**
  *
@@ -20,6 +21,10 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 		return text;
 	}
 
+	if ( 'datetime' === type ) {
+		return datetime;
+	}
+
 	return {
 		sort: ( a: any, b: any, direction: SortDirection ) => {
 			if ( typeof a === 'number' && typeof b === 'number' ) {
diff --git a/packages/dataviews/src/test/filter-and-sort-data-view.js b/packages/dataviews/src/test/filter-and-sort-data-view.js
index 7538b975a30992..7f0b3a30e8587c 100644
--- a/packages/dataviews/src/test/filter-and-sort-data-view.js
+++ b/packages/dataviews/src/test/filter-and-sort-data-view.js
@@ -268,6 +268,34 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
 
+	it( 'should sort datetime field types', () => {
+		const { data: resultDesc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'desc' },
+			},
+			fields
+		);
+		expect( resultDesc ).toHaveLength( 11 );
+		expect( resultDesc[ 0 ].title ).toBe( 'NASA' );
+		expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
+		expect( resultDesc[ 9 ].title ).toBe( 'Space' );
+		expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
+
+		const { data: resultAsc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'asc' },
+			},
+			fields
+		);
+		expect( resultAsc ).toHaveLength( 11 );
+		expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
+		expect( resultAsc[ 1 ].title ).toBe( 'Space' );
+		expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
+		expect( resultAsc[ 10 ].title ).toBe( 'NASA' );
+	} );
+
 	it( 'should sort untyped fields if the value is a number', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index b0873e9c677f53..2e87d1371acb61 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -47,7 +47,7 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type FieldType = 'text' | 'integer';
+export type FieldType = 'text' | 'integer' | 'datetime';
 
 export type ValidationContext = {
 	elements?: Option[];
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 86e2bf4d6edea1..03158e00862154 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -47,9 +47,9 @@ function PostEditForm( { postType, postId } ) {
 	const { fields } = usePostFields();
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'author' ],
+		fields: [ 'title', 'author', 'date' ],
 	};
-	const [ edits, setEdits ] = useState( {} );
+	const [ edits, setEdits ] = useState( initialEdits );
 	const itemWithEdits = useMemo( () => {
 		return {
 			...initialEdits,
@@ -71,7 +71,6 @@ function PostEditForm( { postType, postId } ) {
 				...edits,
 			} );
 		}
-		setEdits( {} );
 	};
 
 	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index f476b676264ed8..44625fbfbfafb9 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -271,6 +271,7 @@ function usePostFields( viewType ) {
 			{
 				label: __( 'Date' ),
 				id: 'date',
+				type: 'datetime',
 				render: ( { item } ) => {
 					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
 						item.status

From 97285c23d69955776b7d1b6d1468167d081beb7b Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Fri, 9 Aug 2024 13:20:15 +0530
Subject: [PATCH 050/205] Comment Date: Added Border Support (#64210)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../block-library/src/comment-date/block.json     | 15 ++++++++++++++-
 .../block-library/src/comment-date/style.scss     |  4 ++++
 packages/block-library/src/style.scss             |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/comment-date/style.scss

diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json
index ddc0281e6c668c..1e8110f836d93b 100644
--- a/packages/block-library/src/comment-date/block.json
+++ b/packages/block-library/src/comment-date/block.json
@@ -47,6 +47,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-date"
 }
diff --git a/packages/block-library/src/comment-date/style.scss b/packages/block-library/src/comment-date/style.scss
new file mode 100644
index 00000000000000..9b897defa655b7
--- /dev/null
+++ b/packages/block-library/src/comment-date/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-date {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 8f17cd7a50f55c..df1337d7eb25c0 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -10,6 +10,7 @@
 @import "./comments/style.scss";
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
+@import "./comment-date/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
 @import "./embed/style.scss";

From 651cc457521a6ec81367362618433095ae611fb0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 9 Aug 2024 10:49:31 +0200
Subject: [PATCH 051/205] DataViews Quick Edit: Add Post Card to the quick edit
 panel (#64365)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/components/post-edit/index.js         |  7 ++++
 .../src/components/post-card-panel/index.js   | 42 ++++++++-----------
 .../src/components/sidebar/post-summary.js    | 29 ++++++++-----
 packages/editor/src/private-apis.js           |  2 +
 4 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 03158e00862154..35141f743cd2e3 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -16,12 +16,16 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import usePostFields from '../post-fields';
+import { unlock } from '../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
@@ -76,6 +80,9 @@ function PostEditForm( { postType, postId } ) {
 	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
 		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
+			{ ids.length === 1 && (
+				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
+			) }
 			<DataForm
 				data={ itemWithEdits }
 				fields={ fields }
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 43efb6418b4fa9..5e20ecbcf07df9 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -27,55 +27,47 @@ import {
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 
-export default function PostCardPanel( { actions } ) {
+export default function PostCardPanel( { postType, postId, actions } ) {
 	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
-			const {
-				getEditedPostAttribute,
-				getCurrentPostType,
-				getCurrentPostId,
-				__experimentalGetTemplateInfo,
-			} = select( editorStore );
-			const { canUser } = select( coreStore );
-			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo } = select( editorStore );
+			const { canUser, getEditedEntityRecord } = select( coreStore );
 			const siteSettings = canUser( 'read', {
 				kind: 'root',
 				name: 'site',
 			} )
 				? getEditedEntityRecord( 'root', 'site' )
 				: undefined;
-			const _type = getCurrentPostType();
-			const _id = getCurrentPostId();
-			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
 			const _templateInfo =
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-					_type
+					postType
 				) && __experimentalGetTemplateInfo( _record );
 			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
-				if ( PATTERN_POST_TYPE === _type ) {
+			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
+				if ( PATTERN_POST_TYPE === postType ) {
 					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
 					const currentSyncStatus =
-						getEditedPostAttribute( 'meta' )
-							?.wp_pattern_sync_status === 'unsynced'
+						_record?.meta?.wp_pattern_sync_status === 'unsynced'
 							? 'unsynced'
-							: getEditedPostAttribute(
-									'wp_pattern_sync_status'
-							  );
+							: _record?.wp_pattern_sync_status;
 					_isSync = currentSyncStatus !== 'unsynced';
 				} else {
 					_isSync = true;
 				}
 			}
 			return {
-				title:
-					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+				title: _templateInfo?.title || _record?.title,
+				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
 				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === _id,
-				isPostsPage: siteSettings?.page_for_posts === _id,
+				isFrontPage: siteSettings?.page_on_front === postId,
+				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
 		[]
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
index a6a95d36388ba5..573a59de827188 100644
--- a/packages/editor/src/components/sidebar/post-summary.js
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -36,16 +36,23 @@ import { PrivatePostLastRevision } from '../post-last-revision';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, getCurrentPostType } =
-			select( editorStore );
-		return {
-			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
-			postType: getCurrentPostType(),
-		};
-	}, [] );
+	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
+		( select ) => {
+			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+			const {
+				isEditorPanelRemoved,
+				getCurrentPostType,
+				getCurrentPostId,
+			} = select( editorStore );
+			return {
+				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		},
+		[]
+	);
 
 	return (
 		<PostPanelSection className="editor-post-summary">
@@ -54,6 +61,8 @@ export default function PostSummary( { onActionPerformed } ) {
 					<>
 						<VStack spacing={ 4 }>
 							<PostCardPanel
+								postType={ postType }
+								postId={ postId }
 								actions={
 									<PostActions
 										onActionPerformed={ onActionPerformed }
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index a8a74d20261ce4..629600888a98eb 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -14,6 +14,7 @@ import BackButton from './components/header/back-button';
 import CreateTemplatePartModal from './components/create-template-part-modal';
 import Editor from './components/editor';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PostCardPanel from './components/post-card-panel';
 import PreferencesModal from './components/preferences-modal';
 import { usePostActions } from './components/post-actions/actions';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
@@ -40,6 +41,7 @@ lock( privateApis, {
 	GlobalStylesProvider,
 	mergeBaseAndUserConfigs,
 	PluginPostExcerpt,
+	PostCardPanel,
 	PreferencesModal,
 	usePostActions,
 	ToolsMoreMenuGroup,

From 02622aee4bd75935ed73c19a40fdcbc9a1b7d5a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:57:41 +0200
Subject: [PATCH 052/205] Add `comment_status` field to quick edit (#64370)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../components/dataform-controls/index.tsx    | 46 +++++++++++++++++++
 .../components/dataform-controls/radio.tsx    | 43 +++++++++++++++++
 .../dataform/stories/index.story.tsx          | 22 ++++++++-
 packages/dataviews/src/normalize-fields.ts    |  3 +-
 packages/dataviews/src/types.ts               | 22 ++++++++-
 .../src/components/post-edit/index.js         |  2 +-
 .../src/components/post-fields/index.js       | 26 +++++++++++
 7 files changed, 160 insertions(+), 4 deletions(-)
 create mode 100644 packages/dataviews/src/components/dataform-controls/index.tsx
 create mode 100644 packages/dataviews/src/components/dataform-controls/radio.tsx

diff --git a/packages/dataviews/src/components/dataform-controls/index.tsx b/packages/dataviews/src/components/dataform-controls/index.tsx
new file mode 100644
index 00000000000000..dd913269cd09ea
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-controls/index.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataFormControlProps,
+	Field,
+	FieldTypeDefinition,
+} from '../../types';
+import radio from './radio';
+
+interface FormControls {
+	[ key: string ]: ComponentType< DataFormControlProps< any > >;
+}
+
+const FORM_CONTROLS: FormControls = {
+	radio,
+};
+
+export function getControl< Item >(
+	field: Field< Item >,
+	fieldTypeDefinition: FieldTypeDefinition< Item >
+) {
+	if ( typeof field.Edit === 'function' ) {
+		return field.Edit;
+	}
+
+	let control;
+	if ( typeof field.Edit === 'string' ) {
+		control = getControlByType( field.Edit );
+	}
+
+	return control || fieldTypeDefinition.Edit;
+}
+
+export function getControlByType( type: string ) {
+	if ( Object.keys( FORM_CONTROLS ).includes( type ) ) {
+		return FORM_CONTROLS[ type ];
+	}
+
+	return null;
+}
diff --git a/packages/dataviews/src/components/dataform-controls/radio.tsx b/packages/dataviews/src/components/dataform-controls/radio.tsx
new file mode 100644
index 00000000000000..d264aa6c24b7fb
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-controls/radio.tsx
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { RadioControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+
+export default function Edit< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		return (
+			<RadioControl
+				label={ label }
+				onChange={ onChangeControl }
+				options={ field.elements }
+				selected={ value }
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return null;
+}
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 7808756b7b6557..7f3c5ff879b72a 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -56,6 +56,17 @@ const fields = [
 			{ value: 2, label: 'John' },
 		],
 	},
+	{
+		id: 'reviewer',
+		label: 'Reviewer',
+		type: 'text' as const,
+		Edit: 'radio' as const,
+		elements: [
+			{ value: 'fulano', label: 'Fulano' },
+			{ value: 'mengano', label: 'Mengano' },
+			{ value: 'zutano', label: 'Zutano' },
+		],
+	},
 	{
 		id: 'status',
 		label: 'Status',
@@ -73,12 +84,21 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 		order: 2,
 		author: 1,
 		status: 'draft',
+		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 	} );
 
 	const form = {
-		fields: [ 'title', 'order', 'author', 'status', 'date', 'birthdate' ],
+		fields: [
+			'title',
+			'order',
+			'author',
+			'reviewer',
+			'status',
+			'date',
+			'birthdate',
+		],
 	};
 
 	return (
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 680749df5344a6..54992ff22fe2ae 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -3,6 +3,7 @@
  */
 import getFieldTypeDefinition from './field-types';
 import type { Field, NormalizedField } from './types';
+import { getControl } from './components/dataform-controls';
 
 /**
  * Apply default values and normalize the fields config.
@@ -38,7 +39,7 @@ export function normalizeFields< Item >(
 				);
 			};
 
-		const Edit = field.Edit || fieldTypeDefinition.Edit;
+		const Edit = getControl( field, fieldTypeDefinition );
 
 		const renderFromElements = ( { item }: { item: Item } ) => {
 			const value = getValue( { item } );
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 2e87d1371acb61..d8a5ee8f68ecef 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -53,6 +53,26 @@ export type ValidationContext = {
 	elements?: Option[];
 };
 
+/**
+ * An abstract interface for Field based on the field type.
+ */
+export type FieldTypeDefinition< Item > = {
+	/**
+	 * Callback used to sort the field.
+	 */
+	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
+
+	/**
+	 * Callback used to validate the field.
+	 */
+	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+
+	/**
+	 * Callback used to render an edit control for the field.
+	 */
+	Edit: ComponentType< DataFormControlProps< Item > >;
+};
+
 /**
  * A dataview field for a specific property of a data type.
  */
@@ -90,7 +110,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render an edit control for the field.
 	 */
-	Edit?: ComponentType< DataFormControlProps< Item > >;
+	Edit?: ComponentType< DataFormControlProps< Item > > | 'radio';
 
 	/**
 	 * Callback used to sort the field.
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 35141f743cd2e3..0a56fdfe5786b7 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -51,7 +51,7 @@ function PostEditForm( { postType, postId } ) {
 	const { fields } = usePostFields();
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'author', 'date' ],
+		fields: [ 'title', 'author', 'date', 'comment_status' ],
 	};
 	const [ edits, setEdits ] = useState( initialEdits );
 	const itemWithEdits = useMemo( () => {
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index 44625fbfbfafb9..b03b2c6f5be3c4 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -345,6 +345,32 @@ function usePostFields( viewType ) {
 					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
+			{
+				id: 'comment_status',
+				label: __( 'Discussion' ),
+				type: 'text',
+				Edit: 'radio',
+				enableSorting: false,
+				filterBy: {
+					operators: [],
+				},
+				elements: [
+					{
+						value: 'open',
+						label: __( 'Open' ),
+						description: __(
+							'Visitors can add new comments and replies.'
+						),
+					},
+					{
+						value: 'closed',
+						label: __( 'Closed' ),
+						description: __(
+							'Visitors cannot add new comments or replies. Existing comments remain visible.'
+						),
+					},
+				],
+			},
 		],
 		[ authors, viewType, frontPageId, postsPageId ]
 	);

From 360c6f9b2be933baa0c224ce7a2d4f48593bee0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 9 Aug 2024 11:42:34 +0200
Subject: [PATCH 053/205] DataViews: update `renderFormElements` to make sure
 the value respects the type (#64391)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/dataviews/src/field-types/integer.tsx |  2 +-
 packages/dataviews/src/normalize-fields.ts     | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index 1233c3ab555567..bd4956493232df 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -53,7 +53,7 @@ function Edit< Item >( {
 		( newValue: string | undefined ) =>
 			onChange( ( prevItem: Item ) => ( {
 				...prevItem,
-				[ id ]: newValue,
+				[ id ]: Number( newValue ),
 			} ) ),
 		[ id, onChange ]
 	);
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 54992ff22fe2ae..2cdde5b3343798 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -43,13 +43,10 @@ export function normalizeFields< Item >(
 
 		const renderFromElements = ( { item }: { item: Item } ) => {
 			const value = getValue( { item } );
-			const label = field?.elements?.find( ( element ) => {
-				// Intentionally using == here to allow for type coercion.
-				// eslint-disable-next-line eqeqeq
-				return element.value == value;
-			} )?.label;
-
-			return label || value;
+			return (
+				field?.elements?.find( ( element ) => element.value === value )
+					?.label || getValue( { item } )
+			);
 		};
 
 		const render =

From 758915a0e4346ca51a9e3fda5bee4500ff4e3976 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 9 Aug 2024 11:49:04 +0200
Subject: [PATCH 054/205] DataViews Quick Edit: Fix panel title not updating

---
 packages/editor/src/components/post-card-panel/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 5e20ecbcf07df9..5ac88b3dbc7f94 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -70,7 +70,7 @@ export default function PostCardPanel( { postType, postId, actions } ) {
 				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
-		[]
+		[ postId, postType ]
 	);
 	return (
 		<div className="editor-post-card-panel">

From f5959ccdbab3fab3f95525c2d711e419cffe7d0a Mon Sep 17 00:00:00 2001
From: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:39:42 +0530
Subject: [PATCH 055/205] Latests Posts: Used ToggleGroupControl instead for
 Image alignment (#64352)

* Used ToggleGroupControl instead of BlockAlignmentToolbar

* Addressed feedback

* Use position icons instead of align

* Remove isBlock prop from ToggleGroupControl

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../block-library/src/latest-posts/edit.js    | 76 ++++++++++++++-----
 .../src/latest-posts/editor.scss              |  6 --
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 49a24b08f68d77..533e9621fd4f2b 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	BaseControl,
 	PanelBody,
 	Placeholder,
 	QueryControls,
@@ -16,19 +15,28 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockControls,
 	__experimentalImageSizeControl as ImageSizeControl,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { pin, list, grid } from '@wordpress/icons';
+import {
+	pin,
+	list,
+	grid,
+	alignNone,
+	positionLeft,
+	positionCenter,
+	positionRight,
+} from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticeStore } from '@wordpress/notices';
 import { useInstanceId } from '@wordpress/compose';
@@ -197,6 +205,29 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		setAttributes( { categories: allCategories } );
 	};
 
+	const imageAlignmentOptions = [
+		{
+			value: 'none',
+			icon: alignNone,
+			label: __( 'None' ),
+		},
+		{
+			value: 'left',
+			icon: positionLeft,
+			label: __( 'Left' ),
+		},
+		{
+			value: 'center',
+			icon: positionCenter,
+			label: __( 'Center' ),
+		},
+		{
+			value: 'right',
+			icon: positionRight,
+			label: __( 'Right' ),
+		},
+	];
+
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
@@ -303,21 +334,32 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								} )
 							}
 						/>
-						<BaseControl className="editor-latest-posts-image-alignment-control">
-							<BaseControl.VisualLabel>
-								{ __( 'Image alignment' ) }
-							</BaseControl.VisualLabel>
-							<BlockAlignmentToolbar
-								value={ featuredImageAlign }
-								onChange={ ( value ) =>
-									setAttributes( {
-										featuredImageAlign: value,
-									} )
+						<ToggleGroupControl
+							className="editor-latest-posts-image-alignment-control"
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image alignment' ) }
+							value={ featuredImageAlign || 'none' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									featuredImageAlign:
+										value !== 'none' ? value : undefined,
+								} )
+							}
+						>
+							{ imageAlignmentOptions.map(
+								( { value, icon, label } ) => {
+									return (
+										<ToggleGroupControlOptionIcon
+											key={ value }
+											value={ value }
+											icon={ icon }
+											label={ label }
+										/>
+									);
 								}
-								controls={ [ 'left', 'center', 'right' ] }
-								isCollapsed={ false }
-							/>
-						</BaseControl>
+							) }
+						</ToggleGroupControl>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 02651ee8495125..fe901480974461 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -9,12 +9,6 @@
 	display: inline;
 }
 
-.editor-latest-posts-image-alignment-control {
-	.components-toolbar {
-		border-radius: $radius-block-ui;
-	}
-}
-
 :root :where(.wp-block-latest-posts) {
 	padding-left: 2.5em;
 }

From e0577df14a6eaad580afe94abfb736e8a04c0fc8 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:13:06 +0900
Subject: [PATCH 056/205] Post Editor: Force iframe editor when zoom-out mode
 (#64316)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
---
 .../edit-post/src/components/layout/use-should-iframe.js   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
index 03efae92c72f7d..248ea53109f250 100644
--- a/packages/edit-post/src/components/layout/use-should-iframe.js
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -4,6 +4,7 @@
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,8 +19,10 @@ export function useShouldIframe() {
 		hasV3BlocksOnly,
 		isEditingTemplate,
 		hasMetaBoxes,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
 		return {
@@ -29,12 +32,14 @@ export function useShouldIframe() {
 			} ),
 			isEditingTemplate: getCurrentPostType() === 'wp_template',
 			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
 	return (
 		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 			! hasMetaBoxes ) ||
-		isEditingTemplate
+		isEditingTemplate ||
+		isZoomOutMode
 	);
 }

From 22e4cc2e24e89901d7b0b8099a7ecc4f695e04e2 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 9 Aug 2024 12:18:49 +0200
Subject: [PATCH 057/205] Composite: stabilize new ariakit implementation
 (#63564)

* Point legacy exports directly to the source (instead of folder root)

* Swap default folder export to new version

* Apply compound component naming

* Export new version from the package

* Update (fix) private APIs exports

* Update composite implementation to use new compound naming

* Update references to Composite inside components package

* Update Storybook entry points for both legacy and current

* Fix Storybook generated docs

* Add todo

* Remove unncecessary code

* CHANGELOG

* README

* Add JSDocs to Composite exports

* Move current implementation out of `current` folder

* Fix import in the legacy implementation

* Update docs manifest

* Fix type in Storybook example

* Add JSDocs for Storybook docs

* Apply Overloaded naming convention

* Update README

* Fix typo

* Update legacy storybook title/id, make sure JSDocs refer to unstable version

* Derive types instead of importing them directly from ariakit

* Add JSDoc snippet for stable component

* Remove unnecessary JSDoc code

* Remove unnecessary display name

* Assign display names via Object.assign to comply with TS and get correct results in Storybook

* Update subcomponent TS ignore comment to align with other components

* Remove unnecessary store prop in circular option picker

Composite.Item should pick up the store from context without explicit prop

* Add first-party types, rewrite components with one unique forwardRef call

* Use the newly added types instead of using the Parameters<> util

* Fix Storybook story type

* Remove unnecessary ts-expect-error

* Use `CompositeStore` type directly

* Manual Storybook args table

* Tweak display name fallback

* README

* Mark `store` prop on `Composite` as required

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 docs/manifest.json                            |   6 +
 packages/components/CHANGELOG.md              |   4 +
 .../src/alignment-matrix-control/cell.tsx     |   6 +-
 .../src/alignment-matrix-control/index.tsx    |   6 +-
 .../circular-option-picker-option.tsx         |  11 +-
 .../circular-option-picker.tsx                |   2 +-
 .../src/circular-option-picker/types.ts       |   5 +-
 packages/components/src/composite/README.md   | 176 ++++++++++++++
 .../components/src/composite/current/index.ts |  20 --
 .../composite/current/stories/index.story.tsx |  86 -------
 packages/components/src/composite/index.ts    |   7 -
 packages/components/src/composite/index.tsx   | 177 ++++++++++++++
 .../components/src/composite/legacy/index.tsx |  29 +--
 .../composite/legacy/stories/index.story.tsx  |   3 +-
 .../src/composite/legacy/stories/utils.tsx    |  19 ++
 .../src/composite/stories/index.story.tsx     | 218 ++++++++++++++++++
 .../composite/{current => }/stories/utils.tsx |  13 +-
 packages/components/src/composite/types.ts    |  47 ++++
 packages/components/src/composite/v2.ts       |   4 -
 packages/components/src/index.ts              |   3 +-
 packages/components/src/private-apis.ts       |  18 +-
 .../src/dataviews-layouts/list/index.tsx      |   1 +
 22 files changed, 700 insertions(+), 161 deletions(-)
 create mode 100644 packages/components/src/composite/README.md
 delete mode 100644 packages/components/src/composite/current/index.ts
 delete mode 100644 packages/components/src/composite/current/stories/index.story.tsx
 delete mode 100644 packages/components/src/composite/index.ts
 create mode 100644 packages/components/src/composite/index.tsx
 create mode 100644 packages/components/src/composite/stories/index.story.tsx
 rename packages/components/src/composite/{current => }/stories/utils.tsx (86%)
 create mode 100644 packages/components/src/composite/types.ts
 delete mode 100644 packages/components/src/composite/v2.ts

diff --git a/docs/manifest.json b/docs/manifest.json
index 1704e6d711510f..b483449872cc76 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -767,6 +767,12 @@
 		"markdown_source": "../packages/components/src/combobox-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Composite",
+		"slug": "composite",
+		"markdown_source": "../packages/components/src/composite/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ConfirmDialog",
 		"slug": "confirm-dialog",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 47afb0711090d8..dca5b6e03dedc3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
+
 ### Enhancements
 
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx
index 162ca879f1a7e5..6e045c26694f4e 100644
--- a/packages/components/src/alignment-matrix-control/cell.tsx
+++ b/packages/components/src/alignment-matrix-control/cell.tsx
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -26,7 +26,7 @@ export default function Cell( {
 
 	return (
 		<Tooltip text={ tooltipText }>
-			<CompositeItem
+			<Composite.Item
 				id={ id }
 				render={ <CellView { ...props } role="gridcell" /> }
 			>
@@ -35,7 +35,7 @@ export default function Cell( {
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
 				<Point isActive={ isActive } role="presentation" />
-			</CompositeItem>
+			</Composite.Item>
 		</Tooltip>
 	);
 }
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
index eaec8a285b0c57..1d22c3560625db 100644
--- a/packages/components/src/alignment-matrix-control/index.tsx
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -13,7 +13,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
+import { Composite, useCompositeStore } from '../composite';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
@@ -87,7 +87,7 @@ export function AlignmentMatrixControl( {
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeRow render={ <Row role="row" /> } key={ index }>
+				<Composite.Row render={ <Row role="row" /> } key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
 						const isActive = cellId === activeId;
@@ -101,7 +101,7 @@ export function AlignmentMatrixControl( {
 							/>
 						);
 					} ) }
-				</CompositeRow>
+				</Composite.Row>
 			) ) }
 		</Composite>
 	);
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
index 6c00a0e5d0bf1a..35a2f427134f40 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -16,9 +16,9 @@ import { Icon, check } from '@wordpress/icons';
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
-import type { OptionProps, CircularOptionPickerCompositeStore } from './types';
+import type { OptionProps } from './types';
 
 function UnforwardedOptionAsButton(
 	props: {
@@ -45,7 +45,9 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
-		compositeStore: CircularOptionPickerCompositeStore;
+		compositeStore: NonNullable<
+			React.ComponentProps< typeof Composite >[ 'store' ]
+		>;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -57,7 +59,7 @@ function UnforwardedOptionAsOption(
 	}
 
 	return (
-		<CompositeItem
+		<Composite.Item
 			render={
 				<Button
 					{ ...additionalProps }
@@ -66,7 +68,6 @@ function UnforwardedOptionAsOption(
 					ref={ forwardedRef }
 				/>
 			}
-			store={ compositeStore }
 			id={ id }
 		/>
 	);
diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx
index cd2ddcf90d7ce0..c1e719f2d4f665 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -13,7 +13,7 @@ import { isRTL } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
-import { Composite, useCompositeStore } from '../composite/v2';
+import { Composite, useCompositeStore } from '../composite';
 import type {
 	CircularOptionPickerProps,
 	ListboxCircularOptionPickerProps,
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index 519d81d5905107..e23ff4165f0580 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -14,7 +14,7 @@ import type { Icon } from '@wordpress/icons';
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../context';
-import type { CompositeStore } from '../composite/v2';
+import type { Composite } from '../composite';
 
 type CommonCircularOptionPickerProps = {
 	/**
@@ -123,8 +123,7 @@ export type OptionProps = Omit<
 	>;
 };
 
-export type CircularOptionPickerCompositeStore = CompositeStore;
 export type CircularOptionPickerContextProps = {
 	baseId?: string;
-	compositeStore?: CircularOptionPickerCompositeStore;
+	compositeStore?: React.ComponentProps< typeof Composite >[ 'store' ];
 };
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
new file mode 100644
index 00000000000000..59953f1273a054
--- /dev/null
+++ b/packages/components/src/composite/README.md
@@ -0,0 +1,176 @@
+# `Composite`
+
+`Composite` provides a single tab stop on the page and allows navigation through the focusable descendants with arrow keys. This abstract component is based on the [WAI-ARIA Composite Role⁠](https://w3c.github.io/aria/#composite).
+
+See the [Ariakit docs for the `Composite` component](https://ariakit.org/components/composite).
+
+## Usage
+
+```jsx
+const store = useCompositeStore();
+<Composite store={store}>
+  <Composite.Group>
+    <Composite.GroupLabel>Label</Composite.GroupLabel>
+    <Composite.Item>Item 1</Composite.Item>
+    <Composite.Item>Item 2</Composite.Item>
+  </CompositeGroup>
+</Composite>
+```
+
+## Hooks
+
+### `useCompositeStore`
+
+Creates a composite store.
+
+#### Props
+
+##### `activeId`: `string | null`
+
+The current active item id. The active item is the element within the composite widget that has either DOM or virtual focus.
+
+-   Required: no
+
+##### `defaultActiveId`: `string | null`
+
+The composite item id that should be active by default when the composite widget is rendered. If `null`, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.
+
+-   Required: no
+
+##### `setActiveId`: `((activeId: string | null | undefined) => void)`
+
+A callback that gets called when the activeId state changes.
+
+-   Required: no
+
+##### `focusLoop`: `boolean | 'horizontal' | 'vertical' | 'both'`
+
+Determines how the focus behaves when the user reaches the end of the composite widget.
+
+-   Required: no
+-   Default: `false`
+
+##### `focusShift`: `boolean`
+
+Works only on two-dimensional composite widgets. If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.
+
+-   Required: no
+-   Default: `false`
+
+##### `focusWrap`: `boolean`
+
+Works only on two-dimensional composite widgets. If enabled, moving to the next item from the last one in a row or column will focus on the first item in the next row or column and vice-versa.
+
+-   Required: no
+-   Default: `false`
+
+##### `virtualFocus`: `boolean`
+
+If enabled, the composite element will act as an aria-activedescendant⁠ container instead of roving tabindex⁠. DOM focus will remain on the composite element while its items receive virtual focus. In both scenarios, the item in focus will carry the data-active-item attribute.
+
+-   Required: no
+-   Default: `false`
+
+##### `orientation`: `'horizontal' | 'vertical' | 'both'`
+
+Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus. It doesn't have any effect on two-dimensional composites.
+
+-   Required: no
+-   Default: `'both'`
+
+##### `rtl`: `boolean`
+
+Determines how the next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir=`rtl` on HTML/CSS.
+
+-   Required: no
+-   Default: `false`
+
+## Components
+
+### `Composite`
+
+Renders a composite widget.
+
+#### Props
+
+##### `store`: `CompositeStore<CompositeStoreItem>`
+
+Object returned by the `useCompositeStore` hook.
+
+-   Required: yes
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Group`
+
+Renders a group element for composite items.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.GroupLabel`
+
+Renders a label in a composite group. This component must be wrapped with `Composite.Group` so the `aria-labelledby` prop is properly set on the composite group element.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Item`
+
+Renders a composite item.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Row`
+
+Renders a composite row. Wrapping `Composite.Item` elements within `Composite.Row` will create a two-dimensional composite widget, such as a grid.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
diff --git a/packages/components/src/composite/current/index.ts b/packages/components/src/composite/current/index.ts
deleted file mode 100644
index 96379f00296516..00000000000000
--- a/packages/components/src/composite/current/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://ariakit.org/components/composite
- */
-
-export {
-	Composite,
-	CompositeGroup,
-	CompositeGroupLabel,
-	CompositeItem,
-	CompositeRow,
-	useCompositeStore,
-} from '@ariakit/react';
-
-export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';
diff --git a/packages/components/src/composite/current/stories/index.story.tsx b/packages/components/src/composite/current/stories/index.story.tsx
deleted file mode 100644
index 335ebc3244c918..00000000000000
--- a/packages/components/src/composite/current/stories/index.story.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	Composite,
-	CompositeGroup,
-	CompositeRow,
-	CompositeItem,
-	useCompositeStore,
-} from '..';
-import { UseCompositeStorePlaceholder, transform } from './utils';
-
-const meta: Meta< typeof UseCompositeStorePlaceholder > = {
-	title: 'Components/Composite (V2)',
-	component: UseCompositeStorePlaceholder,
-	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		Composite,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeGroup,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeRow,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeItem,
-	},
-	tags: [ 'status-private' ],
-	parameters: {
-		docs: {
-			canvas: { sourceState: 'shown' },
-			source: { transform },
-			extractArgTypes: ( component: React.FunctionComponent ) => {
-				const name = component.displayName;
-				const path = name
-					?.replace(
-						/([a-z])([A-Z])/g,
-						( _, a, b ) => `${ a }-${ b.toLowerCase() }`
-					)
-					.toLowerCase();
-				const url = `https://ariakit.org/reference/${ path }`;
-				return {
-					props: {
-						name: 'Props',
-						description: `See <a href="${ url }">Ariakit docs</a> for <code>${ name }</code>`,
-						table: { type: { summary: undefined } },
-					},
-				};
-			},
-		},
-	},
-};
-export default meta;
-
-export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...initialState } );
-
-	return (
-		<Composite role="grid" store={ store } aria-label="Ariakit Composite">
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item A1</CompositeItem>
-				<CompositeItem role="gridcell">Item A2</CompositeItem>
-				<CompositeItem role="gridcell">Item A3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item B1</CompositeItem>
-				<CompositeItem role="gridcell">Item B2</CompositeItem>
-				<CompositeItem role="gridcell">Item B3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item C1</CompositeItem>
-				<CompositeItem role="gridcell">Item C2</CompositeItem>
-				<CompositeItem role="gridcell">Item C3</CompositeItem>
-			</CompositeRow>
-		</Composite>
-	);
-};
diff --git a/packages/components/src/composite/index.ts b/packages/components/src/composite/index.ts
deleted file mode 100644
index aa06a6adf36ef2..00000000000000
--- a/packages/components/src/composite/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Originally this pointed at a Reakit implementation of
-// `Composite`, but we are removing Reakit entirely from the
-// codebase. We will continue to support the Reakit API
-// through the 'legacy' version, which uses Ariakit under
-// the hood.
-
-export * from './legacy';
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
new file mode 100644
index 00000000000000..9496bdb9e98664
--- /dev/null
+++ b/packages/components/src/composite/index.tsx
@@ -0,0 +1,177 @@
+/**
+ * Composite is a component that may contain navigable items represented by
+ * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type {
+	CompositeStoreProps,
+	CompositeProps,
+	CompositeGroupProps,
+	CompositeGroupLabelProps,
+	CompositeItemProps,
+	CompositeRowProps,
+} from './types';
+
+/**
+ * Creates a composite store.
+ * @param props
+ * @see https://ariakit.org/reference/use-composite-store
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * <Composite store={store}>
+ *   <Composite.Item>Item</Composite.Item>
+ *   <Composite.Item>Item</Composite.Item>
+ *   <Composite.Item>Item</Composite.Item>
+ * </Composite>
+ * ```
+ */
+export function useCompositeStore( props: CompositeStoreProps ) {
+	return Ariakit.useCompositeStore( props );
+}
+
+const Group = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupProps, 'div', false >
+>( function CompositeGroup( props, ref ) {
+	return <Ariakit.CompositeGroup { ...props } ref={ ref } />;
+} );
+Group.displayName = 'Composite.Group';
+
+const GroupLabel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
+>( function CompositeGroupLabel( props, ref ) {
+	return <Ariakit.CompositeGroupLabel { ...props } ref={ ref } />;
+} );
+GroupLabel.displayName = 'Composite.GroupLabel';
+
+const Item = forwardRef<
+	HTMLButtonElement,
+	WordPressComponentProps< CompositeItemProps, 'button', false >
+>( function CompositeItem( props, ref ) {
+	return <Ariakit.CompositeItem { ...props } ref={ ref } />;
+} );
+Item.displayName = 'Composite.Item';
+
+const Row = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeRowProps, 'div', false >
+>( function CompositeRow( props, ref ) {
+	return <Ariakit.CompositeRow { ...props } ref={ ref } />;
+} );
+Row.displayName = 'Composite.Row';
+
+/**
+ * Renders a composite widget.
+ * @see https://ariakit.org/reference/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * <Composite store={store}>
+ *   <Composite.Item>Item 1</Composite.Item>
+ *   <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
+export const Composite = Object.assign(
+	forwardRef<
+		HTMLDivElement,
+		WordPressComponentProps< CompositeProps, 'div', false >
+	>( function CompositeRow( props, ref ) {
+		return <Ariakit.Composite { ...props } ref={ ref } />;
+	} ),
+	{
+		displayName: 'Composite',
+		/**
+		 * Renders a group element for composite items.
+		 * @see https://ariakit.org/reference/composite-group
+		 * @example
+		 * ```jsx
+		 * const store = useCompositeStore();
+		 * <Composite store={store}>
+		 *   <Composite.Group>
+		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+		 *     <Composite.Item>Item 1</Composite.Item>
+		 *     <Composite.Item>Item 2</Composite.Item>
+		 *   </CompositeGroup>
+		 * </Composite>
+		 * ```
+		 */
+		Group,
+		/**
+		 * Renders a label in a composite group. This component must be wrapped with
+		 * `Composite.Group` so the `aria-labelledby` prop is properly set on the
+		 * composite group element.
+		 * @see https://ariakit.org/reference/composite-group-label
+		 * @example
+		 * ```jsx
+		 * const store = useCompositeStore();
+		 * <Composite store={store}>
+		 *   <Composite.Group>
+		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+		 *     <Composite.Item>Item 1</Composite.Item>
+		 *     <Composite.Item>Item 2</Composite.Item>
+		 *   </CompositeGroup>
+		 * </Composite>
+		 * ```
+		 */
+		GroupLabel,
+		/**
+		 * Renders a composite item.
+		 * @see https://ariakit.org/reference/composite-item
+		 * @example
+		 * ```jsx
+		 * const store = useCompositeStore();
+		 * <Composite store={store}>
+		 *   <Composite.Item>Item 1</Composite.Item>
+		 *   <Composite.Item>Item 2</Composite.Item>
+		 *   <Composite.Item>Item 3</Composite.Item>
+		 * </Composite>
+		 * ```
+		 */
+		Item,
+		/**
+		 * Renders a composite row. Wrapping `Composite.Item` elements within
+		 * `Composite.Row` will create a two-dimensional composite widget, such as a
+		 * grid.
+		 * @see https://ariakit.org/reference/composite-row
+		 * @example
+		 * ```jsx
+		 * const store = useCompositeStore();
+		 * <Composite store={store}>
+		 *   <Composite.Row>
+		 *     <Composite.Item>Item 1.1</Composite.Item>
+		 *     <Composite.Item>Item 1.2</Composite.Item>
+		 *     <Composite.Item>Item 1.3</Composite.Item>
+		 *   </Composite.Row>
+		 *   <Composite.Row>
+		 *     <Composite.Item>Item 2.1</Composite.Item>
+		 *     <Composite.Item>Item 2.2</Composite.Item>
+		 *     <Composite.Item>Item 2.3</Composite.Item>
+		 *   </Composite.Row>
+		 * </Composite>
+		 * ```
+		 */
+		Row,
+	}
+);
diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
index 5c5c674b5086b8..dffdc1a2066d47 100644
--- a/packages/components/src/composite/legacy/index.tsx
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -5,6 +5,11 @@
  * tab stop for the whole Composite element. This means that it can behave as
  * a roving tabindex or aria-activedescendant container.
  *
+ * This file aims at providing components that are as close as possible to the
+ * original `reakit`-based implementation (which was removed from the codebase),
+ * although it is recommended that consumers of the package switch to the stable,
+ * un-prefixed, `ariakit`-based version of `Composite`.
+ *
  * @see https://ariakit.org/components/composite
  */
 
@@ -16,7 +21,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import * as Current from '../current';
+import { Composite as Current, useCompositeStore } from '..';
 import { useInstanceId } from '@wordpress/compose';
 
 type Orientation = 'horizontal' | 'vertical';
@@ -73,7 +78,7 @@ export interface LegacyStateOptions {
 
 type Component = React.FunctionComponent< any >;
 
-type CompositeStore = ReturnType< typeof Current.useCompositeStore >;
+type CompositeStore = ReturnType< typeof useCompositeStore >;
 type CompositeStoreState = { store: CompositeStore };
 export type CompositeState = CompositeStoreState &
 	Required< Pick< LegacyStateOptions, 'baseId' > >;
@@ -93,9 +98,9 @@ type CompositeComponent< C extends Component > = (
 ) => React.ReactElement;
 type CompositeComponentProps = CompositeState &
 	(
-		| ComponentProps< typeof Current.CompositeGroup >
-		| ComponentProps< typeof Current.CompositeItem >
-		| ComponentProps< typeof Current.CompositeRow >
+		| ComponentProps< typeof Current.Group >
+		| ComponentProps< typeof Current.Item >
+		| ComponentProps< typeof Current.Row >
 	);
 
 function mapLegacyStatePropsToComponentProps(
@@ -145,19 +150,15 @@ function proxyComposite< C extends Component >(
 // provided role, and returning the appropriate component.
 const unproxiedCompositeGroup = forwardRef<
 	any,
-	React.ComponentPropsWithoutRef<
-		typeof Current.CompositeGroup | typeof Current.CompositeRow
-	>
+	React.ComponentPropsWithoutRef< typeof Current.Group | typeof Current.Row >
 >( ( { role, ...props }, ref ) => {
-	const Component =
-		role === 'row' ? Current.CompositeRow : Current.CompositeGroup;
+	const Component = role === 'row' ? Current.Row : Current.Group;
 	return <Component ref={ ref } role={ role } { ...props } />;
 } );
-unproxiedCompositeGroup.displayName = 'CompositeGroup';
 
-export const Composite = proxyComposite( Current.Composite, { baseId: 'id' } );
+export const Composite = proxyComposite( Current, { baseId: 'id' } );
 export const CompositeGroup = proxyComposite( unproxiedCompositeGroup );
-export const CompositeItem = proxyComposite( Current.CompositeItem, {
+export const CompositeItem = proxyComposite( Current.Item, {
 	focusable: 'accessibleWhenDisabled',
 } );
 
@@ -178,7 +179,7 @@ export function useCompositeState(
 
 	return {
 		baseId: useInstanceId( Composite, 'composite', baseId ),
-		store: Current.useCompositeStore( {
+		store: useCompositeStore( {
 			defaultActiveId,
 			rtl,
 			orientation,
diff --git a/packages/components/src/composite/legacy/stories/index.story.tsx b/packages/components/src/composite/legacy/stories/index.story.tsx
index e46d656a16810e..1b8e07e9bbf560 100644
--- a/packages/components/src/composite/legacy/stories/index.story.tsx
+++ b/packages/components/src/composite/legacy/stories/index.story.tsx
@@ -15,7 +15,8 @@ import {
 import { UseCompositeStatePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStatePlaceholder > = {
-	title: 'Components/Composite',
+	title: 'Components (Deprecated)/Composite (Unstable)',
+	id: 'components-composite-unstable',
 	component: UseCompositeStatePlaceholder,
 	subcomponents: {
 		Composite,
diff --git a/packages/components/src/composite/legacy/stories/utils.tsx b/packages/components/src/composite/legacy/stories/utils.tsx
index 06edd348634695..2fb51c845f9fbe 100644
--- a/packages/components/src/composite/legacy/stories/utils.tsx
+++ b/packages/components/src/composite/legacy/stories/utils.tsx
@@ -8,6 +8,25 @@ import type { StoryContext } from '@storybook/react';
  */
 import type { LegacyStateOptions } from '..';
 
+/**
+ * Renders a composite widget.
+ *
+ * This unstable component is deprecated. Use `Composite` instead.
+ *
+ * ```jsx
+ * import {
+ * 	__unstableUseCompositeState as useCompositeState,
+ * 	__unstableComposite as Composite,
+ * 	__unstableCompositeItem as CompositeItem,
+ * } from '@wordpress/components';
+ *
+ * const state = useCompositeState();
+ * <Composite state={ state }>
+ * 	<CompositeItem>Item 1</CompositeItem>
+ * 	<CompositeItem>Item 2</CompositeItem>
+ * </Composite>;
+ * ```
+ */
 export function UseCompositeStatePlaceholder( props: LegacyStateOptions ) {
 	return (
 		<dl>
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
new file mode 100644
index 00000000000000..b143c1f7db05f7
--- /dev/null
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -0,0 +1,218 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Composite, useCompositeStore } from '..';
+import { UseCompositeStorePlaceholder, transform } from './utils';
+
+const meta: Meta< typeof UseCompositeStorePlaceholder > = {
+	title: 'Components/Composite',
+	component: UseCompositeStorePlaceholder,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Composite,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Group': Composite.Group,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.GroupLabel': Composite.GroupLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Row': Composite.Row,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Item': Composite.Item,
+	},
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { transform },
+			extractArgTypes: ( component: React.FunctionComponent ) => {
+				const commonArgTypes = {
+					render: {
+						name: 'render',
+						description:
+							'Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.',
+						table: {
+							type: {
+								summary:
+									'RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>',
+							},
+						},
+					},
+					children: {
+						name: 'children',
+						description: 'The contents of the component.',
+						table: { type: { summary: 'React.ReactNode' } },
+					},
+				};
+				const argTypes = {
+					useCompositeStore: {
+						activeId: {
+							name: 'activeId',
+							description:
+								'The current active item id. The active item is the element within the composite widget that has either DOM or virtual focus.',
+							table: { type: { summary: 'string | null' } },
+						},
+						defaultActiveId: {
+							name: 'defaultActiveId',
+							description:
+								'The composite item id that should be active by default when the composite widget is rendered. If `null`, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.',
+							table: { type: { summary: 'string | null' } },
+						},
+						setActiveId: {
+							name: 'setActiveId',
+							description:
+								'A callback that gets called when the activeId state changes.',
+							table: {
+								type: {
+									summary:
+										'((activeId: string | null | undefined) => void)',
+								},
+							},
+						},
+						focusLoop: {
+							name: 'focusLoop',
+							description:
+								'Determines how the focus behaves when the user reaches the end of the composite widget.',
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary:
+										"boolean | 'horizontal' | 'vertical' | 'both'",
+								},
+							},
+						},
+						focusShift: {
+							name: 'focusShift',
+							description:
+								"Works only on two-dimensional composite widgets. If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.",
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+						focusWrap: {
+							name: 'focusWrap',
+							description:
+								'Works only on two-dimensional composite widgets. If enabled, moving to the next item from the last one in a row or column will focus on the first item in the next row or column and vice-versa.',
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+						virtualFocus: {
+							name: 'virtualFocus',
+							description:
+								'If enabled, the composite element will act as an aria-activedescendant⁠ container instead of roving tabindex⁠. DOM focus will remain on the composite element while its items receive virtual focus. In both scenarios, the item in focus will carry the data-active-item attribute.',
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+						orientation: {
+							name: 'orientation',
+							description:
+								"Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus. It doesn't have any effect on two-dimensional composites.",
+							table: {
+								defaultValue: {
+									summary: "'both'",
+								},
+								type: {
+									summary:
+										"'horizontal' | 'vertical' | 'both'",
+								},
+							},
+						},
+						rtl: {
+							name: 'rtl',
+							description:
+								'Determines how the next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.',
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+					},
+					Composite: {
+						...commonArgTypes,
+						store: {
+							name: 'store',
+							description:
+								'Object returned by the `useCompositeStore` hook.',
+							table: {
+								type: {
+									summary:
+										'CompositeStore<CompositeStoreItem>',
+								},
+							},
+							type: { required: true },
+						},
+					},
+					'Composite.Group': commonArgTypes,
+					'Composite.GroupLabel': commonArgTypes,
+					'Composite.Row': commonArgTypes,
+					'Composite.Item': commonArgTypes,
+				};
+
+				const name = component.displayName ?? '';
+
+				return name in argTypes
+					? argTypes[ name as keyof typeof argTypes ]
+					: {};
+			},
+		},
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
+	return (
+		<Composite role="grid" store={ store } aria-label="Composite">
+			<Composite.Row role="row">
+				<Composite.Item role="gridcell">Item A1</Composite.Item>
+				<Composite.Item role="gridcell">Item A2</Composite.Item>
+				<Composite.Item role="gridcell">Item A3</Composite.Item>
+			</Composite.Row>
+			<Composite.Row role="row">
+				<Composite.Item role="gridcell">Item B1</Composite.Item>
+				<Composite.Item role="gridcell">Item B2</Composite.Item>
+				<Composite.Item role="gridcell">Item B3</Composite.Item>
+			</Composite.Row>
+			<Composite.Row role="row">
+				<Composite.Item role="gridcell">Item C1</Composite.Item>
+				<Composite.Item role="gridcell">Item C2</Composite.Item>
+				<Composite.Item role="gridcell">Item C3</Composite.Item>
+			</Composite.Row>
+		</Composite>
+	);
+};
diff --git a/packages/components/src/composite/current/stories/utils.tsx b/packages/components/src/composite/stories/utils.tsx
similarity index 86%
rename from packages/components/src/composite/current/stories/utils.tsx
rename to packages/components/src/composite/stories/utils.tsx
index 4b2d1bba4b312b..425fb9a905bcff 100644
--- a/packages/components/src/composite/current/stories/utils.tsx
+++ b/packages/components/src/composite/stories/utils.tsx
@@ -6,8 +6,19 @@ import type { StoryContext } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import type { CompositeStoreProps } from '..';
+import type { CompositeStoreProps } from '../types';
 
+/**
+ * Renders a composite widget.
+ *
+ * ```jsx
+ * const store = useCompositeStore();
+ * <Composite store={ store }>
+ *   <Composite.Item>Item 1</Composite.Item>
+ *   <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
 export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
 	return (
 		<dl>
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
new file mode 100644
index 00000000000000..438d1caaa94f8a
--- /dev/null
+++ b/packages/components/src/composite/types.ts
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+export type CompositeStoreProps = Pick<
+	Ariakit.CompositeStoreProps,
+	| 'activeId'
+	| 'defaultActiveId'
+	| 'setActiveId'
+	| 'focusLoop'
+	| 'focusShift'
+	| 'focusWrap'
+	| 'virtualFocus'
+	| 'orientation'
+	| 'rtl'
+>;
+
+export type CompositeProps = Pick<
+	Ariakit.CompositeProps,
+	'render' | 'children'
+> & {
+	/**
+	 * Object returned by the `useCompositeStore` hook.
+	 */
+	store: Ariakit.CompositeStore;
+};
+
+export type CompositeGroupProps = Pick<
+	Ariakit.CompositeGroupProps,
+	'render' | 'children'
+>;
+
+export type CompositeGroupLabelProps = Pick<
+	Ariakit.CompositeGroupLabelProps,
+	'render' | 'children'
+>;
+
+export type CompositeItemProps = Pick<
+	Ariakit.CompositeItemProps,
+	'render' | 'children'
+>;
+
+export type CompositeRowProps = Pick<
+	Ariakit.CompositeRowProps,
+	'render' | 'children'
+>;
diff --git a/packages/components/src/composite/v2.ts b/packages/components/src/composite/v2.ts
deleted file mode 100644
index 38d3f628d368b6..00000000000000
--- a/packages/components/src/composite/v2.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Although we have migrated away from Reakit, the 'current'
-// Ariakit implementation is still considered a v2.
-
-export * from './current';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index f0ea4a4b7e86b8..4c724a461e6775 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -61,7 +61,8 @@ export {
 	CompositeGroup as __unstableCompositeGroup,
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
-} from './composite';
+} from './composite/legacy';
+export { Composite } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 5ff39ba364a041..699911e5ba046b 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -1,13 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	Composite as CompositeV2,
-	CompositeGroup as CompositeGroupV2,
-	CompositeItem as CompositeItemV2,
-	CompositeRow as CompositeRowV2,
-	useCompositeStore as useCompositeStoreV2,
-} from './composite/v2';
+import { Composite, useCompositeStore } from './composite';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
 import {
@@ -28,11 +22,11 @@ import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
-	CompositeV2,
-	CompositeGroupV2,
-	CompositeItemV2,
-	CompositeRowV2,
-	useCompositeStoreV2,
+	CompositeV2: Composite,
+	CompositeGroupV2: Composite.Group,
+	CompositeItemV2: Composite.Item,
+	CompositeRowV2: Composite.Row,
+	useCompositeStoreV2: useCompositeStore,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index 00939a12984856..70eaf3af1cd619 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+// TODO: use the @wordpress/components one once public
 // Import CompositeStore type, which is not exported from @wordpress/components.
 // eslint-disable-next-line no-restricted-imports
 import type { CompositeStore } from '@ariakit/react';

From 34b5219842367bb111cc010cb1db9a3a593812dd Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 9 Aug 2024 11:30:20 +0100
Subject: [PATCH 058/205] Zoom Out: Don't hide the insertion point when
 hovering patterns (#64392)

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
---
 .../block-editor/src/components/inserter/menu.js     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index e0bc29d62e1b9a..52e4e3062e9024 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -109,6 +109,7 @@ function InserterMenu(
 
 	const onInsertPattern = useCallback(
 		( blocks, patternName ) => {
+			onToggleInsertionPoint( false );
 			onInsertBlocks( blocks, { patternName } );
 			onSelect();
 		},
@@ -123,13 +124,6 @@ function InserterMenu(
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
-	const onHoverPattern = useCallback(
-		( item ) => {
-			onToggleInsertionPoint( !! item );
-		},
-		[ onToggleInsertionPoint ]
-	);
-
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
@@ -176,7 +170,6 @@ function InserterMenu(
 						filterValue={ delayedFilterValue }
 						onSelect={ onSelect }
 						onHover={ onHover }
-						onHoverPattern={ onHoverPattern }
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 						isAppender={ isAppender }
@@ -199,7 +192,6 @@ function InserterMenu(
 		delayedFilterValue,
 		onSelect,
 		onHover,
-		onHoverPattern,
 		shouldFocusBlock,
 		clientId,
 		rootClientId,
@@ -249,7 +241,6 @@ function InserterMenu(
 					<PatternCategoryPreviews
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
-						onHover={ onHoverPattern }
 						category={ selectedPatternCategory }
 						patternFilter={ patternFilter }
 						showTitlesAsTooltip
@@ -259,7 +250,6 @@ function InserterMenu(
 		);
 	}, [
 		destinationRootClientId,
-		onHoverPattern,
 		onInsertPattern,
 		onClickPatternCategory,
 		patternFilter,

From db35abd02371291dfa00562f29ea5901562da8cb Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 9 Aug 2024 19:56:49 +0900
Subject: [PATCH 059/205] DimensionControl: Add flag to remove bottom margin
 (#64346)

* DimensionControl: Add flag to remove bottom margin

* Add lint rule

* Update in block-editor readme

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                         |  1 +
 .../components/responsive-block-control/README.md    |  1 +
 packages/components/CHANGELOG.md                     |  1 +
 packages/components/src/dimension-control/README.md  |  9 +++++++++
 packages/components/src/dimension-control/index.tsx  |  3 +++
 packages/components/src/dimension-control/types.ts   | 12 +++++-------
 6 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 81408499bd34f4..cb669fb4177206 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -292,6 +292,7 @@ module.exports = {
 					...[
 						'CheckboxControl',
 						'ComboboxControl',
+						'DimensionControl',
 						'FocalPointPicker',
 						'RangeControl',
 						'SearchControl',
diff --git a/packages/block-editor/src/components/responsive-block-control/README.md b/packages/block-editor/src/components/responsive-block-control/README.md
index 1d99caa024a419..379e245f03ff37 100644
--- a/packages/block-editor/src/components/responsive-block-control/README.md
+++ b/packages/block-editor/src/components/responsive-block-control/README.md
@@ -64,6 +64,7 @@ registerBlockType( 'my-plugin/my-block', {
 		const paddingControl = ( labelComponent, viewport ) => {
 			return (
 				<DimensionControl
+					__nextHasNoMarginBottom
 					label={ viewport.label }
 					onChange={ // handle update to padding value here  }
 					value={ paddingSize }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index dca5b6e03dedc3..91c5a8c3bd012d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 -   `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)).
 -   `Guide`: Add `__next40pxDefaultSize` to buttons ([#64181](https://github.com/WordPress/gutenberg/pull/64181)).
 -   `SelectControl`: Pass through `options` props ([#64211](https://github.com/WordPress/gutenberg/pull/64211)).
+-   `DimensionControl`: Add `__nextHasNoMarginBottom` prop to remove bottom margin ([#64346](https://github.com/WordPress/gutenberg/pull/64346)).
 
 ### Internal
 
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index 498322931b7ab6..42f4a9678c09a6 100644
--- a/packages/components/src/dimension-control/README.md
+++ b/packages/components/src/dimension-control/README.md
@@ -17,6 +17,7 @@ export default function MyCustomDimensionControl() {
 
 	return (
 		<DimensionControl
+			__nextHasNoMarginBottom
 			label={ 'Padding' }
 			icon={ 'desktop' }
 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -91,3 +92,11 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 -   **Required:** No
 
 A string of classes to be added to the control component.
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 8ba0de0ce0599c..114ebe987dd35d 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -31,6 +31,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  *
  * 	return (
  * 		<DimensionControl
+ * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
  * 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -43,6 +44,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
 		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -87,6 +89,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 	return (
 		<SelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ clsx( className, 'block-editor-dimension-control' ) }
 			label={ selectLabel }
 			hideLabelFromVision={ false }
diff --git a/packages/components/src/dimension-control/types.ts b/packages/components/src/dimension-control/types.ts
index 671454f18c8a9b..03a4edf29153b7 100644
--- a/packages/components/src/dimension-control/types.ts
+++ b/packages/components/src/dimension-control/types.ts
@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { IconType } from '../icon';
+import type { SelectControlProps } from '../select-control/types';
 
 export type Size = {
 	/**
@@ -14,7 +15,10 @@ export type Size = {
 	slug: string;
 };
 
-export type DimensionControlProps = {
+export type DimensionControlProps = Pick<
+	SelectControlProps,
+	'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+> & {
 	/**
 	 * Label for the control.
 	 */
@@ -45,10 +49,4 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
 };

From 00a965cc6d299b049c9ce9f317295cf9302deccf Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Aug 2024 15:13:15 +0400
Subject: [PATCH 060/205] Gallery: Remove 'withNotices' HoC (#64384)

* Gallery: Remove 'withNotices' HoC
* Relocate 'withViewportMatch' closer to its only usage

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: geriux <geriux@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/block-library/src/gallery/edit.js           | 9 +--------
 packages/block-library/src/gallery/gallery.native.js | 3 ++-
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index f2faa40110dd13..1a7ce5fae04f8c 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -17,7 +16,6 @@ import {
 	MenuGroup,
 	MenuItem,
 	ToolbarDropdownMenu,
-	withNotices,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -31,7 +29,6 @@ import {
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
@@ -98,7 +95,7 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 const DEFAULT_BLOCK = { name: 'core/image' };
 const EMPTY_ARRAY = [];
 
-function GalleryEdit( props ) {
+export default function GalleryEdit( props ) {
 	const {
 		setAttributes,
 		attributes,
@@ -696,7 +693,3 @@ function GalleryEdit( props ) {
 		</>
 	);
 }
-export default compose( [
-	withNotices,
-	withViewportMatch( { isNarrow: '< small' } ),
-] )( GalleryEdit );
diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js
index 7fc280809db843..a5fa2db4fcf029 100644
--- a/packages/block-library/src/gallery/gallery.native.js
+++ b/packages/block-library/src/gallery/gallery.native.js
@@ -22,6 +22,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
+import { withViewportMatch } from '@wordpress/viewport';
 
 const TILE_SPACING = 8;
 
@@ -120,4 +121,4 @@ export const Gallery = ( props ) => {
 	);
 };
 
-export default Gallery;
+export default withViewportMatch( { isNarrow: '< small' } )( Gallery );

From d31b30ed135d06963a7036206a5f4855880f63f2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 9 Aug 2024 14:31:13 +0200
Subject: [PATCH 061/205] DataViews Quick Edit: Add the PostActions dropdown
 menu (#64393)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 docs/reference-guides/slotfills/README.md     |  9 ++---
 .../src/components/post-actions/index.js      | 36 +++++++++----------
 .../src/components/post-card-panel/index.js   | 13 +++++--
 .../src/components/sidebar/post-summary.js    |  7 +---
 4 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index 8b56ed4ce98b41..5ae68cdb5cb071 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -70,11 +70,10 @@ export default function PostSummary( { onActionPerformed } ) {
 	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, getCurrentPostType } =
+		const { isEditorPanelRemoved } =
 			select( editorStore );
 		return {
 			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
-			postType: getCurrentPostType(),
 		};
 	}, [] );
 
@@ -85,11 +84,7 @@ export default function PostSummary( { onActionPerformed } ) {
 					<>
 						<VStack spacing={ 4 }>
 							<PostCardPanel
-								actions={
-									<PostActions
-										onActionPerformed={ onActionPerformed }
-									/>
-								}
+								onActionPerformed={ onActionPerformed }
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />
diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
index 5b023956178938..9cc594233c8814 100644
--- a/packages/editor/src/components/post-actions/index.js
+++ b/packages/editor/src/components/post-actions/index.js
@@ -17,7 +17,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
-import { store as editorStore } from '../../store';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -27,25 +26,23 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-export default function PostActions( { onActionPerformed, buttonProps } ) {
+export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { item, permissions, postType } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		const { getEditedEntityRecord, getEntityRecordPermissions } = unlock(
-			select( coreStore )
-		);
-		const _postType = getCurrentPostType();
-		const _id = getCurrentPostId();
-		return {
-			item: getEditedEntityRecord( 'postType', _postType, _id ),
-			permissions: getEntityRecordPermissions(
-				'postType',
-				_postType,
-				_id
-			),
-			postType: _postType,
-		};
-	}, [] );
+	const { item, permissions } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecordPermissions } =
+				unlock( select( coreStore ) );
+			return {
+				item: getEditedEntityRecord( 'postType', postType, postId ),
+				permissions: getEntityRecordPermissions(
+					'postType',
+					postType,
+					postId
+				),
+			};
+		},
+		[ postId, postType ]
+	);
 	const itemWithPermissions = useMemo( () => {
 		return {
 			...item,
@@ -76,7 +73,6 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
 					}
-					{ ...buttonProps }
 				/>
 			}
 			onOpenChange={ setIsActionsMenuOpen }
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 5ac88b3dbc7f94..ed13af9b55a4aa 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -26,8 +26,13 @@ import {
 	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import PostActions from '../post-actions';
 
-export default function PostCardPanel( { postType, postId, actions } ) {
+export default function PostCardPanel( {
+	postType,
+	postId,
+	onActionPerformed,
+} ) {
 	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
 			const { __experimentalGetTemplateInfo } = select( editorStore );
@@ -105,7 +110,11 @@ export default function PostCardPanel( { postType, postId, actions } ) {
 						</span>
 					) }
 				</Text>
-				{ actions }
+				<PostActions
+					postType={ postType }
+					postId={ postId }
+					onActionPerformed={ onActionPerformed }
+				/>
 			</HStack>
 		</div>
 	);
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
index 573a59de827188..b19848f2247063 100644
--- a/packages/editor/src/components/sidebar/post-summary.js
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -8,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PluginPostStatusInfo from '../plugin-post-status-info';
-import PostActions from '../post-actions';
 import PostAuthorPanel from '../post-author/panel';
 import PostCardPanel from '../post-card-panel';
 import PostContentInformation from '../post-content-information';
@@ -63,11 +62,7 @@ export default function PostSummary( { onActionPerformed } ) {
 							<PostCardPanel
 								postType={ postType }
 								postId={ postId }
-								actions={
-									<PostActions
-										onActionPerformed={ onActionPerformed }
-									/>
-								}
+								onActionPerformed={ onActionPerformed }
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />

From e44bc77a252e81a549652e6ab480d62cb8184d5e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 9 Aug 2024 14:34:50 +0200
Subject: [PATCH 062/205] DataViews Quick Edit: Rely on the global save flow
 instead of a custom save button (#64389)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 packages/dataviews/CHANGELOG.md               |  1 +
 .../dataform/stories/index.story.tsx          |  7 +-
 .../dataviews/src/field-types/datetime.tsx    |  6 +-
 .../dataviews/src/field-types/integer.tsx     |  5 +-
 packages/dataviews/src/field-types/text.tsx   |  5 +-
 packages/dataviews/src/types.ts               | 11 +--
 .../src/components/post-edit/index.js         | 73 ++++++-------------
 .../src/components/post-actions/actions.js    |  7 +-
 .../src/dataviews/actions/reorder-page.tsx    |  7 +-
 9 files changed, 50 insertions(+), 72 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 239a69651a1f27..b1cb4504e72fad 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -16,6 +16,7 @@
 -   `setSelection` prop has been removed. Please use `onChangeSelection` instead.
 -   `header` field property has been renamed to `label`.
 -   `DataForm`'s `visibleFields` prop has been renamed to `fields`.
+-   `DataForm`'s `onChange` prop has been update to receive as argument only the fields that have changed.
 
 ### New features
 
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 7f3c5ff879b72a..7147b9c2342638 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -109,7 +109,12 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 				...form,
 				type,
 			} }
-			onChange={ setPost }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
 		/>
 	);
 };
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
index 3861a0db635d7b..c6b69048efe13c 100644
--- a/packages/dataviews/src/field-types/datetime.tsx
+++ b/packages/dataviews/src/field-types/datetime.tsx
@@ -41,11 +41,7 @@ function Edit< Item >( {
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
-		( newValue: string | null ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
+		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
 		[ id, onChange ]
 	);
 
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index bd4956493232df..38570ea6fec1a5 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -51,10 +51,9 @@ function Edit< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: Number( newValue ),
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index c6efb85f6f446b..5364017c629b00 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -42,10 +42,9 @@ function Edit< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: newValue,
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index d8a5ee8f68ecef..34e74eabd7c7d8 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import type {
-	ReactElement,
-	ComponentType,
-	Dispatch,
-	SetStateAction,
-} from 'react';
+import type { ReactElement, ComponentType } from 'react';
 
 /**
  * Internal dependencies
@@ -181,7 +176,7 @@ export type Form = {
 export type DataFormControlProps< Item > = {
 	data: Item;
 	field: NormalizedField< Item >;
-	onChange: Dispatch< SetStateAction< Item > >;
+	onChange: ( value: Record< string, any > ) => void;
 	hideLabelFromVision?: boolean;
 };
 
@@ -516,5 +511,5 @@ export interface DataFormProps< Item > {
 	data: Item;
 	fields: Field< Item >[];
 	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
+	onChange: ( value: Record< string, any > ) => void;
 }
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 0a56fdfe5786b7..80304f16503705 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -7,15 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DataForm, isItemValid } from '@wordpress/dataviews';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import {
-	Button,
-	FlexItem,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useState, useMemo } from '@wordpress/element';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
@@ -29,14 +25,12 @@ const { PostCardPanel } = unlock( editorPrivateApis );
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { initialEdits } = useSelect(
+	const { record } = useSelect(
 		( select ) => {
-			if ( ids.length !== 1 ) {
-			}
 			return {
-				initialEdits:
+				record:
 					ids.length === 1
-						? select( coreDataStore ).getEntityRecord(
+						? select( coreDataStore ).getEditedEntityRecord(
 								'postType',
 								postType,
 								ids[ 0 ]
@@ -46,60 +40,39 @@ function PostEditForm( { postType, postId } ) {
 		},
 		[ postType, ids ]
 	);
-	const registry = useRegistry();
-	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const [ multiEdits, setMultiEdits ] = useState( {} );
+	const { editEntityRecord } = useDispatch( coreDataStore );
 	const { fields } = usePostFields();
 	const form = {
 		type: 'panel',
 		fields: [ 'title', 'author', 'date', 'comment_status' ],
 	};
-	const [ edits, setEdits ] = useState( initialEdits );
-	const itemWithEdits = useMemo( () => {
-		return {
-			...initialEdits,
-			...edits,
-		};
-	}, [ initialEdits, edits ] );
-	const onSubmit = async ( event ) => {
-		event.preventDefault();
-
-		if ( ! isItemValid( itemWithEdits, fields, form ) ) {
-			return;
-		}
-
-		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
+	const onChange = ( edits ) => {
 		for ( const id of ids ) {
-			const item = await getEntityRecord( 'postType', postType, id );
-			saveEntityRecord( 'postType', postType, {
-				...item,
-				...edits,
-			} );
+			editEntityRecord( 'postType', postType, id, edits );
+			if ( ids.length > 1 ) {
+				setMultiEdits( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) );
+			}
 		}
 	};
+	useEffect( () => {
+		setMultiEdits( {} );
+	}, [ ids ] );
 
-	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
-		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
+		<VStack spacing={ 4 }>
 			{ ids.length === 1 && (
 				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
 			) }
 			<DataForm
-				data={ itemWithEdits }
+				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
 				form={ form }
-				onChange={ setEdits }
+				onChange={ onChange }
 			/>
-			<FlexItem>
-				<Button
-					variant="primary"
-					type="submit"
-					accessibleWhenDisabled
-					disabled={ isUpdateDisabled }
-					__next40pxDefaultSize
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</FlexItem>
 		</VStack>
 	);
 }
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 5e727376a92258..ff5cd7ddbb5452 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -234,7 +234,12 @@ const useDuplicatePostAction = ( postType ) => {
 									data={ item }
 									fields={ fields }
 									form={ formDuplicateAction }
-									onChange={ setItem }
+									onChange={ ( changes ) =>
+										setItem( {
+											...item,
+											...changes,
+										} )
+									}
 								/>
 								<HStack spacing={ 2 } justify="end">
 									<Button
diff --git a/packages/editor/src/dataviews/actions/reorder-page.tsx b/packages/editor/src/dataviews/actions/reorder-page.tsx
index 9193904f0f912c..1b9524123e7c95 100644
--- a/packages/editor/src/dataviews/actions/reorder-page.tsx
+++ b/packages/editor/src/dataviews/actions/reorder-page.tsx
@@ -81,7 +81,12 @@ function ReorderModal( {
 					data={ item }
 					fields={ fields }
 					form={ formOrderAction }
-					onChange={ setItem }
+					onChange={ ( changes ) =>
+						setItem( {
+							...item,
+							...changes,
+						} )
+					}
 				/>
 				<HStack justify="right">
 					<Button

From 266361a1362f8fdece5f77b5c1ff8cd89269bb8f Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 9 Aug 2024 17:50:59 +0200
Subject: [PATCH 063/205] Fix: Remove unnecessary className. (#64403)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../dataviews/src/components/dataviews-view-config/index.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 28e151079008eb..0aae714c5ce27a 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -239,7 +239,6 @@ function FieldControl() {
 						<HStack expanded>
 							<span>{ field.label }</span>
 							<Button
-								className="'dataviews-view-config__field-control-button"
 								size="compact"
 								onClick={ () =>
 									onChangeView( {

From b4ba75fd00030a012c064974181d41ee30f81b91 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 9 Aug 2024 18:31:48 +0200
Subject: [PATCH 064/205] Composite: improve Storybook examples and clean up
 prop docs (#64397)

* More clear tranform function comments

* Add interactive controls

* Add simpler default Storybook example

* Improve `activeId`'s prop description

* Add Groups example

* CHANGELOG

* Removed actions config in Storybook

* Better composite description

* Remove direct references to Ariakit's docs in JSDocs and README

* Add import from `@wordpress/components` in all code snippets

* useCompositeStore: update prop docs by using first-party docs

Instead of using Ariakit's definitions and descriptions, we use our own
version, which a copy or Ariakit's without any references to Ariakit, its
examples, or any other props that we don't expose.

* useCompositeStore: set explicit default values

Along the same fashion as the previous commit, setting explicit default
values will give us more control when propagating ariakit changes, and
will allows to stay true to our first-part props docs.

* Remove unnecessary space

* Provide first-party prop descriptions also for other composite components

* Add default value for store props to avoid errors while destructuring

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   1 +
 packages/components/src/composite/README.md   |  62 ++++-
 packages/components/src/composite/index.tsx   |  49 +++-
 .../src/composite/stories/index.story.tsx     | 117 ++++++++--
 .../src/composite/stories/utils.tsx           |  18 +-
 packages/components/src/composite/types.ts    | 211 +++++++++++++++---
 6 files changed, 384 insertions(+), 74 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 91c5a8c3bd012d..dd8a7a720258f2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Enhancements
 
+-   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 
 ## 28.5.0 (2024-08-07)
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
index 59953f1273a054..384fa46b1a9217 100644
--- a/packages/components/src/composite/README.md
+++ b/packages/components/src/composite/README.md
@@ -2,11 +2,11 @@
 
 `Composite` provides a single tab stop on the page and allows navigation through the focusable descendants with arrow keys. This abstract component is based on the [WAI-ARIA Composite Role⁠](https://w3c.github.io/aria/#composite).
 
-See the [Ariakit docs for the `Composite` component](https://ariakit.org/components/composite).
-
 ## Usage
 
 ```jsx
+import { Composite, useCompositeStore } from '@wordpress/components';
+
 const store = useCompositeStore();
 <Composite store={store}>
   <Composite.Group>
@@ -27,7 +27,10 @@ Creates a composite store.
 
 ##### `activeId`: `string | null`
 
-The current active item id. The active item is the element within the composite widget that has either DOM or virtual focus.
+The current active item `id`. The active item is the element within the composite widget that has either DOM or virtual focus (in case the `virtualFocus` prop is enabled).
+
+-   `null` represents the base composite element (the one with a [composite role](https://w3c.github.io/aria/#composite)). Users will be able to navigate out of it using arrow keys.
+-   If `activeId` is initially set to `null`, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
 
 -   Required: no
 
@@ -39,7 +42,7 @@ The composite item id that should be active by default when the composite widget
 
 ##### `setActiveId`: `((activeId: string | null | undefined) => void)`
 
-A callback that gets called when the activeId state changes.
+A callback that gets called when the `activeId` state changes.
 
 -   Required: no
 
@@ -47,40 +50,79 @@ A callback that gets called when the activeId state changes.
 
 Determines how the focus behaves when the user reaches the end of the composite widget.
 
+On one-dimensional composite widgets:
+
+-   `true` loops from the last item to the first item and vice-versa.
+-   `horizontal` loops only if `orientation` is `horizontal` or not set.
+-   `vertical` loops only if `orientation` is `vertical` or not set.
+-   If `activeId` is initially set to `null`, the composite element will be focused in between the last and first items.
+
+On two-dimensional composite widgets (ie. when using `CompositeRow`):
+
+-   `true` loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
+-   `horizontal` loops only from the last row item to the first item in the same row.
+-   `vertical` loops only from the last column item to the first item in the column row.
+-   If `activeId` is initially set to `null`, vertical loop will have no effect as moving down from the last row or up from the first row will focus on the composite element.
+-   If `focusWrap` matches the value of `focusLoop`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
+
 -   Required: no
 -   Default: `false`
 
 ##### `focusShift`: `boolean`
 
-Works only on two-dimensional composite widgets. If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.
+**Works only on two-dimensional composite widgets**.
+
+If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.
 
 -   Required: no
 -   Default: `false`
 
 ##### `focusWrap`: `boolean`
 
-Works only on two-dimensional composite widgets. If enabled, moving to the next item from the last one in a row or column will focus on the first item in the next row or column and vice-versa.
+**Works only on two-dimensional composite widgets**.
+
+If enabled, moving to the next item from the last one in a row or column
+will focus on the first item in the next row or column and vice-versa.
+
+-   `true` wraps between rows and columns.
+-   `horizontal` wraps only between rows.
+-   `vertical` wraps only between columns.
+-   If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
+    last item in the last row or column and the first item in the first row or
+    column and vice-versa.
 
 -   Required: no
 -   Default: `false`
 
 ##### `virtualFocus`: `boolean`
 
-If enabled, the composite element will act as an aria-activedescendant⁠ container instead of roving tabindex⁠. DOM focus will remain on the composite element while its items receive virtual focus. In both scenarios, the item in focus will carry the data-active-item attribute.
+If enabled, the composite element will act as an [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
+container instead of [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). DOM focus will remain on the composite element while its items receive
+virtual focus.
+
+In both scenarios, the item in focus will carry the `data-active-item` attribute.
 
 -   Required: no
 -   Default: `false`
 
 ##### `orientation`: `'horizontal' | 'vertical' | 'both'`
 
-Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus. It doesn't have any effect on two-dimensional composites.
+Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the `orientation` value determines which arrow keys can be used to move focus:
+
+-   `both`: all arrow keys work.
+-   `horizontal`: only left and right arrow keys work.
+-   `vertical`: only up and down arrow keys work.
+
+It doesn't have any effect on two-dimensional composites.
 
 -   Required: no
--   Default: `'both'`
+-   Default: `both`
 
 ##### `rtl`: `boolean`
 
-Determines how the next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir=`rtl` on HTML/CSS.
+Determines how the `store`'s `next` and `previous` functions will behave. If `rtl` is set to `true`, they will be inverted.
+
+This only affects the composite widget behavior. You still need to set `dir="rtl"` on HTML/CSS.
 
 -   Required: no
 -   Default: `false`
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
index 9496bdb9e98664..73df75272054c7 100644
--- a/packages/components/src/composite/index.tsx
+++ b/packages/components/src/composite/index.tsx
@@ -33,10 +33,11 @@ import type {
 
 /**
  * Creates a composite store.
- * @param props
- * @see https://ariakit.org/reference/use-composite-store
+ *
  * @example
  * ```jsx
+ * import { Composite, useCompositeStore } from '@wordpress/components';
+ *
  * const store = useCompositeStore();
  * <Composite store={store}>
  *   <Composite.Item>Item</Composite.Item>
@@ -45,8 +46,24 @@ import type {
  * </Composite>
  * ```
  */
-export function useCompositeStore( props: CompositeStoreProps ) {
-	return Ariakit.useCompositeStore( props );
+export function useCompositeStore( {
+	focusLoop = false,
+	focusWrap = false,
+	focusShift = false,
+	virtualFocus = false,
+	orientation = 'both',
+	rtl = false,
+	...props
+}: CompositeStoreProps = {} ) {
+	return Ariakit.useCompositeStore( {
+		focusLoop,
+		focusWrap,
+		focusShift,
+		virtualFocus,
+		orientation,
+		rtl,
+		...props,
+	} );
 }
 
 const Group = forwardRef<
@@ -82,10 +99,14 @@ const Row = forwardRef<
 Row.displayName = 'Composite.Row';
 
 /**
- * Renders a composite widget.
- * @see https://ariakit.org/reference/composite
+ * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
+ * role, which provides a single tab stop on the page and arrow key navigation
+ * through the focusable descendants.
+ *
  * @example
  * ```jsx
+ * import { Composite, useCompositeStore } from '@wordpress/components';
+ *
  * const store = useCompositeStore();
  * <Composite store={store}>
  *   <Composite.Item>Item 1</Composite.Item>
@@ -104,9 +125,11 @@ export const Composite = Object.assign(
 		displayName: 'Composite',
 		/**
 		 * Renders a group element for composite items.
-		 * @see https://ariakit.org/reference/composite-group
+		 *
 		 * @example
 		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
 		 * const store = useCompositeStore();
 		 * <Composite store={store}>
 		 *   <Composite.Group>
@@ -122,9 +145,11 @@ export const Composite = Object.assign(
 		 * Renders a label in a composite group. This component must be wrapped with
 		 * `Composite.Group` so the `aria-labelledby` prop is properly set on the
 		 * composite group element.
-		 * @see https://ariakit.org/reference/composite-group-label
+		 *
 		 * @example
 		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
 		 * const store = useCompositeStore();
 		 * <Composite store={store}>
 		 *   <Composite.Group>
@@ -138,9 +163,11 @@ export const Composite = Object.assign(
 		GroupLabel,
 		/**
 		 * Renders a composite item.
-		 * @see https://ariakit.org/reference/composite-item
+		 *
 		 * @example
 		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
 		 * const store = useCompositeStore();
 		 * <Composite store={store}>
 		 *   <Composite.Item>Item 1</Composite.Item>
@@ -154,9 +181,11 @@ export const Composite = Object.assign(
 		 * Renders a composite row. Wrapping `Composite.Item` elements within
 		 * `Composite.Row` will create a two-dimensional composite widget, such as a
 		 * grid.
-		 * @see https://ariakit.org/reference/composite-row
+		 *
 		 * @example
 		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
 		 * const store = useCompositeStore();
 		 * <Composite store={store}>
 		 *   <Composite.Row>
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index b143c1f7db05f7..280ed7b70546a4 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -29,7 +29,25 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Item': Composite.Item,
 	},
+	argTypes: {
+		activeId: { control: 'text' },
+		defaultActiveId: { control: 'text' },
+		setActiveId: { control: { type: null } },
+		focusLoop: {
+			control: 'select',
+			options: [ true, false, 'horizontal', 'vertical', 'both' ],
+		},
+		focusShift: { control: 'boolean' },
+		focusWrap: { control: 'boolean' },
+		virtualFocus: { control: 'boolean' },
+		rtl: { control: 'boolean' },
+		orientation: {
+			control: 'select',
+			options: [ 'horizontal', 'vertical', 'both' ],
+		},
+	},
 	parameters: {
+		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },
 			source: { transform },
@@ -56,8 +74,9 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 					useCompositeStore: {
 						activeId: {
 							name: 'activeId',
-							description:
-								'The current active item id. The active item is the element within the composite widget that has either DOM or virtual focus.',
+							description: `The current active item \`id\`. The active item is the element within the composite widget that has either DOM or virtual focus (in case the \`virtualFocus\` prop is enabled).
+- \`null\` represents the base composite element (the one with a [composite role](https://w3c.github.io/aria/#composite)). Users will be able to navigate out of it using arrow keys.
+- If \`activeId\` is initially set to \`null\`, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.`,
 							table: { type: { summary: 'string | null' } },
 						},
 						defaultActiveId: {
@@ -69,7 +88,7 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						setActiveId: {
 							name: 'setActiveId',
 							description:
-								'A callback that gets called when the activeId state changes.',
+								'A callback that gets called when the `activeId` state changes.',
 							table: {
 								type: {
 									summary:
@@ -79,8 +98,20 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						focusLoop: {
 							name: 'focusLoop',
-							description:
-								'Determines how the focus behaves when the user reaches the end of the composite widget.',
+							description: `On one-dimensional composite widgets:
+
+- \`true\` loops from the last item to the first item and vice-versa.
+- \`horizontal\` loops only if \`orientation\` is \`horizontal\` or not set.
+- \`vertical\` loops only if \`orientation\` is \`vertical\` or not set.
+- If \`activeId\` is initially set to \`null\`, the composite element will be focused in between the last and first items.
+
+On two-dimensional composite widgets (ie. when using \`CompositeRow\`):
+
+- \`true\` loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
+- \`horizontal\` loops only from the last row item to the first item in the same row.
+- \`vertical\` loops only from the last column item to the first item in the column row.
+- If \`activeId\` is initially set to \`null\`, vertical loop will have no effect as moving down from the last row or up from the first row will focus on the composite element.
+- If \`focusWrap\` matches the value of \`focusLoop\`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.`,
 							table: {
 								defaultValue: {
 									summary: 'false',
@@ -93,8 +124,9 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						focusShift: {
 							name: 'focusShift',
-							description:
-								"Works only on two-dimensional composite widgets. If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.",
+							description: `**Works only on two-dimensional composite widgets**.
+
+If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.`,
 							table: {
 								defaultValue: {
 									summary: 'false',
@@ -106,8 +138,17 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						focusWrap: {
 							name: 'focusWrap',
-							description:
-								'Works only on two-dimensional composite widgets. If enabled, moving to the next item from the last one in a row or column will focus on the first item in the next row or column and vice-versa.',
+							description: `**Works only on two-dimensional composite widgets**.
+
+If enabled, moving to the next item from the last one in a row or column
+will focus on the first item in the next row or column and vice-versa.
+
+- \`true\` wraps between rows and columns.
+- \`horizontal\` wraps only between rows.
+- \`vertical\` wraps only between columns.
+- If \`focusLoop\` matches the value of \`focusWrap\`, it'll wrap between the
+    last item in the last row or column and the first item in the first row or
+    column and vice-versa.`,
 							table: {
 								defaultValue: {
 									summary: 'false',
@@ -119,8 +160,11 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						virtualFocus: {
 							name: 'virtualFocus',
-							description:
-								'If enabled, the composite element will act as an aria-activedescendant⁠ container instead of roving tabindex⁠. DOM focus will remain on the composite element while its items receive virtual focus. In both scenarios, the item in focus will carry the data-active-item attribute.',
+							description: `If enabled, the composite element will act as an [\`aria-activedescendant\`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
+container instead of [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). DOM focus will remain on the composite element while its items receive
+virtual focus.
+
+In both scenarios, the item in focus will carry the \`data-active-item\` attribute.`,
 							table: {
 								defaultValue: {
 									summary: 'false',
@@ -132,8 +176,13 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						orientation: {
 							name: 'orientation',
-							description:
-								"Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus. It doesn't have any effect on two-dimensional composites.",
+							description: `Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the \`orientation\` value determines which arrow keys can be used to move focus:
+
+- \`both\`: all arrow keys work.
+- \`horizontal\`: only left and right arrow keys work.
+- \`vertical\`: only up and down arrow keys work.
+
+It doesn't have any effect on two-dimensional composites.`,
 							table: {
 								defaultValue: {
 									summary: "'both'",
@@ -146,8 +195,9 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						},
 						rtl: {
 							name: 'rtl',
-							description:
-								'Determines how the next and previous functions will behave. If rtl is set to true, they will be inverted. This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.',
+							description: `Determines how the \`store\`'s \`next\` and \`previous\` functions will behave. If \`rtl\` is set to \`true\`, they will be inverted.
+
+This only affects the composite widget behavior. You still need to set \`dir="rtl"\` on HTML/CSS.`,
 							table: {
 								defaultValue: {
 									summary: 'false',
@@ -196,6 +246,43 @@ export const Default: StoryFn< typeof UseCompositeStorePlaceholder > = (
 	const rtl = isRTL();
 	const store = useCompositeStore( { rtl, ...storeProps } );
 
+	return (
+		<Composite store={ store }>
+			<Composite.Item>Item one</Composite.Item>
+			<Composite.Item>Item two</Composite.Item>
+			<Composite.Item>Item three</Composite.Item>
+		</Composite>
+	);
+};
+
+export const Groups: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
+	return (
+		<Composite store={ store }>
+			<Composite.Group>
+				<Composite.GroupLabel>Group one</Composite.GroupLabel>
+				<Composite.Item>Item 1.1</Composite.Item>
+				<Composite.Item>Item 1.2</Composite.Item>
+			</Composite.Group>
+			<Composite.Group>
+				<Composite.GroupLabel>Group two</Composite.GroupLabel>
+				<Composite.Item>Item 2.1</Composite.Item>
+				<Composite.Item>Item 2.1</Composite.Item>
+			</Composite.Group>
+		</Composite>
+	);
+};
+
+export const Grid: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
 	return (
 		<Composite role="grid" store={ store } aria-label="Composite">
 			<Composite.Row role="row">
diff --git a/packages/components/src/composite/stories/utils.tsx b/packages/components/src/composite/stories/utils.tsx
index 425fb9a905bcff..f2f197877ff76d 100644
--- a/packages/components/src/composite/stories/utils.tsx
+++ b/packages/components/src/composite/stories/utils.tsx
@@ -9,9 +9,13 @@ import type { StoryContext } from '@storybook/react';
 import type { CompositeStoreProps } from '../types';
 
 /**
- * Renders a composite widget.
+ * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
+ * role, which provides a single tab stop on the page and arrow key navigation
+ * through the focusable descendants.
  *
  * ```jsx
+ * import { Composite, useCompositeStore } from '@wordpress/components';
+ *
  * const store = useCompositeStore();
  * <Composite store={ store }>
  *   <Composite.Item>Item 1</Composite.Item>
@@ -33,17 +37,17 @@ export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
 }
 UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
 
+// The output generated by Storybook for these components is
+// messy, so we apply this transform to make it more useful
+// for anyone reading the docs.
 export function transform( code: string, context: StoryContext ) {
-	// The output generated by Storybook for these components is
-	// messy, so we apply this transform to make it more useful
-	// for anyone reading the docs.
-	const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
-	const state = config.replace( ' {} ', '' );
+	const storeConfig = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+	const formattedStoreConfig = storeConfig.replace( ' {} ', '' );
 	return [
 		// Include a setup line, showing how to make use of
 		// `useCompositeStore` to convert store options into
 		// a composite store prop.
-		`const store = useCompositeStore(${ state });`,
+		`const store = useCompositeStore(${ formattedStoreConfig });`,
 		'',
 		'return (',
 		'  ' +
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
index 438d1caaa94f8a..37709133915d6c 100644
--- a/packages/components/src/composite/types.ts
+++ b/packages/components/src/composite/types.ts
@@ -3,45 +3,192 @@
  */
 import type * as Ariakit from '@ariakit/react';
 
-export type CompositeStoreProps = Pick<
-	Ariakit.CompositeStoreProps,
-	| 'activeId'
-	| 'defaultActiveId'
-	| 'setActiveId'
-	| 'focusLoop'
-	| 'focusShift'
-	| 'focusWrap'
-	| 'virtualFocus'
-	| 'orientation'
-	| 'rtl'
->;
+export type CompositeStoreProps = {
+	/**
+	 * The current active item `id`. The active item is the element within the
+	 * composite widget that has either DOM or virtual focus (in case
+	 * the `virtualFocus` prop is enabled).
+	 * - `null` represents the base composite element (the one with a [composite
+	 *   role](https://w3c.github.io/aria/#composite)). Users will be able to
+	 *   navigate out of it using arrow keys.
+	 * - If `activeId` is initially set to `null`, the base composite element
+	 *   itself will have focus and users will be able to navigate to it using
+	 *   arrow keys.
+	 */
+	activeId?: Ariakit.CompositeStoreProps[ 'activeId' ];
+	/**
+	 * The composite item id that should be active by default when the composite
+	 * widget is rendered. If `null`, the composite element itself will have focus
+	 * and users will be able to navigate to it using arrow keys. If `undefined`,
+	 * the first enabled item will be focused.
+	 */
+	defaultActiveId?: Ariakit.CompositeStoreProps[ 'defaultActiveId' ];
+	/**
+	 * A callback that gets called when the `activeId` state changes.
+	 */
+	setActiveId?: Ariakit.CompositeStoreProps[ 'setActiveId' ];
+	/**
+	 * Determines how the focus behaves when the user reaches the end of the
+	 * composite widget.
+	 *
+	 * On one-dimensional composite widgets:
+	 * - `true` loops from the last item to the first item and vice-versa.
+	 * - `horizontal` loops only if `orientation` is `horizontal` or not set.
+	 * - `vertical` loops only if `orientation` is `vertical` or not set.
+	 * - If `activeId` is initially set to `null`, the composite element will
+	 *   be focused in between the last and first items.
+	 *
+	 * On two-dimensional composite widgets (ie. when using `CompositeRow`):
+	 * - `true` loops from the last row/column item to the first item in the same
+	 *   row/column and vice-versa. If it's the last item in the last row, it
+	 *   moves to the first item in the first row and vice-versa.
+	 * - `horizontal` loops only from the last row item to the first item in the
+	 *   same row.
+	 * - `vertical` loops only from the last column item to the first item in the
+	 *   column row.
+	 * - If `activeId` is initially set to `null`, vertical loop will have no
+	 *   effect as moving down from the last row or up from the first row will
+	 *   focus on the composite element.
+	 * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the
+	 *   last item in the last row or column and the first item in the first row or
+	 *   column and vice-versa.
+	 *
+	 * @default false
+	 */
+	focusLoop?: Ariakit.CompositeStoreProps[ 'focusLoop' ];
+	/**
+	 * **Works only on two-dimensional composite widgets**.
+	 *
+	 * If enabled, moving to the next item from the last one in a row or column
+	 * will focus on the first item in the next row or column and vice-versa.
+	 * - `true` wraps between rows and columns.
+	 * - `horizontal` wraps only between rows.
+	 * - `vertical` wraps only between columns.
+	 * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
+	 *   last item in the last row or column and the first item in the first row or
+	 *   column and vice-versa.
+	 *
+	 * @default false
+	 */
+	focusWrap?: Ariakit.CompositeStoreProps[ 'focusWrap' ];
+	/**
+	 * **Works only on two-dimensional composite widgets**.
+	 *
+	 * If enabled, moving up or down when there's no next item or when the next
+	 * item is disabled will shift to the item right before it.
+	 *
+	 * @default false
+	 */
+	focusShift?: Ariakit.CompositeStoreProps[ 'focusShift' ];
+	/**
+	 * If enabled, the composite element will act as an
+	 * [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
+	 * container instead of [roving
+	 * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
+	 * DOM focus will remain on the composite element while its items receive
+	 * virtual focus.
+	 *
+	 * In both scenarios, the item in focus will carry the `data-active-item`
+	 * attribute.
+	 *
+	 * @default false
+	 */
+	virtualFocus?: Ariakit.CompositeStoreProps[ 'virtualFocus' ];
+	/**
+	 * Defines the orientation of the composite widget. If the composite has a
+	 * single row or column (one-dimensional), the `orientation` value determines
+	 * which arrow keys can be used to move focus:
+	 * - `both`: all arrow keys work.
+	 * - `horizontal`: only left and right arrow keys work.
+	 * - `vertical`: only up and down arrow keys work.
+	 *
+	 * It doesn't have any effect on two-dimensional composites.
+	 *
+	 * @default "both"
+	 */
+	orientation?: Ariakit.CompositeStoreProps[ 'orientation' ];
+	/**
+	 * Determines how the `store`'s `next` and `previous` functions will behave.
+	 * If `rtl` is set to `true`, they will be inverted.
+	 *
+	 * This only affects the composite widget behavior. You still need to set
+	 * `dir="rtl"` on HTML/CSS.
+	 *
+	 * @default false
+	 */
+	rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
+};
 
-export type CompositeProps = Pick<
-	Ariakit.CompositeProps,
-	'render' | 'children'
-> & {
+export type CompositeProps = {
 	/**
 	 * Object returned by the `useCompositeStore` hook.
 	 */
 	store: Ariakit.CompositeStore;
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeProps[ 'children' ];
 };
 
-export type CompositeGroupProps = Pick<
-	Ariakit.CompositeGroupProps,
-	'render' | 'children'
->;
+export type CompositeGroupProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeGroupProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeGroupProps[ 'children' ];
+};
 
-export type CompositeGroupLabelProps = Pick<
-	Ariakit.CompositeGroupLabelProps,
-	'render' | 'children'
->;
+export type CompositeGroupLabelProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeGroupLabelProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeGroupLabelProps[ 'children' ];
+};
 
-export type CompositeItemProps = Pick<
-	Ariakit.CompositeItemProps,
-	'render' | 'children'
->;
+export type CompositeItemProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeItemProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeItemProps[ 'children' ];
+};
 
-export type CompositeRowProps = Pick<
-	Ariakit.CompositeRowProps,
-	'render' | 'children'
->;
+export type CompositeRowProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeRowProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeRowProps[ 'children' ];
+};

From 46a026bde390382bbebb283dca25d2dba91b2b67 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 9 Aug 2024 19:15:18 +0200
Subject: [PATCH 065/205] Composite: add Hover and Typeahead subcomponents
 (#64399)

* Composite: add Hover and Typeahead subcomponents

* Add hover example + styles to highlight active item

* Add Composite.Hover props docs

* Add Typeahead docs and Storybook example

* CHANGELOG

* Remove the `focusOnHover` and `blurOnHoverEnd` props.

* Remove ariakit references

* Add import statements to code examples

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 packages/components/src/composite/README.md   | 32 +++++++
 packages/components/src/composite/index.tsx   | 56 ++++++++++++
 .../src/composite/stories/index.story.tsx     | 91 +++++++++++++++++++
 packages/components/src/composite/types.ts    | 28 ++++++
 5 files changed, 208 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index dd8a7a720258f2..96bf76815e71dd 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### New Features
 
 -   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
+-   `Composite`: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
 
 ### Enhancements
 
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
index 384fa46b1a9217..7bd12d0cabfa0c 100644
--- a/packages/components/src/composite/README.md
+++ b/packages/components/src/composite/README.md
@@ -216,3 +216,35 @@ Allows the component to be rendered as a different HTML element or React compone
 The contents of the component.
 
 -   Required: no
+
+### `Composite.Hover`
+
+Renders an element in a composite widget that receives focus on mouse move and loses focus to the composite base element on mouse leave. This should be combined with the `Composite.Item` component.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Typeahead`
+
+Renders a component that adds typeahead functionality to composite components. Hitting printable character keys will move focus to the next composite item that begins with the input characters.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
index 73df75272054c7..4e87b9a55fa5bb 100644
--- a/packages/components/src/composite/index.tsx
+++ b/packages/components/src/composite/index.tsx
@@ -29,6 +29,8 @@ import type {
 	CompositeGroupLabelProps,
 	CompositeItemProps,
 	CompositeRowProps,
+	CompositeHoverProps,
+	CompositeTypeaheadProps,
 } from './types';
 
 /**
@@ -98,6 +100,22 @@ const Row = forwardRef<
 } );
 Row.displayName = 'Composite.Row';
 
+const Hover = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeHoverProps, 'div', false >
+>( function CompositeHover( props, ref ) {
+	return <Ariakit.CompositeHover { ...props } ref={ ref } />;
+} );
+Hover.displayName = 'Composite.Hover';
+
+const Typeahead = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
+>( function CompositeTypeahead( props, ref ) {
+	return <Ariakit.CompositeTypeahead { ...props } ref={ ref } />;
+} );
+Typeahead.displayName = 'Composite.Typeahead';
+
 /**
  * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
  * role, which provides a single tab stop on the page and arrow key navigation
@@ -202,5 +220,43 @@ export const Composite = Object.assign(
 		 * ```
 		 */
 		Row,
+		/**
+		 * Renders an element in a composite widget that receives focus on mouse move
+		 * and loses focus to the composite base element on mouse leave. This should
+		 * be combined with the `Composite.Item` component.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
+		 * const store = useCompositeStore();
+		 * <Composite store={store}>
+		 *   <Composite.Hover render={ <Composite.Item /> }>
+		 *     Item 1
+		 *   </Composite.Hover>
+		 *   <Composite.Hover render={ <Composite.Item /> }>
+		 *     Item 2
+		 *   </Composite.Hover>
+		 * </Composite>
+		 * ```
+		 */
+		Hover,
+		/**
+		 * Renders a component that adds typeahead functionality to composite
+		 * components. Hitting printable character keys will move focus to the next
+		 * composite item that begins with the input characters.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 *
+		 * const store = useCompositeStore();
+		 * <Composite store={store} render={ <CompositeTypeahead /> }>
+		 *   <Composite.Item>Item 1</Composite.Item>
+		 *   <Composite.Item>Item 2</Composite.Item>
+		 * </Composite>
+		 * ```
+		 */
+		Typeahead,
 	}
 );
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index 280ed7b70546a4..f1be53445f79ad 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -28,6 +28,10 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		'Composite.Row': Composite.Row,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Item': Composite.Item,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Hover': Composite.Hover,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Typeahead': Composite.Typeahead,
 	},
 	argTypes: {
 		activeId: { control: 'text' },
@@ -227,6 +231,8 @@ This only affects the composite widget behavior. You still need to set \`dir="rt
 					'Composite.GroupLabel': commonArgTypes,
 					'Composite.Row': commonArgTypes,
 					'Composite.Item': commonArgTypes,
+					'Composite.Hover': commonArgTypes,
+					'Composite.Typeahead': commonArgTypes,
 				};
 
 				const name = component.displayName ?? '';
@@ -237,6 +243,41 @@ This only affects the composite widget behavior. You still need to set \`dir="rt
 			},
 		},
 	},
+	decorators: [
+		( Story ) => {
+			return (
+				<>
+					{ /* Visually style the active composite item  */ }
+					<style>{ `
+						[data-active-item] {
+							background-color: #ffc0b5;
+						}
+					` }</style>
+					<Story />
+					<div
+						style={ {
+							marginTop: '2em',
+							fontSize: '12px',
+							fontStyle: 'italic',
+						} }
+					>
+						{ /* eslint-disable-next-line no-restricted-syntax */ }
+						<p id="list-title">Notes</p>
+						<ul aria-labelledby="list-title">
+							<li>
+								The active composite item is highlighted with a
+								different background color;
+							</li>
+							<li>
+								A composite item can be the active item even
+								when it doesn&apos;t have keyboard focus.
+							</li>
+						</ul>
+					</div>
+				</>
+			);
+		},
+	],
 };
 export default meta;
 
@@ -303,3 +344,53 @@ export const Grid: StoryFn< typeof UseCompositeStorePlaceholder > = (
 		</Composite>
 	);
 };
+
+export const Hover: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
+	return (
+		<Composite store={ store }>
+			<Composite.Hover render={ <Composite.Item /> }>
+				Hover item one
+			</Composite.Hover>
+			<Composite.Hover render={ <Composite.Item /> }>
+				Hover item two
+			</Composite.Hover>
+			<Composite.Hover render={ <Composite.Item /> }>
+				Hover item three
+			</Composite.Hover>
+		</Composite>
+	);
+};
+Hover.parameters = {
+	docs: {
+		description: {
+			story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.',
+		},
+	},
+};
+
+export const Typeahead: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
+	return (
+		<Composite store={ store } render={ <Composite.Typeahead /> }>
+			<Composite.Item>Apple</Composite.Item>
+			<Composite.Item>Banana</Composite.Item>
+			<Composite.Item>Peach</Composite.Item>
+		</Composite>
+	);
+};
+Typeahead.parameters = {
+	docs: {
+		description: {
+			story: 'When focus in on the composite widget, hitting printable character keys will move focus to the next composite item that begins with the input characters.',
+		},
+	},
+};
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
index 37709133915d6c..8bd4b447a83aef 100644
--- a/packages/components/src/composite/types.ts
+++ b/packages/components/src/composite/types.ts
@@ -192,3 +192,31 @@ export type CompositeRowProps = {
 	 */
 	children?: Ariakit.CompositeRowProps[ 'children' ];
 };
+
+export type CompositeHoverProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeHoverProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeHoverProps[ 'children' ];
+};
+
+export type CompositeTypeaheadProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeTypeaheadProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeTypeaheadProps[ 'children' ];
+};

From 81d5d34ba25cad8faf2ee2ce1c4c4c2d8b6aeb8a Mon Sep 17 00:00:00 2001
From: Damon Cook <colorful-tones@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:58:34 -0400
Subject: [PATCH 066/205] Docs: Interactivity API: Add wp_interactivity_state()
 clarification (#64356)

* Add wp_interactivity_state() clarification

* Update code example for wp_interactivity_state

* Update docs/reference-guides/interactivity-api/api-reference.md

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Update docs/reference-guides/interactivity-api/api-reference.md

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

* Update docs/reference-guides/interactivity-api/api-reference.md

Co-authored-by: Luis Herranz <luisherranz@gmail.com>

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---
 .../interactivity-api/api-reference.md        | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
index a4b400b8c0276b..29ec67cc17507f 100644
--- a/docs/reference-guides/interactivity-api/api-reference.md
+++ b/docs/reference-guides/interactivity-api/api-reference.md
@@ -1152,7 +1152,7 @@ store('mySliderPlugin', {
 
 ## Server functions
 
-The Interactivity API comes with handy functions on the PHP part. Apart from [setting the store via server](#on-the-server-side), there is also a function to get and set Interactivity related config variables.
+The Interactivity API comes with handy functions that allow you to initialize and reference configuration options on the server. This is necessary to feed the initial data that the Server Directive Processing will use to modify the HTML markup before it's send to the browser. It is also a great way to leverage many of WordPress's APIs, like nonces, AJAX, and translations.
 
 ### wp_interactivity_config
 
@@ -1181,6 +1181,53 @@ This config can be retrieved on the client:
 const { showLikeButton } = getConfig();
 ```
 
+### wp_interactivity_state
+
+`wp_interactivity_state` allows the initialization of the global state on the server, which will be used to process the directives on the server and then will be merged with any global state defined in the client.
+
+Initializing the global state on the server also allows you to use many critical WordPress APIs, including [AJAX](https://developer.wordpress.org/plugins/javascript/ajax/), or [nonces](https://developer.wordpress.org/plugins/javascript/enqueuing/#nonce).
+
+The `wp_interactivity_state` function receives two arguments, a string with the namespace that will be used as a reference and an associative array containing the values.
+
+Here is an example of passing the WP Admin AJAX endpoint with a nonce.
+
+```php
+// render.php
+
+wp_interactivity_state(
+	'myPlugin',
+	array(
+		'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+		'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
+	),
+);
+```
+
+```js
+// view.js
+
+const { state } = store( 'myPlugin', {
+	actions: {
+		*doSomething() {
+			try {
+				const formData = new FormData();
+				formData.append( 'action', 'do_something' );
+				formData.append( '_ajax_nonce', state.nonce );
+
+				const data = yield fetch( state.ajaxUrl, {
+					method: 'POST',
+					body: formData,
+				} ).then( ( response ) => response.json() );
+					console.log( 'Server data!', data );
+				} catch ( e ) {
+					// Something went wrong!
+				}
+			},
+		},
+	}
+);
+```
+
 ### wp_interactivity_process_directives
 
 `wp_interactivity_process_directives` returns the updated HTML after the directives have been processed.

From e0b54b3596b35e7df15bd674f7c9ead918f05b07 Mon Sep 17 00:00:00 2001
From: Xinyu Liu <meteor.lxy@foxmail.com>
Date: Sun, 11 Aug 2024 18:35:46 +0800
Subject: [PATCH 067/205] Fix example of useBlockProps hook (#64363)

* Fix example of useBlockProps hook

* chore: tweaks

* chore: updates

Co-authored-by: meteorlxy <meteorlxy@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/block-editor/README.md               | 23 ++++++++-----------
 .../block-list/use-block-props/index.js       |  4 ++--
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 776b217ba54f6e..c798015804b3e5 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -920,20 +920,15 @@ _Usage_
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function Edit() {
-
-  const blockProps = useBlockProps(
-    className: 'my-custom-class',
-    style: {
-      color: '#222222',
-      backgroundColor: '#eeeeee'
-    }
-  )
-
-  return (
-    <div { ...blockProps }>
-
-    </div>
-  )
+	const blockProps = useBlockProps( {
+		className: 'my-custom-class',
+		style: {
+			color: '#222222',
+			backgroundColor: '#eeeeee',
+		},
+	} );
+
+	return <div { ...blockProps }></div>;
 }
 ```
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 6c44aa5c5d9705..15fb83139237cc 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -49,13 +49,13 @@ import { canBindBlock } from '../../../hooks/use-bindings-attributes';
  *
  * export default function Edit() {
  *
- *   const blockProps = useBlockProps(
+ *   const blockProps = useBlockProps( {
  *     className: 'my-custom-class',
  *     style: {
  *       color: '#222222',
  *       backgroundColor: '#eeeeee'
  *     }
- *   )
+ *   } )
  *
  *   return (
  *	    <div { ...blockProps }>

From 24f9ca62b0b83d3832233d276fea564b1714a172 Mon Sep 17 00:00:00 2001
From: Nick Diego <nick.diego@automattic.com>
Date: Sun, 11 Aug 2024 23:41:56 -0500
Subject: [PATCH 068/205] Docs: Fix typos in the Block Filters documentation
 (#64426)

Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 docs/reference-guides/filters/block-filters.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index e7a31c1e3bbc83..c70bb356a445a8 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -144,7 +144,7 @@ Filters the font-end content of any block. This filter has no impact on the beha
 The callback function for this filter receives three parameters:
 
 - `$block_content` (`string`): The block content.
-- `block` (`array`): The full block, including name and attributes.
+- `$block` (`array`): The full block, including name and attributes.
 - `$instance` (`WP_Block`): The block instance.
 
 In the following example, the class `example-class` is added to all Paragraph blocks on the front end. Here the [HTML API](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/) is used to easily add the class instead of relying on regex.
@@ -177,7 +177,7 @@ Filters the font-end content of the defined block. This is just a simpler form o
 The callback function for this filter receives three parameters:
 
 - `$block_content` (`string`): The block content.
-- `block` (`array`): The full block, including name and attributes.
+- `$block` (`array`): The full block, including name and attributes.
 - `$instance` (`WP_Block`): The block instance.
 
 In the following example, the class `example-class` is added to all Paragraph blocks on the front end. Notice that compared to the `render_block` example above, you no longer need to check the block type before modifying the content. Again, the [HTML API](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/) is used instead of regex.

From 92ea19f8cb946d051855aaa6791b0018a5d15fcb Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 12 Aug 2024 10:18:00 +0200
Subject: [PATCH 069/205] Remove typed function from API reference (#64429)

Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: atachibana <atachibana@git.wordpress.org>
---
 docs/reference-guides/interactivity-api/api-reference.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
index 29ec67cc17507f..46bd20bece0bda 100644
--- a/docs/reference-guides/interactivity-api/api-reference.md
+++ b/docs/reference-guides/interactivity-api/api-reference.md
@@ -776,7 +776,7 @@ Actions are just regular JavaScript functions. Usually triggered by the `data-wp
 ```ts
 const { state, actions } = store("myPlugin", {
   actions: {
-    selectItem: (id?: number) => {
+    selectItem: ( id ) => {
       const context = getContext();
       // `id` is optional here, so this action can be used in a directive.
       state.selected = id || context.id;

From 21cfde3f3ccba896a7026312ae646c74626d9621 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 12 Aug 2024 12:37:18 +0400
Subject: [PATCH 070/205] Site Editor: Fix Template Parts post type preload
 path (#64401)

* Site Editor: Fix Template Parts post type preload path
* Add backport changelog file

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 backport-changelog/6.7/7179.md        |  3 +++
 lib/compat/wordpress-6.7/rest-api.php | 31 +++++++++++++++++++++++++++
 lib/load.php                          |  3 +++
 3 files changed, 37 insertions(+)
 create mode 100644 backport-changelog/6.7/7179.md
 create mode 100644 lib/compat/wordpress-6.7/rest-api.php

diff --git a/backport-changelog/6.7/7179.md b/backport-changelog/6.7/7179.md
new file mode 100644
index 00000000000000..f359b6610a94e6
--- /dev/null
+++ b/backport-changelog/6.7/7179.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7179
+
+* https://github.com/WordPress/gutenberg/pull/64401
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
new file mode 100644
index 00000000000000..713d31c4632c74
--- /dev/null
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+/**
+ * Update the preload paths registered in Core (`site-editor.php` or `edit-form-blocks.php`).
+ *
+ * @param array                   $paths REST API paths to preload.
+ * @param WP_Block_Editor_Context $context Current block editor context.
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
+	if ( 'core/edit-site' === $context->name ) {
+		// Fixes post type name. It should be `type/wp_template_part`.
+		$parts_key = array_search( '/wp/v2/types/wp_template-part?context=edit', $paths, true );
+		if ( false !== $parts_key ) {
+			$paths[ $parts_key ] = '/wp/v2/types/wp_template_part?context=edit';
+		}
+	}
+
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );
diff --git a/lib/load.php b/lib/load.php
index 5a299f3b696968..4bb0ab88024a4a 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -40,6 +40,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
 	require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
 
+	// WordPress 6.7 compat.
+	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
+
 	// Plugin specific code.
 	require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php';
 	require_once __DIR__ . '/class-wp-rest-edit-site-export-controller-gutenberg.php';

From acc9a38a331cd75b559e11e268ddde2eddfc2b89 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 12 Aug 2024 09:52:36 +0100
Subject: [PATCH 071/205] Add elevation scale (#64108)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
---
 packages/base-styles/_variables.scss          | 26 +++++++++++++------
 .../components/src/utils/config-values.js     |  4 +++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 97eb513cf38aeb..0d3e139a7dd555 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -50,6 +50,22 @@ $radius-large: 8px;     // Applied to containers with larger padding.
 $radius-full: 9999px;   // For lozenges.
 $radius-round: 50%;     // For circles and ovals.
 
+/**
+ * Elevation scale.
+ */
+
+// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
+$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
+
+// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
+$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
+
+// For components that offer additional actions. Example: Menus, Command Palette
+$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
+
+// For components that confirm decisions or handle necessary interruptions. Example: Modals.
+$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+
 /**
  * Dimensions.
  */
@@ -74,14 +90,6 @@ $modal-width-large: 840px;
 $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 
-
-/**
- * Shadows.
- */
-
-$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
-$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
-
 /**
  * Editor widths.
  */
@@ -107,6 +115,8 @@ $radio-input-size-sm: 24px; // Width & height for small viewports.
 // Deprecated, please avoid using these.
 $block-padding: 14px; // Used to define space between block footprint and surrouding borders.
 $radius-block-ui: $radius-small;
+$shadow-popover: $elevation-x-small;
+$shadow-modal: $elevation-large;
 
 
 /**
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index ba92813bdbfb0f..65632170c9e3d7 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -74,6 +74,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
 	popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
+	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
+	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
+	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
+	elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

From 4a8b166d623c442087a36eb41c35cc6dcd4e14ca Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Aug 2024 11:47:55 +0200
Subject: [PATCH 072/205] DataViews: Refactor the edit function to be based on
 discrete controls (#64404)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../src/dataform-controls/datetime.tsx        | 37 ++++++++++
 .../dataform-controls/index.tsx               | 25 +++++--
 .../src/dataform-controls/integer.tsx         | 38 ++++++++++
 .../dataform-controls/radio.tsx               |  9 ++-
 .../src/dataform-controls/select.tsx          | 52 ++++++++++++++
 .../dataviews/src/dataform-controls/text.tsx  | 40 +++++++++++
 .../dataviews/src/field-types/datetime.tsx    | 67 +----------------
 .../dataviews/src/field-types/integer.tsx     | 72 +------------------
 packages/dataviews/src/field-types/text.tsx   | 71 +-----------------
 packages/dataviews/src/normalize-fields.ts    |  2 +-
 packages/dataviews/src/types.ts               |  6 +-
 11 files changed, 201 insertions(+), 218 deletions(-)
 create mode 100644 packages/dataviews/src/dataform-controls/datetime.tsx
 rename packages/dataviews/src/{components => }/dataform-controls/index.tsx (60%)
 create mode 100644 packages/dataviews/src/dataform-controls/integer.tsx
 rename packages/dataviews/src/{components => }/dataform-controls/radio.tsx (80%)
 create mode 100644 packages/dataviews/src/dataform-controls/select.tsx
 create mode 100644 packages/dataviews/src/dataform-controls/text.tsx

diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
new file mode 100644
index 00000000000000..3ba22dc0c1b089
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TimePicker } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function DateTime< Item >( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<TimePicker
+				currentTime={ value }
+				onChange={ onChangeControl }
+				hideLabelFromVision
+			/>
+		</fieldset>
+	);
+}
diff --git a/packages/dataviews/src/components/dataform-controls/index.tsx b/packages/dataviews/src/dataform-controls/index.tsx
similarity index 60%
rename from packages/dataviews/src/components/dataform-controls/index.tsx
rename to packages/dataviews/src/dataform-controls/index.tsx
index dd913269cd09ea..297e73c28f837c 100644
--- a/packages/dataviews/src/components/dataform-controls/index.tsx
+++ b/packages/dataviews/src/dataform-controls/index.tsx
@@ -10,15 +10,23 @@ import type {
 	DataFormControlProps,
 	Field,
 	FieldTypeDefinition,
-} from '../../types';
+} from '../types';
+import datetime from './datetime';
+import integer from './integer';
 import radio from './radio';
+import select from './select';
+import text from './text';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	datetime,
+	integer,
 	radio,
+	select,
+	text,
 };
 
 export function getControl< Item >(
@@ -29,12 +37,19 @@ export function getControl< Item >(
 		return field.Edit;
 	}
 
-	let control;
 	if ( typeof field.Edit === 'string' ) {
-		control = getControlByType( field.Edit );
+		return getControlByType( field.Edit );
 	}
 
-	return control || fieldTypeDefinition.Edit;
+	if ( field.elements ) {
+		return getControlByType( 'select' );
+	}
+
+	if ( typeof fieldTypeDefinition.Edit === 'string' ) {
+		return getControlByType( fieldTypeDefinition.Edit );
+	}
+
+	return fieldTypeDefinition.Edit;
 }
 
 export function getControlByType( type: string ) {
@@ -42,5 +57,5 @@ export function getControlByType( type: string ) {
 		return FORM_CONTROLS[ type ];
 	}
 
-	return null;
+	throw 'Control ' + type + ' not found';
 }
diff --git a/packages/dataviews/src/dataform-controls/integer.tsx b/packages/dataviews/src/dataform-controls/integer.tsx
new file mode 100644
index 00000000000000..f70a90ffe15239
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/integer.tsx
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Integer< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: Number( newValue ),
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<NumberControl
+			label={ label }
+			help={ description }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataform-controls/radio.tsx b/packages/dataviews/src/dataform-controls/radio.tsx
similarity index 80%
rename from packages/dataviews/src/components/dataform-controls/radio.tsx
rename to packages/dataviews/src/dataform-controls/radio.tsx
index d264aa6c24b7fb..3d616404e0c053 100644
--- a/packages/dataviews/src/components/dataform-controls/radio.tsx
+++ b/packages/dataviews/src/dataform-controls/radio.tsx
@@ -7,9 +7,9 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { DataFormControlProps } from '../../types';
+import type { DataFormControlProps } from '../types';
 
-export default function Edit< Item >( {
+export default function Radio< Item >( {
 	data,
 	field,
 	onChange,
@@ -20,10 +20,9 @@ export default function Edit< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: newValue,
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 
diff --git a/packages/dataviews/src/dataform-controls/select.tsx b/packages/dataviews/src/dataform-controls/select.tsx
new file mode 100644
index 00000000000000..2b3bd9373fc155
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/select.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Select< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: any ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const elements = [
+		/*
+		 * Value can be undefined when:
+		 *
+		 * - the field is not required
+		 * - in bulk editing
+		 *
+		 */
+		{ label: __( 'Select item' ), value: '' },
+		...( field?.elements ?? [] ),
+	];
+
+	return (
+		<SelectControl
+			label={ label }
+			value={ value }
+			options={ elements }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/text.tsx b/packages/dataviews/src/dataform-controls/text.tsx
new file mode 100644
index 00000000000000..7ac095f4abede7
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/text.tsx
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Text< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
index c6b69048efe13c..aa97fc86c318c2 100644
--- a/packages/dataviews/src/field-types/datetime.tsx
+++ b/packages/dataviews/src/field-types/datetime.tsx
@@ -1,18 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { BaseControl, TimePicker, SelectControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
@@ -32,60 +21,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-			/>
-		);
-	}
-
-	return (
-		<fieldset>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			<TimePicker
-				currentTime={ value }
-				onChange={ onChangeControl }
-				hideLabelFromVision
-			/>
-		</fieldset>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'datetime',
 };
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index 38570ea6fec1a5..f57c8e382db816 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -1,21 +1,7 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalNumberControl as NumberControl,
-	SelectControl,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? a - b : b - a;
@@ -41,62 +27,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
-	const { id, label, description } = field;
-	const value = field.getValue( { item: data } ) ?? '';
-	const onChangeControl = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( {
-				[ id ]: Number( newValue ),
-			} ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
-
-	return (
-		<NumberControl
-			label={ label }
-			help={ description }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'integer',
 };
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 5364017c629b00..76ff699d0848c4 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -1,18 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { SelectControl, TextControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( valueA: any, valueB: any, direction: SortDirection ) {
 	return direction === 'asc'
@@ -31,64 +20,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
-	const { id, label, placeholder } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
-
-	return (
-		<TextControl
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'text',
 };
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 2cdde5b3343798..f9f95b5b8140dc 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -3,7 +3,7 @@
  */
 import getFieldTypeDefinition from './field-types';
 import type { Field, NormalizedField } from './types';
-import { getControl } from './components/dataform-controls';
+import { getControl } from './dataform-controls';
 
 /**
  * Apply default values and normalize the fields config.
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 34e74eabd7c7d8..7bbbc8cb863c09 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -63,9 +63,9 @@ export type FieldTypeDefinition< Item > = {
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
 
 	/**
-	 * Callback used to render an edit control for the field.
+	 * Callback used to render an edit control for the field or control name.
 	 */
-	Edit: ComponentType< DataFormControlProps< Item > >;
+	Edit: ComponentType< DataFormControlProps< Item > > | string;
 };
 
 /**
@@ -105,7 +105,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render an edit control for the field.
 	 */
-	Edit?: ComponentType< DataFormControlProps< Item > > | 'radio';
+	Edit?: ComponentType< DataFormControlProps< Item > > | string;
 
 	/**
 	 * Callback used to sort the field.

From 1e13913453eb520805e3aaadd6c2670be2c642e2 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 12 Aug 2024 14:03:34 +0400
Subject: [PATCH 073/205] Edit Post: Avoid unnecessary post-template ID lookup
 (#64431)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/edit-post/src/store/private-selectors.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/store/private-selectors.js b/packages/edit-post/src/store/private-selectors.js
index c151f935d68d50..0c0ac3c518024d 100644
--- a/packages/edit-post/src/store/private-selectors.js
+++ b/packages/edit-post/src/store/private-selectors.js
@@ -50,8 +50,11 @@ export const getEditedPostTemplateId = createRegistrySelector(
 		} else {
 			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
 		}
-		return select( coreStore ).getDefaultTemplateId( {
-			slug: slugToCheck,
-		} );
+
+		if ( postType ) {
+			return select( coreStore ).getDefaultTemplateId( {
+				slug: slugToCheck,
+			} );
+		}
 	}
 );

From da50610ac45e2cd18b59424d260bb3d693535061 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Mon, 12 Aug 2024 11:28:40 +0100
Subject: [PATCH 074/205] Docs/Dataviews component - Update README with missing
 properties and recent changes (#64435)

Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 packages/dataviews/README.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index c82a748df98858..df537d2a8cecff 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -72,12 +72,12 @@ const STATUSES = [
 const fields = [
 	{
 		id: 'title',
-		header: 'Title',
+		label: 'Title',
 		enableHiding: false,
 	},
 	{
 		id: 'date',
-		header: 'Date',
+		label: 'Date',
 		render: ( { item } ) => {
 			return (
 				<time>{ getFormattedDate( item.date ) }</time>
@@ -86,7 +86,7 @@ const fields = [
 	},
 	{
 		id: 'author',
-		header: __( 'Author' ),
+		label: __( 'Author' ),
 		render: ( { item } ) => {
 			return (
 				<a href="...">{ item.author }</a>
@@ -102,7 +102,7 @@ const fields = [
 		enableSorting: false
 	},
 	{
-		header: __( 'Status' ),
+		label: __( 'Status' ),
 		id: 'status',
 		getValue: ( { item } ) =>
 			STATUSES.find( ( { value } ) => value === item.status )
@@ -119,13 +119,14 @@ const fields = [
 Each field is an object with the following properties:
 
 -   `id`: identifier for the field. Unique.
--   `header`: the field's name to be shown in the UI.
+-   `label`: the field's name to be shown in the UI.
 -   `getValue`: function that returns the value of the field, defaults to `field[id]`.
 -   `render`: function that renders the field. Optional, `getValue` will be used if `render` is not defined.
 -   `elements`: the set of valid values for the field's value.
 -   `type`: the type of the field. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
+-   `enableGlobalSearch`: whether the field is searchable. False by default.
 -   `filterBy`: configuration for the filters.
     -   `operators`: the list of operators supported by the field.
     -   `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.

From d86a4999338183fc1f17067bed11d6b53ed46f87 Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:27:41 +0530
Subject: [PATCH 075/205] Tag Cloud: Add border block support  (#63579)

* Add border support to tag cloud block

* Prevent duplicate border styles in editor

* Add comments on style and edit component changes in tag cloud block

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 packages/block-library/src/tag-cloud/block.json  | 12 ++++++++++++
 packages/block-library/src/tag-cloud/edit.js     | 11 ++++++++++-
 packages/block-library/src/tag-cloud/editor.scss |  4 +++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index 0c2095bff2a152..044bc0c5333768 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/packages/block-library/src/tag-cloud/block.json
@@ -51,6 +51,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index 9a2b531b30f8ab..8ced99271e4807 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -107,6 +107,15 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		setAttributes( updateObj );
 	};
 
+	// Remove border styles from the server-side attributes to prevent duplicate border.
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+		},
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
@@ -188,7 +197,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					<ServerSideRender
 						skipBlockSupportAttributes
 						block="core/tag-cloud"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>
diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
index de2a95a386fa85..d00a450174f2fd 100644
--- a/packages/block-library/src/tag-cloud/editor.scss
+++ b/packages/block-library/src/tag-cloud/editor.scss
@@ -1,4 +1,4 @@
-// The following styles are to prevent duplicate spacing for the tag cloud
+// The following styles are to prevent duplicate spacing and border for the tag cloud
 // block in the editor given it uses server side rendering. The specificity
 // must be higher than `0-1-0` to override global styles. Targeting the
 // inner use of the .wp-block-tag-cloud class should minimize impact on
@@ -6,4 +6,6 @@
 .wp-block-tag-cloud .wp-block-tag-cloud {
 	margin: 0;
 	padding: 0;
+	border: none;
+	border-radius: inherit;
 }

From ba8c2c0d76957cb5534619ea496a79344fcacc6f Mon Sep 17 00:00:00 2001
From: Anton Vlasenko <43744263+anton-vlasenko@users.noreply.github.com>
Date: Mon, 12 Aug 2024 13:06:56 +0200
Subject: [PATCH 076/205] Fix gutenberg/gutenberg-coding-standards licensing
 issues (#61913)

1. change the license to `GPL-2.0-or-later`;
2. remove third-party code from the `SinceTagSniff::find_docblock()` method;
3. remove third-party code from the `SinceTagSniff::is_function_call()` method;
4. remove the `SinceTagSniff::find_hook_docblock()` method and add the new `find_previous_line_token()` method (refactoring);
5. fix typo in the `SinceTagSniff::process()` method;
6. remove unused code from `bootstrap.php` and make variables use snake case;
7. add the `License` section to the `README.md` file.

Co-authored-by: anton-vlasenko <antonvlasenko@git.wordpress.org>
Co-authored-by: rodrigoprimo <rodrigosprimo@git.wordpress.org>
Co-authored-by: azaozz <azaozz@git.wordpress.org>
---
 .../.phpcs.xml.dist                           |   9 +-
 .../ForbiddenFunctionsAndClassesSniff.php     |   3 +-
 .../GuardedFunctionAndClassNamesSniff.php     |   3 +-
 .../Sniffs/Commenting/SinceTagSniff.php       | 122 +++++++-----------
 .../ValidBlockLibraryFunctionNameSniff.php    |   3 +-
 .../Gutenberg/Tests/AbstractSniffUnitTest.php |  10 +-
 .../ForbiddenFunctionsAndClassesUnitTest.php  |   3 +-
 .../GuardedFunctionAndClassNamesUnitTest.php  |   3 +-
 .../Tests/Commenting/SinceTagUnitTest.php     |   3 +-
 .../ValidBlockLibraryFunctionNameUnitTest.php |   3 +-
 test/php/gutenberg-coding-standards/README.md |   8 +-
 .../Tests/bootstrap.php                       |  87 ++++---------
 .../gutenberg-coding-standards/composer.json  |   2 +-
 13 files changed, 92 insertions(+), 167 deletions(-)

diff --git a/test/php/gutenberg-coding-standards/.phpcs.xml.dist b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
index 7f717f65374d7b..7ebe60e3d28567 100644
--- a/test/php/gutenberg-coding-standards/.phpcs.xml.dist
+++ b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
@@ -1,15 +1,8 @@
 <?xml version="1.0"?>
-<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="WordPress Coding Standards" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/squizlabs/PHP_CodeSniffer/master/phpcs.xsd">
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Gutenberg Coding Standards" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/PHPCSStandards/PHP_CodeSniffer/master/phpcs.xsd">
 
 	<description>The Coding standard for the Gutenberg Coding Standards itself.</description>
 
-	<!--
-	#############################################################################
-	COMMAND LINE ARGUMENTS
-	https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-Ruleset
-	#############################################################################
-	-->
-
 	<file>.</file>
 
 	<!-- Exclude Composer vendor directory. -->
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
index 87d966ecb56030..12d388cc378180 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
index c6e51119f1513a..d947d6d9382b35 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
index f216f4f681f0e2..20f698954cb267 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\Commenting;
@@ -22,7 +21,7 @@
 /**
  * This sniff verifies the presence of valid `@since` tags in the docblocks of various PHP structures
  * and WordPress hooks. Supported structures include classes, interfaces, traits, enums, functions, methods and properties.
- * Files located within the __experimental block of the block-library are excluded from checks.
+ * Files located within the __experimental blocks of the block-library folder are excluded from checks.
  */
 class SinceTagSniff implements Sniff {
 
@@ -147,7 +146,7 @@ protected function process_hook( File $phpcs_file, $stack_pointer ) {
 
 		$violation_codes = static::get_violation_codes( 'Hook' );
 
-		$docblock = static::find_hook_docblock( $phpcs_file, $stack_pointer );
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
 
 		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
 		if ( empty( $version_tags ) ) {
@@ -436,114 +435,81 @@ protected function check_below_minimum_visibility( $visibility ) {
 	}
 
 	/**
-	 * Finds the docblock associated with a hook, starting from a specified position in the token stack.
-	 * Since a line containing a hook can include any type of tokens, this method backtracks through the tokens
-	 * to locate the first token on the current line. This token is then used as the starting point for searching the docblock.
+	 * Finds the first token on the previous line relative to the stack pointer passed to the method.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position to start looking for the docblock.
-	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 * @param int  $stack_pointer The position to find the previous line token from.
+	 * @return int|false The last token on the previous line, or false if not found.
 	 */
-	protected static function find_hook_docblock( File $phpcs_file, $stack_pointer ) {
+	protected static function find_previous_line_token( File $phpcs_file, $stack_pointer ) {
 		$tokens       = $phpcs_file->getTokens();
 		$current_line = $tokens[ $stack_pointer ]['line'];
 
-		for ( $i = $stack_pointer; $i >= 0; $i-- ) {
-			if ( $tokens[ $i ]['line'] < $current_line ) {
-				// The previous token is on the previous line, so the current token is the first on the line.
-				return static::find_docblock( $phpcs_file, $i + 1 );
+		for ( $token = $stack_pointer; $token >= 0; $token-- ) {
+			if ( $tokens[ $token ]['line'] < $current_line ) {
+				return $token;
 			}
 		}
 
-		return static::find_docblock( $phpcs_file, 0 );
+		return false;
 	}
 
 	/**
-	 * Determines if a T_STRING token represents a function call.
-	 * The implementation was copied from PHPCompatibility\Sniffs\Extensions\RemovedExtensionsSniff::process().
+	 * Finds the docblock preceding a specified position (stack pointer) in a given PHP file.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position of the T_STRING token in question.
-	 * @return bool True if the token represents a function call, false otherwise.
+	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
+	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
 	 */
-	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
-		$tokens = $phpcs_file->getTokens();
-
-		// Find the next non-empty token.
-		$open_bracket = $phpcs_file->findNext( Tokens::$emptyTokens, ( $stack_pointer + 1 ), null, true );
-
-		if ( T_OPEN_PARENTHESIS !== $tokens[ $open_bracket ]['code'] ) {
-			// Not a function call.
+	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
+		// It can be assumed that the DocBlock should end on the previous line, not the current one.
+		$previous_line_end_token = static::find_previous_line_token( $phpcs_file, $stack_pointer );
+		if ( false === $previous_line_end_token ) {
 			return false;
 		}
 
-		if ( false === isset( $tokens[ $open_bracket ]['parenthesis_closer'] ) ) {
-			// Not a function call.
+		$docblock_end_token = $phpcs_file->findPrevious( array( T_WHITESPACE ), $previous_line_end_token, null, true );
+
+		$tokens = $phpcs_file->getTokens();
+		if ( false === $docblock_end_token || T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $docblock_end_token ]['code'] ) {
+			// Only "/**" style comments are supported.
 			return false;
 		}
 
-		// Find the previous non-empty token.
-		$search   = Tokens::$emptyTokens;
-		$search[] = T_BITWISE_AND;
-		$previous = $phpcs_file->findPrevious( $search, ( $stack_pointer - 1 ), null, true );
-
-		$previous_tokens_to_ignore = array(
-			T_FUNCTION, // Function declaration.
-			T_NEW, // Creating an object.
-			T_OBJECT_OPERATOR, // Calling an object.
+		return array(
+			'start_token' => $tokens[ $docblock_end_token ]['comment_opener'],
+			'end_token'   => $docblock_end_token,
 		);
-
-		return ! in_array( $tokens[ $previous ]['code'], $previous_tokens_to_ignore, true );
 	}
 
 	/**
-	 * Finds the docblock preceding a specified position (stack pointer) in a given PHP file.
-	 * The implementation was copied from PHP_CodeSniffer\Standards\PEAR\Sniffs\Commenting\FunctionCommentSniff::process().
+	 * Determines if a T_STRING token represents a function call.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
-	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 * @param int  $stack_pointer The position of the T_STRING token in question.
+	 * @return bool True if the token represents a function call, false otherwise.
 	 */
-	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
-		$tokens                 = $phpcs_file->getTokens();
-		$ignore                 = Tokens::$methodPrefixes;
-		$ignore[ T_WHITESPACE ] = T_WHITESPACE;
-
-		for ( $comment_end = ( $stack_pointer - 1 ); $comment_end >= 0; $comment_end-- ) {
-			if ( isset( $ignore[ $tokens[ $comment_end ]['code'] ] ) ) {
-				continue;
-			}
-
-			if ( T_ATTRIBUTE_END === $tokens[ $comment_end ]['code']
-			     && isset( $tokens[ $comment_end ]['attribute_opener'] )
-			) {
-				$comment_end = $tokens[ $comment_end ]['attribute_opener'];
-				continue;
-			}
+	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
 
-			break;
-		}
+		// Find the previous non-empty token.
+		$previous = $phpcs_file->findPrevious( Tokens::$emptyTokens, ( $stack_pointer - 1 ), null, true );
 
-		if ( $tokens[ $comment_end ]['code'] === T_COMMENT ) {
-			// Inline comments might just be closing comments for
-			// control structures or functions instead of function comments
-			// using the wrong comment type. If there is other code on the line,
-			// assume they relate to that code.
-			$previous = $phpcs_file->findPrevious( $ignore, ( $comment_end - 1 ), null, true );
-			if ( false !== $previous && $tokens[ $previous ]['line'] === $tokens[ $comment_end ]['line'] ) {
-				$comment_end = $previous;
-			}
-		}
+		$previous_tokens_to_ignore = array(
+			T_NEW,             // Creating an object.
+			T_OBJECT_OPERATOR, // Calling an object.
+			T_FUNCTION,        // Function declaration.
+		);
 
-		if ( T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $comment_end ]['code'] ) {
-			// Only "/**" style comments are supported.
+		if ( in_array( $tokens[ $previous ]['code'], $previous_tokens_to_ignore, true ) ) {
+			// This is an object or function declaration.
 			return false;
 		}
 
-		return array(
-			'start_token' => $tokens[ $comment_end ]['comment_opener'],
-			'end_token'   => $comment_end,
-		);
+		// Find the next non-empty token.
+		$open_bracket = $phpcs_file->findNext( Tokens::$emptyTokens, ( $stack_pointer + 1 ), null, true );
+
+		return ( false !== $open_bracket ) && ( T_OPEN_PARENTHESIS === $tokens[ $open_bracket ]['code'] );
 	}
 
 	/**
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
index 74608921c32d89..bf7dbc2fd85d3c 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\NamingConventions;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
index 08838ce412fc3a..f1be5ab00b0750 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
@@ -3,8 +3,7 @@
  * An abstract class that all sniff unit tests must extend.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests;
@@ -14,6 +13,9 @@
 use PHP_CodeSniffer\Ruleset;
 use PHP_CodeSniffer\Sniffs\Sniff;
 
+/**
+ * An abstract test class that contains common methods for all sniff unit tests.
+ */
 abstract class AbstractSniffUnitTest extends BaseAbstractSniffUnitTest {
 
 	/**
@@ -65,7 +67,7 @@ public function setCliValues( $filename, $config ) {
 		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
 			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
 		) {
-			throw new \RuntimeException( $error_message );
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
 		}
 
 		// Backup the original Ruleset instance.
@@ -76,7 +78,7 @@ public function setCliValues( $filename, $config ) {
 
 		$sniff_fqcn = $this->get_sniff_fqcn();
 		if ( ! isset( $current_ruleset->sniffs[ $sniff_fqcn ] ) ) {
-			throw new \RuntimeException( $error_message );
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
 		}
 
 		$sniff = $current_ruleset->sniffs[ $sniff_fqcn ];
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
index 8026e88f1d9453..79719fba6039db 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
index 652f6b735378ce..b4e26fd2e69c4f 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
index bc7ca28c263ffe..1318687768c9dd 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\Commenting;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
index 51174dd769d0a3..14a2cb1a97dd71 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\NamingConventions;
diff --git a/test/php/gutenberg-coding-standards/README.md b/test/php/gutenberg-coding-standards/README.md
index 51f6574fa20534..500abe2e5b4812 100644
--- a/test/php/gutenberg-coding-standards/README.md
+++ b/test/php/gutenberg-coding-standards/README.md
@@ -1,3 +1,9 @@
 # Gutenberg Coding Standards for Gutenberg
 
-This project is a collection of [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) rules (sniffs) to validate code developed for Gutenberg. It ensures code quality and adherence to coding conventions.
\ No newline at end of file
+This project is a collection of [PHP_CodeSniffer](https://github.com/PHPCSStandards/PHP_CodeSniffer) rules (sniffs) to validate code developed for Gutenberg. It ensures code quality and adherence to coding conventions.
+
+## License
+
+This project is licensed under the same terms as the Gutenberg project.
+
+Please refer to this [LICENSE.md](../../../LICENSE.md) file for detailed license information.
diff --git a/test/php/gutenberg-coding-standards/Tests/bootstrap.php b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
index f28528bc1b9726..547a1ce303835f 100644
--- a/test/php/gutenberg-coding-standards/Tests/bootstrap.php
+++ b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
@@ -1,86 +1,51 @@
 <?php
 /**
- * Gutenberg Coding Standard.
+ * Gutenberg Coding Standards (GBCS) Bootstrap File.
  *
- * Bootstrap file for running the tests.
- *
- * - Load the PHPCS PHPUnit bootstrap file providing cross-version PHPUnit support.
- *   {@link https://github.com/squizlabs/PHP_CodeSniffer/pull/1384}
- * - Load the Composer autoload file.
- * - Automatically limit the testing to the WordPressCS tests.
+ * Initializes the environment for running GBCS tests.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 if ( ! defined( 'PHP_CODESNIFFER_IN_TESTS' ) ) {
 	define( 'PHP_CODESNIFFER_IN_TESTS', true );
 }
 
-$ds = DIRECTORY_SEPARATOR;
-
-/*
- * Load the necessary PHPCS files.
- */
-// Get the PHPCS dir from an environment variable.
-$phpcsDir          = getenv( 'PHPCS_DIR' );
-$composerPHPCSPath = dirname( __DIR__ ) . $ds . 'vendor' . $ds . 'squizlabs' . $ds . 'php_codesniffer';
-
-if ( false === $phpcsDir && is_dir( $composerPHPCSPath ) ) {
-	// PHPCS installed via Composer.
-	$phpcsDir = $composerPHPCSPath;
-} elseif ( false !== $phpcsDir ) {
-	/*
-	 * PHPCS in a custom directory.
-	 * For this to work, the `PHPCS_DIR` needs to be set in a custom `phpunit.xml` file.
-	 */
-	$phpcsDir = realpath( $phpcsDir );
-}
-
-// Try and load the PHPCS autoloader.
-if ( false !== $phpcsDir
-	&& file_exists( $phpcsDir . $ds . 'autoload.php' )
-	&& file_exists( $phpcsDir . $ds . 'tests' . $ds . 'bootstrap.php' )
-) {
-	require_once $phpcsDir . $ds . 'autoload.php';
-	require_once $phpcsDir . $ds . 'tests' . $ds . 'bootstrap.php'; // PHPUnit 6.x+ support.
-} else {
-	echo 'Uh oh... can\'t find PHPCS.
+$dir_separator = DIRECTORY_SEPARATOR;
 
-If you use Composer, please run `composer install`.
-Otherwise, make sure you set a `PHPCS_DIR` environment variable in your phpunit.xml file
-pointing to the PHPCS directory and that PHPCSUtils is included in the `installed_paths`
-for that PHPCS install.
-';
+// Define the path to the PHPCS directory.
+$phpcs_path            = dirname( __DIR__ ) . $dir_separator . 'vendor' . $dir_separator . 'squizlabs' . $dir_separator . 'php_codesniffer';
+$autoload_script_path  = $phpcs_path . $dir_separator . 'autoload.php';
+$bootstrap_script_path = $phpcs_path . $dir_separator . 'tests' . $dir_separator . 'bootstrap.php';
 
-	die( 1 );
+// Attempt to load the PHPCS autoloader.
+if ( ! file_exists( $autoload_script_path ) || ! file_exists( $bootstrap_script_path ) ) {
+	echo 'PHP_CodeSniffer not found. Please run "composer install".' . PHP_EOL;
+	exit( 1 );
 }
 
+require_once $autoload_script_path;
+require_once $bootstrap_script_path; // Support for PHPUnit 6.x+.
 
-/*
- * Set the PHPCS_IGNORE_TEST environment variable to ignore tests from other standards.
+/**
+ * Configure the environment to ignore tests from other coding standards.
  */
-$gbcsStandards = array(
-	'Gutenberg' => true,
-);
-
-$allStandards   = PHP_CodeSniffer\Util\Standards::getInstalledStandards();
-$allStandards[] = 'Generic';
+$available_standards = PHP_CodeSniffer\Util\Standards::getInstalledStandards();
+$ignored_standards   = array( 'Generic' );
 
-$standardsToIgnore = array();
-foreach ( $allStandards as $standard ) {
-	if ( isset( $gbcsStandards[ $standard ] ) === true ) {
+foreach ( $available_standards as $available_standard ) {
+	if ( 'Gutenberg' === $available_standard ) {
 		continue;
 	}
 
-	$standardsToIgnore[] = $standard;
+	$ignored_standards[] = $available_standard;
 }
 
-$standardsToIgnoreString = implode( ',', $standardsToIgnore );
+$ignore_standards_string = implode( ',', $ignored_standards );
 
-// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.runtime_configuration_putenv -- This is not production, but test code.
-putenv( "PHPCS_IGNORE_TESTS={$standardsToIgnoreString}" );
+// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.runtime_configuration_putenv -- This is non-production code.
+putenv( "PHPCS_IGNORE_TESTS={$ignore_standards_string}" );
 
-// Clean up.
-unset( $ds, $phpcsDir, $composerPHPCSPath, $allStandards, $standardsToIgnore, $standard, $standardsToIgnoreString );
+// Cleanup.
+unset( $dir_separator, $phpcs_path, $available_standards, $ignored_standards, $available_standard, $ignore_standards_string );
diff --git a/test/php/gutenberg-coding-standards/composer.json b/test/php/gutenberg-coding-standards/composer.json
index c1c27f81818aa5..2d79dc906a8d9e 100644
--- a/test/php/gutenberg-coding-standards/composer.json
+++ b/test/php/gutenberg-coding-standards/composer.json
@@ -8,7 +8,7 @@
 		"static analysis",
 		"Gutenberg"
 	],
-	"license": "MIT",
+	"license": "GPL-2.0-or-later",
 	"authors": [
 		{
 			"name": "Contributors",

From 7969ba3b21006a33455c40df59f32e95058d26a0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Aug 2024 13:43:07 +0200
Subject: [PATCH 077/205] DataForm: Update the style of the datetime fields to
 match the other types (#64438)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 .../dataviews/src/dataform-controls/datetime.tsx | 16 +++++++++++-----
 .../dataviews/src/dataform-controls/style.scss   |  4 ++++
 packages/dataviews/src/style.scss                |  1 +
 3 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 packages/dataviews/src/dataform-controls/style.scss

diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
index 3ba22dc0c1b089..b31c5c60bb9c6e 100644
--- a/packages/dataviews/src/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker } from '@wordpress/components';
+import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 
 /**
@@ -13,6 +13,7 @@ export default function DateTime< Item >( {
 	data,
 	field,
 	onChange,
+	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, label } = field;
 	const value = field.getValue( { item: data } );
@@ -23,10 +24,15 @@ export default function DateTime< Item >( {
 	);
 
 	return (
-		<fieldset>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
+		<fieldset className="dataviews-controls__datetime">
+			{ ! hideLabelFromVision && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+			{ hideLabelFromVision && (
+				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			) }
 			<TimePicker
 				currentTime={ value }
 				onChange={ onChangeControl }
diff --git a/packages/dataviews/src/dataform-controls/style.scss b/packages/dataviews/src/dataform-controls/style.scss
new file mode 100644
index 00000000000000..230826c0adf823
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/style.scss
@@ -0,0 +1,4 @@
+.dataviews-controls__datetime {
+	border: none;
+	padding: 0;
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index b780c9c3a587d5..7be92273663a87 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -11,4 +11,5 @@
 @import "./dataviews-layouts/list/style.scss";
 @import "./dataviews-layouts/table/style.scss";
 
+@import "./dataform-controls/style.scss";
 @import "./dataforms-layouts/panel/style.scss";

From eecd89d151e944643149825e614f13b331f703a4 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 12 Aug 2024 14:48:18 +0200
Subject: [PATCH 078/205] Script Modules: Move data passing to 6.7 compat file
 (#64006)

Move Script Modules data passing to compatibility directory.

Add conditions to ensure the functionality is duplicated when present in Core.
This prevents duplicate script tags with duplicate IDs from being printed.

This feature is planned to ship in WordPress 6.7: https://core.trac.wordpress.org/ticket/61510
---
 lib/compat/wordpress-6.7/script-modules.php | 104 ++++++++++++++++++++
 lib/experimental/script-modules.php         |  93 -----------------
 lib/load.php                                |   1 +
 3 files changed, 105 insertions(+), 93 deletions(-)
 create mode 100644 lib/compat/wordpress-6.7/script-modules.php

diff --git a/lib/compat/wordpress-6.7/script-modules.php b/lib/compat/wordpress-6.7/script-modules.php
new file mode 100644
index 00000000000000..0a440ec81688d2
--- /dev/null
+++ b/lib/compat/wordpress-6.7/script-modules.php
@@ -0,0 +1,104 @@
+<?php
+
+/**
+ * Print data associated with Script Modules in Script tags.
+ *
+ * This embeds data in the page HTML so that it is available on page load.
+ *
+ * Data can be associated with a given Script Module by using the
+ * `script_module_data_{$module_id}` filter.
+ *
+ * The data for a given Script Module will be JSON serialized in a script tag with an ID
+ * like `wp-script-module-data-{$module_id}`.
+ */
+function gutenberg_print_script_module_data(): void {
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_marked_for_enqueue->setAccessible( true );
+	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+	$get_import_map->setAccessible( true );
+
+	$modules = array();
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		$modules[ $id ] = true;
+	}
+	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+		$modules[ $id ] = true;
+	}
+
+	foreach ( array_keys( $modules ) as $module_id ) {
+		/**
+		 * Filters data associated with a given Script Module.
+		 *
+		 * Script Modules may require data that is required for initialization or is essential to
+		 * have immediately available on page load. These are suitable use cases for this data.
+		 *
+		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
+		 *
+		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
+		 *
+		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
+		 * with an ID like `wp-script-module-data-{$module_id}`.
+		 *
+		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
+		 * the data is associated with.
+		 *
+		 * @param array $data The data that should be associated with the array.
+		 */
+		$data = apply_filters( "script_module_data_{$module_id}", array() );
+
+		if ( is_array( $data ) && ! empty( $data ) ) {
+			/*
+			 * This data will be printed as JSON inside a script tag like this:
+			 *   <script type="application/json"></script>
+			 *
+			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
+			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
+			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
+			 *
+			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
+			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
+			 *
+			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
+			 *
+			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
+			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
+			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
+			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
+			 *
+			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
+			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
+			 * be escaped to avoid encoding issues.
+			 *
+			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
+			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
+			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
+			 */
+			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
+			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
+				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
+			}
+
+			wp_print_inline_script_tag(
+				wp_json_encode( $data, $json_encode_flags ),
+				array(
+					'type' => 'application/json',
+					'id'   => "wp-script-module-data-{$module_id}",
+				)
+			);
+		}
+	}
+}
+
+add_action(
+	'after_setup_theme',
+	function () {
+		if ( ! has_action( 'wp_footer', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
+			add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
+		}
+
+		if ( ! has_action( 'admin_print_footer_scripts', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
+			add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );
+		}
+	},
+	20
+);
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
index 0093c2e974568f..5a14e1418ed6de 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -200,96 +200,3 @@ function gutenberg_dequeue_module( $module_identifier ) {
 	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' );
 	wp_script_modules()->dequeue( $module_identifier );
 }
-
-
-/**
- * Print data associated with Script Modules in Script tags.
- *
- * This embeds data in the page HTML so that it is available on page load.
- *
- * Data can be associated with a given Script Module by using the
- * `script_module_data_{$module_id}` filter.
- *
- * The data for a given Script Module will be JSON serialized in a script tag with an ID
- * like `wp-script-module-data-{$module_id}`.
- */
-function gutenberg_print_script_module_data(): void {
-	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
-	$get_marked_for_enqueue->setAccessible( true );
-	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
-	$get_import_map->setAccessible( true );
-
-	$modules = array();
-	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
-		$modules[ $id ] = true;
-	}
-	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
-		$modules[ $id ] = true;
-	}
-
-	foreach ( array_keys( $modules ) as $module_id ) {
-		/**
-		 * Filters data associated with a given Script Module.
-		 *
-		 * Script Modules may require data that is required for initialization or is essential to
-		 * have immediately available on page load. These are suitable use cases for this data.
-		 *
-		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
-		 *
-		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
-		 *
-		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
-		 * with an ID like `wp-script-module-data-{$module_id}`.
-		 *
-		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
-		 * the data is associated with.
-		 *
-		 * @param array $data The data that should be associated with the array.
-		 */
-		$data = apply_filters( "script_module_data_{$module_id}", array() );
-
-		if ( is_array( $data ) && ! empty( $data ) ) {
-			/*
-			 * This data will be printed as JSON inside a script tag like this:
-			 *   <script type="application/json"></script>
-			 *
-			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
-			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
-			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
-			 *
-			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
-			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
-			 *
-			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
-			 *
-			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
-			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
-			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
-			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
-			 *
-			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
-			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
-			 * be escaped to avoid encoding issues.
-			 *
-			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
-			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
-			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
-			 */
-			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
-			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
-				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
-			}
-
-			wp_print_inline_script_tag(
-				wp_json_encode( $data, $json_encode_flags ),
-				array(
-					'type' => 'application/json',
-					'id'   => "wp-script-module-data-{$module_id}",
-				)
-			);
-		}
-	}
-}
-
-add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
-add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );
diff --git a/lib/load.php b/lib/load.php
index 4bb0ab88024a4a..c5f12af1654df2 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -103,6 +103,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 // WordPress 6.7 compat.
 require __DIR__ . '/compat/wordpress-6.7/blocks.php';
 require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
+require __DIR__ . '/compat/wordpress-6.7/script-modules.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

From 9f5ffd2e8dd5ffc0abedf2b258dd5ace6b3bdb1e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Aug 2024 14:58:37 +0200
Subject: [PATCH 079/205] DataViews Extensibility: Allow unregistering the
 duplicate template part action (#64388)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 72 +------------------
 .../actions/duplicate-template-part.tsx       | 70 ++++++++++++++++++
 .../src/dataviews/store/private-actions.ts    |  8 +++
 packages/editor/src/dataviews/types.ts        |  4 +-
 4 files changed, 83 insertions(+), 71 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/duplicate-template-part.tsx

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index ff5cd7ddbb5452..0df73d1996deb5 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -9,7 +9,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState, useEffect } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
 import { DataForm } from '@wordpress/dataviews';
 import {
 	Button,
@@ -27,7 +26,6 @@ import {
 } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 import { getItemTitle } from '../../dataviews/actions/utils';
 
 // TODO: this should be shared with other components (see post-fields in edit-site).
@@ -268,75 +266,14 @@ const useDuplicatePostAction = ( postType ) => {
 	);
 };
 
-export const duplicateTemplatePartAction = {
-	id: 'duplicate-template-part',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate template part', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const blocks = useMemo( () => {
-			return (
-				item.blocks ??
-				parse(
-					typeof item.content === 'string'
-						? item.content
-						: item.content.raw,
-					{
-						__unstableSkipMigrationLogs: true,
-					}
-				)
-			);
-		}, [ item.content, item.blocks ] );
-		const { createSuccessNotice } = useDispatch( noticesStore );
-		function onTemplatePartSuccess() {
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
-					getItemTitle( item )
-				),
-				{ type: 'snackbar', id: 'edit-site-patterns-success' }
-			);
-			closeModal();
-		}
-		return (
-			<CreateTemplatePartModalContents
-				blocks={ blocks }
-				defaultArea={ item.area }
-				defaultTitle={ sprintf(
-					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
-					getItemTitle( item )
-				) }
-				onCreate={ onTemplatePartSuccess }
-				onError={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-				closeModal={ closeModal }
-			/>
-		);
-	},
-};
-
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const {
-		defaultActions,
-		postTypeObject,
-		userCanCreatePostType,
-		isBlockBasedTheme,
-	} = useSelect(
+	const { defaultActions, postTypeObject } = useSelect(
 		( select ) => {
-			const { getPostType, canUser, getCurrentTheme } =
-				select( coreStore );
+			const { getPostType } = select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
 			return {
 				postTypeObject: getPostType( postType ),
 				defaultActions: getEntityActions( 'postType', postType ),
-				userCanCreatePostType: canUser( 'create', {
-					kind: 'postType',
-					name: postType,
-				} ),
-				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
 			};
 		},
 		[ postType ]
@@ -368,10 +305,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				  ! isPattern &&
 				  duplicatePostAction
 				: false,
-			isTemplateOrTemplatePart &&
-				userCanCreatePostType &&
-				isBlockBasedTheme &&
-				duplicateTemplatePartAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -437,7 +370,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		return actions;
 	}, [
 		defaultActions,
-		userCanCreatePostType,
 		isTemplateOrTemplatePart,
 		isPattern,
 		postTypeObject?.viewable,
diff --git a/packages/editor/src/dataviews/actions/duplicate-template-part.tsx b/packages/editor/src/dataviews/actions/duplicate-template-part.tsx
new file mode 100644
index 00000000000000..fa3cf39ba76268
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/duplicate-template-part.tsx
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { CreateTemplatePartModalContents } from '../../components/create-template-part-modal';
+import { getItemTitle } from './utils';
+import type { TemplatePart } from '../types';
+
+const duplicateTemplatePart: Action< TemplatePart > = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const blocks = useMemo( () => {
+			return (
+				item.blocks ??
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
+			);
+		}, [ item.content, item.blocks ] );
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		function onTemplatePartSuccess() {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					getItemTitle( item )
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal?.();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ blocks }
+				defaultArea={ item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					getItemTitle( item )
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				closeModal={ closeModal }
+			/>
+		);
+	},
+};
+
+export default duplicateTemplatePart;
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 6854c29bb0c4e4..80449d1b7a0798 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -10,6 +10,7 @@ import { doAction } from '@wordpress/hooks';
  */
 import deletePost from '../actions/delete-post';
 import duplicatePattern from '../actions/duplicate-pattern';
+import duplicateTemplatePart from '../actions/duplicate-template-part';
 import exportPattern from '../actions/export-pattern';
 import resetPost from '../actions/reset-post';
 import trashPost from '../actions/trash-post';
@@ -81,8 +82,15 @@ export const registerPostTypeActions =
 				kind: 'postType',
 				name: postType,
 			} );
+		const currentTheme = await registry
+			.resolveSelect( coreStore )
+			.getCurrentTheme();
 
 		const actions = [
+			postTypeConfig.slug === 'wp_template_part' &&
+				canCreate &&
+				currentTheme?.is_block_theme &&
+				duplicateTemplatePart,
 			canCreate && postTypeConfig.slug === 'wp_block'
 				? duplicatePattern
 				: undefined,
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 80b6f3c5ceb852..5750ab96eeae81 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -10,8 +10,10 @@ type PostStatus =
 export interface BasePost {
 	status?: PostStatus;
 	title: string | { rendered: string } | { raw: string };
+	content: string | { raw: string; rendered: string };
 	type: string;
 	id: string | number;
+	blocks?: Object[];
 }
 
 export interface Template extends BasePost {
@@ -27,12 +29,12 @@ export interface TemplatePart extends BasePost {
 	source: string;
 	has_theme_file: boolean;
 	id: string;
+	area: string;
 }
 
 export interface Pattern extends BasePost {
 	slug: string;
 	title: { raw: string };
-	content: { raw: string } | string;
 	wp_pattern_sync_status: string;
 }
 

From c73aa361c4bd82d8b3ee004e5195a22158cad1bf Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 12 Aug 2024 14:05:40 +0100
Subject: [PATCH 080/205] Block Insertion: Clear the insertion point when
 selecting a different block or clearing block selection (#64048)

* Clear the insertion point when selecting a different block or clearing block selection

* Use the block insertion point in the inserter, not the the one from the editor package

* use block insertion point index

* Don't change the insertion point when clearing block selection

* Also set the insertion point in the quick inserter

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
---
 .../src/components/inserter/quick-inserter.js      |  5 ++++-
 packages/block-editor/src/store/reducer.js         |  2 ++
 .../src/components/inserter-sidebar/index.js       | 14 ++++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index aa3d54e87a7fd1..f4c52c04d20c4b 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, SearchControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -82,6 +82,8 @@ export default function QuickInserter( {
 		}
 	}, [ setInserterIsOpened ] );
 
+	const { showInsertionPoint } = useDispatch( blockEditorStore );
+
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
@@ -91,6 +93,7 @@ export default function QuickInserter( {
 			filterValue,
 			onSelect,
 		} );
+		showInsertionPoint( rootClientId, insertionIndex );
 	};
 
 	let maxBlockPatterns = 0;
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index cd4569c45e5801..91d853a50a6a42 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1624,6 +1624,8 @@ export function insertionPoint( state = null, action ) {
 		}
 
 		case 'HIDE_INSERTION_POINT':
+		case 'CLEAR_SELECTED_BLOCK':
+		case 'SELECT_BLOCK':
 			return null;
 	}
 
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 675ae5e11544bc..bf613b5c8c001a 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -22,6 +22,7 @@ const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis );
 
 export default function InserterSidebar() {
 	const {
+		blockInsertionPoint,
 		blockSectionRootClientId,
 		inserterSidebarToggleRef,
 		insertionPoint,
@@ -33,8 +34,12 @@ export default function InserterSidebar() {
 			getInsertionPoint,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
-		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
-			select( blockEditorStore );
+		const {
+			getBlockInsertionPoint,
+			getBlockRootClientId,
+			__unstableGetEditorMode,
+			getSettings,
+		} = select( blockEditorStore );
 		const { get } = select( preferencesStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
@@ -47,6 +52,7 @@ export default function InserterSidebar() {
 			return getBlockRootClientId();
 		};
 		return {
+			blockInsertionPoint: getBlockInsertionPoint(),
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
@@ -85,9 +91,9 @@ export default function InserterSidebar() {
 				showInserterHelpPanel
 				shouldFocusBlock={ isMobileViewport }
 				rootClientId={
-					blockSectionRootClientId ?? insertionPoint.rootClientId
+					blockSectionRootClientId ?? blockInsertionPoint.rootClientId
 				}
-				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInsertionIndex={ blockInsertionPoint.index }
 				onSelect={ insertionPoint.onSelect }
 				__experimentalInitialTab={ insertionPoint.tab }
 				__experimentalInitialCategory={ insertionPoint.category }

From d6a27a056c5fe5c995a96f05a10105b80c7fa838 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Mon, 12 Aug 2024 15:47:54 +0100
Subject: [PATCH 081/205] DataViews: document missing action properties and
 link to storybook example (#64442)

Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 packages/dataviews/README.md | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index df537d2a8cecff..56cecedaef66ca 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -30,6 +30,9 @@ const Example = () => {
 };
 ```
 
+> [!TIP]
+> At https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs there's an example implementation of the Dataviews component."
+
 ## Properties
 
 ### `data`: `Object[]`
@@ -79,41 +82,37 @@ const fields = [
 		id: 'date',
 		label: 'Date',
 		render: ( { item } ) => {
-			return (
-				<time>{ getFormattedDate( item.date ) }</time>
-			);
-		}
+			return <time>{ getFormattedDate( item.date ) }</time>;
+		},
 	},
 	{
 		id: 'author',
 		label: __( 'Author' ),
 		render: ( { item } ) => {
-			return (
-				<a href="...">{ item.author }</a>
-			);
+			return <a href="...">{ item.author }</a>;
 		},
 		elements: [
 			{ value: 1, label: 'Admin' },
-			{ value: 2, label: 'User' }
+			{ value: 2, label: 'User' },
 		],
 		filterBy: {
-			operators: [ 'is', 'isNot' ]
+			operators: [ 'is', 'isNot' ],
 		},
-		enableSorting: false
+		enableSorting: false,
 	},
 	{
 		label: __( 'Status' ),
 		id: 'status',
 		getValue: ( { item } ) =>
-			STATUSES.find( ( { value } ) => value === item.status )
-				?.label ?? item.status,
+			STATUSES.find( ( { value } ) => value === item.status )?.label ??
+			item.status,
 		elements: STATUSES,
 		filterBy: {
 			operators: [ 'isAny' ],
 		},
 		enableSorting: false,
 	},
-]
+];
 ```
 
 Each field is an object with the following properties:
@@ -256,6 +255,8 @@ Each action is an object with the following properties:
 -   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
 -   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
+-   `supportsBulk`: Whether the action can be used as a bulk action. False by default.
+-   `disabled`: Whether the action is disabled. False by default.
 
 ### `paginationInfo`: `Object`
 
@@ -289,8 +290,8 @@ const defaultLayouts = {
 	table: {
 		layout: {
 			primaryKey: 'my-key',
-		}
-	}
+		},
+	},
 };
 ```
 

From 52171c992fbb9a43e69a25054e44de595ac7390d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 12 Aug 2024 16:03:13 +0100
Subject: [PATCH 082/205] Update DropdownMenuV2 elevation, remove unused config
 value (#64432)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                   | 1 +
 packages/components/src/dropdown-menu-v2/styles.ts | 2 +-
 packages/components/src/utils/config-values.js     | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 96bf76815e71dd..57ba69197cfa98 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 -   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
+-   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 
 ## 28.5.0 (2024-08-07)
 
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index ab7c763b5f4569..950a549f8566a4 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -31,7 +31,7 @@ const ITEM_PADDING_INLINE = space( 3 );
 const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
 const DIVIDER_COLOR = COLORS.gray[ 200 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 65632170c9e3d7..02c6f69544c2bf 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -73,7 +73,6 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
 	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
 	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
 	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,

From 9c96970fdfa010b2b0b710c79c13684398b792f1 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 13 Aug 2024 01:22:31 +0900
Subject: [PATCH 083/205] Add margin-bottom lint rules for BaseControl (#64355)

* Fix in Gallery block

* Fix in Latest Posts block

* Fix in Search block

* Fix in Tag Cloud block

* Fix in Video block

* Fix in Global Styles Font Size

* Fix in Global Styles PushChangesToGlobalStylesControl

* Fix in new template part modal

* Fix in pattern overrides block inspector

* Add lint rule

* Update docs

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                  |  1 +
 packages/block-library/src/gallery/edit.js    |  5 +-
 packages/block-library/src/search/edit.js     | 18 ++--
 packages/block-library/src/search/editor.scss |  7 +-
 packages/block-library/src/tag-cloud/edit.js  | 69 +++++++-------
 .../block-library/src/tag-cloud/editor.scss   |  8 ++
 .../src/video/edit-common-settings.js         |  1 +
 packages/block-library/src/video/edit.js      |  4 +-
 .../components/src/base-control/README.md     |  7 +-
 .../components/src/base-control/index.tsx     | 89 ++++++++++---------
 .../global-styles/size-control/index.js       |  8 +-
 .../push-changes-to-global-styles/index.js    |  1 +
 .../create-template-part-modal/index.js       |  1 +
 .../components/pattern-overrides-controls.js  |  1 +
 14 files changed, 128 insertions(+), 92 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cb669fb4177206..6143d62c28bc07 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -290,6 +290,7 @@ module.exports = {
 					...restrictedSyntax,
 					...restrictedSyntaxComponents,
 					...[
+						'BaseControl',
 						'CheckboxControl',
 						'ComboboxControl',
 						'DimensionControl',
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 1a7ce5fae04f8c..c73fe1977ce4cc 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -602,7 +602,10 @@ export default function GalleryEdit( props ) {
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className="gallery-image-sizes">
+						<BaseControl
+							className="gallery-image-sizes"
+							__nextHasNoMarginBottom
+						>
 							<BaseControl.VisualLabel>
 								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index cfe7b29caf5de0..e2f3bb3999e42c 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -28,7 +28,7 @@ import {
 	ToolbarButton,
 	ResizableBox,
 	PanelBody,
-	BaseControl,
+	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
@@ -408,12 +408,14 @@ export default function SearchEdit( {
 
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					<BaseControl
-						label={ __( 'Width' ) }
-						id={ unitControlInputId }
+					<VStack
+						className="wp-block-search__inspector-controls"
+						spacing={ 4 }
 					>
 						<UnitControl
-							id={ unitControlInputId }
+							__next40pxDefaultSize
+							label={ __( 'Width' ) }
+							id={ unitControlInputId } // unused, kept for backwards compatibility
 							min={
 								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
 							}
@@ -427,7 +429,6 @@ export default function SearchEdit( {
 									parseInt( newWidth, 10 ) > 100
 										? 100
 										: newWidth;
-
 								setAttributes( {
 									width: parseInt( filteredWidth, 10 ),
 								} );
@@ -445,9 +446,8 @@ export default function SearchEdit( {
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
-
 						<ButtonGroup
-							className="wp-block-search__components-button-group"
+							className="wp-block-search__components-button-group" // unused, kept for backwards compatibility
 							aria-label={ __( 'Percentage Width' ) }
 						>
 							{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
@@ -473,7 +473,7 @@ export default function SearchEdit( {
 								);
 							} ) }
 						</ButtonGroup>
-					</BaseControl>
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 		</>
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index 35ccfc5e633fc2..ecc244d3341e1e 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -15,8 +15,11 @@
 		justify-content: center;
 		text-align: center;
 	}
+}
 
-	&__components-button-group {
-		margin-top: 10px;
+.wp-block-search__inspector-controls {
+	.components-base-control {
+		// Counteract the margin added by the block inspector.
+		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index 8ced99271e4807..eeb568e7a89ef1 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -11,8 +11,8 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 	Disabled,
-	BaseControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -119,17 +119,20 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Taxonomy' ) }
-					options={ getTaxonomyOptions() }
-					value={ taxonomy }
-					onChange={ ( selectedTaxonomy ) =>
-						setAttributes( { taxonomy: selectedTaxonomy } )
-					}
-				/>
-				<BaseControl>
+				<VStack
+					spacing={ 4 }
+					className="wp-block-tag-cloud__inspector-settings"
+				>
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Taxonomy' ) }
+						options={ getTaxonomyOptions() }
+						value={ taxonomy }
+						onChange={ ( selectedTaxonomy ) =>
+							setAttributes( { taxonomy: selectedTaxonomy } )
+						}
+					/>
 					<Flex gap={ 4 }>
 						<FlexItem isBlock>
 							<UnitControl
@@ -164,27 +167,27 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 							/>
 						</FlexItem>
 					</Flex>
-				</BaseControl>
-				<RangeControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Number of tags' ) }
-					value={ numberOfTags }
-					onChange={ ( value ) =>
-						setAttributes( { numberOfTags: value } )
-					}
-					min={ MIN_TAGS }
-					max={ MAX_TAGS }
-					required
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Show tag counts' ) }
-					checked={ showTagCounts }
-					onChange={ () =>
-						setAttributes( { showTagCounts: ! showTagCounts } )
-					}
-				/>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Number of tags' ) }
+						value={ numberOfTags }
+						onChange={ ( value ) =>
+							setAttributes( { numberOfTags: value } )
+						}
+						min={ MIN_TAGS }
+						max={ MAX_TAGS }
+						required
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show tag counts' ) }
+						checked={ showTagCounts }
+						onChange={ () =>
+							setAttributes( { showTagCounts: ! showTagCounts } )
+						}
+					/>
+				</VStack>
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
index d00a450174f2fd..e85129e22f1aca 100644
--- a/packages/block-library/src/tag-cloud/editor.scss
+++ b/packages/block-library/src/tag-cloud/editor.scss
@@ -9,3 +9,11 @@
 	border: none;
 	border-radius: inherit;
 }
+
+.wp-block-tag-cloud__inspector-settings {
+	.components-base-control,
+	.components-base-control:last-child {
+		// Cancel out extra margins added by block inspector
+		margin-bottom: 0;
+	}
+}
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index 5ebf431ade3fc0..9394bfaf5c6145 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -83,6 +83,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				) }
 			/>
 			<SelectControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Preload' ) }
 				value={ preload }
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 97a6e148d5d069..647b6b2cbea194 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -219,7 +219,7 @@ function VideoEdit( {
 						attributes={ attributes }
 					/>
 					<MediaUploadCheck>
-						<BaseControl className="editor-video-poster-control">
+						<div className="editor-video-poster-control">
 							<BaseControl.VisualLabel>
 								{ __( 'Poster image' ) }
 							</BaseControl.VisualLabel>
@@ -265,7 +265,7 @@ function VideoEdit( {
 									{ __( 'Remove' ) }
 								</Button>
 							) }
-						</BaseControl>
+						</div>
 					</MediaUploadCheck>
 				</PanelBody>
 			</InspectorControls>
diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index dc3d8c0e29c8e0..d51629de6f7253 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -15,7 +15,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<textarea { ...controlProps }>
 			  { children }
 			</textarea>
@@ -92,7 +92,10 @@ It should only be used in cases where the children being rendered inside BaseCon
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl help="This button is already accessibly labeled.">
+	<BaseControl
+		__nextHasNoMarginBottom
+		help="This button is already accessibly labeled."
+	>
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 14ecce1bdd729d..77899b6480daed 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -26,29 +26,6 @@ import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
-/**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
- *
- * ```jsx
- * import { BaseControl, useBaseControlProps } from '@wordpress/components';
- *
- * // Render a `BaseControl` for a textarea input
- * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
- * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
- * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
- * 	// properly associating it with the `label` and `help` elements.
- * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
- *
- * 	return (
- * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
- * 			<textarea { ...controlProps }>
- * 			  { children }
- * 			</textarea>
- * 		</BaseControl>
- * 	);
- * );
- * ```
- */
 const UnconnectedBaseControl = (
 	props: WordPressComponentProps< BaseControlProps, null >
 ) => {
@@ -105,23 +82,6 @@ const UnconnectedBaseControl = (
 	);
 };
 
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- *
- * @example
- * import { BaseControl } from '@wordpress/components';
- *
- * const MyBaseControl = () => (
- * 	<BaseControl help="This button is already accessibly labeled.">
- * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
- * 		<Button>Select an author</Button>
- * 	</BaseControl>
- * );
- */
 const UnforwardedVisualLabel = (
 	props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >,
 	ref: ForwardedRef< any >
@@ -141,9 +101,56 @@ const UnforwardedVisualLabel = (
 
 export const VisualLabel = forwardRef( UnforwardedVisualLabel );
 
+/**
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * ```jsx
+ * import { BaseControl, useBaseControlProps } from '@wordpress/components';
+ *
+ * // Render a `BaseControl` for a textarea input
+ * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+ * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+ * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
+ * 	// properly associating it with the `label` and `help` elements.
+ * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+ *
+ * 	return (
+ * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * 			<textarea { ...controlProps }>
+ * 			  { children }
+ * 			</textarea>
+ * 		</BaseControl>
+ * 	);
+ * );
+ * ```
+ */
 export const BaseControl = Object.assign(
 	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
-	{ VisualLabel }
+
+	{
+		/**
+		 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+		 *
+		 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+		 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+		 * otherwise use if the `label` prop was passed.
+		 *
+		 * ```jsx
+		 * import { BaseControl } from '@wordpress/components';
+		 *
+		 * const MyBaseControl = () => (
+		 * 	<BaseControl
+		 * 		__nextHasNoMarginBottom
+		 * 		help="This button is already accessibly labeled."
+		 * 	>
+		 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+		 * 		<Button>Select an author</Button>
+		 * 	</BaseControl>
+		 * );
+		 * ```
+		 */
+		VisualLabel,
+	}
 );
 
 export default BaseControl;
diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js
index a7e7bd6127a5fb..28fa64c643cbbd 100644
--- a/packages/edit-site/src/components/global-styles/size-control/index.js
+++ b/packages/edit-site/src/components/global-styles/size-control/index.js
@@ -20,7 +20,11 @@ import {
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
-function SizeControl( props ) {
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+} ) {
 	const { baseControlProps } = useBaseControlProps( props );
 	const { value, onChange, fallbackValue, disabled } = props;
 
@@ -45,7 +49,7 @@ function SizeControl( props ) {
 	};
 
 	return (
-		<BaseControl { ...baseControlProps }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index c79ba67a1a7d74..49613c8b4c2822 100644
--- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -323,6 +323,7 @@ function PushChangesToGlobalStylesControl( {
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom
 			className="edit-site-push-changes-to-global-styles-control"
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
diff --git a/packages/editor/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js
index a4b6c332cd800c..63e3830295c379 100644
--- a/packages/editor/src/components/create-template-part-modal/index.js
+++ b/packages/editor/src/components/create-template-part-modal/index.js
@@ -143,6 +143,7 @@ export function CreateTemplatePartModalContents( {
 					required
 				/>
 				<BaseControl
+					__nextHasNoMarginBottom
 					label={ __( 'Area' ) }
 					id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
 					className="editor-create-template-part-modal__area-base-control"
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 3a5ff3e0674a6e..9bec88a93471eb 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -92,6 +92,7 @@ function PatternOverridesControls( {
 		<>
 			<InspectorControls group="advanced">
 				<BaseControl
+					__nextHasNoMarginBottom
 					id={ controlId }
 					label={ __( 'Overrides' ) }
 					help={ helpText }

From d34ddd43e227b4421cf13b0c001a21db4e0264cf Mon Sep 17 00:00:00 2001
From: Jan Pfeil <jan.pfeil@rypox.net>
Date: Mon, 12 Aug 2024 19:34:49 +0200
Subject: [PATCH 084/205] fix typo in block-filters.md (#64452)

https://github.com/WordPress/gutenberg/pull/64447#pullrequestreview-2233534636
---
 docs/reference-guides/filters/block-filters.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index c70bb356a445a8..637cecadf1402b 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -139,7 +139,7 @@ The following PHP filters are available to change the output of a block on the f
 
 ### `render_block`
 
-Filters the font-end content of any block. This filter has no impact on the behavior of blocks in the Editor. 
+Filters the front-end content of any block. This filter has no impact on the behavior of blocks in the Editor. 
 
 The callback function for this filter receives three parameters:
 
@@ -172,7 +172,7 @@ add_filter( 'render_block', 'example_add_custom_class_to_paragraph_block', 10, 2
 
 ### `render_block_{namespace/block}`
 
-Filters the font-end content of the defined block. This is just a simpler form of `render_block` when you only need to modify a specific block type.
+Filters the front-end content of the defined block. This is just a simpler form of `render_block` when you only need to modify a specific block type.
 
 The callback function for this filter receives three parameters:
 

From 47138724bf9e6abc67f448e3403428d431f2a1b9 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:33:25 +0900
Subject: [PATCH 085/205] In-between Inserter: Show inserter when it doesn't
 conflict with block toolbar (#64229)

Unlinked contributors: digitalex11.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
---
 .../block-list/use-in-between-inserter.js     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index 74151fb3b070ba..bb307816fd1501 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -25,6 +25,7 @@ export function useInBetweenInserter() {
 		getBlockIndex,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
+		getSettings,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
@@ -88,9 +89,11 @@ export function useInBetweenInserter() {
 					return;
 				}
 
+				const blockListSettings = getBlockListSettings( rootClientId );
 				const orientation =
-					getBlockListSettings( rootClientId )?.orientation ||
-					'vertical';
+					blockListSettings?.orientation || 'vertical';
+				const captureToolbars =
+					!! blockListSettings?.__experimentalCaptureToolbars;
 				const offsetTop = event.clientY;
 				const offsetLeft = event.clientX;
 
@@ -135,9 +138,18 @@ export function useInBetweenInserter() {
 					return;
 				}
 
-				// Don't show the inserter when hovering above (conflicts with
-				// block toolbar) or inside selected block(s).
-				if ( getSelectedBlockClientIds().includes( clientId ) ) {
+				// Don't show the inserter if the following conditions are met,
+				// as it conflicts with the block toolbar:
+				// 1. when hovering above or inside selected block(s)
+				// 2. when the orientation is vertical
+				// 3. when the __experimentalCaptureToolbars is not enabled
+				// 4. when the Top Toolbar is not disabled
+				if (
+					getSelectedBlockClientIds().includes( clientId ) &&
+					orientation === 'vertical' &&
+					! captureToolbars &&
+					! getSettings().hasFixedToolbar
+				) {
 					return;
 				}
 				const elementRect = element.getBoundingClientRect();

From 344d61e5df74411283014bcbb5dbbed0b54f000a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 13 Aug 2024 08:48:19 +0400
Subject: [PATCH 086/205] Block Editor: Use hooks instead of HoC in
 'BlockModeToggle' (#64460)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../block-settings-menu/block-mode-toggle.js  | 59 +++++++++----------
 .../test/block-mode-toggle.js                 | 49 +++++++--------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 6810a21581f12e..7ca294a2894158 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +13,23 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-export function BlockModeToggle( {
-	blockType,
-	mode,
-	onToggleMode,
-	small = false,
-	isCodeEditingEnabled = true,
-} ) {
+export default function BlockModeToggle( { clientId, onToggle = noop } ) {
+	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockMode, getSettings } =
+				select( blockEditorStore );
+			const block = getBlock( clientId );
+
+			return {
+				mode: getBlockMode( clientId ),
+				blockType: block ? getBlockType( block.name ) : null,
+				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+			};
+		},
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
@@ -32,26 +41,14 @@ export function BlockModeToggle( {
 	const label =
 		mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
 
-	return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
+	return (
+		<MenuItem
+			onClick={ () => {
+				toggleBlockMode( clientId );
+				onToggle();
+			} }
+		>
+			{ label }
+		</MenuItem>
+	);
 }
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } =
-			select( blockEditorStore );
-		const block = getBlock( clientId );
-		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
-
-		return {
-			mode: getBlockMode( clientId ),
-			blockType: block ? getBlockType( block.name ) : null,
-			isCodeEditingEnabled,
-		};
-	} ),
-	withDispatch( ( dispatch, { onToggle = noop, clientId } ) => ( {
-		onToggleMode() {
-			dispatch( blockEditorStore ).toggleBlockMode( clientId );
-			onToggle();
-		},
-	} ) ),
-] )( BlockModeToggle );
diff --git a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
index c297bad15f29ea..67d88125e3429c 100644
--- a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -3,16 +3,32 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { BlockModeToggle } from '../block-mode-toggle';
+import BlockModeToggle from '../block-mode-toggle';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
+	useSelect.mockImplementation( () => {
+		return {
+			mode,
+			blockType,
+			isCodeEditingEnabled: codeEditingEnabled,
+		};
+	} );
+}
 
 describe( 'BlockModeToggle', () => {
 	it( "should not render the HTML mode button if the block doesn't support it", () => {
-		render(
-			<BlockModeToggle blockType={ { supports: { html: false } } } />
-		);
+		setupUseSelectMock( undefined, { supports: { html: false } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -20,12 +36,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the HTML mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="visual"
-			/>
-		);
+		setupUseSelectMock( 'visual', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -33,12 +45,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the Visual mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit visually' } )
@@ -46,13 +54,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should not render the Visual mode button if code editing is disabled', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-				isCodeEditingEnabled={ false }
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } }, false );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit visually' } )

From 6445ff13273b7bdbf5315c1394b5aeda8011e47c Mon Sep 17 00:00:00 2001
From: Robert Lee <rslee1247@gmail.com>
Date: Mon, 12 Aug 2024 22:46:36 -0700
Subject: [PATCH 087/205] WPCompleter: Restrict block list to allowed blocks
 only (#64413)

Unlinked contributors: ssang.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
---
 packages/block-editor/src/autocompleters/block.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
index bc06c9de5aaaff..859ae11036c82a 100644
--- a/packages/block-editor/src/autocompleters/block.js
+++ b/packages/block-editor/src/autocompleters/block.js
@@ -60,7 +60,8 @@ function createBlockCompleter() {
 				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {

From 476c78b36e0ac1af0f1cbec75507a6b288c4df29 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 13 Aug 2024 14:15:23 +0800
Subject: [PATCH 088/205] Fix bumped specificity for layout styles in
 non-iframed editor (#64076)

* Fix too specific layout styles in non-iframed editor

* Ensure first/last child rules take precedence

* Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing

* Update tests

* Update client side layout selectors to match theme json

* Add backport changelog

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 backport-changelog/6.6/7145.md                        |  3 +++
 lib/class-wp-theme-json-gutenberg.php                 |  2 +-
 .../global-styles/test/use-global-styles-output.js    |  6 +++---
 .../global-styles/use-global-styles-output.js         |  4 ++--
 phpunit/class-wp-theme-json-test.php                  | 11 +++++------
 5 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 backport-changelog/6.6/7145.md

diff --git a/backport-changelog/6.6/7145.md b/backport-changelog/6.6/7145.md
new file mode 100644
index 00000000000000..386f765cb22fa8
--- /dev/null
+++ b/backport-changelog/6.6/7145.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7145
+
+* https://github.com/WordPress/gutenberg/pull/64076
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 7558438dcbe745..20ea31090407b4 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1744,7 +1744,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
 										$spacing_rule['selector']
 									);
 								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$s';
 									$layout_selector = sprintf(
 										$format,
 										$selector,
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index e2530fdb85f812..1b061f6921f2c2 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -763,7 +763,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }.is-layout-flex { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -780,7 +780,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.is-layout-flex { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -797,7 +797,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
+				':root :where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flex) { gap: 12px; }'
 			);
 		} );
 
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 9190733d5b6607..c1449d6d8b298f 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -538,10 +538,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `.${ className }${
+										? `:root :where(.${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${
+										: `:root :where(${ selector }-${ className })${
 												spacingStyle?.selector || ''
 										  }`;
 							}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index d366e0df44c4a2..3f11dd97a6688f 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -714,7 +714,7 @@ public function test_get_stylesheet_renders_enabled_protected_properties() {
 			)
 		);
 
-		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1em;}:root :where(.is-layout-grid){gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
 		$this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
 		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
@@ -1131,7 +1131,7 @@ public function test_get_stylesheet_generates_layout_styles() {
 
 		// Results also include root site blocks styles.
 		$this->assertSameCSS(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1em;}:root :where(.is-layout-grid){gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
 			$theme_json->get_stylesheet( array( 'styles' ) )
 		);
 	}
@@ -1160,7 +1160,7 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets
 
 		// Results also include root site blocks styles.
 		$this->assertSameCSS(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-flex {gap: var(--wp--preset--spacing--60);}.is-layout-grid {gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:root :where(.is-layout-flex){gap: var(--wp--preset--spacing--60);}:root :where(.is-layout-grid){gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
 			$theme_json->get_stylesheet( array( 'styles' ) )
 		);
 	}
@@ -1284,8 +1284,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
 		);
 
 		$this->assertSameCSS(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-flex {gap: 1rem;}.is-layout-grid {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' .
-			':root :where(.wp-block-post-content){color: gray;}.wp-block-social-links-is-layout-flow  > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow  > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained  > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained  > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex {gap: 0;}.wp-block-social-links-is-layout-grid {gap: 0;}.wp-block-buttons-is-layout-flow  > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-flow  > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained  > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained  > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex {gap: 0;}.wp-block-buttons-is-layout-grid {gap: 0;}',
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1rem;}:root :where(.is-layout-grid){gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(.wp-block-post-content){color: gray;}:root :where(.wp-block-social-links-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.wp-block-social-links-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-flex){gap: 0;}:root :where(.wp-block-social-links-is-layout-grid){gap: 0;}:root :where(.wp-block-buttons-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.wp-block-buttons-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-flex){gap: 0;}:root :where(.wp-block-buttons-is-layout-grid){gap: 0;}',
 			$theme_json->get_stylesheet()
 		);
 	}
@@ -3690,7 +3689,7 @@ public function test_get_styles_with_appearance_tools() {
 			'selector' => 'body',
 		);
 
-		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-flex {gap: 1;}.is-layout-grid {gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1;}:root :where(.is-layout-grid){gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
 		$this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ) );
 	}
 

From 33093652ea76c4463e78252bb53f2f331a81610c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 13 Aug 2024 08:29:48 +0100
Subject: [PATCH 089/205] Focus pattern inserter search when activating zoom
 out inserter (#64396)

* Add new search focus option for inserter panel

* Try focusing when inserter clicked in Zoom Out

* Store search input ref in block editor settings

* Remove legacy selector

* Remove more legacy code

* Move all ref selectors to block editor

* Update packages/editor/src/components/inserter-sidebar/index.js

---------

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
---
 .../block-tools/zoom-out-mode-inserters.js    |  8 ++++-
 .../src/components/inserter/library.js        |  2 ++
 .../src/components/inserter/menu.js           | 34 ++++++++++++-------
 .../src/store/private-selectors.js            |  4 +++
 packages/block-editor/src/store/reducer.js    |  5 +++
 5 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index bb044f9479c024..6f986ce90dc3bd 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -23,6 +23,7 @@ function ZoomOutModeInserters() {
 		sectionRootClientId,
 		selectedBlockClientId,
 		hoveredBlockClientId,
+		inserterSearchInputRef,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
@@ -32,8 +33,11 @@ function ZoomOutModeInserters() {
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
 			isBlockInsertionPointVisible,
-		} = select( blockEditorStore );
+			getInserterSearchInputRef,
+		} = unlock( select( blockEditorStore ) );
+
 		const { sectionRootClientId: root } = unlock( getSettings() );
+
 		return {
 			hasSelection: !! getSelectionStart().clientId,
 			blockInsertionPoint: getBlockInsertionPoint(),
@@ -44,6 +48,7 @@ function ZoomOutModeInserters() {
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
+			inserterSearchInputRef: getInserterSearchInputRef(),
 		};
 	}, [] );
 
@@ -110,6 +115,7 @@ function ZoomOutModeInserters() {
 							showInsertionPoint( sectionRootClientId, index, {
 								operation: 'insert',
 							} );
+							inserterSearchInputRef?.current?.focus();
 						} }
 					/>
 				) }
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 4e10a051996a9f..fe14d48bb4016b 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -27,6 +27,7 @@ function InserterLibrary(
 		onSelect = noop,
 		shouldFocusBlock = false,
 		onClose,
+		__experimentalSearchInputRef,
 	},
 	ref
 ) {
@@ -58,6 +59,7 @@ function InserterLibrary(
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }
+			__experimentalSearchInputRef={ __experimentalSearchInputRef }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 52e4e3062e9024..c5f41f9e3bf0a0 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -53,11 +54,16 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
-		[]
-	);
+	const { isZoomOutMode, inserterSearchInputRef } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getInserterSearchInputRef } = unlock(
+			select( blockEditorStore )
+		);
+		return {
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			inserterSearchInputRef: getInserterSearchInputRef(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -104,7 +110,7 @@ function InserterMenu(
 				}
 			} );
 		},
-		[ onInsertBlocks, onSelect, shouldFocusBlock ]
+		[ onInsertBlocks, onSelect, ref, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -113,7 +119,7 @@ function InserterMenu(
 			onInsertBlocks( blocks, { patternName } );
 			onSelect();
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, onToggleInsertionPoint ]
 	);
 
 	const onHover = useCallback(
@@ -164,7 +170,9 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
+					ref={ inserterSearchInputRef }
 				/>
+
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
 						filterValue={ delayedFilterValue }
@@ -185,18 +193,18 @@ function InserterMenu(
 		);
 	}, [
 		selectedTab,
-		hoveredItem,
-		setHoveredItem,
-		setFilterValue,
 		filterValue,
+		inserterSearchInputRef,
 		delayedFilterValue,
 		onSelect,
 		onHover,
-		shouldFocusBlock,
-		clientId,
 		rootClientId,
-		__experimentalInsertionIndex,
+		clientId,
 		isAppender,
+		__experimentalInsertionIndex,
+		shouldFocusBlock,
+		hoveredItem,
+		setFilterValue,
 	] );
 
 	const blocksTab = useMemo( () => {
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index c534c65b8defe7..dcd315a0ae2804 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -511,3 +511,7 @@ export function getTemporarilyEditingAsBlocks( state ) {
 export function getTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
+
+export function getInserterSearchInputRef( state ) {
+	return state.inserterSearchInputRef;
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 91d853a50a6a42..d9352670776371 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -2087,6 +2087,10 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
+export function inserterSearchInputRef( state = { current: null } ) {
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2120,6 +2124,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	inserterSearchInputRef,
 } );
 
 function withAutomaticChangeReset( reducer ) {

From 27e441209db11f384e484f5a71453143c64c9b4a Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 13 Aug 2024 16:00:20 +0800
Subject: [PATCH 090/205] Update postcss-prefixwrap dependency to 1.51.0 to fix
 prefixing in `:where` selectors (#64458)

* Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors

* Add extra test for :where with a pseudo selector

----
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org>
---
 package-lock.json                             | 31 ++++++------
 packages/block-editor/package.json            |  2 +-
 .../src/utils/test/transform-styles.js        | 49 +++++++++++++++++++
 3 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66c32076d3b364..471d7b845d24f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41754,14 +41754,6 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
-		"node_modules/postcss-prefixwrap": {
-			"version": "1.41.0",
-			"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.41.0.tgz",
-			"integrity": "sha512-gmwwAEE+ci3/ZKjUZppTETINlh1QwihY8gCstInuS7ohk353KYItU4d64hvnUvO2GUy29hBGPHz4Ce+qJRi90A==",
-			"peerDependencies": {
-				"postcss": "*"
-			}
-		},
 		"node_modules/postcss-reduce-initial": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
@@ -52237,7 +52229,7 @@
 				"fast-deep-equal": "^3.1.3",
 				"memize": "^2.1.0",
 				"postcss": "^8.4.21",
-				"postcss-prefixwrap": "^1.41.0",
+				"postcss-prefixwrap": "^1.51.0",
 				"postcss-urlrebase": "^1.4.0",
 				"react-autosize-textarea": "^7.1.0",
 				"react-easy-crop": "^5.0.6",
@@ -52252,6 +52244,15 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"packages/block-editor/node_modules/postcss-prefixwrap": {
+			"version": "1.51.0",
+			"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.51.0.tgz",
+			"integrity": "sha512-PuP4md5zFSY921dUcLShwSLv2YyyDec0dK9/puXl/lu7ZNvJ1U59+ZEFRMS67xwfNg5nIIlPXnAycPJlhA/Isw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"postcss": "*"
+			}
+		},
 		"packages/block-editor/node_modules/postcss-urlrebase": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/postcss-urlrebase/-/postcss-urlrebase-1.4.0.tgz",
@@ -67255,13 +67256,18 @@
 				"fast-deep-equal": "^3.1.3",
 				"memize": "^2.1.0",
 				"postcss": "^8.4.21",
-				"postcss-prefixwrap": "^1.41.0",
+				"postcss-prefixwrap": "^1.51.0",
 				"postcss-urlrebase": "^1.4.0",
 				"react-autosize-textarea": "^7.1.0",
 				"react-easy-crop": "^5.0.6",
 				"remove-accents": "^0.5.0"
 			},
 			"dependencies": {
+				"postcss-prefixwrap": {
+					"version": "1.51.0",
+					"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.51.0.tgz",
+					"integrity": "sha512-PuP4md5zFSY921dUcLShwSLv2YyyDec0dK9/puXl/lu7ZNvJ1U59+ZEFRMS67xwfNg5nIIlPXnAycPJlhA/Isw=="
+				},
 				"postcss-urlrebase": {
 					"version": "1.4.0",
 					"resolved": "https://registry.npmjs.org/postcss-urlrebase/-/postcss-urlrebase-1.4.0.tgz",
@@ -87820,11 +87826,6 @@
 				}
 			}
 		},
-		"postcss-prefixwrap": {
-			"version": "1.41.0",
-			"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.41.0.tgz",
-			"integrity": "sha512-gmwwAEE+ci3/ZKjUZppTETINlh1QwihY8gCstInuS7ohk353KYItU4d64hvnUvO2GUy29hBGPHz4Ce+qJRi90A=="
-		},
 		"postcss-reduce-initial": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 8ccaee6f0a955c..02765376e314b6 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -73,7 +73,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefixwrap": "^1.51.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index 8245ce62831078..b0c6ca48deb355 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -125,6 +125,21 @@ describe( 'transformStyles', () => {
 			expect( output ).toMatchSnapshot();
 		} );
 
+		it( `should not try to replace 'body' in the middle of a classname`, () => {
+			const prefix = '.my-namespace';
+			const input = `.has-body-text { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( [ `${ prefix } ${ input }` ] );
+		} );
+
 		it( 'should ignore keyframes', () => {
 			const input = `
 			@keyframes edit-post__fade-in-animation {
@@ -210,6 +225,40 @@ describe( 'transformStyles', () => {
 
 			expect( output ).toMatchSnapshot();
 		} );
+
+		it( 'should not try to wrap items within `:where` selectors', () => {
+			const input = `:where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }`;
+			const prefix = '.my-namespace';
+			const expected = [ `${ prefix } ${ input }` ];
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( expected );
+		} );
+
+		it( 'should not try to prefix pseudo elements on `:where` selectors', () => {
+			const input = `:where(.wp-element-button, .wp-block-button__link)::before { color: blue; }`;
+			const prefix = '.my-namespace';
+			const expected = [ `${ prefix } ${ input }` ];
+
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				prefix
+			);
+
+			expect( output ).toEqual( expected );
+		} );
 	} );
 
 	it( 'should not break with data urls', () => {

From 926e7389a95701c3eba4702d4b4ef7f5d4325ffb Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Aug 2024 10:25:34 +0200
Subject: [PATCH 091/205] DataViews Extensibility: Allow unregistering the
 duplicate post action (#64441)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 219 +-----------------
 .../actions/duplicate-post.native.tsx         |   3 +
 .../src/dataviews/actions/duplicate-post.tsx  | 174 ++++++++++++++
 .../src/dataviews/actions/reorder-page.tsx    |   6 +-
 packages/editor/src/dataviews/fields/index.ts |   7 +-
 .../src/dataviews/store/private-actions.ts    |   9 +
 packages/editor/src/dataviews/types.ts        |  26 ++-
 7 files changed, 213 insertions(+), 231 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/duplicate-post.native.tsx
 create mode 100644 packages/editor/src/dataviews/actions/duplicate-post.tsx

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 0df73d1996deb5..627de5e8652e47 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -4,50 +4,15 @@
 import { external } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf, _x } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useMemo, useState, useEffect } from '@wordpress/element';
-import { DataForm } from '@wordpress/dataviews';
-import {
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-	PATTERN_POST_TYPE,
-} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { getItemTitle } from '../../dataviews/actions/utils';
-
-// TODO: this should be shared with other components (see post-fields in edit-site).
-const fields = [
-	{
-		type: 'text',
-		id: 'title',
-		label: __( 'Title' ),
-		placeholder: __( 'No title' ),
-		getValue: ( { item } ) => item.title,
-	},
-	{
-		type: 'integer',
-		id: 'menu_order',
-		label: __( 'Order' ),
-		description: __( 'Determines the order of pages.' ),
-	},
-];
-
-const formDuplicateAction = {
-	fields: [ 'title' ],
-};
 
 const viewPostAction = {
 	id: 'view-post',
@@ -100,172 +65,6 @@ const postRevisionsAction = {
 	},
 };
 
-const useDuplicatePostAction = ( postType ) => {
-	const userCanCreatePost = useSelect(
-		( select ) => {
-			return select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: postType,
-			} );
-		},
-		[ postType ]
-	);
-	return useMemo(
-		() =>
-			userCanCreatePost && {
-				id: 'duplicate-post',
-				label: _x( 'Duplicate', 'action label' ),
-				isEligible( { status } ) {
-					return status !== 'trash';
-				},
-				RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-					const [ item, setItem ] = useState( {
-						...items[ 0 ],
-						title: sprintf(
-							/* translators: %s: Existing template title */
-							__( '%s (Copy)' ),
-							getItemTitle( items[ 0 ] )
-						),
-					} );
-
-					const [ isCreatingPage, setIsCreatingPage ] =
-						useState( false );
-
-					const { saveEntityRecord } = useDispatch( coreStore );
-					const { createSuccessNotice, createErrorNotice } =
-						useDispatch( noticesStore );
-
-					async function createPage( event ) {
-						event.preventDefault();
-
-						if ( isCreatingPage ) {
-							return;
-						}
-
-						const newItemOject = {
-							status: 'draft',
-							title: item.title,
-							slug: item.title || __( 'No title' ),
-							comment_status: item.comment_status,
-							content:
-								typeof item.content === 'string'
-									? item.content
-									: item.content.raw,
-							excerpt: item.excerpt.raw,
-							meta: item.meta,
-							parent: item.parent,
-							password: item.password,
-							template: item.template,
-							format: item.format,
-							featured_media: item.featured_media,
-							menu_order: item.menu_order,
-							ping_status: item.ping_status,
-						};
-						const assignablePropertiesPrefix = 'wp:action-assign-';
-						// Get all the properties that the current user is able to assign normally author, categories, tags,
-						// and custom taxonomies.
-						const assignableProperties = Object.keys(
-							item?._links || {}
-						)
-							.filter( ( property ) =>
-								property.startsWith(
-									assignablePropertiesPrefix
-								)
-							)
-							.map( ( property ) =>
-								property.slice(
-									assignablePropertiesPrefix.length
-								)
-							);
-						assignableProperties.forEach( ( property ) => {
-							if ( item[ property ] ) {
-								newItemOject[ property ] = item[ property ];
-							}
-						} );
-						setIsCreatingPage( true );
-						try {
-							const newItem = await saveEntityRecord(
-								'postType',
-								item.type,
-								newItemOject,
-								{ throwOnError: true }
-							);
-
-							createSuccessNotice(
-								sprintf(
-									// translators: %s: Title of the created template e.g: "Category".
-									__( '"%s" successfully created.' ),
-									decodeEntities(
-										newItem.title?.rendered || item.title
-									)
-								),
-								{
-									id: 'duplicate-post-action',
-									type: 'snackbar',
-								}
-							);
-
-							if ( onActionPerformed ) {
-								onActionPerformed( [ newItem ] );
-							}
-						} catch ( error ) {
-							const errorMessage =
-								error.message && error.code !== 'unknown_error'
-									? error.message
-									: __(
-											'An error occurred while duplicating the page.'
-									  );
-
-							createErrorNotice( errorMessage, {
-								type: 'snackbar',
-							} );
-						} finally {
-							setIsCreatingPage( false );
-							closeModal();
-						}
-					}
-
-					return (
-						<form onSubmit={ createPage }>
-							<VStack spacing={ 3 }>
-								<DataForm
-									data={ item }
-									fields={ fields }
-									form={ formDuplicateAction }
-									onChange={ ( changes ) =>
-										setItem( {
-											...item,
-											...changes,
-										} )
-									}
-								/>
-								<HStack spacing={ 2 } justify="end">
-									<Button
-										variant="tertiary"
-										onClick={ closeModal }
-										__next40pxDefaultSize
-									>
-										{ __( 'Cancel' ) }
-									</Button>
-									<Button
-										variant="primary"
-										type="submit"
-										isBusy={ isCreatingPage }
-										aria-disabled={ isCreatingPage }
-										__next40pxDefaultSize
-									>
-										{ _x( 'Duplicate', 'action label' ) }
-									</Button>
-								</HStack>
-							</VStack>
-						</form>
-					);
-				},
-			},
-		[ userCanCreatePost ]
-	);
-};
-
 export function usePostActions( { postType, onActionPerformed, context } ) {
 	const { defaultActions, postTypeObject } = useSelect(
 		( select ) => {
@@ -284,12 +83,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		registerPostTypeActions( postType );
 	}, [ registerPostTypeActions, postType ] );
 
-	const duplicatePostAction = useDuplicatePostAction( postType );
-	const isTemplateOrTemplatePart = [
-		TEMPLATE_POST_TYPE,
-		TEMPLATE_PART_POST_TYPE,
-	].includes( postType );
-	const isPattern = postType === PATTERN_POST_TYPE;
 	const isLoaded = !! postTypeObject;
 	const supportsRevisions = !! postTypeObject?.supports?.revisions;
 	return useMemo( () => {
@@ -300,11 +93,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		let actions = [
 			postTypeObject?.viewable && viewPostAction,
 			supportsRevisions && postRevisionsAction,
-			globalThis.IS_GUTENBERG_PLUGIN
-				? ! isTemplateOrTemplatePart &&
-				  ! isPattern &&
-				  duplicatePostAction
-				: false,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -370,10 +158,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		return actions;
 	}, [
 		defaultActions,
-		isTemplateOrTemplatePart,
-		isPattern,
 		postTypeObject?.viewable,
-		duplicatePostAction,
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
diff --git a/packages/editor/src/dataviews/actions/duplicate-post.native.tsx b/packages/editor/src/dataviews/actions/duplicate-post.native.tsx
new file mode 100644
index 00000000000000..5468aa649abbd4
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/duplicate-post.native.tsx
@@ -0,0 +1,3 @@
+const duplicatePost = undefined;
+
+export default duplicatePost;
diff --git a/packages/editor/src/dataviews/actions/duplicate-post.tsx b/packages/editor/src/dataviews/actions/duplicate-post.tsx
new file mode 100644
index 00000000000000..0979d30da39519
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/duplicate-post.tsx
@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../dataviews/actions/utils';
+import type { CoreDataError, BasePost } from '../types';
+import { titleField } from '../fields';
+
+const fields = [ titleField ];
+const formDuplicateAction = {
+	fields: [ 'title' ],
+};
+
+const duplicatePost: Action< BasePost > = {
+	id: 'duplicate-post',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item, setItem ] = useState< BasePost >( {
+			...items[ 0 ],
+			title: sprintf(
+				/* translators: %s: Existing template title */
+				__( '%s (Copy)' ),
+				getItemTitle( items[ 0 ] )
+			),
+		} );
+
+		const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function createPage( event: React.FormEvent ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+
+			const newItemOject = {
+				status: 'draft',
+				title: item.title,
+				slug: item.title || __( 'No title' ),
+				comment_status: item.comment_status,
+				content:
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+				excerpt:
+					typeof item.excerpt === 'string'
+						? item.excerpt
+						: item.excerpt?.raw,
+				meta: item.meta,
+				parent: item.parent,
+				password: item.password,
+				template: item.template,
+				format: item.format,
+				featured_media: item.featured_media,
+				menu_order: item.menu_order,
+				ping_status: item.ping_status,
+			};
+			const assignablePropertiesPrefix = 'wp:action-assign-';
+			// Get all the properties that the current user is able to assign normally author, categories, tags,
+			// and custom taxonomies.
+			const assignableProperties = Object.keys( item?._links || {} )
+				.filter( ( property ) =>
+					property.startsWith( assignablePropertiesPrefix )
+				)
+				.map( ( property ) =>
+					property.slice( assignablePropertiesPrefix.length )
+				);
+			assignableProperties.forEach( ( property ) => {
+				if ( item.hasOwnProperty( property ) ) {
+					// @ts-ignore
+					newItemOject[ property ] = item[ property ];
+				}
+			} );
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					newItemOject,
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created template e.g: "Category".
+						__( '"%s" successfully created.' ),
+						decodeEntities( newItem.title?.rendered || item.title )
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal?.();
+			}
+		}
+
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<DataForm
+						data={ item }
+						fields={ fields }
+						form={ formDuplicateAction }
+						onChange={ ( changes ) =>
+							setItem( ( prev ) => ( {
+								...prev,
+								...changes,
+							} ) )
+						}
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+							__next40pxDefaultSize
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default duplicatePost;
diff --git a/packages/editor/src/dataviews/actions/reorder-page.tsx b/packages/editor/src/dataviews/actions/reorder-page.tsx
index 1b9524123e7c95..1820884d8d8c73 100644
--- a/packages/editor/src/dataviews/actions/reorder-page.tsx
+++ b/packages/editor/src/dataviews/actions/reorder-page.tsx
@@ -17,7 +17,7 @@ import type { Action, RenderModalProps } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { CoreDataError, PostWithPageAttributesSupport } from '../types';
+import type { CoreDataError, BasePost } from '../types';
 import { orderField } from '../fields';
 
 const fields = [ orderField ];
@@ -29,7 +29,7 @@ function ReorderModal( {
 	items,
 	closeModal,
 	onActionPerformed,
-}: RenderModalProps< PostWithPageAttributesSupport > ) {
+}: RenderModalProps< BasePost > ) {
 	const [ item, setItem ] = useState( items[ 0 ] );
 	const orderInput = item.menu_order;
 	const { editEntityRecord, saveEditedEntityRecord } =
@@ -113,7 +113,7 @@ function ReorderModal( {
 	);
 }
 
-const reorderPage: Action< PostWithPageAttributesSupport > = {
+const reorderPage: Action< BasePost > = {
 	id: 'order-pages',
 	label: __( 'Order' ),
 	isEligible( { status } ) {
diff --git a/packages/editor/src/dataviews/fields/index.ts b/packages/editor/src/dataviews/fields/index.ts
index ea30d15dab600b..b215172eaf7f02 100644
--- a/packages/editor/src/dataviews/fields/index.ts
+++ b/packages/editor/src/dataviews/fields/index.ts
@@ -7,17 +7,18 @@ import type { Field } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { BasePost, PostWithPageAttributesSupport } from '../types';
+import type { BasePost } from '../types';
+import { getItemTitle } from '../actions/utils';
 
 export const titleField: Field< BasePost > = {
 	type: 'text',
 	id: 'title',
 	label: __( 'Title' ),
 	placeholder: __( 'No title' ),
-	getValue: ( { item } ) => item.title,
+	getValue: ( { item } ) => getItemTitle( item ),
 };
 
-export const orderField: Field< PostWithPageAttributesSupport > = {
+export const orderField: Field< BasePost > = {
 	type: 'integer',
 	id: 'menu_order',
 	label: __( 'Order' ),
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 80449d1b7a0798..d5b299b012e364 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -21,6 +21,7 @@ import restorePost from '../actions/restore-post';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import duplicatePost from '../actions/duplicate-post';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -87,6 +88,14 @@ export const registerPostTypeActions =
 			.getCurrentTheme();
 
 		const actions = [
+			// @ts-ignore
+			globalThis.IS_GUTENBERG_PLUGIN
+				? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes(
+						postTypeConfig.slug
+				  ) &&
+				  canCreate &&
+				  duplicatePost
+				: undefined,
 			postTypeConfig.slug === 'wp_template_part' &&
 				canCreate &&
 				currentTheme?.is_block_theme &&
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 5750ab96eeae81..514953d6691290 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -7,7 +7,7 @@ type PostStatus =
 	| 'auto-draft'
 	| 'trash';
 
-export interface BasePost {
+export interface CommonPost {
 	status?: PostStatus;
 	title: string | { rendered: string } | { raw: string };
 	content: string | { raw: string; rendered: string };
@@ -16,7 +16,21 @@ export interface BasePost {
 	blocks?: Object[];
 }
 
-export interface Template extends BasePost {
+export interface BasePost extends CommonPost {
+	comment_status?: 'open' | 'closed';
+	excerpt?: string | { raw: string; rendered: string };
+	meta?: Record< string, any >;
+	parent?: number;
+	password?: string;
+	template?: string;
+	format?: string;
+	featured_media?: number;
+	menu_order?: number;
+	ping_status?: 'open' | 'closed';
+	_links?: Record< string, { href: string }[] >;
+}
+
+export interface Template extends CommonPost {
 	type: 'wp_template';
 	is_custom: boolean;
 	source: string;
@@ -24,7 +38,7 @@ export interface Template extends BasePost {
 	id: string;
 }
 
-export interface TemplatePart extends BasePost {
+export interface TemplatePart extends CommonPost {
 	type: 'wp_template_part';
 	source: string;
 	has_theme_file: boolean;
@@ -32,16 +46,12 @@ export interface TemplatePart extends BasePost {
 	area: string;
 }
 
-export interface Pattern extends BasePost {
+export interface Pattern extends CommonPost {
 	slug: string;
 	title: { raw: string };
 	wp_pattern_sync_status: string;
 }
 
-export interface PostWithPageAttributesSupport extends BasePost {
-	menu_order: number;
-}
-
 export type Post = Template | TemplatePart | Pattern | BasePost;
 
 export type PostWithPermissions = Post & {

From f9268debccb0fb53bb7552dd5723cece5c1178a2 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 13 Aug 2024 11:00:12 +0200
Subject: [PATCH 092/205] `Composite`: export `useCompositeStore`, add more
 focus-related props (#64450)

* Export useCompositeStore from package

* Add `accessibleWhenDisabled` prop to `Composite.Item`

* Add `focusable`, `disabled`, `accessibleWhenDisabled`, and `onFocusVisible` props to `Composite`

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 packages/components/src/composite/README.md   | 67 +++++++++++++++++
 packages/components/src/composite/index.tsx   |  6 +-
 .../src/composite/stories/index.story.tsx     | 71 ++++++++++++++++++-
 packages/components/src/composite/types.ts    | 67 +++++++++++++++++
 packages/components/src/index.ts              |  2 +-
 6 files changed, 210 insertions(+), 4 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 57ba69197cfa98..761e6604a127a2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
 -   `Composite`: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
+-   `Composite`: export `useCompositeStore, add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
 
 ### Enhancements
 
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
index 7bd12d0cabfa0c..3670e31b01e9df 100644
--- a/packages/components/src/composite/README.md
+++ b/packages/components/src/composite/README.md
@@ -147,6 +147,55 @@ Allows the component to be rendered as a different HTML element or React compone
 
 -   Required: no
 
+##### `focusable`: `boolean`
+
+Makes the component a focusable element. When this element gains keyboard focus, it gets a `data-focus-visible` attribute and triggers the `onFocusVisible` prop.
+
+The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the the `accessibleWhenDisabled` prop.
+
+Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.
+
+-   Required: no
+
+##### `disabled`: `boolean`
+
+Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute.
+
+This feature can be combined with the `accessibleWhenDisabled` prop to
+make disabled elements still accessible via keyboard.
+
+**Note**: For this prop to work, the `focusable` prop must be set to
+`true`, if it's not set by default.
+
+-   Required: no
+-   Default: `false`
+
+##### `accessibleWhenDisabled`: `boolean`
+
+Indicates whether the element should be focusable even when it is
+`disabled`.
+
+This is important when discoverability is a concern. For example:
+
+> A toolbar in an editor contains a set of special smart paste functions
+> that are disabled when the clipboard is empty or when the function is not
+> applicable to the current content of the clipboard. It could be helpful to
+> keep the disabled buttons focusable if the ability to discover their
+> functionality is primarily via their presence on the toolbar.
+
+Learn more on [Focusability of disabled
+controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+
+-   Required: no
+
+##### `onFocusVisible`: `(event: SyntheticEvent<HTMLElement>) => void`
+
+Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the `data-focus-visible` attribute.
+
+**Note**: For this prop to work, the `focusable` prop must be set to `true` if it's not set by default.
+
+-   Required: no
+
 ##### `children`: `React.ReactNode`
 
 The contents of the component.
@@ -189,6 +238,24 @@ The contents of the component.
 
 Renders a composite item.
 
+##### `accessibleWhenDisabled`: `boolean`
+
+Indicates whether the element should be focusable even when it is
+`disabled`.
+
+This is important when discoverability is a concern. For example:
+
+> A toolbar in an editor contains a set of special smart paste functions
+> that are disabled when the clipboard is empty or when the function is not
+> applicable to the current content of the clipboard. It could be helpful to
+> keep the disabled buttons focusable if the ability to discover their
+> functionality is primarily via their presence on the toolbar.
+
+Learn more on [Focusability of disabled
+controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+
+-   Required: no
+
 ##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
 
 Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
index 4e87b9a55fa5bb..f5d92330cada3c 100644
--- a/packages/components/src/composite/index.tsx
+++ b/packages/components/src/composite/index.tsx
@@ -136,8 +136,10 @@ export const Composite = Object.assign(
 	forwardRef<
 		HTMLDivElement,
 		WordPressComponentProps< CompositeProps, 'div', false >
-	>( function CompositeRow( props, ref ) {
-		return <Ariakit.Composite { ...props } ref={ ref } />;
+	>( function Composite( { disabled = false, ...props }, ref ) {
+		return (
+			<Ariakit.Composite disabled={ disabled } { ...props } ref={ ref } />
+		);
 	} ),
 	{
 		displayName: 'Composite',
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index f1be53445f79ad..405962b92a761c 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -74,6 +74,28 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 						table: { type: { summary: 'React.ReactNode' } },
 					},
 				};
+				const accessibleWhenDisabled = {
+					name: 'accessibleWhenDisabled',
+					description: `Indicates whether the element should be focusable even when it is
+\`disabled\`.
+
+This is important when discoverability is a concern. For example:
+
+> A toolbar in an editor contains a set of special smart paste functions
+> that are disabled when the clipboard is empty or when the function is not
+> applicable to the current content of the clipboard. It could be helpful to
+> keep the disabled buttons focusable if the ability to discover their
+> functionality is primarily via their presence on the toolbar.
+
+Learn more on [Focusability of disabled
+controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).`,
+					table: {
+						type: {
+							summary: 'boolean',
+						},
+					},
+				};
+
 				const argTypes = {
 					useCompositeStore: {
 						activeId: {
@@ -226,11 +248,58 @@ This only affects the composite widget behavior. You still need to set \`dir="rt
 							},
 							type: { required: true },
 						},
+						focusable: {
+							name: 'focusable',
+							description: `Makes the component a focusable element. When this element gains keyboard focus, it gets a \`data-focus-visible\` attribute and triggers the \`onFocusVisible\` prop.
+
+The component supports the \`disabled\` prop even for those elements not supporting the native \`disabled\` attribute. Disabled elements may be still accessible via keyboard by using the the \`accessibleWhenDisabled\` prop.
+
+Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.`,
+							table: {
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+						disabled: {
+							name: 'disabled',
+							description: `Determines if the element is disabled. This sets the \`aria-disabled\` attribute accordingly, enabling support for all elements, including those that don't support the native \`disabled\` attribute.
+
+This feature can be combined with the \`accessibleWhenDisabled\` prop to
+make disabled elements still accessible via keyboard.
+
+**Note**: For this prop to work, the \`focusable\` prop must be set to
+\`true\`, if it's not set by default.`,
+							table: {
+								defaultValue: {
+									summary: 'false',
+								},
+								type: {
+									summary: 'boolean',
+								},
+							},
+						},
+						accessibleWhenDisabled,
+						onFocusVisible: {
+							name: 'onFocusVisible',
+							description: `Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the \`data-focus-visible\` attribute.
+
+**Note**: For this prop to work, the \`focusable\` prop must be set to \`true\` if it's not set by default.`,
+							table: {
+								type: {
+									summary:
+										'(event: SyntheticEvent<HTMLElement>) => void',
+								},
+							},
+						},
 					},
 					'Composite.Group': commonArgTypes,
 					'Composite.GroupLabel': commonArgTypes,
 					'Composite.Row': commonArgTypes,
-					'Composite.Item': commonArgTypes,
+					'Composite.Item': {
+						...commonArgTypes,
+						accessibleWhenDisabled,
+					},
 					'Composite.Hover': commonArgTypes,
 					'Composite.Typeahead': commonArgTypes,
 				};
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
index 8bd4b447a83aef..5afe410f7582ba 100644
--- a/packages/components/src/composite/types.ts
+++ b/packages/components/src/composite/types.ts
@@ -131,6 +131,57 @@ export type CompositeProps = {
 	 * merged.
 	 */
 	render?: Ariakit.CompositeProps[ 'render' ];
+	/**
+	 * Makes the component a focusable element. When this element gains keyboard
+	 * focus, it gets a `data-focus-visible` attribute and triggers the
+	 * `onFocusVisible` prop.
+	 * The component supports the `disabled` prop even for those elements not
+	 * supporting the native `disabled` attribute. Disabled elements may be
+	 * still accessible via keyboard by using the the `accessibleWhenDisabled`
+	 * prop.
+	 * Non-native focusable elements will lose their focusability entirely.
+	 * However, native focusable elements will retain their inherent focusability.
+	 */
+	focusable?: Ariakit.CompositeProps[ 'focusable' ];
+	/**
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
+	 *
+	 * This feature can be combined with the `accessibleWhenDisabled` prop to
+	 * make disabled elements still accessible via keyboard.
+	 *
+	 * **Note**: For this prop to work, the `focusable` prop must be set to
+	 * `true`, if it's not set by default.
+	 *
+	 * @default false
+	 */
+	disabled?: Ariakit.CompositeProps[ 'disabled' ];
+	/**
+	 * Indicates whether the element should be focusable even when it is
+	 * `disabled`.
+	 *
+	 * This is important when discoverability is a concern. For example:
+	 *
+	 * > A toolbar in an editor contains a set of special smart paste functions
+	 * that are disabled when the clipboard is empty or when the function is not
+	 * applicable to the current content of the clipboard. It could be helpful to
+	 * keep the disabled buttons focusable if the ability to discover their
+	 * functionality is primarily via their presence on the toolbar.
+	 *
+	 * Learn more on [Focusability of disabled
+	 * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+	 */
+	accessibleWhenDisabled?: Ariakit.CompositeProps[ 'accessibleWhenDisabled' ];
+	/**
+	 * Custom event handler invoked when the element gains focus through keyboard
+	 * interaction or a key press occurs while the element is in focus. This is
+	 * the programmatic equivalent of the `data-focus-visible` attribute.
+	 *
+	 * **Note**: For this prop to work, the `focusable` prop must be set to `true`
+	 * if it's not set by default.
+	 */
+	onFocusVisible?: Ariakit.CompositeProps[ 'onFocusVisible' ];
 	/**
 	 * The contents of the component.
 	 */
@@ -177,6 +228,22 @@ export type CompositeItemProps = {
 	 * The contents of the component.
 	 */
 	children?: Ariakit.CompositeItemProps[ 'children' ];
+	/**
+	 * Indicates whether the element should be focusable even when it is
+	 * `disabled`.
+	 *
+	 * This is important when discoverability is a concern. For example:
+	 *
+	 * > A toolbar in an editor contains a set of special smart paste functions
+	 * that are disabled when the clipboard is empty or when the function is not
+	 * applicable to the current content of the clipboard. It could be helpful to
+	 * keep the disabled buttons focusable if the ability to discover their
+	 * functionality is primarily via their presence on the toolbar.
+	 *
+	 * Learn more on [Focusability of disabled
+	 * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+	 */
+	accessibleWhenDisabled?: Ariakit.CompositeItemProps[ 'accessibleWhenDisabled' ];
 };
 
 export type CompositeRowProps = {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 4c724a461e6775..cd6d2a77db9cb6 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -62,7 +62,7 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite/legacy';
-export { Composite } from './composite';
+export { Composite, useCompositeStore } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

From ad37f2063021a9d151253ca1386c213ef300fe6d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 13 Aug 2024 10:03:02 +0100
Subject: [PATCH 093/205] Zoom Out: Defalt the inserter in the patterns tab
 when in zoom out (#64193)

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
---
 .../block-editor/src/components/inserter/menu.js    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index c5f41f9e3bf0a0..629765315c1d6b 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -73,9 +73,16 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState(
-		__experimentalInitialTab
-	);
+	function getInitialTab() {
+		if ( __experimentalInitialTab ) {
+			return __experimentalInitialTab;
+		}
+
+		if ( isZoomOutMode ) {
+			return 'patterns';
+		}
+	}
+	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {

From 943b72aecdfa160e925e43dad4cfbc9f9b277810 Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Tue, 13 Aug 2024 14:39:56 +0530
Subject: [PATCH 094/205] Fix: Embed blocks: adding captions via toolbar
 (#64394)

* Add the Caption component to be used for consistency on the embed block similar to audio and image

* Change the label for the embed caption text

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>
---
 packages/block-library/src/embed/edit.js      |  9 +++++
 .../block-library/src/embed/embed-preview.js  | 40 ++-----------------
 2 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 12265883d6963c..0b589eb68ecf49 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -14,6 +14,7 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
+import { Caption } from '../utils/caption';
 
 /**
  * External dependencies
@@ -277,6 +278,14 @@ const EmbedEdit = ( props ) => {
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
 				/>
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
 			</View>
 		</>
 	);
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index ba079cc2e1e8b6..d53f1148cee13c 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -13,13 +13,8 @@ import clsx from 'clsx';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import {
-	RichText,
-	BlockIcon,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
+import { BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { getAuthority } from '@wordpress/url';
 
 /**
@@ -57,19 +52,8 @@ class EmbedPreview extends Component {
 	}
 
 	render() {
-		const {
-			preview,
-			previewable,
-			url,
-			type,
-			caption,
-			onCaptionChange,
-			isSelected,
-			className,
-			icon,
-			label,
-			insertBlocksAfter,
-		} = this.props;
+		const { preview, previewable, url, type, className, icon, label } =
+			this.props;
 		const { scripts } = preview;
 		const { interactive } = this.state;
 
@@ -139,24 +123,6 @@ class EmbedPreview extends Component {
 						</p>
 					</Placeholder>
 				) }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						identifier="caption"
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ onCaptionChange }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
 			</figure>
 		);
 	}

From 600aa54ca87ad53b8b7e81977651ba0e5fc9affc Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 13 Aug 2024 18:27:00 +0900
Subject: [PATCH 095/205] Table Block: Hide caption toolbar button on multiple
 selection (#64462)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-library/src/table/edit.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 5510d0031ff6be..95162f4e14c00b 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -95,7 +95,7 @@ function TableEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
-	isSelected,
+	isSelected: isSingleSelected,
 } ) {
 	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
@@ -340,10 +340,10 @@ function TableEdit( {
 	}
 
 	useEffect( () => {
-		if ( ! isSelected ) {
+		if ( ! isSingleSelected ) {
 			setSelectedCell();
 		}
-	}, [ isSelected ] );
+	}, [ isSingleSelected ] );
 
 	useEffect( () => {
 		if ( hasTableCreated ) {
@@ -565,9 +565,10 @@ function TableEdit( {
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
+					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Table caption text' ) }
+					showToolbarButton={ isSingleSelected }
 				/>
 			) }
 		</figure>

From 992bcde7651e93d3115f6c54e8bb485acd808bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Tue, 13 Aug 2024 11:57:24 +0200
Subject: [PATCH 096/205] Add plugin template registration API (#61577)

Co-authored-by: Aljullu <aljullu@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: TimothyBJacobs <timothyblynjacobs@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: nerrad <nerrad@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 backport-changelog/6.7/7125.md                |   3 +
 lib/compat/wordpress-6.7/block-templates.php  |  41 ++
 ...utenberg-rest-templates-controller-6-7.php | 203 ++++++++++
 .../class-wp-block-templates-registry.php     | 256 +++++++++++++
 lib/compat/wordpress-6.7/compat.php           | 114 ++++++
 lib/compat/wordpress-6.7/rest-api.php         |  51 +++
 lib/load.php                                  |   4 +
 .../core-data/src/entity-types/wp-template.ts |   4 +
 .../plugins/block-template-registration.php   |  72 ++++
 .../src/utils/is-template-removable.js        |   6 +-
 .../src/utils/is-template-revertable.js       |   3 +-
 .../src/dataviews/actions/reset-post.tsx      |   3 +-
 .../editor/src/dataviews/actions/utils.ts     |   4 +-
 packages/editor/src/dataviews/types.ts        |   3 +
 packages/editor/src/store/private-actions.js  |   2 +-
 .../src/store/utils/is-template-revertable.js |   3 +-
 phpunit/block-template-test.php               |  37 ++
 ...tenberg-rest-templates-controller-test.php | 119 ++++++
 ...class-wp-block-templates-registry-test.php | 192 ++++++++++
 .../site-editor/template-registration.spec.js | 356 ++++++++++++++++++
 20 files changed, 1469 insertions(+), 7 deletions(-)
 create mode 100644 backport-changelog/6.7/7125.md
 create mode 100644 lib/compat/wordpress-6.7/block-templates.php
 create mode 100644 lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
 create mode 100644 lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
 create mode 100644 lib/compat/wordpress-6.7/compat.php
 create mode 100644 packages/e2e-tests/plugins/block-template-registration.php
 create mode 100644 phpunit/block-template-test.php
 create mode 100644 phpunit/class-gutenberg-rest-templates-controller-test.php
 create mode 100644 phpunit/class-wp-block-templates-registry-test.php
 create mode 100644 test/e2e/specs/site-editor/template-registration.spec.js

diff --git a/backport-changelog/6.7/7125.md b/backport-changelog/6.7/7125.md
new file mode 100644
index 00000000000000..ce208decd2d145
--- /dev/null
+++ b/backport-changelog/6.7/7125.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7125
+
+* https://github.com/WordPress/gutenberg/pull/61577
diff --git a/lib/compat/wordpress-6.7/block-templates.php b/lib/compat/wordpress-6.7/block-templates.php
new file mode 100644
index 00000000000000..e270ab226c1d9f
--- /dev/null
+++ b/lib/compat/wordpress-6.7/block-templates.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * Block template functions.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'wp_register_block_template' ) ) {
+	/**
+	 * Register a template.
+	 *
+	 * @param string       $template_name  Template name in the form of `plugin_uri//template_name`.
+	 * @param array|string $args           Object type or array of object types with which the taxonomy should be associated.
+	 * @param array|string $args           {
+	 *     @type string        $title                 Optional. Title of the template as it will be shown in the Site Editor
+	 *                                                and other UI elements.
+	 *     @type string        $description           Optional. Description of the template as it will be shown in the Site
+	 *                                                Editor.
+	 *     @type string        $content               Optional. Default content of the template that will be used when the
+	 *                                                template is rendered or edited in the editor.
+	 *     @type string[]      $post_types            Optional. Array of post types to which the template should be available.
+	 *     @type string        $plugin                Uri of the plugin that registers the template.
+	 * }
+	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
+	 */
+	function wp_register_block_template( $template_name, $args = array() ) {
+		return WP_Block_Templates_Registry::get_instance()->register( $template_name, $args );
+	}
+}
+
+if ( ! function_exists( 'wp_unregister_block_template' ) ) {
+	/**
+	 * Unregister a template.
+	 *
+	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
+	 * @return true|WP_Error True on success, WP_Error on failure or if the template doesn't exist.
+	 */
+	function wp_unregister_block_template( $template_name ) {
+		return WP_Block_Templates_Registry::get_instance()->unregister( $template_name );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
new file mode 100644
index 00000000000000..ed67dded75ecb1
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
@@ -0,0 +1,203 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ * @package    gutenberg
+ */
+
+/**
+ * Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ */
+class Gutenberg_REST_Templates_Controller_6_7 extends Gutenberg_REST_Templates_Controller_6_6 {
+	/**
+	 * Returns the given template
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_item( $request ) {
+		if ( isset( $request['source'] ) && ( 'theme' === $request['source'] || 'plugin' === $request['source'] ) ) {
+			$template = get_block_file_template( $request['id'], $this->post_type );
+		} else {
+			$template = get_block_template( $request['id'], $this->post_type );
+		}
+
+		if ( ! $template ) {
+			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.' ), array( 'status' => 404 ) );
+		}
+
+		return $this->prepare_item_for_response( $template, $request );
+	}
+
+	/**
+	 * Prepare a single template output for response
+	 *
+	 * @param WP_Block_Template $item    Template instance.
+	 * @param WP_REST_Request   $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	// @core-merge: Fix wrong author in plugin templates.
+	public function prepare_item_for_response( $item, $request ) {
+		$template = $item;
+
+		$fields = $this->get_fields_for_response( $request );
+
+		if ( 'plugin' !== $item->origin ) {
+			return parent::prepare_item_for_response( $item, $request );
+		}
+		$cloned_item = clone $item;
+		// Set the origin as theme when calling the previous `prepare_item_for_response()` to prevent warnings when generating the author text.
+		$cloned_item->origin = 'theme';
+		$response            = parent::prepare_item_for_response( $cloned_item, $request );
+		$data                = $response->data;
+
+		if ( rest_is_field_included( 'origin', $fields ) ) {
+			$data['origin'] = 'plugin';
+		}
+
+		if ( rest_is_field_included( 'plugin', $fields ) ) {
+			$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $cloned_item->slug );
+			if ( $registered_template ) {
+				$data['plugin'] = $registered_template->plugin;
+			}
+		}
+
+		if ( rest_is_field_included( 'author_text', $fields ) ) {
+			$data['author_text'] = $this->get_wp_templates_author_text_field( $template );
+		}
+
+		if ( rest_is_field_included( 'original_source', $fields ) ) {
+			$data['original_source'] = $this->get_wp_templates_original_source_field( $template );
+		}
+
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links = $this->prepare_links( $template->id );
+			$response->add_links( $links );
+			if ( ! empty( $links['self']['href'] ) ) {
+				$actions = $this->get_available_actions();
+				$self    = $links['self']['href'];
+				foreach ( $actions as $rel ) {
+					$response->add_link( $rel, $self );
+				}
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Returns the source from where the template originally comes from.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Original source of the template one of theme, plugin, site, or user.
+	 */
+	// @core-merge: Changed the comments format (from inline to multi-line) in the entire function.
+	private static function get_wp_templates_original_source_field( $template_object ) {
+		if ( 'wp_template' === $template_object->type || 'wp_template_part' === $template_object->type ) {
+			/*
+			 * Added by theme.
+			 * Template originally provided by a theme, but customized by a user.
+			 * Templates originally didn't have the 'origin' field so identify
+			 * older customized templates by checking for no origin and a 'theme'
+			 * or 'custom' source.
+			 */
+			if ( $template_object->has_theme_file &&
+			( 'theme' === $template_object->origin || (
+				empty( $template_object->origin ) && in_array(
+					$template_object->source,
+					array(
+						'theme',
+						'custom',
+					),
+					true
+				) )
+			)
+			) {
+				return 'theme';
+			}
+
+			// Added by plugin.
+			// @core-merge: Removed `$template_object->has_theme_file` check from this if clause.
+			if ( 'plugin' === $template_object->origin ) {
+				return 'plugin';
+			}
+
+			/*
+			 * Added by site.
+			 * Template was created from scratch, but has no author. Author support
+			 * was only added to templates in WordPress 5.9. Fallback to showing the
+			 * site logo and title.
+			 */
+			if ( empty( $template_object->has_theme_file ) && 'custom' === $template_object->source && empty( $template_object->author ) ) {
+				return 'site';
+			}
+		}
+
+		// Added by user.
+		return 'user';
+	}
+
+	/**
+	 * Returns a human readable text for the author of the template.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Human readable text for the author.
+	 */
+	private static function get_wp_templates_author_text_field( $template_object ) {
+		$original_source = self::get_wp_templates_original_source_field( $template_object );
+		switch ( $original_source ) {
+			case 'theme':
+				$theme_name = wp_get_theme( $template_object->theme )->get( 'Name' );
+				return empty( $theme_name ) ? $template_object->theme : $theme_name;
+			case 'plugin':
+				// @core-merge: Prioritize plugin name instead of theme name for plugin-registered templates.
+				if ( ! function_exists( 'get_plugins' ) || ! function_exists( 'get_plugin_data' ) ) {
+					require_once ABSPATH . 'wp-admin/includes/plugin.php';
+				}
+				if ( isset( $template_object->plugin ) ) {
+					$plugins = wp_get_active_and_valid_plugins();
+
+					foreach ( $plugins as $plugin_file ) {
+						$plugin_basename = plugin_basename( $plugin_file );
+						// Split basename by '/' to get the plugin slug.
+						list( $plugin_slug, ) = explode( '/', $plugin_basename );
+
+						if ( $plugin_slug === $template_object->plugin ) {
+							$plugin_data = get_plugin_data( $plugin_file );
+
+							if ( ! empty( $plugin_data['Name'] ) ) {
+								return $plugin_data['Name'];
+							}
+
+							break;
+						}
+					}
+				}
+
+				/*
+				 * Fall back to the theme name if the plugin is not defined. That's needed to keep backwards
+				 * compatibility with templates that were registered before the plugin attribute was added.
+				 */
+				$plugins         = get_plugins();
+				$plugin_basename = plugin_basename( sanitize_text_field( $template_object->theme . '.php' ) );
+				if ( isset( $plugins[ $plugin_basename ] ) && isset( $plugins[ $plugin_basename ]['Name'] ) ) {
+					return $plugins[ $plugin_basename ]['Name'];
+				}
+				return isset( $template_object->plugin ) ?
+					$template_object->plugin :
+					$template_object->theme;
+				// @core-merge: End of changes to merge in core.
+			case 'site':
+				return get_bloginfo( 'name' );
+			case 'user':
+				$author = get_user_by( 'id', $template_object->author );
+				if ( ! $author ) {
+					return __( 'Unknown author' );
+				}
+				return $author->get( 'display_name' );
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
new file mode 100644
index 00000000000000..db53f735e13b3d
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
@@ -0,0 +1,256 @@
+<?php
+/**
+ * Templates registry functions.
+ *
+ * @package Gutenberg
+ * @since 6.7.0
+ */
+
+if ( ! class_exists( 'WP_Block_Templates_Registry' ) ) {
+	/**
+	 * Core class used for interacting with templates.
+	 *
+	 * @since 6.7.0
+	 */
+	final class WP_Block_Templates_Registry {
+		/**
+		 * Registered templates, as `$name => $instance` pairs.
+		 *
+		 * @since 6.7.0
+		 * @var WP_Block_Template[] $registered_block_templates Registered templates.
+		 */
+		private $registered_templates = array();
+
+		/**
+		 * Container for the main instance of the class.
+		 *
+		 * @since 6.7.0
+		 * @var WP_Block_Templates_Registry|null
+		 */
+		private static $instance = null;
+
+		/**
+		 * Registers a template.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @param array  $args          Optional. Array of template arguments.
+		 * @return WP_Block_Template|WP_Error The registered template on success, or false on failure.
+		 */
+		public function register( $template_name, $args = array() ) {
+
+			$template = null;
+
+			$error_message = '';
+			$error_code    = '';
+			if ( ! is_string( $template_name ) ) {
+				$error_message = __( 'Template names must be strings.', 'gutenberg' );
+				$error_code    = 'template_name_no_string';
+			} elseif ( preg_match( '/[A-Z]+/', $template_name ) ) {
+				$error_message = __( 'Template names must not contain uppercase characters.', 'gutenberg' );
+				$error_code    = 'template_name_no_uppercase';
+			} elseif ( ! preg_match( '/^[a-z0-9-]+\/\/[a-z0-9-]+$/', $template_name ) ) {
+				$error_message = __( 'Template names must contain a namespace prefix. Example: my-plugin//my-custom-template', 'gutenberg' );
+				$error_code    = 'template_no_prefix';
+			} elseif ( $this->is_registered( $template_name ) ) {
+				/* translators: %s: Template name. */
+				$error_message = sprintf( __( 'Template "%s" is already registered.', 'gutenberg' ), $template_name );
+				$error_code    = 'template_already_registered';
+			}
+
+			if ( $error_message ) {
+				_doing_it_wrong(
+					__METHOD__,
+					$error_message,
+					'6.7.0'
+				);
+				return new WP_Error( $error_code, $error_message );
+			}
+
+			if ( ! $template ) {
+				$theme_name             = get_stylesheet();
+				list( $plugin, $slug )  = explode( '//', $template_name );
+				$default_template_types = get_default_block_template_types();
+
+				$template              = new WP_Block_Template();
+				$template->id          = $theme_name . '//' . $slug;
+				$template->theme       = $theme_name;
+				$template->plugin      = $plugin;
+				$template->author      = null;
+				$template->content     = isset( $args['content'] ) ? $args['content'] : '';
+				$template->source      = 'plugin';
+				$template->slug        = $slug;
+				$template->type        = 'wp_template';
+				$template->title       = isset( $args['title'] ) ? $args['title'] : $template_name;
+				$template->description = isset( $args['description'] ) ? $args['description'] : '';
+				$template->status      = 'publish';
+				$template->origin      = 'plugin';
+				$template->is_custom   = ! isset( $default_template_types[ $template_name ] );
+				$template->post_types  = isset( $args['post_types'] ) ? $args['post_types'] : array();
+			}
+
+			$this->registered_templates[ $template_name ] = $template;
+
+			return $template;
+		}
+
+		/**
+		 * Retrieves all registered templates.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @return WP_Block_Template[]|false Associative array of `$template_name => $template` pairs.
+		 */
+		public function get_all_registered() {
+			return $this->registered_templates;
+		}
+
+		/**
+		 * Retrieves a registered template by its name.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @return WP_Block_Template|null|false The registered template, or null if it is not registered.
+		 */
+		public function get_registered( $template_name ) {
+			if ( ! $this->is_registered( $template_name ) ) {
+				return null;
+			}
+
+			return $this->registered_templates[ $template_name ];
+		}
+
+		/**
+		 * Retrieves a registered template by its slug.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_slug Slug of the template.
+		 * @return WP_Block_Template|null The registered template, or null if it is not registered.
+		 */
+		public function get_by_slug( $template_slug ) {
+			$all_templates = $this->get_all_registered();
+
+			if ( ! $all_templates ) {
+				return null;
+			}
+
+			foreach ( $all_templates as $template ) {
+				if ( $template->slug === $template_slug ) {
+					return $template;
+				}
+			}
+
+			return null;
+		}
+
+		/**
+		 * Retrieves registered templates matching a query.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param array  $query {
+		 *     Arguments to retrieve templates. Optional, empty by default.
+		 *
+		 *     @type string[] $slug__in     List of slugs to include.
+		 *     @type string[] $slug__not_in List of slugs to skip.
+		 *     @type string   $post_type    Post type to get the templates for.
+		 * }
+		 */
+		public function get_by_query( $query = array() ) {
+			$all_templates = $this->get_all_registered();
+
+			if ( ! $all_templates ) {
+				return array();
+			}
+
+			$query            = wp_parse_args(
+				$query,
+				array(
+					'slug__in'     => array(),
+					'slug__not_in' => array(),
+					'post_type'    => '',
+				)
+			);
+			$slugs_to_include = $query['slug__in'];
+			$slugs_to_skip    = $query['slug__not_in'];
+			$post_type        = $query['post_type'];
+
+			$matching_templates = array();
+			foreach ( $all_templates as $template_name => $template ) {
+				if ( $slugs_to_include && ! in_array( $template->slug, $slugs_to_include, true ) ) {
+					continue;
+				}
+
+				if ( $slugs_to_skip && in_array( $template->slug, $slugs_to_skip, true ) ) {
+					continue;
+				}
+
+				if ( $post_type && ! in_array( $post_type, $template->post_types, true ) ) {
+					continue;
+				}
+
+				$matching_templates[ $template_name ] = $template;
+			}
+
+			return $matching_templates;
+		}
+
+		/**
+		 * Checks if a template is registered.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name.
+		 * @return bool True if the template is registered, false otherwise.
+		 */
+		public function is_registered( $template_name ) {
+			return isset( $this->registered_templates[ $template_name ] );
+		}
+
+		/**
+		 * Unregisters a template.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @return WP_Block_Template|false The unregistered template on success, or false on failure.
+		 */
+		public function unregister( $template_name ) {
+			if ( ! $this->is_registered( $template_name ) ) {
+				_doing_it_wrong(
+					__METHOD__,
+					/* translators: %s: Template name. */
+					sprintf( __( 'Template "%s" is not registered.', 'gutenberg' ), $template_name ),
+					'6.7.0'
+				);
+				/* translators: %s: Template name. */
+				return new WP_Error( 'template_not_registered', __( 'Template "%s" is not registered.', 'gutenberg' ) );
+			}
+
+			$unregistered_template = $this->registered_templates[ $template_name ];
+			unset( $this->registered_templates[ $template_name ] );
+
+			return $unregistered_template;
+		}
+
+		/**
+		 * Utility method to retrieve the main instance of the class.
+		 *
+		 * The instance will be created if it does not exist yet.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @return WP_Block_Templates_Registry The main instance.
+		 */
+		public static function get_instance() {
+			if ( null === self::$instance ) {
+				self::$instance = new self();
+			}
+
+			return self::$instance;
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/compat.php b/lib/compat/wordpress-6.7/compat.php
new file mode 100644
index 00000000000000..7021cab2053eff
--- /dev/null
+++ b/lib/compat/wordpress-6.7/compat.php
@@ -0,0 +1,114 @@
+<?php
+/**
+ * WordPress 6.7 compatibility functions.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Hooks into `get_block_templates` so templates from the registry are also returned, as long as there
+ * isn't a theme template with the same slug.
+ *
+ * @param WP_Block_Template[] $query_result Array of found block templates.
+ * @param array               $query {
+ *     Arguments to retrieve templates. All arguments are optional.
+ *
+ *     @type string[] $slug__in  List of slugs to include.
+ *     @type int      $wp_id     Post ID of customized template.
+ *     @type string   $area      A 'wp_template_part_area' taxonomy value to filter by (for 'wp_template_part' template type only).
+ *     @type string   $post_type Post type to get the templates for.
+ * }
+ * @param string              $template_type wp_template or wp_template_part.
+ * @return WP_Block_Template[] The same $query_result but might contain some additional templates from
+ * the registry.
+ */
+function _gutenberg_add_block_templates_from_registry( $query_result, $query, $template_type ) {
+	// Add `plugin` property to templates registered by a plugin.
+	foreach ( $query_result as $key => $value ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $query_result[ $key ]->slug );
+		if ( $registered_template ) {
+			$query_result[ $key ]->plugin = $registered_template->plugin;
+			$query_result[ $key ]->origin =
+				'theme' !== $query_result[ $key ]->origin && 'theme' !== $query_result[ $key ]->source ?
+				'plugin' :
+				$query_result[ $key ]->origin;
+		}
+	}
+
+	if ( ! isset( $query['wp_id'] ) ) {
+		$template_files = _gutenberg_get_block_templates_files( $template_type, $query );
+
+		/*
+		 * Add templates registered in the template registry. Filtering out the ones which have a theme file.
+		 */
+		$registered_templates          = WP_Block_Templates_Registry::get_instance()->get_by_query( $query );
+		$matching_registered_templates = array_filter(
+			$registered_templates,
+			function ( $registered_template ) use ( $template_files ) {
+				foreach ( $template_files as $template_file ) {
+					if ( $template_file['slug'] === $registered_template->slug ) {
+						return false;
+					}
+				}
+				return true;
+			}
+		);
+		$query_result                  = array_merge( $query_result, $matching_registered_templates );
+	}
+
+	return $query_result;
+}
+add_filter( 'get_block_templates', '_gutenberg_add_block_templates_from_registry', 10, 3 );
+
+/**
+ * Hooks into `get_block_template` to add the `plugin` property when necessary.
+ *
+ * @param [WP_Block_Template|null] $block_template The found block template, or null if there isn’t one.
+ * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was reigstered by a plugin.
+ */
+function _gutenberg_add_block_template_plugin_attribute( $block_template ) {
+	if ( $block_template ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
+		if ( $registered_template ) {
+			$block_template->plugin = $registered_template->plugin;
+			$block_template->origin =
+				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
+				'plugin' :
+				$block_template->origin;
+		}
+	}
+
+	return $block_template;
+}
+add_filter( 'get_block_template', '_gutenberg_add_block_template_plugin_attribute', 10, 1 );
+
+/**
+ * Hooks into `get_block_file_template` so templates from the registry are also returned.
+ *
+ * @param WP_Block_Template|null $block_template The found block template, or null if there is none.
+ * @param string                 $id             Template unique identifier (example: 'theme_slug//template_slug').
+ * @return WP_Block_Template|null The block template that was already found or from the registry. In case the template was already found, add the necessary details from the registry.
+ */
+function _gutenberg_add_block_file_templates_from_registry( $block_template, $id ) {
+	if ( $block_template ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
+		if ( $registered_template ) {
+			$block_template->plugin = $registered_template->plugin;
+			$block_template->origin =
+				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
+				'plugin' :
+				$block_template->origin;
+		}
+		return $block_template;
+	}
+
+	$parts = explode( '//', $id, 2 );
+
+	if ( count( $parts ) < 2 ) {
+		return $block_template;
+	}
+
+	list( , $slug ) = $parts;
+	return WP_Block_Templates_Registry::get_instance()->get_by_slug( $slug );
+}
+add_filter( 'get_block_file_template', '_gutenberg_add_block_file_templates_from_registry', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
index 713d31c4632c74..fe2aac9c2580ae 100644
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -29,3 +29,54 @@ function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
 	return $paths;
 }
 add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );
+
+if ( ! function_exists( 'wp_api_template_registry' ) ) {
+	/**
+	 * Hook in to the template and template part post types and modify the rest
+	 * endpoint to include modifications to read templates from the
+	 * BlockTemplatesRegistry.
+	 *
+	 * @param array  $args Current registered post type args.
+	 * @param string $post_type Name of post type.
+	 *
+	 * @return array
+	 */
+	function wp_api_template_registry( $args, $post_type ) {
+		if ( 'wp_template' === $post_type || 'wp_template_part' === $post_type ) {
+			$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_7';
+		}
+		return $args;
+	}
+}
+add_filter( 'register_post_type_args', 'wp_api_template_registry', 10, 2 );
+
+/**
+ * Adds `plugin` fields to WP_REST_Templates_Controller class.
+ */
+function gutenberg_register_wp_rest_templates_controller_plugin_field() {
+
+	register_rest_field(
+		'wp_template',
+		'plugin',
+		array(
+			'get_callback'    => function ( $template_object ) {
+				if ( $template_object ) {
+					$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $template_object['slug'] );
+					if ( $registered_template ) {
+						return $registered_template->plugin;
+					}
+				}
+
+				return;
+			},
+			'update_callback' => null,
+			'schema'          => array(
+				'type'        => 'string',
+				'description' => __( 'Plugin that registered the template.', 'gutenberg' ),
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_rest_templates_controller_plugin_field' );
diff --git a/lib/load.php b/lib/load.php
index c5f12af1654df2..b501f0abd1c978 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -41,6 +41,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
 
 	// WordPress 6.7 compat.
+	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php';
 	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
 
 	// Plugin specific code.
@@ -101,9 +102,12 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.6/post.php';
 
 // WordPress 6.7 compat.
+require __DIR__ . '/compat/wordpress-6.7/block-templates.php';
 require __DIR__ . '/compat/wordpress-6.7/blocks.php';
 require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
 require __DIR__ . '/compat/wordpress-6.7/script-modules.php';
+require __DIR__ . '/compat/wordpress-6.7/class-wp-block-templates-registry.php';
+require __DIR__ . '/compat/wordpress-6.7/compat.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
diff --git a/packages/core-data/src/entity-types/wp-template.ts b/packages/core-data/src/entity-types/wp-template.ts
index ac6db09035f193..70d3e40c295dcf 100644
--- a/packages/core-data/src/entity-types/wp-template.ts
+++ b/packages/core-data/src/entity-types/wp-template.ts
@@ -73,6 +73,10 @@ declare module './base-entity-records' {
 			 * Post ID.
 			 */
 			wp_id: number;
+			/**
+			 * Plugin that registered the template.
+			 */
+			plugin?: string;
 			/**
 			 * Theme file exists.
 			 */
diff --git a/packages/e2e-tests/plugins/block-template-registration.php b/packages/e2e-tests/plugins/block-template-registration.php
new file mode 100644
index 00000000000000..a7c75552849658
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-template-registration.php
@@ -0,0 +1,72 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Template Registration
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-template-registration
+ */
+
+add_action(
+	'init',
+	function () {
+		// Custom template used by most tests.
+		wp_register_block_template(
+			'gutenberg//plugin-template',
+			array(
+				'title'       => 'Plugin Template',
+				'description' => 'A template registered by a plugin.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+		add_action(
+			'category_template_hierarchy',
+			function () {
+				return array( 'plugin-template' );
+			}
+		);
+
+		// Custom template overridden by the theme.
+		wp_register_block_template(
+			'gutenberg//custom-template',
+			array(
+				'title'       => 'Custom Template (overridden by the theme)',
+				'description' => 'A custom template registered by a plugin and overridden by a theme.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template and overridden by a theme.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+
+		// Custom template used to test unregistration.
+		wp_register_block_template(
+			'gutenberg//plugin-unregistered-template',
+			array(
+				'title'       => 'Plugin Unregistered Template',
+				'description' => 'A plugin-registered template that is unregistered.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template that is also unregistered.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+		wp_unregister_block_template( 'gutenberg//plugin-unregistered-template' );
+
+		// Custom template used to test overriding default WP templates.
+		wp_register_block_template(
+			'gutenberg//page',
+			array(
+				'title'       => 'Plugin Page Template',
+				'description' => 'A plugin-registered page template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered page template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+
+		// Custom template used to test overriding default WP templates which can be created by the user.
+		wp_register_block_template(
+			'gutenberg//author-admin',
+			array(
+				'title'       => 'Plugin Author Template',
+				'description' => 'A plugin-registered author template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered author template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+	}
+);
diff --git a/packages/edit-site/src/utils/is-template-removable.js b/packages/edit-site/src/utils/is-template-removable.js
index 9cb1de23daab75..f81cb74b022e73 100644
--- a/packages/edit-site/src/utils/is-template-removable.js
+++ b/packages/edit-site/src/utils/is-template-removable.js
@@ -7,7 +7,7 @@ import { TEMPLATE_ORIGINS } from './constants';
  * Check if a template is removable.
  *
  * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is revertable.
+ * @return {boolean} Whether the template is removable.
  */
 export default function isTemplateRemovable( template ) {
 	if ( ! template ) {
@@ -15,6 +15,8 @@ export default function isTemplateRemovable( template ) {
 	}
 
 	return (
-		template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
+		template.source === TEMPLATE_ORIGINS.custom &&
+		! Boolean( template.plugin ) &&
+		! template.has_theme_file
 	);
 }
diff --git a/packages/edit-site/src/utils/is-template-revertable.js b/packages/edit-site/src/utils/is-template-revertable.js
index a6274d07ebebb6..42413b06cd48ec 100644
--- a/packages/edit-site/src/utils/is-template-revertable.js
+++ b/packages/edit-site/src/utils/is-template-revertable.js
@@ -15,7 +15,8 @@ export default function isTemplateRevertable( template ) {
 	}
 	/* eslint-disable camelcase */
 	return (
-		template?.source === TEMPLATE_ORIGINS.custom && template?.has_theme_file
+		template?.source === TEMPLATE_ORIGINS.custom &&
+		( Boolean( template?.plugin ) || template?.has_theme_file )
 	);
 	/* eslint-enable camelcase */
 }
diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx
index 59199555ddd4db..cc4cea8f5c82c0 100644
--- a/packages/editor/src/dataviews/actions/reset-post.tsx
+++ b/packages/editor/src/dataviews/actions/reset-post.tsx
@@ -32,7 +32,8 @@ const resetPost: Action< Post > = {
 		return (
 			isTemplateOrTemplatePart( item ) &&
 			item?.source === TEMPLATE_ORIGINS.custom &&
-			item?.has_theme_file
+			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
+				item?.has_theme_file )
 		);
 	},
 	icon: backup,
diff --git a/packages/editor/src/dataviews/actions/utils.ts b/packages/editor/src/dataviews/actions/utils.ts
index 7da1f71728365b..33a2be16397f3f 100644
--- a/packages/editor/src/dataviews/actions/utils.ts
+++ b/packages/editor/src/dataviews/actions/utils.ts
@@ -57,6 +57,8 @@ export function isTemplateRemovable( template: Template | TemplatePart ) {
 	return (
 		[ template.source, template.source ].includes(
 			TEMPLATE_ORIGINS.custom
-		) && ! template.has_theme_file
+		) &&
+		! Boolean( template.type === 'wp_template' && template?.plugin ) &&
+		! template.has_theme_file
 	);
 }
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 514953d6691290..d207410ca2b6a5 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -34,6 +34,8 @@ export interface Template extends CommonPost {
 	type: 'wp_template';
 	is_custom: boolean;
 	source: string;
+	origin: string;
+	plugin?: string;
 	has_theme_file: boolean;
 	id: string;
 }
@@ -41,6 +43,7 @@ export interface Template extends CommonPost {
 export interface TemplatePart extends CommonPost {
 	type: 'wp_template_part';
 	source: string;
+	origin: string;
 	has_theme_file: boolean;
 	id: string;
 	area: string;
diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js
index 0996d6eb8b9d32..e22929011256d5 100644
--- a/packages/editor/src/store/private-actions.js
+++ b/packages/editor/src/store/private-actions.js
@@ -269,7 +269,7 @@ export const revertTemplate =
 
 			const fileTemplatePath = addQueryArgs(
 				`${ templateEntityConfig.baseURL }/${ template.id }`,
-				{ context: 'edit', source: 'theme' }
+				{ context: 'edit', source: template.origin }
 			);
 
 			const fileTemplate = await apiFetch( { path: fileTemplatePath } );
diff --git a/packages/editor/src/store/utils/is-template-revertable.js b/packages/editor/src/store/utils/is-template-revertable.js
index a09715af875bc2..2cb674920e3e4c 100644
--- a/packages/editor/src/store/utils/is-template-revertable.js
+++ b/packages/editor/src/store/utils/is-template-revertable.js
@@ -18,6 +18,7 @@ export default function isTemplateRevertable( templateOrTemplatePart ) {
 
 	return (
 		templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
-		templateOrTemplatePart.has_theme_file
+		( Boolean( templateOrTemplatePart?.plugin ) ||
+			templateOrTemplatePart?.has_theme_file )
 	);
 }
diff --git a/phpunit/block-template-test.php b/phpunit/block-template-test.php
new file mode 100644
index 00000000000000..6589aad90b8053
--- /dev/null
+++ b/phpunit/block-template-test.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Tests block template registry via block-related functions.
+ */
+class Tests_Block_Template extends WP_UnitTestCase {
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'block-theme' );
+	}
+
+	public function test_get_block_templates_from_registry() {
+		$template_name = 'test-plugin//test-template';
+
+		wp_register_block_template( $template_name );
+
+		$templates = get_block_templates();
+
+		$this->assertArrayHasKey( $template_name, $templates );
+
+		wp_unregister_block_template( $template_name );
+	}
+
+	public function test_get_block_template_from_registry() {
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'title' => 'Test Template',
+		);
+
+		wp_register_block_template( $template_name, $args );
+
+		$template = get_block_template( 'block-theme//test-template' );
+
+		$this->assertEquals( 'Test Template', $template->title );
+
+		wp_unregister_block_template( $template_name );
+	}
+}
diff --git a/phpunit/class-gutenberg-rest-templates-controller-test.php b/phpunit/class-gutenberg-rest-templates-controller-test.php
new file mode 100644
index 00000000000000..14735246c6fb20
--- /dev/null
+++ b/phpunit/class-gutenberg-rest-templates-controller-test.php
@@ -0,0 +1,119 @@
+<?php
+/**
+ * Unit tests covering Gutenberg_REST_Templates_Controller_6_7 functionality.
+ */
+class Gutenberg_REST_Templates_Controller_6_7_Test extends WP_Test_REST_Controller_Testcase {
+
+	/**
+	 * @var int
+	 */
+	protected static $admin_id;
+
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$admin_id );
+	}
+
+	public function test_get_item() {
+		wp_set_current_user( self::$admin_id );
+
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'content'     => 'Template content',
+			'title'       => 'Test Template',
+			'description' => 'Description of test template',
+			'post_types'  => array( 'post', 'page' ),
+		);
+
+		wp_register_block_template( $template_name, $args );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
+		$response = rest_get_server()->dispatch( $request );
+
+		$this->assertNotWPError( $response, "Fetching a registered template shouldn't cause an error." );
+
+		$data = $response->get_data();
+
+		$this->assertSame( 'default//test-template', $data['id'], 'Template ID mismatch.' );
+		$this->assertSame( 'default', $data['theme'], 'Template theme mismatch.' );
+		$this->assertSame( 'Template content', $data['content']['raw'], 'Template content mismatch.' );
+		$this->assertSame( 'test-template', $data['slug'], 'Template slug mismatch.' );
+		$this->assertSame( 'plugin', $data['source'], "Template source should be 'plugin'." );
+		$this->assertSame( 'plugin', $data['origin'], "Template origin should be 'plugin'." );
+		$this->assertSame( 'test-plugin', $data['author_text'], 'Template author text mismatch.' );
+		$this->assertSame( 'Description of test template', $data['description'], 'Template description mismatch.' );
+		$this->assertSame( 'Test Template', $data['title']['rendered'], 'Template title mismatch.' );
+		$this->assertSame( 'test-plugin', $data['plugin'], 'Plugin name mismatch.' );
+
+		wp_unregister_block_template( $template_name );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
+		$response = rest_get_server()->dispatch( $request );
+
+		$this->assertNotWPError( $response, "Fetching an unregistered template shouldn't cause an error." );
+		$this->assertSame( 404, $response->get_status(), 'Fetching an unregistered template should return 404.' );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_register_routes() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_items() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_create_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_update_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_delete_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_context_param() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_prepare_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_item_schema() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+}
diff --git a/phpunit/class-wp-block-templates-registry-test.php b/phpunit/class-wp-block-templates-registry-test.php
new file mode 100644
index 00000000000000..fb8436eb6153d4
--- /dev/null
+++ b/phpunit/class-wp-block-templates-registry-test.php
@@ -0,0 +1,192 @@
+<?php
+/**
+ * Test WP_Block_Templates_Registry class.
+ *
+ * @covers WP_Block_Templates_Registry
+ */
+class WP_Block_Templates_Registry_Test extends WP_UnitTestCase {
+
+	/**
+	 * @var WP_Block_Templates_Registry
+	 */
+	protected static $registry;
+
+	public static function set_up_before_class() {
+		parent::set_up_before_class();
+
+		self::$registry = WP_Block_Templates_Registry::get_instance();
+	}
+
+	public function test_register_template() {
+		// Register a valid template.
+		$template_name = 'test-plugin//test-template';
+		$template      = self::$registry->register( $template_name );
+
+		$this->assertSame( $template->slug, 'test-template' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_register_template_invalid_name() {
+		// Try to register a template with invalid name (non-string).
+		$template_name = array( 'invalid-template-name' );
+
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_name_no_string', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must be strings.', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_invalid_name_uppercase() {
+		// Try to register a template with uppercase characters in the name.
+		$template_name = 'test-plugin//Invalid-Template-Name';
+
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_name_no_uppercase', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must not contain uppercase characters.', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_no_prefix() {
+		// Try to register a template without a namespace.
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( 'template-no-plugin', array() );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_no_prefix', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must contain a namespace prefix. Example: my-plugin//my-custom-template', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_already_exists() {
+		// Register the template for the first time.
+		$template_name = 'test-plugin//duplicate-template';
+		self::$registry->register( $template_name );
+
+		// Try to register the same template again.
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_already_registered', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertStringContainsString( 'Template "test-plugin//duplicate-template" is already registered.', $result->get_error_message(), 'Error message mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_all_registered() {
+		$template_name_1 = 'test-plugin//template-1';
+		$template_name_2 = 'test-plugin//template-2';
+		self::$registry->register( $template_name_1 );
+		self::$registry->register( $template_name_2 );
+
+		$all_templates = self::$registry->get_all_registered();
+
+		$this->assertIsArray( $all_templates, 'Registered templates should be an array.' );
+		$this->assertCount( 2, $all_templates, 'Registered templates should contain 2 items.' );
+		$this->assertArrayHasKey( 'test-plugin//template-1', $all_templates, 'Registered templates should contain "test-plugin//template-1".' );
+		$this->assertArrayHasKey( 'test-plugin//template-2', $all_templates, 'Registered templates should contain "test-plugin//template-2".' );
+
+		self::$registry->unregister( $template_name_1 );
+		self::$registry->unregister( $template_name_2 );
+	}
+
+	public function test_get_registered() {
+		$template_name = 'test-plugin//registered-template';
+		$args          = array(
+			'content'     => 'Template content',
+			'title'       => 'Registered Template',
+			'description' => 'Description of registered template',
+			'post_types'  => array( 'post', 'page' ),
+		);
+		self::$registry->register( $template_name, $args );
+
+		$registered_template = self::$registry->get_registered( $template_name );
+
+		$this->assertSame( 'default', $registered_template->theme, 'Template theme mismatch.' );
+		$this->assertSame( 'registered-template', $registered_template->slug, 'Template slug mismatch.' );
+		$this->assertSame( 'default//registered-template', $registered_template->id, 'Template ID mismatch.' );
+		$this->assertSame( 'Registered Template', $registered_template->title, 'Template title mismatch.' );
+		$this->assertSame( 'Template content', $registered_template->content, 'Template content mismatch.' );
+		$this->assertSame( 'Description of registered template', $registered_template->description, 'Template description mismatch.' );
+		$this->assertSame( 'plugin', $registered_template->source, "Template source should be 'plugin'." );
+		$this->assertSame( 'plugin', $registered_template->origin, "Template origin should be 'plugin'." );
+		$this->assertEquals( array( 'post', 'page' ), $registered_template->post_types, 'Template post types mismatch.' );
+		$this->assertSame( 'test-plugin', $registered_template->plugin, 'Plugin name mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_by_slug() {
+		$slug          = 'slug-template';
+		$template_name = 'test-plugin//' . $slug;
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Slug Template',
+		);
+		self::$registry->register( $template_name, $args );
+
+		$registered_template = self::$registry->get_by_slug( $slug );
+
+		$this->assertNotNull( $registered_template, 'Registered template should not be null.' );
+		$this->assertSame( $slug, $registered_template->slug, 'Template slug mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_by_query() {
+		$template_name_1 = 'test-plugin//query-template-1';
+		$template_name_2 = 'test-plugin//query-template-2';
+		$args_1          = array(
+			'content' => 'Template content 1',
+			'title'   => 'Query Template 1',
+		);
+		$args_2          = array(
+			'content' => 'Template content 2',
+			'title'   => 'Query Template 2',
+		);
+		self::$registry->register( $template_name_1, $args_1 );
+		self::$registry->register( $template_name_2, $args_2 );
+
+		$query   = array(
+			'slug__in' => array( 'query-template-1' ),
+		);
+		$results = self::$registry->get_by_query( $query );
+
+		$this->assertCount( 1, $results, 'Query result should contain 1 item.' );
+		$this->assertArrayHasKey( $template_name_1, $results, 'Query result should contain "test-plugin//query-template-1".' );
+
+		self::$registry->unregister( $template_name_1 );
+		self::$registry->unregister( $template_name_2 );
+	}
+
+	public function test_is_registered() {
+		$template_name = 'test-plugin//is-registered-template';
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Is Registered Template',
+		);
+		self::$registry->register( $template_name, $args );
+
+		$this->assertTrue( self::$registry->is_registered( $template_name ) );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_unregister() {
+		$template_name = 'test-plugin//unregister-template';
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Unregister Template',
+		);
+		$template      = self::$registry->register( $template_name, $args );
+
+		$unregistered_template = self::$registry->unregister( $template_name );
+
+		$this->assertEquals( $template, $unregistered_template, 'Unregistered template should be the same as the registered one.' );
+		$this->assertFalse( self::$registry->is_registered( $template_name ), 'Template should not be registered after unregistering.' );
+	}
+}
diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js
new file mode 100644
index 00000000000000..132e3a8c49a902
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-registration.spec.js
@@ -0,0 +1,356 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	blockTemplateRegistrationUtils: async ( { editor, page }, use ) => {
+		await use( new BlockTemplateRegistrationUtils( { editor, page } ) );
+	},
+} );
+
+test.describe( 'Block template registration', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'templates can be registered and edited', async ( {
+		admin,
+		editor,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Verify template is applied to the frontend.
+		await page.goto( '/?cat=1' );
+		await expect(
+			page.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+
+		// Verify template is listed in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		await expect( page.getByText( 'Plugin Template' ) ).toBeVisible();
+		await expect(
+			page.getByText( 'A template registered by a plugin.' )
+		).toBeVisible();
+		await expect( page.getByText( 'AuthorGutenberg' ) ).toBeVisible();
+
+		// Verify the template contents are rendered in the editor.
+		await page.getByText( 'Plugin Template' ).click();
+		await expect(
+			editor.canvas.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+
+		// Verify edits persist in the frontend.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-edited template' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+		await page.goto( '/?cat=1' );
+		await expect( page.getByText( 'User-edited template' ) ).toBeVisible();
+
+		// Verify template can be reset.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		const resetNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Plugin Template" reset.` );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		const searchResults = page.getByLabel( 'Actions' );
+		await searchResults.first().click();
+		await page.getByRole( 'menuitem', { name: 'Reset' } ).click();
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect( resetNotice ).toBeVisible();
+		await expect( savedButton ).toBeVisible();
+		await page.goto( '/?cat=1' );
+		await expect(
+			page.getByText( 'Content edited template.' )
+		).toBeHidden();
+	} );
+
+	test( 'registered templates are available in the Swap template screen', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		// Create a post.
+		await admin.visitAdminPage( '/post-new.php' );
+		await page.getByLabel( 'Close', { exact: true } ).click();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-created post.' },
+		} );
+
+		// Swap template.
+		await page.getByRole( 'button', { name: 'Post' } ).click();
+		await page.getByRole( 'button', { name: 'Template options' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
+		await page.getByText( 'Plugin Template' ).click();
+
+		// Verify the template is applied.
+		const postId = await editor.publishPost();
+		await page.goto( `?p=${ postId }` );
+		await expect(
+			page.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+	} );
+
+	test( 'themes can override registered templates', async ( {
+		admin,
+		editor,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Create a post.
+		await admin.visitAdminPage( '/post-new.php' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-created post.' },
+		} );
+
+		// Swap template.
+		await page.getByRole( 'button', { name: 'Post' } ).click();
+		await page.getByRole( 'button', { name: 'Template options' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
+		await page.getByText( 'Custom', { exact: true } ).click();
+
+		// Verify the theme template is applied.
+		const postId = await editor.publishPost();
+		await page.goto( `?p=${ postId }` );
+		await expect(
+			page.getByText( 'Custom template for Posts' )
+		).toBeVisible();
+		await expect(
+			page.getByText(
+				'This is a plugin-registered template and overridden by a theme.'
+			)
+		).toBeHidden();
+
+		// Verify the plugin-registered template doesn't appear in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate( 'Custom' );
+		await expect(
+			page.getByText( 'Custom Template (overridden by the theme)' )
+		).toBeHidden();
+		// Verify the theme template shows the theme name as the author.
+		await expect( page.getByText( 'AuthorEmptytheme' ) ).toBeVisible();
+	} );
+
+	test( 'templates can be deleted if the registered plugin is deactivated', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Make an edit to the template.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		await page.getByText( 'Plugin Template' ).click();
+		await expect(
+			editor.canvas.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-customized template' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		// Deactivate plugin.
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Verify template can be deleted.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		const deletedNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Plugin Template" deleted.` );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		const searchResults = page.getByLabel( 'Actions' );
+		await searchResults.first().click();
+		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+		await page.getByRole( 'button', { name: 'Delete' } ).click();
+
+		await expect( deletedNotice ).toBeVisible();
+		await expect( savedButton ).toBeVisible();
+
+		// Expect template to no longer appear in the Site Editor.
+		await expect( page.getByLabel( 'Actions' ) ).toBeHidden();
+
+		// Reactivate plugin.
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+
+	test( 'registered templates can be unregistered', async ( {
+		admin,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Unregistered Template'
+		);
+		await expect(
+			page.getByText( 'Plugin Unregistered Template' )
+		).toBeHidden();
+	} );
+
+	test( 'WP default templates can be overridden by plugins', async ( {
+		page,
+	} ) => {
+		await page.goto( '?page_id=2' );
+		await expect(
+			page.getByText( 'This is a plugin-registered page template.' )
+		).toBeVisible();
+	} );
+
+	test( 'user-customized templates cannot be overridden by plugins', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Create an author template.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await page.getByLabel( 'Add New Template' ).click();
+		await page.getByRole( 'button', { name: 'Author Archives' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Author For a specific item' } )
+			.click();
+		await page.getByRole( 'option', { name: 'admin' } ).click();
+		await expect( page.getByText( 'Choose a pattern' ) ).toBeVisible();
+		await page.getByLabel( 'Close', { exact: true } ).click();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Author template customized by the user.' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Verify the template edited by the user has priority over the one registered by the theme.
+		await page.goto( '?author=1' );
+		await expect(
+			page.getByText( 'Author template customized by the user.' )
+		).toBeVisible();
+		await expect(
+			page.getByText( 'This is a plugin-registered author template.' )
+		).toBeHidden();
+
+		// Verify the template registered by the plugin is not visible in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Author Template'
+		);
+		await expect( page.getByText( 'Plugin Author Template' ) ).toBeHidden();
+
+		// Reset the user-modified template.
+		const resetNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Author: Admin" reset.` );
+		await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' );
+		await page.getByRole( 'link', { name: 'Author: Admin' } ).click();
+		const actions = page.getByLabel( 'Actions' );
+		await actions.first().click();
+		await page.getByRole( 'menuitem', { name: 'Reset' } ).click();
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect( resetNotice ).toBeVisible();
+
+		// Verify the template registered by the plugin is applied in the editor...
+		await expect(
+			editor.canvas.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			editor.canvas.getByText(
+				'This is a plugin-registered author template.'
+			)
+		).toBeVisible();
+
+		// ... and the frontend.
+		await page.goto( '?author=1' );
+		await expect(
+			page.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			page.getByText( 'This is a plugin-registered author template.' )
+		).toBeVisible();
+	} );
+} );
+
+class BlockTemplateRegistrationUtils {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async searchForTemplate( searchTerm ) {
+		const searchResults = this.page.getByLabel( 'Actions' );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeGreaterThan( 0 );
+		const initialSearchResultsCount = await searchResults.count();
+		await this.page.getByPlaceholder( 'Search' ).fill( searchTerm );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeLessThan( initialSearchResultsCount );
+	}
+}

From 7502c6a39ccb50df5fc1be7c11bac4d8e04aa48b Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:13:46 +0200
Subject: [PATCH 097/205] Fit items into 100% width (#64465)

Fix long keys overflow in bindings panel

Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/block-editor/src/hooks/block-bindings.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss
index 73e7c490160d3e..603b2115623b8f 100644
--- a/packages/block-editor/src/hooks/block-bindings.scss
+++ b/packages/block-editor/src/hooks/block-bindings.scss
@@ -1,5 +1,5 @@
 div.block-editor-bindings__panel {
-	grid-template-columns: auto;
+	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 	button:hover .block-editor-bindings__item-explanation {
 		color: inherit;
 	}

From ea0bcf1ce1345afc840595040a6f4bf9be5faf9c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Aug 2024 12:35:17 +0200
Subject: [PATCH 098/205] DataViews Extensibility: Allow unregistering the view
 post revisions action (#64464)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/dataviews/src/types.ts               |  6 +++
 .../src/components/post-actions/actions.js    | 40 +---------------
 .../dataviews/actions/view-post-revisions.tsx | 47 +++++++++++++++++++
 .../src/dataviews/store/private-actions.ts    |  4 ++
 packages/editor/src/dataviews/types.ts        |  9 +++-
 5 files changed, 66 insertions(+), 40 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/view-post-revisions.tsx

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 7bbbc8cb863c09..fa5cec8d7d0320 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -426,6 +426,12 @@ interface ActionBase< Item > {
 	 * Whether the action can be used as a bulk action.
 	 */
 	supportsBulk?: boolean;
+
+	/**
+	 * The context in which the action is visible.
+	 * This is only a "meta" information for now.
+	 */
+	context?: 'list' | 'single';
 }
 
 export interface RenderModalProps< Item > {
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 627de5e8652e47..831a4f5349869b 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { external } from '@wordpress/icons';
-import { addQueryArgs } from '@wordpress/url';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useMemo, useEffect } from '@wordpress/element';
 
 /**
@@ -31,40 +30,6 @@ const viewPostAction = {
 	},
 };
 
-const postRevisionsAction = {
-	id: 'view-post-revisions',
-	context: 'list',
-	label( items ) {
-		const revisionsCount =
-			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-		return sprintf(
-			/* translators: %s: number of revisions */
-			__( 'View revisions (%s)' ),
-			revisionsCount
-		);
-	},
-	isEligible: ( post ) => {
-		if ( post.status === 'trash' ) {
-			return false;
-		}
-		const lastRevisionId =
-			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
-		const revisionsCount =
-			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-		return lastRevisionId && revisionsCount > 1;
-	},
-	callback( posts, { onActionPerformed } ) {
-		const post = posts[ 0 ];
-		const href = addQueryArgs( 'revision.php', {
-			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
-		} );
-		document.location.href = href;
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
-
 export function usePostActions( { postType, onActionPerformed, context } ) {
 	const { defaultActions, postTypeObject } = useSelect(
 		( select ) => {
@@ -84,7 +49,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	}, [ registerPostTypeActions, postType ] );
 
 	const isLoaded = !! postTypeObject;
-	const supportsRevisions = !! postTypeObject?.supports?.revisions;
 	return useMemo( () => {
 		if ( ! isLoaded ) {
 			return [];
@@ -92,7 +56,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 
 		let actions = [
 			postTypeObject?.viewable && viewPostAction,
-			supportsRevisions && postRevisionsAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -161,7 +124,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		postTypeObject?.viewable,
 		onActionPerformed,
 		isLoaded,
-		supportsRevisions,
 		context,
 	] );
 }
diff --git a/packages/editor/src/dataviews/actions/view-post-revisions.tsx b/packages/editor/src/dataviews/actions/view-post-revisions.tsx
new file mode 100644
index 00000000000000..875b925b94f070
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/view-post-revisions.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { __, sprintf } from '@wordpress/i18n';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { Post } from '../types';
+
+const viewPostRevisions: Action< Post > = {
+	id: 'view-post-revisions',
+	context: 'list',
+	label( items ) {
+		const revisionsCount =
+			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return sprintf(
+			/* translators: %s: number of revisions */
+			__( 'View revisions (%s)' ),
+			revisionsCount
+		);
+	},
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		const lastRevisionId =
+			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		const revisionsCount =
+			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return !! lastRevisionId && revisionsCount > 1;
+	},
+	callback( posts, { onActionPerformed } ) {
+		const post = posts[ 0 ];
+		const href = addQueryArgs( 'revision.php', {
+			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+		} );
+		document.location.href = href;
+		if ( onActionPerformed ) {
+			onActionPerformed( posts );
+		}
+	},
+};
+
+export default viewPostRevisions;
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index d5b299b012e364..3ac121aea7393b 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -22,6 +22,7 @@ import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import duplicatePost from '../actions/duplicate-post';
+import viewPostRevisions from '../actions/view-post-revisions';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -88,6 +89,9 @@ export const registerPostTypeActions =
 			.getCurrentTheme();
 
 		const actions = [
+			!! postTypeConfig?.supports?.revisions
+				? viewPostRevisions
+				: undefined,
 			// @ts-ignore
 			globalThis.IS_GUTENBERG_PLUGIN
 				? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes(
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index d207410ca2b6a5..e5886792fb9c33 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -14,6 +14,13 @@ export interface CommonPost {
 	type: string;
 	id: string | number;
 	blocks?: Object[];
+	_links?: Links;
+}
+
+interface Links {
+	'predecessor-version'?: { href: string; id: number }[];
+	'version-history'?: { href: string; count: number }[];
+	[ key: string ]: { href: string }[] | undefined;
 }
 
 export interface BasePost extends CommonPost {
@@ -27,7 +34,6 @@ export interface BasePost extends CommonPost {
 	featured_media?: number;
 	menu_order?: number;
 	ping_status?: 'open' | 'closed';
-	_links?: Record< string, { href: string }[] >;
 }
 
 export interface Template extends CommonPost {
@@ -69,6 +75,7 @@ export interface PostType {
 	supports?: {
 		'page-attributes'?: boolean;
 		title?: boolean;
+		revisions?: boolean;
 	};
 }
 

From 64643ed8727d915557c4bef65f247ab287d72465 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 13 Aug 2024 14:59:14 +0400
Subject: [PATCH 099/205] Block Editor: Refactor inner blocks appender
 components (#64470)

* Block Editor: Refactor inner blocks appender components
* Remove 'withClientId' HoC

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../inner-blocks/button-block-appender.js     | 12 ++++-----
 .../inner-blocks/default-block-appender.js    | 27 +++----------------
 .../components/inner-blocks/with-client-id.js | 19 -------------
 3 files changed, 9 insertions(+), 49 deletions(-)
 delete mode 100644 packages/block-editor/src/components/inner-blocks/with-client-id.js

diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 500e59863db429..5bc788d58582f6 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -7,15 +7,15 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import BaseButtonBlockAppender from '../button-block-appender';
-import withClientId from './with-client-id';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const ButtonBlockAppender = ( {
-	clientId,
+export default function ButtonBlockAppender( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
 	isToggle,
-} ) => {
+} ) {
+	const { clientId } = useBlockEditContext();
 	return (
 		<BaseButtonBlockAppender
 			className={ clsx( {
@@ -27,6 +27,4 @@ export const ButtonBlockAppender = ( {
 			onAddBlock={ onAddBlock }
 		/>
 	);
-};
-
-export default withClientId( ButtonBlockAppender );
+}
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index d2e137004d83bf..91e48a2854b513 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -1,29 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import BaseDefaultBlockAppender from '../default-block-appender';
-import withClientId from './with-client-id';
-import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const DefaultBlockAppender = ( { clientId } ) => {
+export default function DefaultBlockAppender() {
+	const { clientId } = useBlockEditContext();
 	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
-};
-
-export default compose( [
-	withClientId,
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockOrder } = select( blockEditorStore );
-
-		const blockClientIds = getBlockOrder( clientId );
-
-		return {
-			lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
-		};
-	} ),
-] )( DefaultBlockAppender );
+}
diff --git a/packages/block-editor/src/components/inner-blocks/with-client-id.js b/packages/block-editor/src/components/inner-blocks/with-client-id.js
deleted file mode 100644
index 97c73ae2803934..00000000000000
--- a/packages/block-editor/src/components/inner-blocks/with-client-id.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-
-const withClientId = createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const { clientId } = useBlockEditContext();
-		return <WrappedComponent { ...props } clientId={ clientId } />;
-	},
-	'withClientId'
-);
-
-export default withClientId;

From e8b45dacc23052952e01b4869027c9354818d74a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Aug 2024 13:14:17 +0200
Subject: [PATCH 100/205] DataViews Extensibility: Allow unregistering the view
 post action (#64467)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../src/components/post-actions/actions.js    | 43 ++-----------------
 .../src/dataviews/actions/view-post.tsx       | 30 +++++++++++++
 .../src/dataviews/store/private-actions.ts    | 11 +++--
 packages/editor/src/dataviews/types.ts        |  2 +
 4 files changed, 42 insertions(+), 44 deletions(-)
 create mode 100644 packages/editor/src/dataviews/actions/view-post.tsx

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 831a4f5349869b..e1c0ed1558193d 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external } from '@wordpress/icons';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
 import { useMemo, useEffect } from '@wordpress/element';
 
 /**
@@ -13,30 +10,11 @@ import { useMemo, useEffect } from '@wordpress/element';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const viewPostAction = {
-	id: 'view-post',
-	label: __( 'View' ),
-	isPrimary: true,
-	icon: external,
-	isEligible( post ) {
-		return post.status !== 'trash';
-	},
-	callback( posts, { onActionPerformed } ) {
-		const post = posts[ 0 ];
-		window.open( post.link, '_blank' );
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
-
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const { defaultActions, postTypeObject } = useSelect(
+	const { defaultActions } = useSelect(
 		( select ) => {
-			const { getPostType } = select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
 			return {
-				postTypeObject: getPostType( postType ),
 				defaultActions: getEntityActions( 'postType', postType ),
 			};
 		},
@@ -48,23 +26,14 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		registerPostTypeActions( postType );
 	}, [ registerPostTypeActions, postType ] );
 
-	const isLoaded = !! postTypeObject;
 	return useMemo( () => {
-		if ( ! isLoaded ) {
-			return [];
-		}
-
-		let actions = [
-			postTypeObject?.viewable && viewPostAction,
-			...defaultActions,
-		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
 		// all actions are returned. We'll have a single entry for getting the actions
 		// and the consumer should provide the context to filter the actions, if needed.
 		// Actions should also provide the `context` they support, if it's specific, to
 		// compare with the provided context to get all the actions.
 		// Right now the only supported context is `list`.
-		actions = actions.filter( ( action ) => {
+		const actions = defaultActions.filter( ( action ) => {
 			if ( ! action.context ) {
 				return true;
 			}
@@ -119,11 +88,5 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		}
 
 		return actions;
-	}, [
-		defaultActions,
-		postTypeObject?.viewable,
-		onActionPerformed,
-		isLoaded,
-		context,
-	] );
+	}, [ defaultActions, onActionPerformed, context ] );
 }
diff --git a/packages/editor/src/dataviews/actions/view-post.tsx b/packages/editor/src/dataviews/actions/view-post.tsx
new file mode 100644
index 00000000000000..47eb1a66d019ad
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/view-post.tsx
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { external } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../types';
+
+const viewPost: Action< BasePost > = {
+	id: 'view-post',
+	label: __( 'View' ),
+	isPrimary: true,
+	icon: external,
+	isEligible( post ) {
+		return post.status !== 'trash';
+	},
+	callback( posts, { onActionPerformed } ) {
+		const post = posts[ 0 ];
+		window.open( post?.link, '_blank' );
+		if ( onActionPerformed ) {
+			onActionPerformed( posts );
+		}
+	},
+};
+
+export default viewPost;
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 3ac121aea7393b..a9101e57dd08b5 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -23,6 +23,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import duplicatePost from '../actions/duplicate-post';
 import viewPostRevisions from '../actions/view-post-revisions';
+import viewPost from '../actions/view-post';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -89,6 +90,7 @@ export const registerPostTypeActions =
 			.getCurrentTheme();
 
 		const actions = [
+			postTypeConfig.viewable ? viewPost : undefined,
 			!! postTypeConfig?.supports?.revisions
 				? viewPostRevisions
 				: undefined,
@@ -101,9 +103,10 @@ export const registerPostTypeActions =
 				  duplicatePost
 				: undefined,
 			postTypeConfig.slug === 'wp_template_part' &&
-				canCreate &&
-				currentTheme?.is_block_theme &&
-				duplicateTemplatePart,
+			canCreate &&
+			currentTheme?.is_block_theme
+				? duplicateTemplatePart
+				: undefined,
 			canCreate && postTypeConfig.slug === 'wp_block'
 				? duplicatePattern
 				: undefined,
@@ -121,7 +124,7 @@ export const registerPostTypeActions =
 
 		registry.batch( () => {
 			actions.forEach( ( action ) => {
-				if ( action === undefined ) {
+				if ( ! action ) {
 					return;
 				}
 				unlock( registry.dispatch( editorStore ) ).registerEntityAction(
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index e5886792fb9c33..664c2dd417201c 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -34,6 +34,7 @@ export interface BasePost extends CommonPost {
 	featured_media?: number;
 	menu_order?: number;
 	ping_status?: 'open' | 'closed';
+	link?: string;
 }
 
 export interface Template extends CommonPost {
@@ -72,6 +73,7 @@ export type PostWithPermissions = Post & {
 
 export interface PostType {
 	slug: string;
+	viewable: boolean;
 	supports?: {
 		'page-attributes'?: boolean;
 		title?: boolean;

From 3ec1ced865757f6568c42c126acb3478b25fe2be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:43:15 +0200
Subject: [PATCH 101/205] Add `status` to quick edit (#64398)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .../src/components/post-edit/index.js         | 29 +++++++++++++-
 .../src/components/post-fields/index.js       | 40 +++++++++++++++----
 2 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index 80304f16503705..0ec63589d97673 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -42,13 +42,38 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const [ multiEdits, setMultiEdits ] = useState( {} );
 	const { editEntityRecord } = useDispatch( coreDataStore );
-	const { fields } = usePostFields();
+	const { fields: _fields } = usePostFields();
+	const fields = useMemo(
+		() =>
+			_fields?.map( ( field ) => {
+				if ( field.id === 'status' ) {
+					return {
+						...field,
+						elements: field.elements.filter(
+							( element ) => element.value !== 'trash'
+						),
+					};
+				}
+				return field;
+			} ),
+		[ _fields ]
+	);
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'author', 'date', 'comment_status' ],
+		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
 	};
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
+			if (
+				edits.status !== 'future' &&
+				record.status === 'future' &&
+				new Date( record.date ) > new Date()
+			) {
+				edits.date = null;
+			}
+			if ( edits.status === 'private' && record.password ) {
+				edits.password = '';
+			}
 			editEntityRecord( 'postType', postType, id, edits );
 			if ( ids.length > 1 ) {
 				setMultiEdits( ( prev ) => ( {
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
index b03b2c6f5be3c4..9e59b23d61922d 100644
--- a/packages/edit-site/src/components/post-fields/index.js
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -42,11 +42,36 @@ import Media from '../media';
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
 const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ), icon: drafts },
-	{ value: 'future', label: __( 'Scheduled' ), icon: scheduled },
-	{ value: 'pending', label: __( 'Pending Review' ), icon: pending },
-	{ value: 'private', label: __( 'Private' ), icon: notAllowed },
-	{ value: 'publish', label: __( 'Published' ), icon: published },
+	{
+		value: 'draft',
+		label: __( 'Draft' ),
+		icon: drafts,
+		description: __( 'Not ready to publish.' ),
+	},
+	{
+		value: 'future',
+		label: __( 'Scheduled' ),
+		icon: scheduled,
+		description: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		value: 'pending',
+		label: __( 'Pending Review' ),
+		icon: pending,
+		description: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		value: 'private',
+		label: __( 'Private' ),
+		icon: notAllowed,
+		description: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		value: 'publish',
+		label: __( 'Published' ),
+		icon: published,
+		description: __( 'Visible to everyone.' ),
+	},
 	{ value: 'trash', label: __( 'Trash' ), icon: trash },
 ];
 
@@ -258,11 +283,10 @@ function usePostFields( viewType ) {
 			{
 				label: __( 'Status' ),
 				id: 'status',
-				getValue: ( { item } ) =>
-					STATUSES.find( ( { value } ) => value === item.status )
-						?.label ?? item.status,
+				type: 'text',
 				elements: STATUSES,
 				render: PostStatusField,
+				Edit: 'radio',
 				enableSorting: false,
 				filterBy: {
 					operators: [ OPERATOR_IS_ANY ],

From 9ca5628ed1cd11975086b25cd0cc318352b94619 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Tue, 13 Aug 2024 13:33:04 +0100
Subject: [PATCH 102/205] Fix tip link in DataViews docs (#64469)

Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 packages/dataviews/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 56cecedaef66ca..368880b69b14f0 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -30,8 +30,7 @@ const Example = () => {
 };
 ```
 
-> [!TIP]
-> At https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs there's an example implementation of the Dataviews component."
+<div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a></div>
 
 ## Properties
 

From 02d052033868ea554bbdfee9b18b766e77128a6b Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 13 Aug 2024 17:18:12 +0400
Subject: [PATCH 103/205] Edit Post: Remove user pattern preloading (#64459)

* Edit Post: Remove user pattern preloading
* Update backport changelog

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 backport-changelog/6.7/7179.md        |  1 +
 lib/compat/wordpress-6.7/rest-api.php | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/backport-changelog/6.7/7179.md b/backport-changelog/6.7/7179.md
index f359b6610a94e6..a6e9cc4efe2cd0 100644
--- a/backport-changelog/6.7/7179.md
+++ b/backport-changelog/6.7/7179.md
@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7179
 
 * https://github.com/WordPress/gutenberg/pull/64401
+* https://github.com/WordPress/gutenberg/pull/64459
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
index fe2aac9c2580ae..2520a06fbb18be 100644
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -26,6 +26,24 @@ function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
 		}
 	}
 
+	if ( 'core/edit-post' === $context->name ) {
+		$reusable_blocks_key = array_search(
+			add_query_arg(
+				array(
+					'context'  => 'edit',
+					'per_page' => -1,
+				),
+				rest_get_route_for_post_type_items( 'wp_block' )
+			),
+			$paths,
+			true
+		);
+
+		if ( false !== $parts_key ) {
+			unset( $paths[ $reusable_blocks_key ] );
+		}
+	}
+
 	return $paths;
 }
 add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );

From cedbe111a2cc2b806356a985df1f47034b7545df Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Aug 2024 17:55:15 +0300
Subject: [PATCH 104/205] Update the copy of quick edit tooltip (#64475)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/edit-site/src/components/post-list/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 35ecaaa8424fd4..bbfece24518495 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -366,11 +366,7 @@ export default function PostList( { postType } ) {
 							size="compact"
 							isPressed={ quickEdit }
 							icon={ drawerRight }
-							label={
-								! quickEdit
-									? __( 'Show quick edit sidebar' )
-									: __( 'Close quick edit sidebar' )
-							}
+							label={ __( 'Toggle details panel' ) }
 							onClick={ () => {
 								history.push( {
 									...location.params,

From b3ce94ea25990e329ce4c08f3d49eb07e7ec929b Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Aug 2024 18:40:08 +0300
Subject: [PATCH 105/205] Edit Post: Fix user pattern preloading filter
 (#64477)

* Edit Post: Fix user pattern preloading filter

* Backport changelog

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 backport-changelog/6.7/7179.md        | 1 +
 lib/compat/wordpress-6.7/rest-api.php | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/backport-changelog/6.7/7179.md b/backport-changelog/6.7/7179.md
index a6e9cc4efe2cd0..d777eace2cb05e 100644
--- a/backport-changelog/6.7/7179.md
+++ b/backport-changelog/6.7/7179.md
@@ -2,3 +2,4 @@ https://github.com/WordPress/wordpress-develop/pull/7179
 
 * https://github.com/WordPress/gutenberg/pull/64401
 * https://github.com/WordPress/gutenberg/pull/64459
+* https://github.com/WordPress/gutenberg/pull/64477
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
index 2520a06fbb18be..081c22c8102914 100644
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -39,7 +39,7 @@ function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
 			true
 		);
 
-		if ( false !== $parts_key ) {
+		if ( false !== $reusable_blocks_key ) {
 			unset( $paths[ $reusable_blocks_key ] );
 		}
 	}

From 5dae25b15e82a59d28c6c065b5a3745f3f83980f Mon Sep 17 00:00:00 2001
From: Jan Pfeil <jan.pfeil@rypox.net>
Date: Tue, 13 Aug 2024 18:40:35 +0200
Subject: [PATCH 106/205] fix typo in block-wrapper.md (#64447)

---
 docs/getting-started/fundamentals/block-wrapper.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/getting-started/fundamentals/block-wrapper.md b/docs/getting-started/fundamentals/block-wrapper.md
index 39c80262d7bcbe..98c435f6ebe2f7 100644
--- a/docs/getting-started/fundamentals/block-wrapper.md
+++ b/docs/getting-started/fundamentals/block-wrapper.md
@@ -102,7 +102,7 @@ The [example block](https://github.com/WordPress/block-development-examples/tree
 
 ## Dynamic render markup
 
-In dynamic blocks, where the font-end markup is rendered server-side, you can utilize the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to output the necessary classes and attributes just like you would use `useBlockProps.save()` in the `save` function. (See [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11))
+In dynamic blocks, where the front-end markup is rendered server-side, you can utilize the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to output the necessary classes and attributes just like you would use `useBlockProps.save()` in the `save` function. (See [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11))
 
 ```php
 <p <?php echo get_block_wrapper_attributes(); ?>>

From 3be25a1db5915a94fe755f078ed35b63ebf7cc91 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 13 Aug 2024 20:52:40 +0100
Subject: [PATCH 107/205] Apply minimal variant to pagination dropdown (#63815)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../components/dataviews-pagination/index.tsx | 51 +++++++++++++------
 .../dataviews-pagination/style.scss           | 13 +++--
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index f8ebf41469d949..f022b382cdb70d 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -21,10 +21,31 @@ function DataViewsPagination() {
 		onChangeView,
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
+
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+
 	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label: page.toString(),
+				'aria-label':
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -37,37 +58,35 @@ function DataViewsPagination() {
 				<HStack
 					justify="flex-start"
 					expanded={ false }
-					spacing={ 2 }
-					className="dataviews-pagination__page-selection"
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
 				>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
+							// translators: 1: Current page number, 2: Total number of pages.
+							_x(
+								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'paging'
+							),
+							'<CurrentPage />',
 							totalPages
 						),
 						{
-							CurrentPageControl: (
+							div: <div aria-hidden />,
+							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
 									onChange={ ( newValue ) => {
 										onChangeView( {
 											...view,
 											page: +newValue,
 										} );
 									} }
-									size="compact"
+									size="small"
 									__nextHasNoMarginBottom
+									variant="minimal"
 								/>
 							),
 						}
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 4e754ab90fa54a..16f064cc3a5178 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -5,17 +5,22 @@
 	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
-	color: $gray-700;
 	flex-shrink: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 }
 
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

From 562fff19e73a1416bdc533ef372b8117beeed436 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 04:53:08 +0900
Subject: [PATCH 108/205] Start adding lint rules for 40px default size
 (#64410)

* Start adding lint rules for 40px default size

* Make stricter

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6143d62c28bc07..0dc184eabb8b04 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -278,7 +278,6 @@ module.exports = {
 			},
 		},
 		{
-			// Temporary rules until we're ready to officially deprecate the bottom margins.
 			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
 			excludedFiles: [
 				'packages/components/src/**/@(test|stories)/**',
@@ -289,6 +288,7 @@ module.exports = {
 					'error',
 					...restrictedSyntax,
 					...restrictedSyntaxComponents,
+					// Temporary rules until we're ready to officially deprecate the bottom margins.
 					...[
 						'BaseControl',
 						'CheckboxControl',
@@ -309,6 +309,19 @@ module.exports = {
 							componentName +
 							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
 					} ) ),
+					// Temporary rules until we're ready to officially default to the new size.
+					...[
+						'BorderBoxControl',
+						'BorderControl',
+						'DimensionControl',
+						'FontSizePicker',
+					].map( ( componentName ) => ( {
+						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
 				],
 			},
 		},

From 40b51b8619e120c96c3dfc6844ed72f3c84e2ca4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 05:28:37 +0900
Subject: [PATCH 109/205] QueryControls: Default to new 40px size (#64457)

* QueryControls: Default to new 40px size

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                 |  1 +
 packages/components/src/query-controls/index.tsx | 11 +++++------
 packages/components/src/query-controls/types.ts  |  3 ++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 761e6604a127a2..6b95e23818c864 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -11,6 +11,7 @@
 ### Enhancements
 
 -   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
+-   `QueryControls`: Default to new 40px size ([#64457](https://github.com/WordPress/gutenberg/pull/64457)).
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 
diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx
index 3557335ebac5a0..452dd303c778bb 100644
--- a/packages/components/src/query-controls/index.tsx
+++ b/packages/components/src/query-controls/index.tsx
@@ -60,7 +60,6 @@ function isMultipleCategorySelection(
  * ```
  */
 export function QueryControls( {
-	__next40pxDefaultSize = false,
 	authorList,
 	selectedAuthorId,
 	numberOfItems,
@@ -82,7 +81,7 @@ export function QueryControls( {
 				onOrderChange && onOrderByChange && (
 					<SelectControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={
@@ -137,7 +136,7 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
-							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__next40pxDefaultSize
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
@@ -150,7 +149,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
-							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
@@ -174,7 +173,7 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
@@ -186,7 +185,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }
diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts
index 8c45d22c54c064..eb004bf8215b0a 100644
--- a/packages/components/src/query-controls/types.ts
+++ b/packages/components/src/query-controls/types.ts
@@ -107,7 +107,8 @@ type BaseQueryControlsProps = {
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 };

From 898f59721160a8ea9448f73e2c2c4843baceffac Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 06:32:10 +0900
Subject: [PATCH 110/205] TextControl: Add lint rule for 40px size prop usage
 (#64455)

* TextControl: Add lint rule for 40px size prop usage

* Fixup

* Fixup formatting

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                              | 8 ++++++++
 .../src/components/date-format-picker/index.js            | 2 ++
 .../src/components/media-upload/index.native.js           | 2 ++
 .../src/components/url-popover/image-url-input-ui.js      | 4 ++++
 packages/block-library/src/button/edit.js                 | 2 ++
 packages/block-library/src/form-input/edit.js             | 2 ++
 packages/block-library/src/form/edit.js                   | 2 ++
 packages/block-library/src/image/image.js                 | 2 ++
 .../src/navigation/edit/navigation-menu-name-control.js   | 2 ++
 packages/block-library/src/post-comment/edit.js           | 2 ++
 packages/block-library/src/post-featured-image/edit.js    | 2 ++
 packages/block-library/src/post-terms/edit.js             | 2 ++
 packages/block-library/src/post-title/edit.js             | 2 ++
 packages/block-library/src/social-link/edit.js            | 4 ++++
 .../src/template-part/edit/advanced-controls.js           | 2 ++
 packages/block-library/src/video/tracks-editor.js         | 4 ++++
 .../src/components/sidebar-dataviews/add-new-view.js      | 2 ++
 .../components/sidebar-dataviews/custom-dataviews-list.js | 2 ++
 .../src/components/post-publish-panel/postpublish.js      | 2 ++
 packages/editor/src/components/post-slug/index.js         | 2 ++
 .../post-taxonomies/hierarchical-term-selector.js         | 2 ++
 .../reusable-block-convert-button.js                      | 2 ++
 22 files changed, 56 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0dc184eabb8b04..eb2d2db47e4cab 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -322,6 +322,14 @@ module.exports = {
 							componentName +
 							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					} ) ),
+					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
+					...[ 'TextControl' ].map( ( componentName ) => ( {
+						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
 				],
 			},
 		},
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 15beec4ac6ed54..63c977b111e01c 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -149,6 +149,8 @@ function NonDefaultControls( { format, onChange } ) {
 			/>
 			{ isCustom && (
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 05a36d7a09bcab..c4871d48ebe129 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -327,6 +327,8 @@ function URLInput( props ) {
 		>
 			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus
 					autoCapitalize="none"
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index 8209ff1939f091..c19021c52356f5 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -227,12 +227,16 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 3b2bb562e63c06..d9f8acc91e4c8e 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -380,6 +380,8 @@ function ButtonEdit( props ) {
 			<InspectorControls group="advanced">
 				{ isLinkTag && (
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Link rel' ) }
 						value={ rel || '' }
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 856d09d3945e64..fb84b0465b8402 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -63,6 +63,8 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index 2738644878660a..d6f9d80f155c38 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -145,6 +145,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						) }
 					/>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						autoComplete="off"
 						label={ __( 'Form action' ) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 7dd03a7fb5837c..0623d576e75aec 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -690,6 +690,8 @@ export default function Image( {
 						) }
 						renderContent={ () => (
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="wp-block-image__toolbar_content_textarea"
 								__nextHasNoMarginBottom
 								label={ __( 'Title attribute' ) }
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
index fe1075f0044070..97a97d7763fc72 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
@@ -14,6 +14,8 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
index 54ad72be30d7c0..f6abb5ff60c68e 100644
--- a/packages/block-library/src/post-comment/edit.js
+++ b/packages/block-library/src/post-comment/edit.js
@@ -34,6 +34,8 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index c9f4645e5e8654..675580c71c1d7b 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -230,6 +230,8 @@ export default function PostFeaturedImageEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index b822e457ffcaeb..0403a1d1406bd3 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -83,6 +83,8 @@ export default function PostTermsEdit( {
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index e9b45e2a642a61..abd52febd1882b 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -162,6 +162,8 @@ export default function PostTitleEdit( {
 										checked={ linkTarget === '_blank' }
 									/>
 									<TextControl
+										// TODO: Switch to `true` (40px size) if possible
+										__next40pxDefaultSize={ false }
 										__nextHasNoMarginBottom
 										label={ __( 'Link rel' ) }
 										value={ rel }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 8f372a73ea6c9d..39e3803982f48b 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -139,6 +139,8 @@ const SocialLinkEdit = ( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							__nextHasNoMarginBottom
 							label={ __( 'Text' ) }
 							help={ __(
@@ -155,6 +157,8 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index 44562c472dd4f6..79a3a158b87ea0 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -73,6 +73,8 @@ export function TemplatePartAdvancedControls( {
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 366d521f5aa625..3864722c7a7794 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -99,6 +99,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</span>
 				<Grid columns={ 2 } gap={ 4 }>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
@@ -114,6 +116,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						onChange={ ( newSrcLang ) =>
 							onChange( {
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index aabb49c14a2ff7..69cca49fd84563 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -78,6 +78,8 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index f033c932c59e12..cab5b0d31fa2ed 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -51,6 +51,8 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 39f48d3bc811c4..fdc1194527f5f7 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -122,6 +122,8 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js
index cc86405157b88f..adabac2f18b0bd 100644
--- a/packages/editor/src/components/post-slug/index.js
+++ b/packages/editor/src/components/post-slug/index.js
@@ -24,6 +24,8 @@ function PostSlugControl() {
 
 	return (
 		<TextControl
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			__nextHasNoMarginBottom
 			label={ __( 'Slug' ) }
 			autoComplete="off"
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 79039d0a5d0d25..c711268a91e631 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -407,6 +407,8 @@ export function HierarchicalTermSelector( { slug } ) {
 		<Flex direction="column" gap="4">
 			{ showFilter && (
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ filterLabel }
 					value={ filterValue }
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index 21f3d0a61be042..b6f30e24a2fdb3 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -169,6 +169,8 @@ export default function ReusableBlockConvertButton( {
 					>
 						<VStack spacing="5">
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
 								value={ title }

From 46f9fe0f31bf9ce5f6210cad96074206e90527e6 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 07:15:24 +0900
Subject: [PATCH 111/205] Deprecate bottom margin on BaseControl-based
 components (#64408)

* BaseControl: Deprecate bottom margin

* Propagate to components

* Missed spots

* Add changelog

* List all affected components in changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              | 17 ++++++++++
 .../components/src/base-control/index.tsx     | 13 +++++++
 packages/components/src/base-control/types.ts |  7 ++++
 .../components/src/checkbox-control/index.tsx |  1 +
 .../checkbox-control/stories/index.story.tsx  |  1 +
 .../src/checkbox-control/test/index.tsx       |  9 ++++-
 .../components/src/combobox-control/index.tsx |  1 +
 .../combobox-control/stories/index.story.tsx  |  7 ++--
 .../src/combobox-control/test/index.tsx       |  6 +++-
 .../src/dimension-control/index.tsx           | 34 +++++++++++++------
 .../dimension-control/stories/index.story.tsx |  1 +
 .../test/__snapshots__/index.test.js.snap     | 16 ---------
 .../src/dimension-control/test/index.test.js  |  6 +++-
 .../src/focal-point-picker/index.tsx          |  1 +
 .../stories/index.story.tsx                   |  3 ++
 .../src/focal-point-picker/test/index.tsx     |  6 +++-
 .../components/src/range-control/index.tsx    |  1 +
 .../src/range-control/stories/index.story.tsx |  7 ++++
 .../src/range-control/test/index.tsx          |  8 ++++-
 .../components/src/search-control/index.tsx   | 11 +++---
 .../search-control/stories/index.story.tsx    |  1 +
 .../src/search-control/test/index.tsx         |  1 +
 .../components/src/select-control/index.tsx   |  1 +
 .../select-control/stories/index.story.tsx    | 13 ++++---
 .../select-control/test/select-control.tsx    | 18 ++++++----
 .../components/src/text-control/index.tsx     |  1 +
 .../src/text-control/stories/index.story.tsx  |  4 ++-
 .../src/text-control/test/text-control.tsx    |  6 +++-
 .../components/src/textarea-control/index.tsx |  1 +
 .../textarea-control/stories/index.story.tsx  |  1 +
 .../components/src/toggle-control/index.tsx   |  9 +++++
 .../toggle-control/stories/index.story.tsx    |  1 +
 .../src/toggle-control/test/index.tsx         |  8 ++++-
 .../test/__snapshots__/index.tsx.snap         | 16 ---------
 .../src/toggle-group-control/test/index.tsx   |  6 +++-
 .../toggle-group-control/component.tsx        |  1 +
 packages/components/src/tree-select/index.tsx | 21 +++++++++---
 .../src/tree-select/stories/index.story.tsx   |  1 +
 38 files changed, 191 insertions(+), 75 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6b95e23818c864..36b1c8fcc55d00 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   Deprecate bottom margin on the following `BaseControl`-based components. Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version ([#64408](https://github.com/WordPress/gutenberg/pull/64408)).
+    -   `BaseControl`
+    -   `CheckboxControl`
+    -   `ComboboxControl`
+    -   `DimensionControl`
+    -   `FocalPointPicker`
+    -   `RangeControl`
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TextareaControl`
+    -   `ToggleControl`
+    -   `ToggleGroupControl`
+    -   `TreeSelect`
+
 ### New Features
 
 -   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 77899b6480daed..423636a92cd5f0 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -31,6 +32,7 @@ const UnconnectedBaseControl = (
 ) => {
 	const {
 		__nextHasNoMarginBottom = false,
+		__associatedWPComponentName = 'BaseControl',
 		id,
 		label,
 		hideLabelFromVision = false,
@@ -39,6 +41,17 @@ const UnconnectedBaseControl = (
 		children,
 	} = useContextSystem( props, 'BaseControl' );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			`Bottom margin styles for wp.components.${ __associatedWPComponentName }`,
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<Wrapper className={ className }>
 			<StyledField
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 07a358d09c14b4..e4c838459209c4 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -10,6 +10,13 @@ export type BaseControlProps = {
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Temporary private prop for showing better deprecation messages,
+	 * e.g. `Some feature from wp.components.${ __associatedWPControl } is deprecated`.
+	 *
+	 * @ignore
+	 */
+	__associatedWPComponentName?: string;
 	/**
 	 * The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 	 * This is necessary to accessibly associate the label with that element.
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 51e232d97847a9..a24d1abaab45a7 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -95,6 +95,7 @@ export function CheckboxControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="CheckboxControl"
 			label={ heading }
 			id={ id }
 			help={
diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
index 2dbc14c8cde111..3c55ba3192a3cf 100644
--- a/packages/components/src/checkbox-control/stories/index.story.tsx
+++ b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -59,6 +59,7 @@ export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 899a9b100015b3..547f479184e862 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -20,13 +20,20 @@ const noop = () => {};
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
-	return <BaseCheckboxControl onChange={ noop } { ...props } />;
+	return (
+		<BaseCheckboxControl
+			onChange={ noop }
+			{ ...props }
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
 	const [ isChecked, setChecked ] = useState( false );
 	return (
 		<BaseCheckboxControl
+			__nextHasNoMarginBottom
 			checked={ isChecked }
 			onChange={ ( value ) => {
 				setChecked( value );
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index e3b1434be8c7c2..fc3ecccf0b6599 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -320,6 +320,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__associatedWPComponentName="ComboboxControl"
 				className={ clsx( className, 'components-combobox-control' ) }
 				label={ label }
 				id={ `components-form-token-input-${ instanceId }` }
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index 0f45c8a54a2ee3..516cd262fd5aa6 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -76,6 +76,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
@@ -135,8 +136,7 @@ const optionsWithDisabledOptions = countryOptions.map( ( option, index ) => ( {
 } ) );
 
 WithDisabledOptions.args = {
-	allowReset: false,
-	label: 'Select a country',
+	...Default.args,
 	options: optionsWithDisabledOptions,
 };
 
@@ -148,8 +148,7 @@ WithDisabledOptions.args = {
 export const NotExpandOnFocus = Template.bind( {} );
 
 NotExpandOnFocus.args = {
-	allowReset: false,
-	label: 'Select a country',
+	...Default.args,
 	options: countryOptions,
 	expandOnFocus: false,
 };
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index 76ce9cc4724c54..adc76590c24538 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ComboboxControl from '..';
+import _ComboboxControl from '..';
 import type { ComboboxControlOption, ComboboxControlProps } from '../types';
 
 const timezones = [
@@ -57,6 +57,10 @@ const getAllOptions = () => screen.getAllByRole( 'option' );
 const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
+const ComboboxControl = ( props: ComboboxControlProps ) => {
+	return <_ComboboxControl { ...props } __nextHasNoMarginBottom />;
+};
+
 const ControlledComboboxControl = ( {
 	value: valueProp,
 	onChange,
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 114ebe987dd35d..52662f31c3f24c 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -16,6 +16,15 @@ import SelectControl from '../select-control';
 import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
+import { ContextSystemProvider } from '../context';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'DimensionControl' },
+	},
+};
 
 /**
  * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
@@ -87,16 +96,21 @@ export function DimensionControl( props: DimensionControlProps ) {
 	);
 
 	return (
-		<SelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			className={ clsx( className, 'block-editor-dimension-control' ) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				className={ clsx(
+					className,
+					'block-editor-dimension-control'
+				) }
+				label={ selectLabel }
+				hideLabelFromVision={ false }
+				value={ value }
+				onChange={ onChangeSpacingSize }
+				options={ formatSizesAsOptions( sizes ) }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 33d5bad4ff4b19..3a6da44f461164 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -44,6 +44,7 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 export const Default = Template.bind( {} );
 
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',
 	sizes,
 };
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 5990fbbd4a3f5f..658fe7febc02bc 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -13,10 +13,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -299,10 +295,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -595,10 +587,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -903,10 +891,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index 1d65dd86c7e7c8..1b34d2983ad0f1 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -12,7 +12,11 @@ import { plus } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DimensionControl } from '../';
+import { DimensionControl as _DimensionControl } from '../';
+
+const DimensionControl = ( props ) => {
+	return <_DimensionControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 4575108fe6a21d..8f299751be0d48 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -251,6 +251,7 @@ export function FocalPointPicker( {
 		<BaseControl
 			{ ...restProps }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="FocalPointPicker"
 			label={ label }
 			id={ id }
 			help={ help }
diff --git a/packages/components/src/focal-point-picker/stories/index.story.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx
index ce93d3557060c9..42fd64b8e4d855 100644
--- a/packages/components/src/focal-point-picker/stories/index.story.tsx
+++ b/packages/components/src/focal-point-picker/stories/index.story.tsx
@@ -49,6 +49,9 @@ const Template: StoryFn< typeof FocalPointPicker > = ( {
 };
 
 export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const Image = Template.bind( {} );
 Image.args = {
diff --git a/packages/components/src/focal-point-picker/test/index.tsx b/packages/components/src/focal-point-picker/test/index.tsx
index 1eccced32c70af..377ba6c4e9e6b3 100644
--- a/packages/components/src/focal-point-picker/test/index.tsx
+++ b/packages/components/src/focal-point-picker/test/index.tsx
@@ -7,12 +7,16 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import Picker from '..';
+import _Picker from '..';
 import type { FocalPointPickerProps } from '../types';
 
 type Log = { name: string; args: unknown[] };
 type EventLogger = ( name: string, args: unknown[] ) => void;
 
+const Picker = ( props: React.ComponentProps< typeof _Picker > ) => {
+	return <_Picker { ...props } __nextHasNoMarginBottom />;
+};
+
 const props: FocalPointPickerProps = {
 	onChange: jest.fn(),
 	url: 'test-url',
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index 5b4ecfa585679b..20d9712df9c251 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -213,6 +213,7 @@ function UnforwardedRangeControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="RangeControl"
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx
index 4e0c1f19e078b6..7775c364195722 100644
--- a/packages/components/src/range-control/stories/index.story.tsx
+++ b/packages/components/src/range-control/stories/index.story.tsx
@@ -70,6 +70,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
 	label: 'Opacity',
@@ -104,6 +105,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	);
 };
 WithAnyStep.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Brightness',
 	step: 'any',
 };
@@ -167,6 +169,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Integer Step',
 	marks: marksBase,
 	max: 10,
@@ -183,6 +186,7 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: [
 		...marksBase,
 		{ value: 3.5, label: '3.5' },
@@ -202,6 +206,7 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksWithNegatives,
 	max: 10,
 	min: -10,
@@ -217,6 +222,7 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksWithNegatives,
 	max: -1,
 	min: -10,
@@ -232,6 +238,7 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksBase,
 	max: 10,
 	min: 0,
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index d843b615ed0078..a4c5d8c6f2bc7f 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -6,7 +6,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import RangeControl from '../';
+import _RangeControl from '../';
 
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
@@ -15,6 +15,12 @@ const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 	fireEvent.change( input, { target: { value } } );
 
+const RangeControl = (
+	props: React.ComponentProps< typeof _RangeControl >
+) => {
+	return <_RangeControl { ...props } __nextHasNoMarginBottom />;
+};
+
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index 08cb3b065c904e..aac905e137e025 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -77,10 +77,13 @@ function UnforwardedSearchControl(
 
 	const contextValue = useMemo(
 		() => ( {
-			// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
-			// to provide backwards compatibile margin for SearchControl.
-			// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
-			BaseControl: { _overrides: { __nextHasNoMarginBottom } },
+			BaseControl: {
+				// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+				// to provide backwards compatibile margin for SearchControl.
+				// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
+				_overrides: { __nextHasNoMarginBottom },
+				__associatedWPComponentName: 'SearchControl',
+			},
 			// `isBorderless` is still experimental and not a public prop for InputControl yet.
 			InputBase: { isBorderless: true },
 		} ),
diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx
index 433d3eef655adf..215288bb67c9b6 100644
--- a/packages/components/src/search-control/stories/index.story.tsx
+++ b/packages/components/src/search-control/stories/index.story.tsx
@@ -48,6 +48,7 @@ const Template: StoryFn< typeof SearchControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	help: 'Help text to explain the input.',
+	__nextHasNoMarginBottom: true,
 };
 
 /**
diff --git a/packages/components/src/search-control/test/index.tsx b/packages/components/src/search-control/test/index.tsx
index f130cab1b2a7cd..c6637945adcf63 100644
--- a/packages/components/src/search-control/test/index.tsx
+++ b/packages/components/src/search-control/test/index.tsx
@@ -23,6 +23,7 @@ function ControlledSearchControl( {
 	return (
 		<SearchControl
 			{ ...restProps }
+			__nextHasNoMarginBottom
 			value={ value }
 			onChange={ ( ...args ) => {
 				setValue( ...args );
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index ca9966fc675b86..3686661b8a58dc 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -99,6 +99,7 @@ function UnforwardedSelectControl< V extends string >(
 			help={ help }
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="SelectControl"
 		>
 			<StyledInputBase
 				className={ classes }
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index 11a63510d9337c..018f519e6b6d43 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -63,6 +63,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
 		{ value: 'a', label: 'Option A' },
@@ -82,9 +83,11 @@ WithLabelAndHelpText.args = {
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
  * passed in as `children` for more customizeability.
  */
-export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
-	return (
-		<SelectControlWithState { ...args }>
+export const WithCustomChildren = SelectControlWithState.bind( {} );
+WithCustomChildren.args = {
+	__nextHasNoMarginBottom: true,
+	children: (
+		<>
 			<option value="option-1">Option 1</option>
 			<option value="option-2" disabled>
 				Option 2 - Disabled
@@ -97,8 +100,8 @@ export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
 					Option Group 1 - Option 2 - Disabled
 				</option>
 			</optgroup>
-		</SelectControlWithState>
-	);
+		</>
+	),
 };
 
 export const Minimal = SelectControlWithState.bind( {} );
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 0e8a6891087043..47b684cd20e280 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -7,7 +7,13 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import SelectControl from '..';
+import _SelectControl from '..';
+
+const SelectControl = (
+	props: React.ComponentProps< typeof _SelectControl >
+) => {
+	return <_SelectControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
@@ -123,7 +129,7 @@ describe( 'SelectControl', () => {
 					onChange={ onChange }
 				/>;
 
-				<SelectControl
+				<_SelectControl
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value="string"
 					options={ [
@@ -142,7 +148,7 @@ describe( 'SelectControl', () => {
 			} );
 
 			it( 'should accept an explicit type argument', () => {
-				<SelectControl< 'narrow' | 'value' >
+				<_SelectControl< 'narrow' | 'value' >
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value="string"
 					options={ [
@@ -166,7 +172,7 @@ describe( 'SelectControl', () => {
 					value: ( 'foo' | 'bar' )[]
 				) => void = () => {};
 
-				<SelectControl
+				<_SelectControl
 					multiple
 					value={ [ 'narrow' ] }
 					options={ [
@@ -183,7 +189,7 @@ describe( 'SelectControl', () => {
 					onChange={ onChange }
 				/>;
 
-				<SelectControl
+				<_SelectControl
 					multiple
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value={ [ 'string' ] }
@@ -205,7 +211,7 @@ describe( 'SelectControl', () => {
 			} );
 
 			it( 'should accept an explicit type argument', () => {
-				<SelectControl< 'narrow' | 'value' >
+				<_SelectControl< 'narrow' | 'value' >
 					multiple
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value={ [ 'string' ] }
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index 1643c5bc37c347..ea2d2c17bb9cf6 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -41,6 +41,7 @@ function UnforwardedTextControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx
index ddc8af7a9f2b3a..bebdb2caf75f63 100644
--- a/packages/components/src/text-control/stories/index.story.tsx
+++ b/packages/components/src/text-control/stories/index.story.tsx
@@ -52,7 +52,9 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
-Default.args = {};
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );
diff --git a/packages/components/src/text-control/test/text-control.tsx b/packages/components/src/text-control/test/text-control.tsx
index fc048b93992f08..19b17cae443614 100644
--- a/packages/components/src/text-control/test/text-control.tsx
+++ b/packages/components/src/text-control/test/text-control.tsx
@@ -6,7 +6,11 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import TextControl from '..';
+import _TextControl from '..';
+
+const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
+	return <_TextControl { ...props } __nextHasNoMarginBottom />;
+};
 
 const noop = () => {};
 
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 3b96e11b0621b5..e7528510667b75 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -35,6 +35,7 @@ function UnforwardedTextareaControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextareaControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
index e227519a069383..e8cb986a141325 100644
--- a/packages/components/src/textarea-control/stories/index.story.tsx
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -51,6 +51,7 @@ const Template: StoryFn< typeof TextareaControl > = ( {
 
 export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Text',
 	help: 'Enter some text',
 };
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index 5c64d57d3d0249..d2ee234a9695f8 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -10,6 +10,7 @@ import clsx from 'clsx';
  */
 import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -48,6 +49,14 @@ function UnforwardedToggleControl(
 		! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )
 	);
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.ToggleControl', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	let describedBy, helpLabel;
 	if ( help ) {
 		if ( typeof help === 'function' ) {
diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx
index b8043b8f48e523..97723aa207a394 100644
--- a/packages/components/src/toggle-control/stories/index.story.tsx
+++ b/packages/components/src/toggle-control/stories/index.story.tsx
@@ -48,6 +48,7 @@ const Template: StoryFn< typeof ToggleControl > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Enable something',
 };
 
diff --git a/packages/components/src/toggle-control/test/index.tsx b/packages/components/src/toggle-control/test/index.tsx
index cc89031d9affa3..b0eec2aca6663d 100644
--- a/packages/components/src/toggle-control/test/index.tsx
+++ b/packages/components/src/toggle-control/test/index.tsx
@@ -6,7 +6,13 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToggleControl from '..';
+import _ToggleControl from '..';
+
+const ToggleControl = (
+	props: React.ComponentProps< typeof _ToggleControl >
+) => {
+	return <_ToggleControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'ToggleControl', () => {
 	it( 'should label the toggle', () => {
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 81afc7ac67b05f..d055ea5fcc9838 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -13,10 +13,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -349,10 +345,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -573,10 +565,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -903,10 +891,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 661bbb9fc37bab..170db01ae523c2 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -15,7 +15,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
  */
 import Button from '../../button';
 import {
-	ToggleGroupControl,
+	ToggleGroupControl as _ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
@@ -27,6 +27,10 @@ const hoverOutside = async () => {
 	await hover( document.body, { clientX: 10, clientY: 10 } );
 };
 
+const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
+	return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />;
+};
+
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 8138b76505fe50..1c86c93548f6df 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -72,6 +72,7 @@ function UnconnectedToggleGroupControl(
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="ToggleGroupControl"
 		>
 			{ ! hideLabelFromVision && (
 				<VisualLabelWrapper>
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index 599dee4402ec72..bd92807bff4cc9 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -10,6 +10,15 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { ContextSystemProvider } from '../context';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'TreeSelect' },
+	},
+};
 
 function getSelectOptions(
 	tree: Tree[],
@@ -91,11 +100,13 @@ export function TreeSelect( props: TreeSelectProps ) {
 	}, [ noOptionLabel, tree ] );
 
 	return (
-		<SelectControl
-			{ ...{ label, options, onChange } }
-			value={ selectedId }
-			{ ...restProps }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				{ ...{ label, options, onChange } }
+				value={ selectedId }
+				{ ...restProps }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx
index 0a4212dc791227..33103786bbc541 100644
--- a/packages/components/src/tree-select/stories/index.story.tsx
+++ b/packages/components/src/tree-select/stories/index.story.tsx
@@ -48,6 +48,7 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',
 	help: 'Help text to explain the select control.',

From e0760706272e4d6af3f1b0c7f90ab4ea9e305256 Mon Sep 17 00:00:00 2001
From: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:16:04 +0530
Subject: [PATCH 112/205] chore: Add label prop to SizeControl component
 (#64428)

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 .../src/components/global-styles/size-control/index.js     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js
index 28fa64c643cbbd..06ea0bb5617e31 100644
--- a/packages/edit-site/src/components/global-styles/size-control/index.js
+++ b/packages/edit-site/src/components/global-styles/size-control/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -26,7 +25,7 @@ function SizeControl( {
 	...props
 } ) {
 	const { baseControlProps } = useBaseControlProps( props );
-	const { value, onChange, fallbackValue, disabled } = props;
+	const { value, onChange, fallbackValue, disabled, label } = props;
 
 	const units = useCustomUnits( {
 		availableUnits: DEFAULT_UNITS,
@@ -55,7 +54,7 @@ function SizeControl( {
 					<UnitControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Custom' ) }
+						label={ label }
 						hideLabelFromVision
 						value={ value }
 						onChange={ handleUnitControlChange }
@@ -69,7 +68,7 @@ function SizeControl( {
 						<RangeControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Custom Size' ) }
+							label={ label }
 							hideLabelFromVision
 							value={ valueQuantity }
 							initialPosition={ fallbackValue }

From 7498ac2ed444e7737086e95d7da7ff2229fda3fe Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 14 Aug 2024 08:23:24 +0100
Subject: [PATCH 113/205] Zoon Out: Fix scale calculations (#64478)

---
 packages/block-editor/src/components/iframe/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index e7af77920ea127..3b0bce6d56b403 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -242,8 +242,10 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		prevContainerWidth.current = containerWidth;
-	}, [ containerWidth ] );
+		if ( ! isZoomedOut ) {
+			prevContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [

From c20273736e30e2bfc54f82faaeaad4912b25cd29 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Aug 2024 12:18:10 +0000
Subject: [PATCH 114/205] Bump plugin version to 19.0.0

---
 gutenberg.php     | 2 +-
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/gutenberg.php b/gutenberg.php
index 6ec0a56f00e74d..66f0aa31a65baa 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.5
  * Requires PHP: 7.2
- * Version: 19.0.0-rc.1
+ * Version: 19.0.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 471d7b845d24f8..ddfec3a5dddc63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "19.0.0-rc.1",
+	"version": "19.0.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "19.0.0-rc.1",
+			"version": "19.0.0",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index e4466eb4f470e1..ee78f197a43e28 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "19.0.0-rc.1",
+	"version": "19.0.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 54269c00f74805533b5fec9bf14b84d18f8d3ae9 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Aug 2024 12:41:28 +0000
Subject: [PATCH 115/205] Update Changelog for 19.0.0

---
 changelog.txt | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index e85895547e87d1..748df8da3484c7 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,7 +1,6 @@
 == Changelog ==
 
-= 19.0.0-rc.1 =
-
+= 19.0.0 =
 
 ## Changelog
 
@@ -368,6 +367,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @adamsilverstein @afercia @akasunil @Aljullu @amitraj2203 @andrewserong @carolinan @cbravobernal @Chrico @ciampo @creativecoder @DaniGuardiola @DAreRodz @djcowan @ellatrix @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kebbet @kmanijak @Mamaduka @matiasbenedetto @meteorlxy @mikachan @mirka @mtias @ndiego @noisysocks @oandregal @ramonjd @richtabor @Rishit30G @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @simison @stokesman @t-hamano @talldan @tomdevisser @tomjn @tyxla @up1512001 @wzieba @youknowriad
 
 
+
+
 = 18.9.0 =
 
 ## Changelog

From b533bfd6d00c2aa99341568d5328a6ca6f826823 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 14 Aug 2024 15:32:14 +0200
Subject: [PATCH 116/205] `Composite`: use internal context to consume
 composite store (#64493)

* Create CompositeContext

* Use context to pass store to composite subcomponents

* CHANGELOG

* Remove double dot

* Export `Context`, add basic docs

* Update CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md             |  4 +-
 packages/components/src/composite/README.md  |  4 +
 packages/components/src/composite/context.ts | 14 +++
 packages/components/src/composite/index.tsx  | 95 ++++++++++++++++++--
 packages/components/src/composite/types.ts   |  9 ++
 5 files changed, 116 insertions(+), 10 deletions(-)
 create mode 100644 packages/components/src/composite/context.ts

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 36b1c8fcc55d00..594bb47e187d51 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -23,11 +23,13 @@
 
 -   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
 -   `Composite`: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
--   `Composite`: export `useCompositeStore, add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
+-   `Composite`: export `useCompositeStore`, add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
+-   `Composite`: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 
 ### Enhancements
 
 -   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
+-   `Composite`: use internal context to forward the composite store to sub-components ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 -   `QueryControls`: Default to new 40px size ([#64457](https://github.com/WordPress/gutenberg/pull/64457)).
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
index 3670e31b01e9df..76e345b16d13fa 100644
--- a/packages/components/src/composite/README.md
+++ b/packages/components/src/composite/README.md
@@ -315,3 +315,7 @@ Allows the component to be rendered as a different HTML element or React compone
 The contents of the component.
 
 -   Required: no
+
+### `Composite.Context`
+
+The React context used by the composite components. It can be used by to access the composite store, and to forward the context when composite sub-components are rendered across portals (ie. `SlotFill` components) that would not otherwise forward the context to the `Fill` children.
diff --git a/packages/components/src/composite/context.ts b/packages/components/src/composite/context.ts
new file mode 100644
index 00000000000000..69a052c5bfba19
--- /dev/null
+++ b/packages/components/src/composite/context.ts
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { CompositeContextProps } from './types';
+
+export const CompositeContext =
+	createContext< CompositeContextProps >( undefined );
+
+export const useCompositeContext = () => useContext( CompositeContext );
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
index f5d92330cada3c..0bfcec2bf76600 100644
--- a/packages/components/src/composite/index.tsx
+++ b/packages/components/src/composite/index.tsx
@@ -16,12 +16,13 @@ import * as Ariakit from '@ariakit/react';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { useMemo, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { CompositeContext, useCompositeContext } from './context';
 import type {
 	CompositeStoreProps,
 	CompositeProps,
@@ -72,7 +73,14 @@ const Group = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeGroupProps, 'div', false >
 >( function CompositeGroup( props, ref ) {
-	return <Ariakit.CompositeGroup { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeGroup
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 Group.displayName = 'Composite.Group';
 
@@ -80,7 +88,14 @@ const GroupLabel = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
 >( function CompositeGroupLabel( props, ref ) {
-	return <Ariakit.CompositeGroupLabel { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeGroupLabel
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 GroupLabel.displayName = 'Composite.GroupLabel';
 
@@ -88,7 +103,14 @@ const Item = forwardRef<
 	HTMLButtonElement,
 	WordPressComponentProps< CompositeItemProps, 'button', false >
 >( function CompositeItem( props, ref ) {
-	return <Ariakit.CompositeItem { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeItem
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 Item.displayName = 'Composite.Item';
 
@@ -96,7 +118,14 @@ const Row = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeRowProps, 'div', false >
 >( function CompositeRow( props, ref ) {
-	return <Ariakit.CompositeRow { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeRow
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 Row.displayName = 'Composite.Row';
 
@@ -104,7 +133,14 @@ const Hover = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeHoverProps, 'div', false >
 >( function CompositeHover( props, ref ) {
-	return <Ariakit.CompositeHover { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeHover
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 Hover.displayName = 'Composite.Hover';
 
@@ -112,7 +148,14 @@ const Typeahead = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
 >( function CompositeTypeahead( props, ref ) {
-	return <Ariakit.CompositeTypeahead { ...props } ref={ ref } />;
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeTypeahead
+			store={ context?.store }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 } );
 Typeahead.displayName = 'Composite.Typeahead';
 
@@ -136,9 +179,28 @@ export const Composite = Object.assign(
 	forwardRef<
 		HTMLDivElement,
 		WordPressComponentProps< CompositeProps, 'div', false >
-	>( function Composite( { disabled = false, ...props }, ref ) {
+	>( function Composite(
+		{ children, store, disabled = false, ...props },
+		ref
+	) {
+		const contextValue = useMemo(
+			() => ( {
+				store,
+			} ),
+			[ store ]
+		);
+
 		return (
-			<Ariakit.Composite disabled={ disabled } { ...props } ref={ ref } />
+			<Ariakit.Composite
+				disabled={ disabled }
+				store={ store }
+				{ ...props }
+				ref={ ref }
+			>
+				<CompositeContext.Provider value={ contextValue }>
+					{ children }
+				</CompositeContext.Provider>
+			</Ariakit.Composite>
 		);
 	} ),
 	{
@@ -260,5 +322,20 @@ export const Composite = Object.assign(
 		 * ```
 		 */
 		Typeahead,
+		/**
+		 * The React context used by the composite components. It can be used by
+		 * to access the composite store, and to forward the context when composite
+		 * sub-components are rendered across portals (ie. `SlotFill` components)
+		 * that would not otherwise forward the context to the `Fill` children.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 * import { useContext } from '@wordpress/element';
+		 *
+		 * const compositeContext = useContext( Composite.Context );
+		 * ```
+		 */
+		Context: CompositeContext,
 	}
 );
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
index 5afe410f7582ba..05a2b8473eb349 100644
--- a/packages/components/src/composite/types.ts
+++ b/packages/components/src/composite/types.ts
@@ -3,6 +3,15 @@
  */
 import type * as Ariakit from '@ariakit/react';
 
+export type CompositeContextProps =
+	| {
+			/**
+			 * Object returned by the `useCompositeStore` hook.
+			 */
+			store: Ariakit.CompositeStore;
+	  }
+	| undefined;
+
 export type CompositeStoreProps = {
 	/**
 	 * The current active item `id`. The active item is the element within the

From 00d1f8afac2e3b9764dc28261462b72794ae5ce0 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 14 Aug 2024 17:04:04 +0200
Subject: [PATCH 117/205] Add missing changes to the changelog for the PR
 #62734 (#64507)

Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
---
 packages/interactivity/CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 6eb664984e1e53..52707b70ba5a7b 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -4,14 +4,24 @@
 
 ## 6.5.0 (2024-08-07)
 
+### Enhancements
+
+-   Refactor internal proxy and signals system ([#62734](https://github.com/WordPress/gutenberg/pull/62734)).
+
+### Bug Fixes
+
+-   Prevent overriding of existing properties on state and context after a client-side navigation ([#62734](https://github.com/WordPress/gutenberg/pull/62734)).
+
 ## 6.4.0 (2024-07-24)
 
 ## 6.3.0 (2024-07-10)
 
 ## 6.2.0 (2024-06-26)
+
 ### Enhancements
 
 -   Export `splitTask` function from `@wordpress/interactivity` package to facilitate yielding to the main thread. See example in [async actions](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/interactivity-api/api-reference.md#async-actions) documentation. ([#62665](https://github.com/WordPress/gutenberg/pull/62665))
+
 ## 6.1.0 (2024-06-15)
 
 ## 6.0.0 (2024-05-31)

From 93b473840667751c655a9afbed2ebd2c1ade522e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 14 Aug 2024 17:29:41 +0200
Subject: [PATCH 118/205] `Composite` v2: undo stabilizing new version (#64510)

* Remove exports from `@wordpress/components` package

* Update Storybook

* Update CHANGELOG

* README

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                    | 13 ++++++-------
 packages/components/src/composite/README.md         |  4 ++++
 .../src/composite/legacy/stories/index.story.tsx    |  3 +--
 .../src/composite/stories/index.story.tsx           |  3 ++-
 packages/components/src/index.ts                    |  1 -
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 594bb47e187d51..7b3a2aea460d9f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -19,13 +19,6 @@
     -   `ToggleGroupControl`
     -   `TreeSelect`
 
-### New Features
-
--   `Composite`: add stable version of the component ([#63564](https://github.com/WordPress/gutenberg/pull/63564)).
--   `Composite`: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
--   `Composite`: export `useCompositeStore`, add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
--   `Composite`: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
-
 ### Enhancements
 
 -   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
@@ -34,6 +27,12 @@
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 
+### Internal
+
+-   `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
+-   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
+-   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
+
 ## 28.5.0 (2024-08-07)
 
 ### Bug Fixes
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
index 76e345b16d13fa..35881d815cf1bc 100644
--- a/packages/components/src/composite/README.md
+++ b/packages/components/src/composite/README.md
@@ -1,5 +1,9 @@
 # `Composite`
 
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
 `Composite` provides a single tab stop on the page and allows navigation through the focusable descendants with arrow keys. This abstract component is based on the [WAI-ARIA Composite Role⁠](https://w3c.github.io/aria/#composite).
 
 ## Usage
diff --git a/packages/components/src/composite/legacy/stories/index.story.tsx b/packages/components/src/composite/legacy/stories/index.story.tsx
index 1b8e07e9bbf560..e46d656a16810e 100644
--- a/packages/components/src/composite/legacy/stories/index.story.tsx
+++ b/packages/components/src/composite/legacy/stories/index.story.tsx
@@ -15,8 +15,7 @@ import {
 import { UseCompositeStatePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStatePlaceholder > = {
-	title: 'Components (Deprecated)/Composite (Unstable)',
-	id: 'components-composite-unstable',
+	title: 'Components/Composite',
 	component: UseCompositeStatePlaceholder,
 	subcomponents: {
 		Composite,
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index 405962b92a761c..034e1d6721f7bd 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -15,7 +15,7 @@ import { Composite, useCompositeStore } from '..';
 import { UseCompositeStorePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStorePlaceholder > = {
-	title: 'Components/Composite',
+	title: 'Components/Composite (V2)',
 	component: UseCompositeStorePlaceholder,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -50,6 +50,7 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 			options: [ 'horizontal', 'vertical', 'both' ],
 		},
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index cd6d2a77db9cb6..6483e34dc222a8 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -62,7 +62,6 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite/legacy';
-export { Composite, useCompositeStore } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

From b8d195e3196c82318270f561b958b3da943a03e9 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 15 Aug 2024 02:48:46 +0900
Subject: [PATCH 119/205] FocalPointPicker: Default to new 40px size (#64456)

* FocalPointPicker: Default to new 40px size

* Simplify prop passing

* Remove unnecessary usage

* Add changelog

---------

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/components/global-styles/background-panel.js          | 1 -
 packages/block-library/src/cover/edit/inspector-controls.js   | 1 -
 packages/block-library/src/media-text/edit.js                 | 1 -
 packages/components/CHANGELOG.md                              | 1 +
 packages/components/src/focal-point-picker/controls.tsx       | 4 +---
 packages/components/src/focal-point-picker/index.tsx          | 2 --
 packages/components/src/focal-point-picker/types.ts           | 4 ++--
 7 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 906202206d1b76..14b37bb3007658 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -585,7 +585,6 @@ function BackgroundSizeControls( {
 	return (
 		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
-				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Focal point' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 5f93df58ad6fa4..eedd94de88e4aa 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -188,7 +188,6 @@ export default function CoverInspectorControls( {
 						{ showFocalPointPicker && (
 							<FocalPointPicker
 								__nextHasNoMarginBottom
-								__next40pxDefaultSize
 								label={ __( 'Focal point' ) }
 								url={ url }
 								value={ focalPoint }
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5a3b4fab04ab63..2c020506dc889c 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -360,7 +360,6 @@ function MediaTextEdit( {
 					>
 						<FocalPointPicker
 							__nextHasNoMarginBottom
-							__next40pxDefaultSize
 							label={ __( 'Focal point' ) }
 							url={
 								useFeaturedImage && featuredImageURL
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7b3a2aea460d9f..2530b66152bdc2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -25,6 +25,7 @@
 -   `Composite`: use internal context to forward the composite store to sub-components ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 -   `QueryControls`: Default to new 40px size ([#64457](https://github.com/WordPress/gutenberg/pull/64457)).
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
+-   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 
 ### Internal
diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx
index 3df1725bf3bedb..1ecf846b10635e 100644
--- a/packages/components/src/focal-point-picker/controls.tsx
+++ b/packages/components/src/focal-point-picker/controls.tsx
@@ -23,7 +23,6 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -57,7 +56,6 @@ export default function FocalPointPickerControls( {
 			gap={ 4 }
 		>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -71,7 +69,6 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
@@ -91,6 +88,7 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
+			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 8f299751be0d48..cad14aff5b693f 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -85,7 +85,6 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -286,7 +285,6 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {
diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts
index bd66ae02451a95..357af1e090d7f5 100644
--- a/packages/components/src/focal-point-picker/types.ts
+++ b/packages/components/src/focal-point-picker/types.ts
@@ -29,7 +29,8 @@ export type FocalPointPickerProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
@@ -68,7 +69,6 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
-	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.

From 1b6c106d704ad2eab5f576d13064f4ee1399ec61 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Thu, 15 Aug 2024 02:14:20 +0530
Subject: [PATCH 120/205] Updated small typo in modularity.md (#64518)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
---
 docs/explanations/architecture/modularity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/explanations/architecture/modularity.md b/docs/explanations/architecture/modularity.md
index f94f8ec7b9472e..ff619ccbfdf5b7 100644
--- a/docs/explanations/architecture/modularity.md
+++ b/docs/explanations/architecture/modularity.md
@@ -42,7 +42,7 @@ function MyApp() {
 
 ```php
 // myplugin.php
-// Example of script registration dependending on the "components" and "element packages.
+// Example of script registration depending on the "components" and "element packages.
 wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "react" ) );
 ```
 

From cf8aeba074334550bc42471b022dac7137aa1eb2 Mon Sep 17 00:00:00 2001
From: Felix Arntz <flixos90@gmail.com>
Date: Wed, 14 Aug 2024 15:05:11 -0700
Subject: [PATCH 121/205] Make wp-env compatible with WordPress versions older
 than 5.4 by fixing wp-config anchors (#55864)

* Make wp-env compatible with WordPress versions older than 5.4 by fixing wp-config anchors.

* Use simple version compare function instead of semver library.

* Fix lint violations.

* Convert wpVersion to a string if needed.

* Simplify utility function for WP version check.

* Temp test.

* Temp test.

* Temp test.

* Remove temp code.

* Add missing spaces in WP 5.1-5.3 code.
---
 packages/env/lib/wordpress.js | 54 +++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index 423547fad688b5..bd3c4a23f8ff5d 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -27,6 +27,30 @@ const { getCache, setCache } = require( './cache' );
  * @typedef {'development'|'tests'|'all'} WPEnvironmentSelection
  */
 
+/**
+ * Utility function to check if a WordPress version is lower than another version.
+ *
+ * This is a non-comprehensive check only intended for this usage, to avoid pulling in a full semver library.
+ * It only considers the major and minor portions of the version and ignores the rest. Additionally, it assumes that
+ * the minor version is always a single digit (i.e. 0-9).
+ *
+ * Do not use this function for general version comparison, as it will not work for all cases.
+ *
+ * @param {string} version        The version to check.
+ * @param {string} compareVersion The compare version to check whether the version is lower than.
+ * @return {boolean} True if the version is lower than the compare version, false otherwise.
+ */
+function isWPMajorMinorVersionLower( version, compareVersion ) {
+	const versionNumber = Number.parseFloat(
+		version.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+	const compareVersionNumber = Number.parseFloat(
+		compareVersion.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+
+	return versionNumber < compareVersionNumber;
+}
+
 /**
  * Checks a WordPress database connection. An error is thrown if the test is
  * unsuccessful.
@@ -51,11 +75,28 @@ async function checkDatabaseConnection( { dockerComposeConfigPath, debug } ) {
  * @param {Object}        spinner     A CLI spinner which indicates progress.
  */
 async function configureWordPress( environment, config, spinner ) {
+	let wpVersion = '';
+	try {
+		wpVersion = await readWordPressVersion(
+			config.env[ environment ].coreSource,
+			spinner,
+			config.debug
+		);
+	} catch ( err ) {
+		// Ignore error.
+	}
+
 	const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
 
 	// -eo pipefail exits the command as soon as anything fails in bash.
 	const setupCommands = [ 'set -eo pipefail', installCommand ];
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	const configAnchor =
+		wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' )
+			? `"define('WP_DEBUG',"`
+			: `"define( 'WP_DEBUG',"`;
+
 	// Set wp-config.php values.
 	for ( let [ key, value ] of Object.entries(
 		config.env[ environment ].config
@@ -68,7 +109,7 @@ async function configureWordPress( environment, config, spinner ) {
 		// Add quotes around string values to work with multi-word strings better.
 		value = typeof value === 'string' ? `"${ value }"` : value;
 		setupCommands.push(
-			`wp config set ${ key } ${ value } --anchor="define( 'WP_DEBUG',"${
+			`wp config set ${ key } ${ value } --anchor=${ configAnchor }${
 				typeof value !== 'string' ? ' --raw' : ''
 			}`
 		);
@@ -98,6 +139,15 @@ async function configureWordPress( environment, config, spinner ) {
 		}
 	);
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	// Additionally, WordPress versions below 5.4 used `dirname( __FILE__ )` instead of `__DIR__`.
+	let abspathDef = `define( 'ABSPATH', __DIR__ . '\\/' );`;
+	if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' ) ) {
+		abspathDef = `define('ABSPATH', dirname(__FILE__) . '\\/');`;
+	} else if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.4' ) ) {
+		abspathDef = `define( 'ABSPATH', dirname( __FILE__ ) . '\\/' );`;
+	}
+
 	// WordPress' PHPUnit suite expects a `wp-tests-config.php` in
 	// the directory that the test suite is contained within.
 	// Make sure ABSPATH points to the WordPress install.
@@ -106,7 +156,7 @@ async function configureWordPress( environment, config, spinner ) {
 		[
 			'sh',
 			'-c',
-			`sed -e "/^require.*wp-settings.php/d" -e "s/define( 'ABSPATH', __DIR__ . '\\/' );/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
+			`sed -e "/^require.*wp-settings.php/d" -e "s/${ abspathDef }/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
 		],
 		{
 			config: config.dockerComposeConfigPath,

From 454129b07628e7fead84f158a4d05580ee5a6d3f Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:20:51 +1000
Subject: [PATCH 122/205] `RangeControl`: tweak mark and label absolute
 positioning (#64487)

* This commit tweaks the position of the range control marks and labels to fit the original design.

* CHANGELOG.md update

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md                              | 4 ++++
 .../src/range-control/styles/range-control-styles.ts          | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2530b66152bdc2..f7b7bdc088cee9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -28,6 +28,10 @@
 -   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 
+### Bug Fixes
+
+-   `RangeControl`: tweak mark and label absolute positioning ([#64487](https://github.com/WordPress/gutenberg/pull/64487)).
+
 ### Internal
 
 -   `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index 89f4864aee2ea6..ec1572d2679247 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -154,7 +154,7 @@ export const Mark = styled.span`
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
-	top: -4px;
+	top: 9px;
 	width: 1px;
 
 	${ markFill };
@@ -170,7 +170,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 12px;
+	top: 22px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };

From add79ad40619242e31a1cc57f38d1aa44ebb9929 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 15 Aug 2024 12:42:09 +1000
Subject: [PATCH 123/205] Style engine: export util to compile CSS custom var
 from preset string (#64490)

Remove `compileStyleValue` in favour of pre-existing `getCSSValueFromRawStyle()` from the style engine package.
Update style engine tests to cover bugfix in https://github.com/WordPress/gutenberg/pull/43116
Moves style engine utils tests into correct directory


Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
---
 .../global-styles/use-global-styles-output.js |  7 +--
 .../src/components/global-styles/utils.js     | 31 +---------
 packages/style-engine/CHANGELOG.md            |  4 ++
 packages/style-engine/README.md               | 16 +++++
 packages/style-engine/src/index.ts            |  3 +
 .../style-engine/src/styles/test/utils.js     | 54 ++++++++++++++++
 packages/style-engine/src/styles/utils.ts     | 18 ++++--
 packages/style-engine/src/test/utils.js       | 62 -------------------
 packages/style-engine/src/types.ts            |  2 +-
 9 files changed, 96 insertions(+), 101 deletions(-)
 create mode 100644 packages/style-engine/src/styles/test/utils.js
 delete mode 100644 packages/style-engine/src/test/utils.js

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index c1449d6d8b298f..cd4ad0cea50e0d 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
-import { getCSSRules } from '@wordpress/style-engine';
+import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
@@ -24,7 +24,6 @@ import {
 	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
-	compileStyleValue,
 	getResolvedValue,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
@@ -357,7 +356,7 @@ export function getStylesDeclarations(
 						? name
 						: kebabCase( name );
 					declarations.push(
-						`${ cssProperty }: ${ compileStyleValue(
+						`${ cssProperty }: ${ getCSSValueFromRawStyle(
 							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
@@ -369,7 +368,7 @@ export function getStylesDeclarations(
 					? key
 					: kebabCase( key );
 				declarations.push(
-					`${ cssProperty }: ${ compileStyleValue(
+					`${ cssProperty }: ${ getCSSValueFromRawStyle(
 						getValueFromObjectPath( blockStyles, pathToValue )
 					) }`
 				);
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index 8de479e39382e5..4cd93357b081b3 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -7,6 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -526,34 +527,6 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 	return result.join( ',' );
 }
 
-/**
- * Converts style preset values `var:` to CSS custom var values.
- * TODO: Export and use the style engine util: getCSSVarFromStyleValue().
- *
- * Example:
- *
- * compileStyleValue( 'var:preset|color|primary' ) // returns 'var(--wp--color-primary)'
- *
- * @param {string} uncompiledValue A block style value.
- * @return {string} The compiled, or original value.
- */
-export function compileStyleValue( uncompiledValue ) {
-	const VARIABLE_REFERENCE_PREFIX = 'var:';
-	if (
-		'string' === typeof uncompiledValue &&
-		uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX )
-	) {
-		const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-		const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
 /**
  * Looks up a theme file URI based on a relative path.
  *
@@ -591,7 +564,7 @@ export function getResolvedRefValue( ruleValue, tree ) {
 
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 		const refPath = ruleValue.ref.split( '.' );
-		const resolvedRuleValue = compileStyleValue(
+		const resolvedRuleValue = getCSSValueFromRawStyle(
 			getValueFromObjectPath( tree, refPath )
 		);
 
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index d393e427a63071..42928ac9fbd3c7 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Style engine: export util to compile CSS custom var from preset string. ([#64490](https://github.com/WordPress/gutenberg/pull/64490))
+
 ## 2.5.0 (2024-08-07)
 
 ## 2.4.0 (2024-07-24)
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 44b78eed8a81a6..14e8edbd0dec26 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -258,6 +258,22 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
+### getCSSValueFromRawStyle
+
+Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.
+
+Example:
+
+`getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+
+_Parameters_
+
+-   _styleValue_ `string | any`: A raw style value.
+
+_Returns_
+
+-   `string | unknown`: A CSS var value.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index fe5b9929877be7..102d5842e7a0be 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -91,3 +91,6 @@ export function getCSSRules(
 
 	return rules;
 }
+
+// Export style utils.
+export { getCSSValueFromRawStyle } from './styles/utils';
diff --git a/packages/style-engine/src/styles/test/utils.js b/packages/style-engine/src/styles/test/utils.js
new file mode 100644
index 00000000000000..02f0adf494e71f
--- /dev/null
+++ b/packages/style-engine/src/styles/test/utils.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../utils';
+
+describe( 'utils', () => {
+	describe( 'upperFirst()', () => {
+		it( 'should return an string with a capitalized first letter', () => {
+			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
+		} );
+	} );
+
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
+
+	describe( 'getCSSValueFromRawStyle()', () => {
+		it.each( [
+			[ 'min(40%, 400px)', 'min(40%, 400px)' ],
+			[
+				'var(--wp--preset--color--yellow-bun)',
+				'var:preset|color|yellow-bun',
+			],
+			[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
+			[
+				'var(--wp--preset--font-size--1-px)',
+				'var:preset|font-size|1px',
+			],
+			[
+				'var(--wp--preset--color--orange-11-orange)',
+				'var:preset|color|orange11orange',
+			],
+			[
+				'var(--wp--preset--color--heavenly-blue)',
+				'var:preset|color|heavenlyBlue',
+			],
+			[
+				'var(--wp--preset--background--dark-secrets-100)',
+				'var:preset|background|dark_Secrets_100',
+			],
+			[ null, null ],
+			[ false, false ],
+			[ 1000, 1000 ],
+			[ undefined, undefined ],
+		] )(
+			'should return %s using an incoming value of %s',
+			( expected, value ) => {
+				expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
+			}
+		);
+	} );
+} );
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 00e9dab8b5892b..0c9b40c384b101 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -61,7 +61,7 @@ export function generateRule(
 				{
 					selector: options?.selector,
 					key: ruleKey,
-					value: getCSSVarFromStyleValue( styleValue ),
+					value: getCSSValueFromRawStyle( styleValue ),
 				},
 		  ]
 		: [];
@@ -103,7 +103,7 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = getCSSVarFromStyleValue(
+				const value = getCSSValueFromRawStyle(
 					getStyleValueByPath( boxStyle, [ side ] )
 				);
 				if ( value ) {
@@ -127,13 +127,21 @@ export function generateBoxRules(
 }
 
 /**
- * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ * Returns a WordPress CSS custom var value from incoming style preset value.
+ * The preset value follows the pattern `var:description|context|slug`.
+ *
+ * Example:
+ *
+ * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
  *
  * @param styleValue A raw style value.
  *
- * @return string A CSS var value.
+ * @return A CSS var value.
  */
-export function getCSSVarFromStyleValue( styleValue: string ): string {
+
+export function getCSSValueFromRawStyle(
+	styleValue: string | any
+): string | unknown {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
deleted file mode 100644
index 9f1f84d2b45310..00000000000000
--- a/packages/style-engine/src/test/utils.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	camelCaseJoin,
-	getCSSVarFromStyleValue,
-	upperFirst,
-} from '../styles/utils';
-
-describe( 'utils', () => {
-	describe( 'upperFirst()', () => {
-		it( 'should return an string with a capitalized first letter', () => {
-			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
-		} );
-	} );
-
-	describe( 'camelCaseJoin()', () => {
-		it( 'should return a camelCase string', () => {
-			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
-		} );
-	} );
-
-	describe( 'getCSSVarFromStyleValue()', () => {
-		it( 'should return a compiled CSS var', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
-			).toEqual( 'var(--wp--preset--color--yellow-bun)' );
-		} );
-
-		it( 'should kebab case numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
-			).toEqual( 'var(--wp--preset--font-size--h-1)' );
-		} );
-
-		it( 'should kebab case numbers as prefix', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|1px' )
-			).toEqual( 'var(--wp--preset--font-size--1-px)' );
-		} );
-
-		it( 'should kebab case both sides of numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|orange11orange' )
-			).toEqual( 'var(--wp--preset--color--orange-11-orange)' );
-		} );
-
-		it( 'should kebab case camel case', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
-			).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
-		} );
-
-		it( 'should kebab case underscores', () => {
-			expect(
-				getCSSVarFromStyleValue(
-					'var:preset|background|dark_Secrets_100'
-				)
-			).toEqual( 'var(--wp--preset--background--dark-secrets-100)' );
-		} );
-	} );
-} );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 5b361836a8e375..8de623fcfcb2bf 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -94,7 +94,7 @@ export interface StyleOptions {
 
 export interface GeneratedCSSRule {
 	selector?: string;
-	value: string;
+	value: string | unknown;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
 	 * E.g. `paddingTop` instead of `padding-top`.

From de656233be92e37fd1a7fdb0e31cf87824f63776 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:18:30 +0700
Subject: [PATCH 124/205] List Item: Add border support (#63541)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 packages/block-library/src/list-item/block.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index fc7117d1b792fc..a4bf2351d97509 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -23,6 +23,12 @@
 		"anchor": true,
 		"className": false,
 		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -57,6 +63,7 @@
 		}
 	},
 	"selectors": {
-		"root": ".wp-block-list > li"
+		"root": ".wp-block-list > li",
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
 	}
 }

From e6057ce69fb2f743fb0c8a71494f56ff39f5a900 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:19:07 +0700
Subject: [PATCH 125/205] List: Add border support (#63540)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
---
 packages/block-library/src/list/block.json | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index 8b100071c15ea9..ea07a0eb542df3 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -39,6 +39,12 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -75,6 +81,9 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
+	},
 	"editorStyle": "wp-block-list-editor",
 	"style": "wp-block-list"
 }

From d669eb661c69af31816ead9359c5986cffcea301 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 15 Aug 2024 13:44:09 +1000
Subject: [PATCH 126/205] Background images: add support for theme.json ref
 value resolution (#64128)

Resolves refs before passing styles to style engine in the WP_Theme_JSON class. Consolidates all resolutions in the background panel (image and ref). Removes useGlobalStyleLinks completely. Delete theme URI utils.
Ensures that backgroundImage style objects are not merged, but replaced when merged theme.json configs. For example, an incoming config such as a saved user config should overwrite the background styles of the base theme.json, where it exists.

---------

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
---
 backport-changelog/6.7/7137.md                |   1 +
 lib/class-wp-theme-json-gutenberg.php         |  68 +++++---
 .../global-styles/background-panel.js         |  74 +++++---
 .../src/components/global-styles/hooks.js     |   5 -
 .../src/components/global-styles/index.js     |   1 -
 .../test/theme-file-uri-utils.js              |  41 -----
 .../test/use-global-styles-output.js          |  16 ++
 .../global-styles/theme-file-uri-utils.js     |  18 --
 .../src/components/global-styles/utils.js     |   5 +
 packages/block-editor/src/hooks/background.js |   9 +-
 .../global-styles/background-panel.js         |   3 -
 .../components/global-styles/screen-block.js  |   3 -
 .../global-styles-provider/index.js           |  19 ++-
 .../src/styles/background/index.ts            |  26 ++-
 phpunit/class-wp-theme-json-test.php          | 160 ++++++++++++++++++
 15 files changed, 313 insertions(+), 136 deletions(-)
 delete mode 100644 packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
 delete mode 100644 packages/block-editor/src/components/global-styles/theme-file-uri-utils.js

diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md
index 1eba52ebaf5087..00771b8bc6c21d 100644
--- a/backport-changelog/6.7/7137.md
+++ b/backport-changelog/6.7/7137.md
@@ -1,4 +1,5 @@
 https://github.com/WordPress/wordpress-develop/pull/7137
 
+* https://github.com/WordPress/gutenberg/pull/64128
 * https://github.com/WordPress/gutenberg/pull/64192
 * https://github.com/WordPress/gutenberg/pull/64328
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 20ea31090407b4..756ef06c80aa87 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2329,7 +2329,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * ```php
 	 * array(
 	 *   'name'  => 'property_name',
-	 *   'value' => 'property_value,
+	 *   'value' => 'property_value',
 	 * )
 	 * ```
 	 *
@@ -2338,6 +2338,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
 	 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
 	 * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). Using style engine to correctly fetch background CSS values.
+	 * @since 6.7.0 Allow ref resolution of background properties.
 	 *
 	 * @param array   $styles Styles to process.
 	 * @param array   $settings Theme settings.
@@ -2381,21 +2382,28 @@ protected static function compute_style_properties( $styles, $settings = array()
 				$root_variable_duplicates[] = substr( $css_property, $root_style_length );
 			}
 
-			// Processes background styles.
-			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
-				/*
-				 * For user-uploaded images at the block level, assign defaults.
-				 * Matches defaults applied in the editor and in block supports: background.php.
-				 */
-				if ( static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
-					$styles['background']['backgroundSize'] = $styles['background']['backgroundSize'] ?? 'cover';
-					// If the background size is set to `contain` and no position is set, set the position to `center`.
-					if ( 'contain' === $styles['background']['backgroundSize'] && empty( $styles['background']['backgroundPosition'] ) ) {
-						$styles['background']['backgroundPosition'] = '50% 50%';
-					}
+			/*
+			 * Processes background image styles.
+			 * If the value is a URL, it will be converted to a CSS `url()` value.
+			 * For an uploaded image (images with a database ID), apply size and position
+			 * defaults equal to those applied in block supports in lib/background.php.
+			 */
+			if ( 'background-image' === $css_property && ! empty( $value ) ) {
+				$background_styles = gutenberg_style_engine_get_styles(
+					array( 'background' => array( 'backgroundImage' => $value ) )
+				);
+
+				$value = $background_styles['declarations'][ $css_property ];
+			}
+			if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
+				if ( 'background-size' === $css_property ) {
+					$value = 'cover';
+				}
+				// If the background size is set to `contain` and no position is set, set the position to `center`.
+				if ( 'background-position' === $css_property ) {
+					$background_size = $styles['background']['backgroundSize'] ?? null;
+					$value           = 'contain' === $background_size ? '50% 50%' : null;
 				}
-				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
-				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}
 
 			// Skip if empty and not "0" or value represents array of longhand values.
@@ -2463,6 +2471,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 	 * @since 5.8.0
 	 * @since 5.9.0 Added support for values of array type, which are returned as is.
 	 * @since 6.1.0 Added the `$theme_json` parameter.
+	 * @since 6.7.0 Added support for background image refs
 	 *
 	 * @param array $styles Styles subtree.
 	 * @param array $path   Which property to process.
@@ -2479,15 +2488,17 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 		}
 
 		/*
-		 * This converts references to a path to the value at that path
-		 * where the values is an array with a "ref" key, pointing to a path.
+		 * Where the current value is an array with a 'ref' key pointing
+		 * to a path, this converts that path into the value at that path.
 		 * For example: { "ref": "style.color.background" } => "#fff".
 		 */
 		if ( is_array( $value ) && isset( $value['ref'] ) ) {
 			$value_path = explode( '.', $value['ref'] );
-			$ref_value  = _wp_array_get( $theme_json, $value_path );
+			$ref_value  = _wp_array_get( $theme_json, $value_path, null );
+			// Background Image refs can refer to a string or an array containing a URL string.
+			$ref_value_url = $ref_value['url'] ?? null;
 			// Only use the ref value if we find anything.
-			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+			if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
 				$value = $ref_value;
 			}
 
@@ -3247,6 +3258,25 @@ public function merge( $incoming ) {
 				}
 			}
 		}
+
+		/*
+		 * Style values are merged at the leaf level, however
+		 * some values provide exceptions, namely style values that are
+		 * objects and represent unique definitions for the style.
+		 */
+		$style_nodes = static::get_styles_block_nodes();
+		foreach ( $style_nodes as $style_node ) {
+			$path = $style_node['path'];
+			/*
+			 * Background image styles should be replaced, not merged,
+			 * as they themselves are specific object definitions for the style.
+			 */
+			$background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
+			$content               = _wp_array_get( $incoming_data, $background_image_path, null );
+			if ( isset( $content ) ) {
+				_wp_array_set( $this->theme_json, $background_image_path, $content );
+			}
+		}
 	}
 
 	/**
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 14b37bb3007658..1373c54764d155 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -34,6 +34,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
@@ -42,11 +43,15 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps, getResolvedValue } from './utils';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
-import { getResolvedThemeFilePath } from './theme-file-uri-utils';
+
+import {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+} from '../../store/private-keys';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
@@ -270,7 +275,6 @@ function BackgroundImageControls( {
 	onRemoveImage = noop,
 	onResetImage = noop,
 	displayInPanel,
-	themeFileURIs,
 	defaultValues,
 } ) {
 	const mediaUpload = useSelect(
@@ -404,10 +408,7 @@ function BackgroundImageControls( {
 				name={
 					<InspectorImagePreviewItem
 						className="block-editor-global-styles-background-panel__image-preview"
-						imgUrl={ getResolvedThemeFilePath(
-							url,
-							themeFileURIs
-						) }
+						imgUrl={ url }
 						filename={ title }
 						label={ imgLabel }
 					/>
@@ -449,7 +450,6 @@ function BackgroundSizeControls( {
 	style,
 	inheritedValue,
 	defaultValues,
-	themeFileURIs,
 } ) {
 	const sizeValue =
 		style?.background?.backgroundSize ||
@@ -587,7 +587,7 @@ function BackgroundSizeControls( {
 			<FocalPointPicker
 				__nextHasNoMarginBottom
 				label={ __( 'Focal point' ) }
-				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
+				url={ imageValue }
 				value={ backgroundPositionToCoords( backgroundPositionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
@@ -697,8 +697,44 @@ export default function BackgroundPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
 	headerLabel = __( 'Background image' ),
-	themeFileURIs,
 } ) {
+	/*
+	 * Resolve any inherited "ref" pointers.
+	 * Should the block editor need resolved, inherited values
+	 * across all controls, this could be abstracted into a hook,
+	 * e.g., useResolveGlobalStyle
+	 */
+	const { globalStyles, _links } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const _settings = getSettings();
+		return {
+			globalStyles: _settings[ globalStylesDataKey ],
+			_links: _settings[ globalStylesLinksDataKey ],
+		};
+	}, [] );
+	const resolvedInheritedValue = useMemo( () => {
+		const resolvedValues = {
+			background: {},
+		};
+
+		if ( ! inheritedValue?.background ) {
+			return inheritedValue;
+		}
+
+		Object.entries( inheritedValue?.background ).forEach(
+			( [ key, backgroundValue ] ) => {
+				resolvedValues.background[ key ] = getResolvedValue(
+					backgroundValue,
+					{
+						styles: globalStyles,
+						_links,
+					}
+				);
+			}
+		);
+		return resolvedValues;
+	}, [ globalStyles, _links, inheritedValue ] );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -710,11 +746,11 @@ export default function BackgroundPanel( {
 		onChange( setImmutably( value, [ 'background' ], {} ) );
 
 	const { title, url } = value?.background?.backgroundImage || {
-		...inheritedValue?.background?.backgroundImage,
+		...resolvedInheritedValue?.background?.backgroundImage,
 	};
 	const hasImageValue =
 		hasBackgroundImageValue( value ) ||
-		hasBackgroundImageValue( inheritedValue );
+		hasBackgroundImageValue( resolvedInheritedValue );
 
 	const imageValue =
 		value?.background?.backgroundImage ||
@@ -756,10 +792,7 @@ export default function BackgroundPanel( {
 						<BackgroundControlsPanel
 							label={ title }
 							filename={ title }
-							url={ getResolvedThemeFilePath(
-								url,
-								themeFileURIs
-							) }
+							url={ url }
 							onToggle={ setIsDropDownOpen }
 							hasImageValue={ hasImageValue }
 						>
@@ -767,8 +800,7 @@ export default function BackgroundPanel( {
 								<BackgroundImageControls
 									onChange={ onChange }
 									style={ value }
-									inheritedValue={ inheritedValue }
-									themeFileURIs={ themeFileURIs }
+									inheritedValue={ resolvedInheritedValue }
 									displayInPanel
 									onResetImage={ () => {
 										setIsDropDownOpen( false );
@@ -784,8 +816,7 @@ export default function BackgroundPanel( {
 									panelId={ panelId }
 									style={ value }
 									defaultValues={ defaultValues }
-									inheritedValue={ inheritedValue }
-									themeFileURIs={ themeFileURIs }
+									inheritedValue={ resolvedInheritedValue }
 								/>
 							</VStack>
 						</BackgroundControlsPanel>
@@ -793,8 +824,7 @@ export default function BackgroundPanel( {
 						<BackgroundImageControls
 							onChange={ onChange }
 							style={ value }
-							inheritedValue={ inheritedValue }
-							themeFileURIs={ themeFileURIs }
+							inheritedValue={ resolvedInheritedValue }
 							defaultValues={ defaultValues }
 							onResetImage={ () => {
 								setIsDropDownOpen( false );
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index a1a4fc1a0a6ae1..2be77aec18a2c6 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -209,11 +209,6 @@ export function useGlobalStyle(
 	return [ result, setStyle ];
 }
 
-export function useGlobalStyleLinks() {
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return mergedConfig?._links;
-}
-
 /**
  * React hook that overrides a global settings object with block and element specific settings.
  *
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 062df0a5606e90..8096a48569f199 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -3,7 +3,6 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
-	useGlobalStyleLinks,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {
diff --git a/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js b/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
deleted file mode 100644
index e239bb0941ea9e..00000000000000
--- a/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getResolvedThemeFilePath } from '../theme-file-uri-utils';
-
-const themeFileURIs = [
-	{
-		name: 'file:./assets/image.jpg',
-		href: 'https://wordpress.org/assets/image.jpg',
-		target: 'styles.background.backgroundImage.url',
-	},
-	{
-		name: 'file:./assets/other/image.jpg',
-		href: 'https://wordpress.org/assets/other/image.jpg',
-		target: "styles.blocks.['core/group].background.backgroundImage.url",
-	},
-];
-
-describe( 'getResolvedThemeFilePath()', () => {
-	it.each( [
-		[
-			'file:./assets/image.jpg',
-			'https://wordpress.org/assets/image.jpg',
-			'Should return absolute URL if found in themeFileURIs',
-		],
-		[
-			'file:./misc/image.jpg',
-			'file:./misc/image.jpg',
-			'Should return value if not found in themeFileURIs',
-		],
-		[
-			'https://wordpress.org/assets/image.jpg',
-			'https://wordpress.org/assets/image.jpg',
-			'Should not match absolute URLs',
-		],
-	] )( 'Given file %s and return value %s: %s', ( file, returnedValue ) => {
-		expect(
-			getResolvedThemeFilePath( file, themeFileURIs ) === returnedValue
-		).toBe( true );
-	} );
-} );
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 1b061f6921f2c2..5022e8ba591dbb 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -1008,9 +1008,23 @@ describe( 'global styles renderer', () => {
 						ref: 'styles.elements.h1.typography.letterSpacing',
 					},
 				},
+				background: {
+					backgroundImage: {
+						ref: 'styles.background.backgroundImage',
+					},
+					backgroundSize: {
+						ref: 'styles.background.backgroundSize',
+					},
+				},
 			};
 			const tree = {
 				styles: {
+					background: {
+						backgroundImage: {
+							url: 'http://my-image.org/image.gif',
+						},
+						backgroundSize: 'cover',
+					},
 					elements: {
 						h1: {
 							typography: {
@@ -1026,6 +1040,8 @@ describe( 'global styles renderer', () => {
 			).toEqual( [
 				'font-size: var(--wp--preset--font-size--xx-large)',
 				'letter-spacing: 2px',
+				"background-image: url( 'http://my-image.org/image.gif' )",
+				'background-size: cover',
 			] );
 		} );
 		it( 'should set default values for block background styles', () => {
diff --git a/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js b/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js
deleted file mode 100644
index 96b3e2e4cb68b0..00000000000000
--- a/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Looks up a theme file URI based on a relative path.
- *
- * @param {string}        file          A relative path.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {string?} A resolved theme file URI, if one is found in the themeFileURIs collection.
- */
-export function getResolvedThemeFilePath( file, themeFileURIs = [] ) {
-	const uri = themeFileURIs.find(
-		( themeFileUri ) => themeFileUri.name === file
-	);
-
-	if ( ! uri?.href ) {
-		return file;
-	}
-
-	return uri?.href;
-}
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index 4cd93357b081b3..59799c9032c67f 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -562,6 +562,11 @@ export function getResolvedRefValue( ruleValue, tree ) {
 		return ruleValue;
 	}
 
+	/*
+	 * Where the rule value is an object with a 'ref' property pointing
+	 * to a path, this converts that path into the value at that path.
+	 * For example: { "ref": "style.color.background" } => "#fff".
+	 */
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 		const refPath = ruleValue.ref.split( '.' );
 		const resolvedRuleValue = getCSSValueFromRawStyle(
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 0d38068cdefeea..3755aecbcb9d0b 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -16,10 +16,7 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
-import {
-	globalStylesDataKey,
-	globalStylesLinksDataKey,
-} from '../store/private-keys';
+import { globalStylesDataKey } from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -136,14 +133,13 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const { style, inheritedValue, _links } = useSelect(
+	const { style, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
 				select( blockEditorStore );
 			const _settings = getSettings();
 			return {
 				style: getBlockAttributes( clientId )?.style,
-				_links: _settings[ globalStylesLinksDataKey ],
 				/*
 				 * To ensure we pass down the right inherited values:
 				 * @TODO 1. Pass inherited value down to all block style controls,
@@ -190,7 +186,6 @@ export function BackgroundImagePanel( {
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index 24ab914bed8c52..e185079d8cee04 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -16,7 +16,6 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -42,7 +41,6 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	return (
@@ -52,7 +50,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index dee921f37f1e8a..b1489167f2dc75 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -85,7 +85,6 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
-	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -105,7 +104,6 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
-	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -272,7 +270,6 @@ function ScreenBlock( { name, variation } ) {
 					onChange={ setStyle }
 					settings={ settings }
 					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 				/>
 			) }
 			{ hasTypographyPanel && (
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 8ac292fb2ce0b2..8426593d8f5f51 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -23,10 +23,23 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock(
 
 export function mergeBaseAndUserConfigs( base, user ) {
 	return deepmerge( base, user, {
-		// We only pass as arrays the presets,
-		// in which case we want the new array of values
-		// to override the old array (no merging).
+		/*
+		 * We only pass as arrays the presets,
+		 * in which case we want the new array of values
+		 * to override the old array (no merging).
+		 */
 		isMergeableObject: isPlainObject,
+		/*
+		 * Exceptions to the above rule.
+		 * Background images should be replaced, not merged,
+		 * as they themselves are specific object definitions for the style.
+		 */
+		customMerge: ( key ) => {
+			if ( key === 'backgroundImage' ) {
+				return ( baseConfig, userConfig ) => userConfig;
+			}
+			return undefined;
+		},
 	} );
 }
 
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 211b97343d89cc..b943032f9c4417 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -8,6 +8,12 @@ const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
 		const _backgroundImage = style?.background?.backgroundImage;
+
+		/*
+		 * The background image can be a string or an object.
+		 * If the background image is a string, it could already contain a url() function,
+		 * or have a linear-gradient value.
+		 */
 		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
 			return [
 				{
@@ -21,20 +27,12 @@ const backgroundImage = {
 			];
 		}
 
-		/*
-		 * If the background image is a string, it could already contain a url() function,
-		 * or have a linear-gradient value.
-		 */
-		if ( typeof _backgroundImage === 'string' ) {
-			return generateRule(
-				style,
-				options,
-				[ 'background', 'backgroundImage' ],
-				'backgroundImage'
-			);
-		}
-
-		return [];
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundImage' ],
+			'backgroundImage'
+		);
 	},
 };
 
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 3f11dd97a6688f..10bb47b87fba89 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -2294,6 +2294,112 @@ public function test_merge_incoming_data_presets_use_default_names() {
 		$this->assertSameSetsWithIndex( $expected, $actual );
 	}
 
+	public function test_merge_incoming_background_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'http://example.org/quote.png',
+						),
+						'backgroundSize'  => 'cover',
+					),
+					'blocks'     => array(
+						'core/group' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'ref' => 'styles.blocks.core/verse.background.backgroundImage',
+								),
+								'backgroundAttachment' => 'fixed',
+							),
+						),
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'url' => 'http://example.org/quote.png',
+								),
+								'backgroundAttachment' => array(
+									'ref' => 'styles.blocks.core/group.background.backgroundAttachment',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$update_background_image_styles = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundSize' => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'url' => 'http://example.org/group.png',
+							),
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$expected                       = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'http://example.org/quote.png',
+					),
+					'backgroundSize'  => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/group.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/quote.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_background_image_styles ) );
+		$actual = $theme_json->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
 	public function test_remove_insecure_properties_removes_unsafe_styles() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
@@ -4915,6 +5021,60 @@ public function test_get_block_background_image_styles() {
 		$this->assertSameCSS( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations' );
 	}
 
+	/**
+	 * Testing background dynamic properties in theme.json.
+	 */
+	public function test_get_resolved_background_image_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage'      => array(
+							'url' => 'http://example.org/top.png',
+						),
+						'backgroundSize'       => 'contain',
+						'backgroundRepeat'     => 'repeat',
+						'backgroundPosition'   => '10% 20%',
+						'backgroundAttachment' => 'scroll',
+					),
+					'blocks'     => array(
+						'core/group'        => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'id'  => 123,
+									'url' => 'http://example.org/group.png',
+								),
+							),
+						),
+						'core/post-content' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'ref' => 'styles.background.backgroundImage',
+								),
+								'backgroundSize'       => array(
+									'ref' => 'styles.background.backgroundSize',
+								),
+								'backgroundRepeat'     => array(
+									'ref' => 'styles.background.backgroundRepeat',
+								),
+								'backgroundPosition'   => array(
+									'ref' => 'styles.background.backgroundPosition',
+								),
+								'backgroundAttachment' => array(
+									'ref' => 'styles.background.backgroundAttachment',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}:root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-size: cover;}:root :where(.wp-block-post-content){background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}";
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
 	/**
 	 * Tests that base custom CSS is generated correctly.
 	 */

From c8eaf5c0c4f4d0bc07fb39626ae3268bd83fbcfe Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 15 Aug 2024 11:49:14 +0800
Subject: [PATCH 127/205] Components: Allow `style` prop on `Popover` (#64489)

* Allow style prop on popover

* Ensure styles are not overwritten by popoverProps

* Add tests and fix overriding of built-in popover styles

* Update comment

* Remove blank line

* Un-should tests

* Update test to use `not.toHaveStyle

* Add changelog entry

* Remove `style` from types file

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  2 ++
 packages/components/src/popover/index.tsx     | 12 +++++--
 .../components/src/popover/test/index.tsx     | 34 +++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f7b7bdc088cee9..e758e457bdd03e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -27,6 +27,8 @@
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 -   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
+-   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
+
 
 ### Bug Fixes
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 68d331ce8266ba..3005f13c952ec0 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -113,8 +113,9 @@ const UnforwardedPopover = (
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
 		// expected by `framer-motion`, omit all framer motion props from popover
-		// props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
-		keyof Omit< MotionProps, 'animate' | 'children' >
+		// props (except for `animate` and `children` which are re-defined in
+		// `PopoverProps`, and `style` which is merged safely).
+		keyof Omit< MotionProps, 'animate' | 'children' | 'style' >
 	>,
 	forwardedRef: ForwardedRef< any >
 ) => {
@@ -139,6 +140,7 @@ const UnforwardedPopover = (
 		shift = false,
 		inline = false,
 		variant,
+		style: contentStyle,
 
 		// Deprecated props
 		__unstableForcePosition,
@@ -370,6 +372,7 @@ const UnforwardedPopover = (
 	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
 		? {
 				style: {
+					...contentStyle,
 					...motionInlineStyles,
 					...style,
 				},
@@ -378,7 +381,10 @@ const UnforwardedPopover = (
 		  }
 		: {
 				animate: false,
-				style,
+				style: {
+					...contentStyle,
+					...style,
+				},
 		  };
 
 	// When Floating UI has finished positioning and Framer Motion has finished animating
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index f5ee7e96e4c54d..eac0f942df2f6e 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -179,6 +179,40 @@ describe( 'Popover', () => {
 			} );
 		} );
 
+		describe( 'style', () => {
+			it( 'outputs inline styles added through the style prop in addition to built-in popover positioning styles', async () => {
+				render(
+					<Popover
+						style={ { zIndex: 0 } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).toHaveStyle(
+					'position: absolute; top: 0px; left: 0px; z-index: 0;'
+				);
+			} );
+
+			it( 'is not possible to override built-in popover positioning styles via the style prop', async () => {
+				render(
+					<Popover
+						style={ { position: 'static' } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).not.toHaveStyle( 'position: static;' );
+			} );
+		} );
+
 		describe( 'focus behavior', () => {
 			it( 'should focus the popover container when opened', async () => {
 				render(

From 9a9186cd09424a91e3cf59288e2290d6d6867f73 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Thu, 15 Aug 2024 10:25:18 +0530
Subject: [PATCH 128/205] Comment Content: Add Border Support (#64230)

* Commtent Content: Add Border Support

* fixed lint issue

* Commtent Content: Add Border Support

* Added style at root level

* fixed lint issue

* Added Border box in Editor Side

* Added suggested changes

* Fixed Conflict Issue

* Removed Duplicate css

* remove editor style

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../block-library/src/comment-content/block.json  | 15 ++++++++++++++-
 .../block-library/src/comment-content/style.scss  |  5 +++++
 packages/block-library/src/style.scss             |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/comment-content/block.json b/packages/block-library/src/comment-content/block.json
index 9ac4b5453365bb..0e812299a45e89 100644
--- a/packages/block-library/src/comment-content/block.json
+++ b/packages/block-library/src/comment-content/block.json
@@ -35,6 +35,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"spacing": {
 			"padding": [ "horizontal", "vertical" ],
 			"__experimentalDefaultControls": {
@@ -42,5 +54,6 @@
 			}
 		},
 		"html": false
-	}
+	},
+	"style": "wp-block-comment-content"
 }
diff --git a/packages/block-library/src/comment-content/style.scss b/packages/block-library/src/comment-content/style.scss
index dd9c4b22ae99c1..a94048de6014d3 100644
--- a/packages/block-library/src/comment-content/style.scss
+++ b/packages/block-library/src/comment-content/style.scss
@@ -3,3 +3,8 @@
 	font-size: 0.875em;
 	line-height: 1.5;
 }
+
+.wp-block-comment-content {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index df1337d7eb25c0..86fe5a3eefabaf 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -11,6 +11,7 @@
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./comment-date/style.scss";
+@import "./comment-content/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
 @import "./embed/style.scss";

From 38c233fef036073ce4aded4ae9f5ea3b43a45d48 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 15 Aug 2024 16:12:15 +1000
Subject: [PATCH 129/205] Style engine: update type for getCSSValueFromRawStyle
 (#64528)

* Use a generic type parameter StyleValue to describe argument and return value. By default, StyleValue is set to string. This allows the function to be flexible with the type of styleValue, but it defaults to handling strings.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
---
 packages/style-engine/README.md           |  8 +++++---
 packages/style-engine/src/styles/utils.ts | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 14e8edbd0dec26..a3e302fab4bb9a 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -260,7 +260,9 @@ _Changelog_
 
 ### getCSSValueFromRawStyle
 
-Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.
+Returns a WordPress CSS custom var value from incoming style preset value, if one is detected.
+
+The preset value is a string and follows the pattern `var:description|context|slug`.
 
 Example:
 
@@ -268,11 +270,11 @@ Example:
 
 _Parameters_
 
--   _styleValue_ `string | any`: A raw style value.
+-   _styleValue_ `StyleValue`: A string representing a raw CSS value. Non-strings won't be processed.
 
 _Returns_
 
--   `string | unknown`: A CSS var value.
+-   `StyleValue`: A CSS custom var value if the incoming style value is a preset value.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 0c9b40c384b101..74a18d2c2a6e45 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -127,21 +127,23 @@ export function generateBoxRules(
 }
 
 /**
- * Returns a WordPress CSS custom var value from incoming style preset value.
- * The preset value follows the pattern `var:description|context|slug`.
+ * Returns a WordPress CSS custom var value from incoming style preset value,
+ * if one is detected.
+ *
+ * The preset value is a string and follows the pattern `var:description|context|slug`.
  *
  * Example:
  *
  * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
  *
- * @param styleValue A raw style value.
+ * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.
  *
- * @return A CSS var value.
+ * @return A CSS custom var value if the incoming style value is a preset value.
  */
 
-export function getCSSValueFromRawStyle(
-	styleValue: string | any
-): string | unknown {
+export function getCSSValueFromRawStyle< StyleValue = string >(
+	styleValue: StyleValue
+): StyleValue {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
@@ -160,7 +162,7 @@ export function getCSSValueFromRawStyle(
 				} )
 			)
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
+		return `var(--wp--${ variable })` as StyleValue;
 	}
 	return styleValue;
 }

From 8fc4c29ef51b1e0dd07000ee4374116a7bad3b71 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 15 Aug 2024 16:18:53 +1000
Subject: [PATCH 130/205] GridPopover: Avoid over-selecting by using a new
 getBlockStyles private selector (#64386)

* Add getBlockStyles selector so avoid over-selecting in GridPopover

* Will an empty commit make the tests run?
---
 .../src/components/grid/grid-visualizer.js    | 17 ++--
 .../src/store/private-selectors.js            | 21 +++++
 .../src/store/test/private-selectors.js       | 89 +++++++++++++++++++
 3 files changed, 122 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
index fad2f5cfb14835..81da0457ffc5ca 100644
--- a/packages/block-editor/src/components/grid/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -19,6 +19,7 @@ import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
 import ButtonBlockAppender from '../button-block-appender';
+import { unlock } from '../../lock-unlock';
 
 export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	const isDistractionFree = useSelect(
@@ -118,19 +119,25 @@ const GridVisualizerGrid = forwardRef(
 function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 	const [ highlightedRect, setHighlightedRect ] = useState( null );
 
-	const gridItems = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
+	const gridItemStyles = useSelect(
+		( select ) => {
+			const { getBlockOrder, getBlockStyles } = unlock(
+				select( blockEditorStore )
+			);
+			const blockOrder = getBlockOrder( gridClientId );
+			return getBlockStyles( blockOrder );
+		},
 		[ gridClientId ]
 	);
 	const occupiedRects = useMemo( () => {
 		const rects = [];
-		for ( const block of gridItems ) {
+		for ( const style of Object.values( gridItemStyles ) ) {
 			const {
 				columnStart,
 				rowStart,
 				columnSpan = 1,
 				rowSpan = 1,
-			} = block.attributes.style?.layout || {};
+			} = style?.layout ?? {};
 			if ( ! columnStart || ! rowStart ) {
 				continue;
 			}
@@ -144,7 +151,7 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 			);
 		}
 		return rects;
-	}, [ gridItems ] );
+	}, [ gridItemStyles ] );
 
 	return range( 1, gridInfo.numRows ).map( ( row ) =>
 		range( 1, gridInfo.numColumns ).map( ( column ) => {
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index dcd315a0ae2804..7f0a4c58ab6747 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -515,3 +515,24 @@ export function getTemporarilyEditingFocusModeToRevert( state ) {
 export function getInserterSearchInputRef( state ) {
 	return state.inserterSearchInputRef;
 }
+
+/**
+ * Returns the style attributes of multiple blocks.
+ *
+ * @param {Object}   state     Global application state.
+ * @param {string[]} clientIds An array of block client IDs.
+ *
+ * @return {Object} An object where keys are client IDs and values are the corresponding block styles or undefined.
+ */
+export const getBlockStyles = createSelector(
+	( state, clientIds ) =>
+		clientIds.reduce( ( styles, clientId ) => {
+			styles[ clientId ] = state.blocks.attributes.get( clientId )?.style;
+			return styles;
+		}, {} ),
+	( state, clientIds ) => [
+		...clientIds.map(
+			( clientId ) => state.blocks.attributes.get( clientId )?.style
+		),
+	]
+);
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
index 185da1ffb98046..45432b750bb9eb 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -9,6 +9,7 @@ import {
 	getEnabledBlockParents,
 	getExpandedBlock,
 	isDragging,
+	getBlockStyles,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 
@@ -509,4 +510,92 @@ describe( 'private selectors', () => {
 			);
 		} );
 	} );
+
+	describe( 'getBlockStyles', () => {
+		it( 'should return an empty object when no client IDs are provided', () => {
+			const state = {
+				blocks: {
+					attributes: new Map(),
+				},
+			};
+			const result = getBlockStyles( state, [] );
+			expect( result ).toEqual( {} );
+		} );
+
+		it( 'should return styles for a single block', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [ 'block-1' ] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+			} );
+		} );
+
+		it( 'should return styles for multiple blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', { style: { fontSize: '16px' } } ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': { fontSize: '16px' },
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for blocks without styles', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', {} ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': undefined,
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for non-existent blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'non-existent-block',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'non-existent-block': undefined,
+			} );
+		} );
+	} );
 } );

From 1dfcd70549bacd2ec26623d4ecf62559ff40b72c Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 15 Aug 2024 09:28:46 +0200
Subject: [PATCH 131/205] Paste: fix blob uploading (#64479)

---
 packages/block-library/src/image/transforms.js | 8 +++++++-
 packages/block-library/src/video/transforms.js | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js
index fda29a2ca2530a..0e1dfb6ee9da44 100644
--- a/packages/block-library/src/image/transforms.js
+++ b/packages/block-library/src/image/transforms.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -123,6 +123,12 @@ const transforms = {
 						anchor,
 					}
 				);
+
+				if ( isBlobURL( attributes.url ) ) {
+					attributes.blob = attributes.url;
+					delete attributes.url;
+				}
+
 				return createBlock( 'core/image', attributes );
 			},
 		},
diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js
index c1bbb3431aaf37..4325cd1e7e7e9d 100644
--- a/packages/block-library/src/video/transforms.js
+++ b/packages/block-library/src/video/transforms.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
@@ -92,6 +92,10 @@ const transforms = {
 					poster: videoElement.getAttribute( 'poster' ) || undefined,
 					src: videoElement.getAttribute( 'src' ) || undefined,
 				};
+				if ( isBlobURL( attributes.src ) ) {
+					attributes.blob = attributes.src;
+					delete attributes.src;
+				}
 				return createBlock( 'core/video', attributes );
 			},
 		},

From f5f0c67ca561da46fe5430df75c4beffc8b1ce8d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 15 Aug 2024 10:04:12 +0100
Subject: [PATCH 132/205] Add private isZoomOutMode selector (#64503)

---
 packages/block-editor/src/store/private-selectors.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 7f0a4c58ab6747..58479d69cbfbe7 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -536,3 +536,14 @@ export const getBlockStyles = createSelector(
 		),
 	]
 );
+
+/**
+ * Returns whether zoom out mode is enabled.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {boolean} Is zoom out mode enabled.
+ */
+export function isZoomOutMode( state ) {
+	return state.editorMode === 'zoom-out';
+}

From 8fc3df806a7e3494937477155fad18f92fdb9538 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Thu, 15 Aug 2024 14:53:48 +0530
Subject: [PATCH 133/205] Post Author Name: Add Border Support (#64530)

* Post Author Name: Border Support

* Post Author Name: Border Support

* Keep Spacing Controle bydefault

* Added Border Control Display By Default

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../block-library/src/post-author-name/block.json | 15 ++++++++++++++-
 .../block-library/src/post-author-name/style.scss |  4 ++++
 packages/block-library/src/style.scss             |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/post-author-name/style.scss

diff --git a/packages/block-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json
index 31874ddbf9bc5d..68d2c49bd91056 100644
--- a/packages/block-library/src/post-author-name/block.json
+++ b/packages/block-library/src/post-author-name/block.json
@@ -53,6 +53,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-name"
 }
diff --git a/packages/block-library/src/post-author-name/style.scss b/packages/block-library/src/post-author-name/style.scss
new file mode 100644
index 00000000000000..0f57b30490fa68
--- /dev/null
+++ b/packages/block-library/src/post-author-name/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-author-name {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 86fe5a3eefabaf..338753ae53fcbf 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -40,6 +40,7 @@
 @import "./post-terms/style.scss";
 @import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
+@import "./post-author-name/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";

From 787895eb794432803d45f88c4da9addb7bda0202 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Thu, 15 Aug 2024 16:18:23 +0530
Subject: [PATCH 134/205] Updated small typo in compat.php file (#64535)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 lib/compat/wordpress-6.7/compat.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.7/compat.php b/lib/compat/wordpress-6.7/compat.php
index 7021cab2053eff..edc8e3fa5fb03f 100644
--- a/lib/compat/wordpress-6.7/compat.php
+++ b/lib/compat/wordpress-6.7/compat.php
@@ -64,7 +64,7 @@ function ( $registered_template ) use ( $template_files ) {
  * Hooks into `get_block_template` to add the `plugin` property when necessary.
  *
  * @param [WP_Block_Template|null] $block_template The found block template, or null if there isn’t one.
- * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was reigstered by a plugin.
+ * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was registered by a plugin.
  */
 function _gutenberg_add_block_template_plugin_attribute( $block_template ) {
 	if ( $block_template ) {

From cdbd5829e24459f9f2e23132ae46824ec1571c85 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 15 Aug 2024 20:10:38 +0900
Subject: [PATCH 135/205] ToggleGroupControl: Add lint rule for 40px size prop
 usage (#64524)

* Fix in blocks

* Fix in Navigation block

* Fix in Comments Pagination block

* Fix in Grid layout

* Fix in Flex layout

* Fix in Constrained layout (e.g. Group block)

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                                | 1 +
 packages/block-editor/src/layouts/constrained.js            | 1 +
 packages/block-editor/src/layouts/flex.js                   | 2 ++
 packages/block-editor/src/layouts/grid.js                   | 1 +
 .../comments-pagination-arrow-controls.js                   | 1 +
 packages/block-library/src/navigation/edit/index.js         | 6 +++---
 .../src/navigation/edit/overlay-menu-preview.js             | 2 ++
 packages/block-library/src/navigation/editor.scss           | 5 +++++
 .../src/post-featured-image/dimension-controls.js           | 1 +
 packages/block-library/src/post-navigation-link/edit.js     | 1 +
 .../src/query-pagination/query-pagination-arrow-controls.js | 1 +
 11 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index eb2d2db47e4cab..94b443853e0a81 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -315,6 +315,7 @@ module.exports = {
 						'BorderControl',
 						'DimensionControl',
 						'FontSizePicker',
+						'ToggleGroupControl',
 					].map( ( componentName ) => ( {
 						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
 						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`,
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 2e671e8e53975a..b48e331792bd8a 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -125,6 +125,7 @@ export default {
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Justification' ) }
 						value={ justifyContent }
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 72beca11b3f0c9..afefc2d5f103a3 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -325,6 +325,7 @@ function FlexLayoutJustifyContentControl( {
 
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
@@ -370,6 +371,7 @@ function OrientationControl( { layout, onChange } ) {
 	} = layout;
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index 395d0ca1e9d833..c574ad0ae43d5d 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -449,6 +449,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Grid item position' ) }
 			value={ gridPlacement }
diff --git a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
index ac3c17a2c4e721..c3a2d1dae648a5 100644
--- a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
+++ b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
@@ -10,6 +10,7 @@ import {
 export function CommentsPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 829c6395e047ef..12b052d28fc72e 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -626,10 +626,11 @@ function Navigation( {
 								</div>
 							</>
 						) }
-						<h3>{ __( 'Overlay Menu' ) }</h3>
 						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Configure overlay menu' ) }
+							label={ __( 'Overlay Menu' ) }
+							aria-label={ __( 'Configure overlay menu' ) }
 							value={ overlayMenu }
 							help={ __(
 								'Collapses the navigation options in a menu icon opening an overlay.'
@@ -638,7 +639,6 @@ function Navigation( {
 								setAttributes( { overlayMenu: value } )
 							}
 							isBlock
-							hideLabelFromVision
 						>
 							<ToggleGroupControlOption
 								value="never"
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
index 8ea07351821c89..cdd4d6e3263c98 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -27,7 +27,9 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 			/>
 
 			<ToggleGroupControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
+				className="wp-block-navigation__overlay-menu-icon-toggle-group"
 				label={ __( 'Icon' ) }
 				value={ icon }
 				onChange={ ( value ) => setAttributes( { icon: value } ) }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index b279dc08cfe6e7..24480bb1592516 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -628,3 +628,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation__menu-inspector-controls__empty-message {
 	margin-left: 24px;
 }
+
+.wp-block-navigation__overlay-menu-icon-toggle-group {
+	// Counteract the margin added by the block inspector.
+	margin-bottom: $grid-unit-20;
+}
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index c8e8c0005cfef5..4d272d3d8bb415 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -203,6 +203,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ scaleLabel }
 						value={ scale }
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index b181e677acae98..a3a3bf19749774 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -120,6 +120,7 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
index d5b3353a7187e7..0f2e9c1788bf7b 100644
--- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
+++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
@@ -10,6 +10,7 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }

From f4fe8d74d28ed2c0a7429963333d325073be5e27 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 15 Aug 2024 14:01:48 +0200
Subject: [PATCH 136/205] Fix: Changing sorting direction on patterns does
 nothing. (#64508)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/components/dataviews-view-config/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 0aae714c5ce27a..69b4cba7763262 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -140,7 +140,7 @@ function SortFieldControl() {
 }
 
 function SortDirectionControl() {
-	const { view, onChangeView } = useContext( DataViewsContext );
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	return (
 		<ToggleGroupControl
 			className="dataviews-view-config__sort-direction"
@@ -149,17 +149,19 @@ function SortDirectionControl() {
 			isBlock
 			label={ __( 'Order' ) }
 			value={ view.sort?.direction || 'desc' }
-			disabled={ ! view?.sort?.field }
 			onChange={ ( newDirection ) => {
-				if ( ! view?.sort?.field ) {
-					return;
-				}
 				if ( newDirection === 'asc' || newDirection === 'desc' ) {
 					onChangeView( {
 						...view,
 						sort: {
 							direction: newDirection,
-							field: view.sort.field,
+							field:
+								view.sort?.field ||
+								// If there is no field assigned as the sorting field assign the first sortable field.
+								fields.find(
+									( field ) => field.enableSorting !== false
+								)?.id ||
+								'',
 						},
 					} );
 					return;

From cb224d4a5a73ebe3d616d54d72a1590dbbdfc09f Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Thu, 15 Aug 2024 21:43:35 +0900
Subject: [PATCH 137/205] Quote Block: Add align support (#64188)

* Quote Block: Add align support

* Inherit alignment when transforming from pullquote block

* Inherit alignment when transforming to pullquote block

* Try to fix mobile unit test

* Try to fix mobile unit test

* Try to fix mobile unit test

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: geriux <geriux@git.wordpress.org>
---
 docs/reference-guides/core-blocks.md                |  2 +-
 packages/block-library/src/quote/block.json         |  1 +
 .../src/quote/test/transforms.native.js             |  2 +-
 packages/block-library/src/quote/transforms.js      | 13 +++++++++++--
 .../src/mobile/utils/alignments.native.js           |  1 +
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 5beb712c80a113..b9cae44550181c 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** citation, textAlign, value
 
 ## Read More
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index c695c938923ae7..0f9ec97422f64b 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -28,6 +28,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "left", "right", "wide", "full" ],
 		"html": false,
 		"background": {
 			"backgroundImage": true,
diff --git a/packages/block-library/src/quote/test/transforms.native.js b/packages/block-library/src/quote/test/transforms.native.js
index 25030e0a018d41..3d2bc8ae609182 100644
--- a/packages/block-library/src/quote/test/transforms.native.js
+++ b/packages/block-library/src/quote/test/transforms.native.js
@@ -14,7 +14,7 @@ import {
 
 const block = 'Quote';
 const initialHtml = `
-<!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
index f9b3970433fad6..c960759691bf16 100644
--- a/packages/block-library/src/quote/transforms.js
+++ b/packages/block-library/src/quote/transforms.js
@@ -9,10 +9,18 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor, fontSize, style } ) => {
+			transform: ( {
+				value,
+				align,
+				citation,
+				anchor,
+				fontSize,
+				style,
+			} ) => {
 				return createBlock(
 					'core/quote',
 					{
+						align,
 						citation,
 						anchor,
 						fontSize,
@@ -95,7 +103,7 @@ const transforms = {
 				);
 			},
 			transform: (
-				{ citation, anchor, fontSize, style },
+				{ align, citation, anchor, fontSize, style },
 				innerBlocks
 			) => {
 				const value = innerBlocks
@@ -103,6 +111,7 @@ const transforms = {
 					.join( '<br>' );
 				return createBlock( 'core/pullquote', {
 					value,
+					align,
 					citation,
 					anchor,
 					fontSize,
diff --git a/packages/components/src/mobile/utils/alignments.native.js b/packages/components/src/mobile/utils/alignments.native.js
index bc42385988a5d1..f1f737d7ed367a 100644
--- a/packages/components/src/mobile/utils/alignments.native.js
+++ b/packages/components/src/mobile/utils/alignments.native.js
@@ -13,6 +13,7 @@ export const WIDE_ALIGNMENTS = {
 		'core/image',
 		'core/separator',
 		'core/media-text',
+		'core/quote',
 		'core/pullquote',
 	],
 };

From d530eca033c91cacbd047eda685c45af787913b4 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 15 Aug 2024 16:11:22 +0200
Subject: [PATCH 138/205] Update: Move item size control to the new view config
 UI. (#64380)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 .../dataviews-view-config/index.tsx           | 40 +++++++--
 .../src/components/dataviews/index.tsx        | 10 +--
 .../dataviews-layouts/grid/density-picker.tsx | 84 ++++---------------
 .../src/dataviews-layouts/grid/style.scss     |  4 -
 4 files changed, 52 insertions(+), 86 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 69b4cba7763262..034f618aea00ff 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -30,11 +30,17 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
+import {
+	SORTING_DIRECTIONS,
+	LAYOUT_GRID,
+	sortIcons,
+	sortLabels,
+} from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -101,10 +107,6 @@ function ViewTypeMenu( {
 	);
 }
 
-interface ViewActionsProps {
-	defaultLayouts?: SupportedLayouts;
-}
-
 function SortFieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const orderOptions = useMemo( () => {
@@ -305,7 +307,14 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigContent() {
+function DataviewsViewConfigContent( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const { view } = useContext( DataViewsContext );
 	return (
 		<VStack className="dataviews-view-config" spacing={ 6 }>
 			<SettingsSection title={ __( 'Appearance' ) }>
@@ -313,6 +322,12 @@ function DataviewsViewConfigContent() {
 					<SortFieldControl />
 					<SortDirectionControl />
 				</HStack>
+				{ view.type === LAYOUT_GRID && (
+					<DensityPicker
+						density={ density }
+						setDensity={ setDensity }
+					/>
+				) }
 				<ItemsPerPageControl />
 			</SettingsSection>
 			<SettingsSection title={ __( 'Properties' ) }>
@@ -323,8 +338,14 @@ function DataviewsViewConfigContent() {
 }
 
 function _DataViewsViewConfig( {
+	density,
+	setDensity,
 	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewActionsProps ) {
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+	defaultLayouts?: SupportedLayouts;
+} ) {
 	const [ isShowingViewPopover, setIsShowingViewPopover ] =
 		useState< boolean >( false );
 
@@ -346,7 +367,10 @@ function _DataViewsViewConfig( {
 						} }
 						focusOnMount
 					>
-						<DataviewsViewConfigContent />
+						<DataviewsViewConfigContent
+							density={ density }
+							setDensity={ setDensity }
+						/>
 					</Popover>
 				) }
 			</div>
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 337912b04e59c5..81f901f0859bbc 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -27,8 +27,6 @@ import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-import DensityPicker from '../../dataviews-layouts/grid/density-picker';
-import { LAYOUT_GRID } from '../../constants';
 
 type ItemWithId = { id: string };
 
@@ -133,12 +131,6 @@ export default function DataViews< Item >( {
 							isShowingFilter={ isShowingFilter }
 						/>
 					</HStack>
-					{ view.type === LAYOUT_GRID && (
-						<DensityPicker
-							density={ density }
-							setDensity={ setDensity }
-						/>
-					) }
 					<DataViewsBulkActions />
 					<HStack
 						spacing={ 1 }
@@ -147,6 +139,8 @@ export default function DataViews< Item >( {
 					>
 						<DataViewsViewConfig
 							defaultLayouts={ defaultLayouts }
+							density={ density }
+							setDensity={ setDensity }
 						/>
 						{ header }
 					</HStack>
diff --git a/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
index 364d764e343470..8f0782878af224 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, reset } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
 
 const viewportBreaks = {
@@ -40,21 +39,6 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-// Value is number from 0 to 100 representing how big an item is in the grid
-// 100 being the biggest and 0 being the smallest.
-// The size is relative to the viewport size, if one a given viewport the
-// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
-// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
-// A value of 75 will mean that the grid will have 4 items in a row.
-function getRangeValue(
-	density: number,
-	breakValues: { min: number; max: number; default: number }
-) {
-	const inverseDensity = breakValues.max - density;
-	const max = breakValues.max - breakValues.min;
-	return Math.round( ( inverseDensity * 100 ) / max );
-}
-
 export default function DensityPicker( {
 	density,
 	setDensity,
@@ -78,59 +62,27 @@ export default function DensityPicker( {
 			return _density;
 		} );
 	}, [ setDensity, viewport ] );
+	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const densityToUse = density || breakValues.default;
+
 	if ( ! viewport ) {
 		return null;
 	}
-	const breakValues = viewportBreaks[ viewport ];
-	const densityToUse = density || breakValues.default;
-	const rangeValue = getRangeValue( densityToUse, breakValues );
 
-	const step = 100 / ( breakValues.max - breakValues.min + 1 );
 	return (
-		<>
-			<Button
-				size="compact"
-				icon={ reset }
-				disabled={ rangeValue <= 0 }
-				accessibleWhenDisabled
-				label={ __( 'Decrease size' ) }
-				onClick={ () => {
-					setDensity( densityToUse + 1 );
-				} }
-			/>
-			<RangeControl
-				__nextHasNoMarginBottom
-				showTooltip={ false }
-				className="dataviews-density-picker__range-control"
-				label={ __( 'Item size' ) }
-				hideLabelFromVision
-				value={ rangeValue }
-				min={ 0 }
-				max={ 100 }
-				withInputField={ false }
-				onChange={ ( value = 0 ) => {
-					const inverseValue = 100 - value;
-					setDensity(
-						Math.round(
-							( inverseValue *
-								( breakValues.max - breakValues.min ) ) /
-								100 +
-								breakValues.min
-						)
-					);
-				} }
-				step={ step }
-			/>
-			<Button
-				size="compact"
-				icon={ plus }
-				disabled={ rangeValue >= 100 }
-				accessibleWhenDisabled
-				label={ __( 'Increase size' ) }
-				onClick={ () => {
-					setDensity( densityToUse - 1 );
-				} }
-			/>
-		</>
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ breakValues.max + breakValues.min - densityToUse }
+			min={ breakValues.min }
+			max={ breakValues.max }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				setDensity( breakValues.max + breakValues.min - value );
+			} }
+			step={ 1 }
+		/>
 	);
 }
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 8f71953e155981..d154d2b614def5 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -146,10 +146,6 @@
 	}
 }
 
-.dataviews-density-picker__range-control {
-	width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;

From 8bee004d9014604d4b9ea6a2cc20634e507ccb14 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 15 Aug 2024 19:18:56 +0400
Subject: [PATCH 139/205] Fix flaky block template registration e2e test
 (#64541)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 test/e2e/specs/site-editor/template-registration.spec.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js
index 132e3a8c49a902..3927623b2824dc 100644
--- a/test/e2e/specs/site-editor/template-registration.spec.js
+++ b/test/e2e/specs/site-editor/template-registration.spec.js
@@ -243,8 +243,13 @@ test.describe( 'Block template registration', () => {
 
 	test( 'WP default templates can be overridden by plugins', async ( {
 		page,
+		requestUtils,
 	} ) => {
-		await page.goto( '?page_id=2' );
+		const { id } = await requestUtils.createPage( {
+			title: 'Plugin override page',
+			status: 'publish',
+		} );
+		await page.goto( `?page_id=${ id }` );
 		await expect(
 			page.getByText( 'This is a plugin-registered page template.' )
 		).toBeVisible();

From 8bcd5f01e9921f9a57b51e16ca46b04a83e5f0ab Mon Sep 17 00:00:00 2001
From: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Thu, 15 Aug 2024 20:53:21 +0530
Subject: [PATCH 140/205] ToolsPanel: Sets column-gap to 16px for grid (#64497)

* feat: sets column-gap to 16px for ToolsPanel grid

* Updates changelog

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              | 2 +-
 packages/components/src/tools-panel/styles.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e758e457bdd03e..eb207643cdfcb2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -28,7 +28,7 @@
 -   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
 -   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
-
+-   `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 1da1003c0462e3..11536e98a128a9 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -21,7 +21,7 @@ const toolsPanelGrid = {
 		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
 	`,
 	spacing: css`
-		column-gap: ${ space( 2 ) };
+		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 4 ) };
 	`,
 	item: {

From 294b888b6f7ab2b9cfa6c40f5664586265fea689 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 15 Aug 2024 17:40:59 +0200
Subject: [PATCH 141/205] DataViews: Update: Sort descending button may be
 wrongly pressed. (#64547)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../src/components/dataviews-view-config/index.tsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 034f618aea00ff..e396b1c68203cc 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -143,6 +143,10 @@ function SortFieldControl() {
 
 function SortDirectionControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	let value = view.sort?.direction;
+	if ( ! value && view.sort?.field ) {
+		value = 'desc';
+	}
 	return (
 		<ToggleGroupControl
 			className="dataviews-view-config__sort-direction"
@@ -150,7 +154,7 @@ function SortDirectionControl() {
 			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Order' ) }
-			value={ view.sort?.direction || 'desc' }
+			value={ value }
 			onChange={ ( newDirection ) => {
 				if ( newDirection === 'asc' || newDirection === 'desc' ) {
 					onChangeView( {

From 9fc46bee0184658a093664b1e514b487fdd78bed Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 15 Aug 2024 19:55:07 +0400
Subject: [PATCH 142/205] Improve Image block e2e tests (#64537)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 test/e2e/specs/editor/blocks/image.spec.js | 56 +++++++++++++++++-----
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index c4c725e083625e..43527b48fbf707 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -708,13 +708,14 @@ test.describe( 'Image', () => {
 
 		await editor.clickBlockToolbarButton( 'Upload to Media Library' );
 
-		const imageBlock = editor.canvas.locator(
-			'role=document[name="Block: Image"i]'
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
 		);
-		const image = imageBlock.locator( 'img[src^="http"]' );
-		const src = await image.getAttribute( 'src' );
-
-		expect( src ).toMatch( /\/wp-content\/uploads\// );
 	} );
 
 	test( 'should upload through prepublish panel', async ( {
@@ -736,14 +737,45 @@ test.describe( 'Image', () => {
 			.click();
 
 		await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 );
-
-		const imageBlock = editor.canvas.locator(
-			'role=document[name="Block: Image"i]'
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
 		);
-		const image = imageBlock.locator( 'img[src^="http"]' );
-		const src = await image.getAttribute( 'src' );
+	} );
 
-		expect( src ).toMatch( /\/wp-content\/uploads\// );
+	test( 'uploads data url through blobs from raw handling', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		const blobUrl = await page.evaluate( async () => {
+			const canvas = document.createElement( 'canvas' );
+			canvas.width = 20;
+			canvas.height = 20;
+
+			const ctx = canvas.getContext( '2d' );
+			ctx.fillStyle = 'red';
+			ctx.fillRect( 0, 0, 20, 20 );
+
+			return canvas.toDataURL( 'image/png' );
+		} );
+
+		pageUtils.setClipboardData( { html: `<img src="${ blobUrl }">` } );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
+		);
 	} );
 
 	test( 'should have keyboard navigable link UI popover', async ( {

From 8559790a6d4bd3192773368a281d7320c3de24b1 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 16 Aug 2024 00:58:09 +0900
Subject: [PATCH 143/205] SelectControl: Add lint rule for 40px size prop usage
 (#64486)

* SelectControl: Add lint rule for 40px size prop usage

* Add lint rule

* Fix in Author block

* Fix in File block

* Fix in Audio block

* Fix in Archives block

* Fix formatting

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                     | 16 +++++++++-------
 .../src/components/font-family/README.md         | 13 +++++++++++--
 .../src/components/font-family/index.js          |  3 +++
 .../responsive-block-control/test/index.js       |  1 +
 packages/block-library/src/archives/edit.js      |  1 +
 packages/block-library/src/audio/edit.js         |  7 ++++---
 packages/block-library/src/file/inspector.js     |  1 +
 packages/block-library/src/form/edit.js          |  2 ++
 packages/block-library/src/post-author/edit.js   |  2 ++
 .../post-featured-image/dimension-controls.js    |  4 ++++
 .../src/template-part/edit/advanced-controls.js  |  2 ++
 .../block-library/src/video/tracks-editor.js     |  2 ++
 .../legacy-widget/edit/widget-type-selector.js   |  2 ++
 13 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 94b443853e0a81..2cdbb5c056cb14 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -324,13 +324,15 @@ module.exports = {
 							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					} ) ),
 					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
-					...[ 'TextControl' ].map( ( componentName ) => ( {
-						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
-						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
-						message:
-							componentName +
-							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
-					} ) ),
+					...[ 'SelectControl', 'TextControl' ].map(
+						( componentName ) => ( {
+							// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+							selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+							message:
+								componentName +
+								' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+						} )
+					),
 				],
 			},
 		},
diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
index 6b37459fd127e7..63965f509ba534 100644
--- a/packages/block-editor/src/components/font-family/README.md
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -71,9 +71,18 @@ The current font family value.
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
 
+#### `__next40pxDefaultSize`
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
 #### `__nextHasNoMarginBottom`
 
--   **Type:** `boolean`
--   **Default:** `false`
+- Type: `boolean`
+- Required: No
+- Default: `false`
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
index 90a0412463b3ef..c87a52b4c676d2 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -11,6 +11,8 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	value = '',
@@ -50,6 +52,7 @@ export default function FontFamilyControl( {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
 			options={ options }
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index 57944b591108d7..ef32c60722f541 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -40,6 +40,7 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
 			<SelectControl
+				__next40pxDefaultSize
 				label={ labelComponent }
 				options={ sizeOptions }
 				__nextHasNoMarginBottom
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 4eed206314e427..ee9bf60fb77ec0 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -51,6 +51,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Group by:' ) }
 						options={ [
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 97d3c9c5a1ae3f..3c9f9e11c3b24b 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -174,6 +174,7 @@ function AudioEdit( {
 						checked={ loop }
 					/>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
@@ -197,9 +198,9 @@ function AudioEdit( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the audio tag if the block is not selected
-					so the user clicking on it won't play the
-					file or change the position slider when the controls are enabled.
+				Disable the audio tag if the block is not selected
+				so the user clicking on it won't play the
+				file or change the position slider when the controls are enabled.
 				*/ }
 				<Disabled isDisabled={ ! isSingleSelected }>
 					<audio controls="controls" src={ src ?? temporaryURL } />
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index 76ed28d124600e..c29f84f60ebace 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -73,6 +73,7 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index d6f9d80f155c38..6a30dd0b61bf9d 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -130,6 +130,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Method' ) }
 						options={ [
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index dfe0a001d2ee59..1bc1ef4ffcd8a3 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -112,6 +112,7 @@ function PostAuthorEdit( {
 							/>
 						) ) || (
 							<SelectControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								value={ authorId }
@@ -129,6 +130,7 @@ function PostAuthorEdit( {
 					/>
 					{ showAvatar && (
 						<SelectControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							label={ __( 'Avatar size' ) }
 							value={ attributes.avatarSize }
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 4d272d3d8bb415..fa0f022332b0cb 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -134,6 +134,8 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<SelectControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
@@ -233,6 +235,8 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index 79a3a158b87ea0..bf834065d1a54b 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -85,6 +85,8 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 3864722c7a7794..521d54e9231d1b 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -132,6 +132,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</Grid>
 				<VStack spacing="8">
 					<SelectControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						className="block-library-video-tracks-editor__single-track-editor-kind-select"
 						options={ KIND_OPTIONS }
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
index 215e2d2447c3c9..cc7c0830a319bf 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
@@ -27,6 +27,8 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 
 	return (
 		<SelectControl
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			__nextHasNoMarginBottom
 			label={ __( 'Select a legacy widget to display:' ) }
 			value={ selectedId ?? '' }

From 289589cae37e855481ab29e3cd2c0a8afb08a5c2 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 15 Aug 2024 18:00:23 +0200
Subject: [PATCH 144/205] Update: Add marks to preview size control. (#64546)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../dataviews-layouts/grid/density-picker.tsx    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
index 8f0782878af224..34ddf6c3fe52f3 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
@@ -4,7 +4,7 @@
 import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 
 const viewportBreaks = {
 	xhuge: { min: 3, max: 6, default: 5 },
@@ -65,6 +65,19 @@ export default function DensityPicker( {
 	const breakValues = viewportBreaks[ viewport || 'mobile' ];
 	const densityToUse = density || breakValues.default;
 
+	const marks = useMemo(
+		() =>
+			Array.from(
+				{ length: breakValues.max - breakValues.min + 1 },
+				( _, i ) => {
+					return {
+						value: breakValues.min + i,
+					};
+				}
+			),
+		[ breakValues ]
+	);
+
 	if ( ! viewport ) {
 		return null;
 	}
@@ -76,6 +89,7 @@ export default function DensityPicker( {
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
 			value={ breakValues.max + breakValues.min - densityToUse }
+			marks={ marks }
 			min={ breakValues.min }
 			max={ breakValues.max }
 			withInputField={ false }

From 38d0500ca8e70622e460ecb62d433b482ef3cb6c Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 15 Aug 2024 13:52:17 -0400
Subject: [PATCH 145/205] Remove inconsistent dark theme focus style on block
 selection (#64549)

* remove $dark-theme-focus

* remove is-dark-theme outline color shift on block selection

* remove custom dark theme focus for nav link

* remove template part dark theme focus

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/base-styles/_colors.scss                      |  1 -
 .../src/components/block-list/content.scss             | 10 ----------
 packages/block-library/src/navigation-link/editor.scss |  3 ---
 packages/block-library/src/template-part/editor.scss   |  5 -----
 4 files changed, 19 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 2ce58b64e43b8c..b296a0f1f03063 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -17,7 +17,6 @@ $gray-100: #f0f0f0;		// Used for light gray backgrounds.
 $white: #fff;
 
 // Opacities & additional colors.
-$dark-theme-focus: $white;	// Focus color when the theme is dark.
 $dark-gray-placeholder: rgba($gray-900, 0.62);
 $medium-gray-placeholder: rgba($gray-900, 0.55);
 $light-gray-placeholder: rgba($white, 0.65);
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 17ebad06c4d78e..c8f24e7efcbd2f 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -89,11 +89,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&::after {
 			@include selected-block-focus();
 			z-index: 1;
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 
@@ -285,11 +280,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 6d1dc32e5310b5..84cd6f6d4ee363 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -87,9 +87,6 @@
 		$stop2: 64%;
 
 		--wp-underline-color: var(--wp-admin-theme-color);
-		.is-dark-theme & {
-			--wp-underline-color: #{ $dark-theme-focus };
-		}
 
 		background-image:
 			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 71659ce6ba717a..735c9370099d91 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -35,11 +35,6 @@
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }

From 8457cb8eff5bcdf37c6f3518aac9fc15f2a61278 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 15 Aug 2024 21:06:50 +0200
Subject: [PATCH 146/205] Props Bot: update to correct event type (#64557)

When wanting to filter by event type, we must use `types`, and not `type`.

Reference: https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows#issue_comment

Co-authored-by: jeherve <jeherve@git.wordpress.org>
Co-authored-by: aaronjorbin <jorbin@git.wordpress.org>
---
 .github/workflows/props-bot.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/props-bot.yml b/.github/workflows/props-bot.yml
index 0f21f47ef14f99..b2332aabb816c7 100644
--- a/.github/workflows/props-bot.yml
+++ b/.github/workflows/props-bot.yml
@@ -18,7 +18,7 @@ on:
     # You cannot filter this event for PR comments only.
     # However, the logic below does short-circuit the workflow for issues.
     issue_comment:
-        type:
+        types:
             - created
     # This event will run everytime a new PR review is initially submitted.
     pull_request_review:

From 6de3f66b0a0560969d6328864e2125fdf323c6b7 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 16 Aug 2024 11:57:00 +1000
Subject: [PATCH 147/205] Background block supports: remove unused properties
 in unit tests (#64564)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 phpunit/block-supports/background-test.php | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 4c949fa82257d3..c698f9e7c2f1c1 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -122,7 +122,7 @@ public function test_background_block_support( $theme_name, $block_name, $backgr
 	 */
 	public function data_background_block_support() {
 		return array(
-			'background image style is applied to uploaded images' => array(
+			'background image style is applied' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
 				'block_name'          => 'test/background-rules-are-output',
 				'background_settings' => array(
@@ -131,7 +131,6 @@ public function data_background_block_support() {
 				'background_style'    => array(
 					'backgroundImage' => array(
 						'url' => 'https://example.com/image.jpg',
-						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -158,7 +157,6 @@ public function data_background_block_support() {
 				'background_style'    => array(
 					'backgroundImage'      => array(
 						'url' => 'https://example.com/image.jpg',
-						'id'  => 123,
 					),
 					'backgroundRepeat'     => 'no-repeat',
 					'backgroundSize'       => 'contain',
@@ -176,7 +174,6 @@ public function data_background_block_support() {
 				'background_style'    => array(
 					'backgroundImage' => array(
 						'url' => 'https://example.com/image.jpg',
-						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -191,7 +188,6 @@ public function data_background_block_support() {
 				'background_style'    => array(
 					'backgroundImage' => array(
 						'url' => 'https://example.com/image.jpg',
-						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -206,7 +202,6 @@ public function data_background_block_support() {
 				'background_style'    => array(
 					'backgroundImage' => array(
 						'url' => 'https://example.com/image.jpg',
-						'id'  => 123,
 					),
 				),
 				'expected_wrapper'    => '<div>Content</div>',

From e26396756d7fbd6c78ab5cacf4049dd8d0e8cb58 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:56:48 +0900
Subject: [PATCH 148/205] Base Styles: Restore deprecated `$dark-theme-focus`
 variable (#64563)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/base-styles/_colors.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index b296a0f1f03063..e65551e48c783c 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -25,3 +25,6 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
+
+// Deprecated, please avoid using these.
+$dark-theme-focus: $white;	// Focus color when the theme is dark.

From 1defa19697561ec203235f2d2beaaf340231d41f Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:36:58 +1000
Subject: [PATCH 149/205] Background image: add uploading state and restrict
 drag to one image. (#64565)

Add a loading spinner over the background image control
Restrict upload to one image

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 .../global-styles/background-panel.js         | 27 ++++++++++++++++---
 .../src/components/global-styles/style.scss   | 11 ++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 1373c54764d155..c01db44792989e 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -23,6 +23,8 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
+	Placeholder,
+	Spinner,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -268,6 +270,14 @@ function BackgroundControlsPanel( {
 	);
 }
 
+function LoadingSpinner() {
+	return (
+		<Placeholder className="block-editor-global-styles-background-panel__loading">
+			<Spinner />
+		</Placeholder>
+	);
+}
+
 function BackgroundImageControls( {
 	onChange,
 	style,
@@ -277,6 +287,7 @@ function BackgroundImageControls( {
 	displayInPanel,
 	defaultValues,
 } ) {
+	const [ isUploading, setIsUploading ] = useState( false );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -289,6 +300,7 @@ function BackgroundImageControls( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setIsUploading( false );
 	};
 
 	const resetBackgroundImage = () =>
@@ -303,10 +315,12 @@ function BackgroundImageControls( {
 	const onSelectMedia = ( media ) => {
 		if ( ! media || ! media.url ) {
 			resetBackgroundImage();
+			setIsUploading( false );
 			return;
 		}
 
 		if ( isBlobURL( media.url ) ) {
+			setIsUploading( true );
 			return;
 		}
 
@@ -349,16 +363,21 @@ function BackgroundImageControls( {
 				backgroundSize: sizeValue,
 			} )
 		);
+		setIsUploading( false );
 	};
 
+	// Drag and drop callback, restricting image to one.
 	const onFilesDrop = ( filesList ) => {
+		if ( filesList?.length > 1 ) {
+			onUploadError(
+				__( 'Only one image can be used as a background image.' )
+			);
+			return;
+		}
 		mediaUpload( {
 			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {
-				if ( isBlobURL( image?.url ) ) {
-					return;
-				}
 				onSelectMedia( image );
 			},
 			onError: onUploadError,
@@ -393,6 +412,7 @@ function BackgroundImageControls( {
 			ref={ replaceContainerRef }
 			className="block-editor-global-styles-background-panel__image-tools-panel-item"
 		>
+			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
 				mediaURL={ url }
@@ -414,6 +434,7 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
+				onError={ onUploadError }
 			>
 				{ canRemove && (
 					<MenuItem
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b8dd3700a77f88..acd5fd6f41c7bc 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -134,6 +134,17 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-global-styles-background-panel__loading {
+		height: 100%;
+		position: absolute;
+		z-index: 1;
+		width: 100%;
+		padding: 10px 0 0 0;
+		svg {
+			margin: 0;
+		}
+	}
 }
 
 .block-editor-global-styles-background-panel__image-preview-content,

From be6bc93743304a1790fbb76579ff681aced1dce1 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 16 Aug 2024 10:44:49 +0400
Subject: [PATCH 150/205] PostFeaturedImage: Disable the media modal while
 uploading an image (#64566)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/editor/src/components/post-featured-image/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index 5e1874e9b84026..febf56a46778fc 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -180,6 +180,8 @@ function PostFeaturedImage( {
 											: `editor-post-featured-image-${ featuredImageId }-describedby`
 									}
 									aria-haspopup="dialog"
+									disabled={ isLoading }
+									accessibleWhenDisabled
 								>
 									{ !! featuredImageId && media && (
 										<img

From 81ce216685e285348fcfda5fd5c64d1229ffa6f2 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Fri, 16 Aug 2024 13:13:02 +0530
Subject: [PATCH 151/205] Comment Author Name: Add Border Support (#64550)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../src/comment-author-name/block.json            | 15 ++++++++++++++-
 .../src/comment-author-name/style.scss            |  4 ++++
 packages/block-library/src/style.scss             |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/comment-author-name/style.scss

diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json
index f3422faf0264df..1889d054c940e7 100644
--- a/packages/block-library/src/comment-author-name/block.json
+++ b/packages/block-library/src/comment-author-name/block.json
@@ -51,6 +51,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-author-name"
 }
diff --git a/packages/block-library/src/comment-author-name/style.scss b/packages/block-library/src/comment-author-name/style.scss
new file mode 100644
index 00000000000000..1e8c5eeb154b05
--- /dev/null
+++ b/packages/block-library/src/comment-author-name/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-author-name {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 338753ae53fcbf..1070bedc8c3dbc 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -12,6 +12,7 @@
 @import "./comment-template/style.scss";
 @import "./comment-date/style.scss";
 @import "./comment-content/style.scss";
+@import "./comment-author-name/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
 @import "./embed/style.scss";

From 0da4ce0b0343b2ec61d2718c20a9b2dc4de51fb3 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 16 Aug 2024 12:34:02 +0400
Subject: [PATCH 152/205] Background Image: Remove unnecessary 'block-editor'
 store subscription (#64568)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 .../src/components/global-styles/background-panel.js       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index c01db44792989e..6391f72a084875 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -288,10 +288,7 @@ function BackgroundImageControls( {
 	defaultValues,
 } ) {
 	const [ isUploading, setIsUploading ] = useState( false );
-	const mediaUpload = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
+	const { getSettings } = useSelect( blockEditorStore );
 
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
@@ -374,7 +371,7 @@ function BackgroundImageControls( {
 			);
 			return;
 		}
-		mediaUpload( {
+		getSettings().mediaUpload( {
 			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {

From 70d2020250ab71675ef5ce6330ca43e96200442c Mon Sep 17 00:00:00 2001
From: Jan Pfeil <jan.pfeil@rypox.net>
Date: Fri, 16 Aug 2024 11:21:36 +0200
Subject: [PATCH 153/205] fix typo and link in static-dynamic-rendering.md
 (#64449)

* fix typo and link in static-dynamic-rendering.md

* update link to render_callback

Unlinked contributors: janpfeil.

Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 docs/getting-started/fundamentals/static-dynamic-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/getting-started/fundamentals/static-dynamic-rendering.md b/docs/getting-started/fundamentals/static-dynamic-rendering.md
index 8d199f66cccd2a..dfb6a7123b44b3 100644
--- a/docs/getting-started/fundamentals/static-dynamic-rendering.md
+++ b/docs/getting-started/fundamentals/static-dynamic-rendering.md
@@ -61,7 +61,7 @@ Dynamic blocks, which we'll explore in the following section, can specify an ini
 For a practical demonstration of how this works, refer to the [Building your first block](/docs/getting-started/tutorial.md) tutorial. Specifically, the [Adding static rendering](/docs/getting-started/tutorial.md#adding-static-rendering) section illustrates how a block can have both a saved HTML structure and dynamic rendering capabilities.
 
 <div class="callout callout-info">
-WordPress provides mechanisms like the <a href="https://developer.wordpress.org/reference/functions/render_block/"><code>render_block</code></a> are the <code>$render_callback</code> function to alter the saved HTML of a block before it appears on the front end. These tools offer developers the capability to customize block output dynamically, catering to complex and interactive user experiences.
+WordPress provides mechanisms like the <a href="https://developer.wordpress.org/reference/functions/render_block/"><code>render_block</code></a> and the <a href="https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/"><code>render_callback</code></a> function to alter the saved HTML of a block before it appears on the front end. These tools offer developers the capability to customize block output dynamically, catering to complex and interactive user experiences.
 </div>
 
 Additional examples of WordPress blocks that use static rendering, meaning their output is fixed at the time of saving and doesn't rely on server-side processing, include:

From a00448ab9aa12ea99657e909a2a03cb01d041450 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 16 Aug 2024 14:24:58 +0100
Subject: [PATCH 154/205] Update components radius (#64368)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/base-styles/_variables.scss          |  2 +-
 packages/components/CHANGELOG.md              | 26 +++++++++++++++++++
 .../styles/alignment-matrix-control-styles.ts |  4 +--
 .../styles/angle-picker-control-styles.tsx    |  4 +--
 .../components/src/border-control/styles.ts   |  2 +-
 .../components/src/button-group/style.scss    |  4 +--
 packages/components/src/button/style.scss     |  4 +--
 .../src/circular-option-picker/style.scss     |  4 +--
 .../components/src/color-indicator/style.scss |  2 +-
 .../components/src/color-palette/style.scss   |  4 +--
 .../src/custom-gradient-picker/style.scss     |  2 +-
 packages/components/src/drop-zone/style.scss  |  2 +-
 .../components/src/dropdown-menu-v2/styles.ts |  4 +--
 .../styles/focal-point-picker-style.ts        |  2 +-
 packages/components/src/guide/style.scss      |  1 -
 packages/components/src/item-group/styles.ts  |  2 +-
 packages/components/src/modal/style.scss      |  4 +--
 .../components/src/palette-edit/styles.ts     | 10 +++----
 .../components/src/placeholder/style.scss     |  2 +-
 packages/components/src/popover/style.scss    |  2 +-
 .../components/src/progress-bar/styles.ts     |  4 +--
 .../components/src/radio-control/style.scss   |  2 +-
 packages/components/src/snackbar/style.scss   |  2 +-
 packages/components/src/tab-panel/style.scss  |  2 +-
 packages/components/src/text/styles.ts        |  2 +-
 .../test/__snapshots__/index.tsx.snap         | 16 ++++++------
 .../styles.ts                                 |  4 +--
 .../toggle-group-control/styles.ts            |  2 +-
 .../components/src/toolbar/toolbar/style.scss |  4 +--
 packages/components/src/tooltip/style.scss    |  2 +-
 .../styles/unit-control-styles.ts             |  2 +-
 .../components/src/utils/config-values.js     |  2 --
 packages/components/src/utils/input/base.js   |  2 +-
 33 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0d3e139a7dd555..0f0c9e6d019ba3 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -47,7 +47,7 @@ $radius-x-small: 1px;   // Applied to elements like buttons nested within primit
 $radius-small: 2px;     // Applied to most primitives.
 $radius-medium: 4px;    // Applied to containers with smaller padding.
 $radius-large: 8px;     // Applied to containers with larger padding.
-$radius-full: 9999px;   // For lozenges.
+$radius-full: 9999px;   // For pills.
 $radius-round: 50%;     // For circles and ovals.
 
 /**
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index eb207643cdfcb2..1e6a96d2618d6f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -27,6 +27,32 @@
 -   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
 -   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
 -   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
+-   `AlignmentMatrixControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `AnglePickerControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `BorderControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ButtonGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Button`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `CircularOptionPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ColorIndicator`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ColorPalette`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `CustomGradientPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `DropZone`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `DropdownMenuV2`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `FocalPointPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Guide`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Modal`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Placeholder`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Popover`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ProgressBar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `RadioControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Snackbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `TabPanel`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Text`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ToggleGroupControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ToolbarGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Toolbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Tooltip`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
 -   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
 -   `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)).
 
diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
index bdb015ec64c6a7..efbd23ab2be0af 100644
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
+++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 import type {
 	AlignmentMatrixControlProps,
 	AlignmentMatrixControlCellProps,
@@ -15,7 +15,7 @@ import type {
 
 export const rootBase = () => {
 	return css`
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusMedium };
 		box-sizing: border-box;
 		direction: ltr;
 		display: grid;
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 0141bd860d7df9..f57d60db0744b1 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
 export const CircleRoot = styled.div`
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
@@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`
 
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.theme.accent };
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	box-sizing: border-box;
 	display: block;
 	left: 50%;
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 28669ebf3ccc78..2c77a2d21465d6 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -99,7 +99,7 @@ export const colorIndicatorWrapper = (
 	const { style } = border || {};
 
 	return css`
-		border-radius: 9999px;
+		border-radius: ${ CONFIG.radiusFull };
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
 		width: ${ size === '__unstable-large' ? '24px' : '22px' };
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 171722b409f693..96a9e8f458c84c 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -12,11 +12,11 @@
 		}
 
 		&:first-child {
-			border-radius: $radius-block-ui 0 0 $radius-block-ui;
+			border-radius: $radius-small 0 0 $radius-small;
 		}
 
 		&:last-child {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0;
+			border-radius: 0 $radius-small $radius-small 0;
 		}
 
 		// The focused button should be elevated so the focus ring isn't cropped,
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 7d67dcc0748b85..444e4d397b3ef8 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -22,7 +22,7 @@
 	align-items: center;
 	box-sizing: border-box;
 	padding: 6px 12px;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	color: $components-color-foreground;
 
 	&.is-next-40px-default-size {
@@ -249,7 +249,7 @@
 		height: auto;
 
 		&:focus {
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 		}
 
 		&:disabled,
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 33ba6070dde799..74a380e0936be8 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -70,7 +70,7 @@ $color-palette-circle-spacing: 12px;
 	height: 100%;
 	width: 100%;
 	border: none;
-	border-radius: 50%;
+	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
 	transition: 100ms box-shadow ease;
@@ -93,7 +93,7 @@ $color-palette-circle-spacing: 12px;
 			position: absolute;
 			left: 2px;
 			top: 2px;
-			border-radius: 50%;
+			border-radius: $radius-round;
 			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
 			pointer-events: none;
 		}
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index e70b8a09ca5bf5..4029b50340e62a 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -2,7 +2,7 @@
 	width: $grid-unit-50 * 0.5;
 	height: $grid-unit-50 * 0.5;
 	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-	border-radius: 50%;
+	border-radius: $radius-round;
 	display: inline-block;
 	padding: 0;
 	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 2d6bc4ddc1db3d..9d922a8130692a 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -14,7 +14,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	cursor: pointer;
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
-	border-radius: $radius-block-ui $radius-block-ui 0 0;
+	border-radius: $radius-medium $radius-medium 0 0;
 	box-shadow: $border-as-box-shadow;
 
 	&:focus {
@@ -46,7 +46,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
 .components-color-palette__custom-color-text-wrapper {
 	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	border-radius: 0 0 $radius-medium $radius-medium;
 	position: relative;
 	font-size: $default-font-size;
 
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index e7828127ff8d33..a8c6d6b872caf0 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,7 +1,7 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
 .components-custom-gradient-picker__gradient-bar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	width: 100%;
 	height: $grid-unit-60;
 	position: relative;
diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index 2793dc708cf03f..d3cd18a75b1f8f 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -7,7 +7,7 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.is-active {
 		opacity: 1;
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 950a549f8566a4..3260a83f45f1c1 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -87,7 +87,7 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	padding: ${ CONTENT_WRAPPER_PADDING };
 
 	background-color: ${ COLORS.ui.background };
-	border-radius: 4px;
+	border-radius: ${ CONFIG.radiusMedium };
 	${ ( props ) => css`
 		box-shadow: ${ props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BOX_SHADOW
@@ -150,7 +150,7 @@ const baseItem = css`
 	line-height: 20px;
 
 	color: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusSmall };
 
 	padding-block: ${ ITEM_PADDING_BLOCK };
 	padding-inline: ${ ITEM_PADDING_INLINE };
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
index 71bf4b651b4ad7..fba3eda2fb0f29 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -22,7 +22,7 @@ export const MediaWrapper = styled.div`
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusSmall };
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 76f7b03ac4aafc..073bfc06843075 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -9,7 +9,6 @@
 	.components-modal__content {
 		padding: 0;
 		margin-top: 0;
-		border-radius: $radius-block-ui;
 
 		&::before {
 			content: none;
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index 166f225790ce27..66c6158f9af1a3 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -70,7 +70,7 @@ export const separated = css`
 	}
 `;
 
-const borderRadius = CONFIG.controlBorderRadius;
+const borderRadius = CONFIG.radiusSmall;
 
 export const spacedAround = css`
 	border-radius: ${ borderRadius };
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index e563b29070bef2..c862363a0d3c81 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -21,7 +21,7 @@
 	width: 100%;
 	background: $white;
 	box-shadow: $shadow-modal;
-	border-radius: $grid-unit-05 $grid-unit-05 0 0;
+	border-radius: $radius-large $radius-large 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
@@ -32,7 +32,7 @@
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
-		border-radius: $grid-unit-05;
+		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
index aa4ed720b93bfe..ad918d8590cf23 100644
--- a/packages/components/src/palette-edit/styles.ts
+++ b/packages/components/src/palette-edit/styles.ts
@@ -31,7 +31,7 @@ export const IndicatorStyled = styled( ColorIndicator )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius };
+		border-radius: ${ CONFIG.radiusXSmall };
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -85,8 +85,8 @@ export const PaletteItem = styled( View )`
 		outline-offset: 0;
 	}
 
-	border-top-left-radius: ${ CONFIG.controlBorderRadius };
-	border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	border-top-left-radius: ${ CONFIG.radiusSmall };
+	border-top-right-radius: ${ CONFIG.radiusSmall };
 
 	& + & {
 		border-top-left-radius: 0;
@@ -94,8 +94,8 @@ export const PaletteItem = styled( View )`
 	}
 
 	&:last-child {
-		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
-		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-left-radius: ${ CONFIG.radiusSmall };
+		border-bottom-right-radius: ${ CONFIG.radiusSmall };
 		border-bottom-color: ${ CONFIG.surfaceBorderColor };
 	}
 
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index e046ce1e3a427e..61090c81110a5c 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -19,7 +19,7 @@
 
 
 	// Block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-medium;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index c7ff0510986bfa..f9f43870a6b927 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -23,7 +23,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 .components-popover__content {
 	background: $white;
 	box-shadow: $shadow-popover-border-default, $shadow-popover;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
 
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index 79b9103e73a1ed..585b9ab2620753 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -40,7 +40,7 @@ export const Track = styled.div`
 		${ COLORS.theme.foreground },
 		transparent 90%
 	);
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusFull };
 
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
@@ -58,7 +58,7 @@ export const Indicator = styled.div< {
 	position: absolute;
 	top: 0;
 	height: 100%;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusFull };
 	/* Text color at 90% opacity */
 	background-color: color-mix(
 		in srgb,
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index 7444ea1343b842..e9732558f2901e 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -32,7 +32,7 @@
 
 		&::before {
 			content: "";
-			border-radius: 50%;
+			border-radius: $radius-round;
 		}
 	}
 }
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 0ba1774d67382f..5bea7076599b56 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -3,7 +3,7 @@
 	font-size: $default-font-size;
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
-	border-radius: $radius-block-ui;
+	border-radius: $radius-medium;
 	box-shadow: $shadow-popover;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index 2855f8c2b06a01..ab73a7affaeed4 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -67,7 +67,7 @@
 
 		// Draw the indicator.
 		box-shadow: 0 0 0 0 transparent;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 
 		// Animation
 		transition: all 0.1s linear;
diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
index c7d48552795938..e777ed4f0941de 100644
--- a/packages/components/src/text/styles.ts
+++ b/packages/components/src/text/styles.ts
@@ -35,7 +35,7 @@ export const muted = css`
 export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusSmall };
 		box-shadow:
 			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index d055ea5fcc9838..e9b4f4ca22ab85 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -84,7 +84,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -152,7 +152,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 .emotion-15 {
   background: #1e1e1e;
-  border-radius: 2px;
+  border-radius: 1px;
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -171,7 +171,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -416,7 +416,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -636,7 +636,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -704,7 +704,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 .emotion-15 {
   background: #1e1e1e;
-  border-radius: 2px;
+  border-radius: 1px;
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -723,7 +723,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -962,7 +962,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 999a25df8bdd40..86efc5224077f4 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -37,7 +37,7 @@ export const buttonView = ( {
 	appearance: none;
 	background: transparent;
 	border: none;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	color: ${ COLORS.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
@@ -122,7 +122,7 @@ const isIconStyles = ( {
 
 export const backdropView = css`
 	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	position: absolute;
 	inset: 0;
 	z-index: 1;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index 7310024706e1de..8d01c150a45eaf 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -19,7 +19,7 @@ export const toggleGroupControl = ( {
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusSmall };
 	display: inline-flex;
 	min-width: 0;
 	position: relative;
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index eccfc3bf705cbd..c0cabacb84c77e 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -1,7 +1,7 @@
 .components-accessible-toolbar {
 	display: inline-flex;
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	flex-shrink: 0;
 
 	& > .components-toolbar-group:last-child {
@@ -47,7 +47,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index feda6cfa81c887..eaac8b3ad1c7f6 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -1,7 +1,7 @@
 .components-tooltip {
 	background: $black;
 	font-family: $default-font;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	color: $gray-100;
 	text-align: center;
 	line-height: 1.4;
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index 321bfb8406569d..5f59771bd48a6a 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -135,7 +135,7 @@ export const UnitSelect = styled.select< SelectProps >`
 	&&& {
 		appearance: none;
 		background: transparent;
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusXSmall };
 		border: none;
 		display: block;
 		outline: none;
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 02c6f69544c2bf..0ad1b3294a926b 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -14,7 +14,6 @@ const CONTROL_PROPS = {
 	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
 	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
 	controlBackgroundColor: COLORS.white,
-	controlBorderRadius: '2px',
 	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
@@ -48,7 +47,6 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	radiusLarge: '8px',
 	radiusFull: '9999px',
 	radiusRound: '50%',
-	radiusBlockUi: '2px',
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
index f03a1d9c77abbe..9eebd1c0bcea78 100644
--- a/packages/components/src/utils/input/base.js
+++ b/packages/components/src/utils/input/base.js
@@ -11,7 +11,7 @@ import { CONFIG } from '../';
 
 export const inputStyleNeutral = css`
 	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusSmall };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 
 	@media not ( prefers-reduced-motion ) {

From 42db13fbac9b738d1874896e77214a6cbbaf0927 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 16 Aug 2024 17:34:39 +0200
Subject: [PATCH 155/205] Navigator: simplify backwards navigation APIs
 (#63317)

* NavigatorProvider: make goBack an alias for goToParent

* NavigatorBackButton: deprecate and ignore `goToParent` prop

* NavigatorBackButton: always call `goBack`

* Navigator: deprecate `goToParent` method

* NavigatorToParentButton: deprecate the component, make it an alias for NavigatorGoBackButton

* Add missing JSDocs for Navigator types

* Update README

* More docs additions

* Fix tests by assuming that even an invalid HTML path starts with '/'

* Add emphasis on the need for `path` to start with `/`

* Add deprecation warnings

* Update unit tests

* Add back README for deprecated component

* Add deprecation warning for `goToParent` function

* CHANGELOG

* Add more docs

* Typos

* Remove entirely the `goToParent` prop on `useNavigatorBackButton`

This can be done because its usage was actually only internal to the component

* Add deprecated APIs tests

* Remove extra import (thank you autocomplete)

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   1 +
 .../navigator-back-button/component.tsx       |   2 +-
 .../navigator/navigator-back-button/hook.ts   |  16 +-
 .../navigator/navigator-provider/README.md    |  74 ++++-----
 .../navigator-provider/component.tsx          |  20 ++-
 .../src/navigator/navigator-screen/README.md  |  14 +-
 .../navigator-to-parent-button/README.md      |   2 +
 .../navigator-to-parent-button/component.tsx  |  57 ++-----
 .../components/src/navigator/test/index.tsx   | 142 +++++++++++++++++-
 packages/components/src/navigator/types.ts    |  55 +++++--
 10 files changed, 269 insertions(+), 114 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1e6a96d2618d6f..f824bf8d2b2ddc 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
     -   `ToggleControl`
     -   `ToggleGroupControl`
     -   `TreeSelect`
+-   Deprecate `NavigatorToParentButton` and `useNavigator().goToParent()` in favor of `NavigatorBackButton` and `useNavigator().goBack()` ([#63317](https://github.com/WordPress/gutenberg/pull/63317)).
 
 ### Enhancements
 
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 71c5ac14cd00d9..88ed45b643a13d 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -48,7 +48,7 @@ function UnconnectedNavigatorBackButton(
  *     <NavigatorScreen path="/child">
  *       <p>This is the child screen.</p>
  *       <NavigatorBackButton>
- *         Go back
+ *         Go back (to parent)
  *       </NavigatorBackButton>
  *     </NavigatorScreen>
  *   </NavigatorProvider>
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index edf55be0f15f5b..d4447b5f40ad46 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -10,31 +10,27 @@ import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import Button from '../../button';
 import useNavigator from '../use-navigator';
-import type { NavigatorBackButtonHookProps } from '../types';
+import type { NavigatorBackButtonProps } from '../types';
 
 export function useNavigatorBackButton(
-	props: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >
 ) {
 	const {
 		onClick,
 		as = Button,
-		goToParent: goToParentProp = false,
+
 		...otherProps
 	} = useContextSystem( props, 'NavigatorBackButton' );
 
-	const { goBack, goToParent } = useNavigator();
+	const { goBack } = useNavigator();
 	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
 		useCallback(
 			( e ) => {
 				e.preventDefault();
-				if ( goToParentProp ) {
-					goToParent();
-				} else {
-					goBack();
-				}
+				goBack();
 				onClick?.( e );
 			},
-			[ goToParentProp, goToParent, goBack, onClick ]
+			[ goBack, onClick ]
 		);
 
 	return {
diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md
index 8be27a65101843..13745fae68a15d 100644
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ b/packages/components/src/navigator/navigator-provider/README.md
@@ -10,38 +10,42 @@ The `NavigatorProvider` component allows rendering nested views/panels/menus (vi
 
 ```jsx
 import {
-  __experimentalNavigatorProvider as NavigatorProvider,
-  __experimentalNavigatorScreen as NavigatorScreen,
-  __experimentalNavigatorButton as NavigatorButton,
-  __experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 
 const MyNavigation = () => (
-  <NavigatorProvider initialPath="/">
-    <NavigatorScreen path="/">
-      <p>This is the home screen.</p>
-       <NavigatorButton path="/child">
-         Navigate to child screen.
-      </NavigatorButton>
-    </NavigatorScreen>
-
-    <NavigatorScreen path="/child">
-      <p>This is the child screen.</p>
-      <NavigatorToParentButton>
-        Go back
-      </NavigatorToParentButton>
-    </NavigatorScreen>
-  </NavigatorProvider>
+	<NavigatorProvider initialPath="/">
+		<NavigatorScreen path="/">
+			<p>This is the home screen.</p>
+			<NavigatorButton path="/child">
+				Navigate to child screen.
+			</NavigatorButton>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/child">
+			<p>This is the child screen.</p>
+			<NavigatorBackButton>Go back</NavigatorBackButton>
+		</NavigatorScreen>
+	</NavigatorProvider>
 );
 ```
+
 **Important note**
 
-Parent/child navigation only works if the path you define are hierarchical, following a URL-like scheme where each path segment is separated by the `/` character.
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
+
 For example:
-- `/` is the root of all paths. There should always be a screen with `path="/"`.
-- `/parent/child` is a child of `/parent`.
-- `/parent/child/grand-child` is a child of `/parent/child`.
-- `/parent/:param` is a child of `/parent` as well.
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`.
+-   `/parent/child` is a child of `/parent`.
+-   `/parent/child/grand-child` is a child of `/parent/child`.
+-   `/parent/:param` is a child of `/parent` as well.
+-   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
 
 ## Props
 
@@ -65,28 +69,26 @@ The `goTo` function allows navigating to a given path. The second argument can a
 
 The available options are:
 
-- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back.
-- `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too)
-
-### `goToParent`: `() => void;`
+-   `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
+-   `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
+-   `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
+-   `replace`: `boolean`. An optional property used to cause the new location to replace the current location in the stack.
 
-The `goToParent` function allows navigating to the parent screen.
+### `goBack`: `( path: string, options: NavigateOptions ) => void`
 
-Parent/child navigation only works if the path you define are hierarchical (see note above).
+The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
 
 When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) are found.
 
-### `goBack`: `() => void`
-
-The `goBack` function allows navigating to the previous path.
+The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
 
 ### `location`: `NavigatorLocation`
 
 The `location` object represent the current location, and has a few properties:
 
-- `path`: `string`. The path associated to the location.
-- `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards in the location stack.
-- `isInitial`: `boolean`. A flag that is `true` only for the first (root) location in the location stack.
+-   `path`: `string`. The path associated to the location.
+-   `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards in the location history.
+-   `isInitial`: `boolean`. A flag that is `true` only for the first (root) location in the location history.
 
 ### `params`: `Record< string, string | string[] >`
 
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 15eb4d6bd3b1d3..78bc674c06fbd5 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -27,12 +27,12 @@ import type {
 	Screen,
 	NavigateToParentOptions,
 } from '../types';
+import deprecated from '@wordpress/deprecated';
 
 type MatchedPath = ReturnType< typeof patternMatch >;
 
 type RouterAction =
 	| { type: 'add' | 'remove'; screen: Screen }
-	| { type: 'goback' }
 	| { type: 'goto'; path: string; options?: NavigateOptions }
 	| { type: 'gotoparent'; options?: NavigateToParentOptions };
 
@@ -160,9 +160,6 @@ function routerReducer(
 		case 'remove':
 			screens = removeScreen( state, action.screen );
 			break;
-		case 'goback':
-			locationHistory = goBack( state );
-			break;
 		case 'goto':
 			locationHistory = goTo( state, action.path, action.options );
 			break;
@@ -223,11 +220,20 @@ function UnconnectedNavigatorProvider(
 	// The methods are constant forever, create stable references to them.
 	const methods = useMemo(
 		() => ( {
-			goBack: () => dispatch( { type: 'goback' } ),
+			// Note: calling goBack calls `goToParent` internally, as it was established
+			// that `goBack` should behave like `goToParent`, and `goToParent` should
+			// be marked as deprecated.
+			goBack: ( options: NavigateToParentOptions | undefined ) =>
+				dispatch( { type: 'gotoparent', options } ),
 			goTo: ( path: string, options?: NavigateOptions ) =>
 				dispatch( { type: 'goto', path, options } ),
-			goToParent: ( options: NavigateToParentOptions | undefined ) =>
-				dispatch( { type: 'gotoparent', options } ),
+			goToParent: ( options: NavigateToParentOptions | undefined ) => {
+				deprecated( `wp.components.useNavigator().goToParent`, {
+					since: '6.7',
+					alternative: 'wp.components.useNavigator().goBack',
+				} );
+				dispatch( { type: 'gotoparent', options } );
+			},
 			addScreen: ( screen: Screen ) =>
 				dispatch( { type: 'add', screen } ),
 			removeScreen: ( screen: Screen ) =>
diff --git a/packages/components/src/navigator/navigator-screen/README.md b/packages/components/src/navigator/navigator-screen/README.md
index 5ba5af44fe8c1a..583da461cd3c27 100644
--- a/packages/components/src/navigator/navigator-screen/README.md
+++ b/packages/components/src/navigator/navigator-screen/README.md
@@ -16,6 +16,18 @@ The component accepts the following props:
 
 ### `path`: `string`
 
-The screen's path, matched against the current path stored in the navigator.
+The screen&quot;s path, matched against the current path stored in the navigator.
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`.
+-   `/parent/child` is a child of `/parent`.
+-   `/parent/child/grand-child` is a child of `/parent/child`.
+-   `/parent/:param` is a child of `/parent` as well.
+-   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
 
 -   Required: Yes
diff --git a/packages/components/src/navigator/navigator-to-parent-button/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md
index 62dacc3dfa4ea5..0100ea9b8d2e1f 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/README.md
+++ b/packages/components/src/navigator/navigator-to-parent-button/README.md
@@ -4,6 +4,8 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
+This component is deprecated. Please use the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) component instead.
+
 The `NavigatorToParentButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
 
 ## Usage
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index e73a3619f3d494..400498b1fc96ca 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -1,62 +1,33 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import type { ForwardedRef } from 'react';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { NavigatorBackButton } from '../navigator-back-button';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { View } from '../../view';
-import { useNavigatorBackButton } from '../navigator-back-button/hook';
-import type { NavigatorToParentButtonProps } from '../types';
+import type { NavigatorBackButtonProps } from '../types';
 
 function UnconnectedNavigatorToParentButton(
-	props: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,
-	forwardedRef: ForwardedRef< any >
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
+	forwardedRef: React.ForwardedRef< any >
 ) {
-	const navigatorToParentButtonProps = useNavigatorBackButton( {
-		...props,
-		goToParent: true,
+	deprecated( 'wp.components.NavigatorToParentButton', {
+		since: '6.7',
+		alternative: 'wp.components.NavigatorBackButton',
 	} );
 
-	return <View ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
+	return <NavigatorBackButton ref={ forwardedRef } { ...props } />;
 }
 
-/*
- * The `NavigatorToParentButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorToParentButton as NavigatorToParentButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
  *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorToParentButton>
- *         Go to parent
- *       </NavigatorToParentButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
+ * @deprecated
  */
 export const NavigatorToParentButton = contextConnect(
 	UnconnectedNavigatorToParentButton,
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index b83bd70d9d7444..9b9b257ea09681 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -25,8 +25,8 @@ import {
 import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
-	raw: ' "\'><=invalid_path',
-	escaped: " &quot;'&gt;<=invalid_path",
+	raw: '/ "\'><=invalid_path',
+	escaped: "/ &quot;'&gt;<=invalid_path",
 };
 
 const PATHS = {
@@ -165,6 +165,27 @@ function CustomNavigatorToParentButton( {
 	);
 }
 
+function CustomNavigatorToParentButtonAlternative( {
+	onClick,
+	children,
+}: {
+	children: React.ReactNode;
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goToParent } = useNavigator();
+	return (
+		<button
+			onClick={ () => {
+				goToParent();
+				// Used to spy on the values passed to `navigator.goBack`.
+				onClick?.( { type: 'goToParent' } );
+			} }
+		>
+			{ children }
+		</button>
+	);
+}
+
 const ProductScreen = ( {
 	onBackButtonClick,
 }: {
@@ -344,20 +365,20 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.toNestedScreen }
 					</CustomNavigatorButton>
-					<CustomNavigatorToParentButton
+					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
-					</CustomNavigatorToParentButton>
+					</CustomNavigatorBackButton>
 				</NavigatorScreen>
 
 				<NavigatorScreen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
-					<CustomNavigatorToParentButton
+					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
-					</CustomNavigatorToParentButton>
+					</CustomNavigatorBackButton>
 					<CustomNavigatorGoToBackButton
 						path={ PATHS.CHILD }
 						onClick={ onNavigatorButtonClick }
@@ -376,6 +397,66 @@ const MyHierarchicalNavigation = ( {
 	);
 };
 
+const MyDeprecatedNavigation = ( {
+	initialPath = PATHS.HOME,
+	onNavigatorButtonClick,
+}: {
+	initialPath?: string;
+	onNavigatorButtonClick?: CustomTestOnClickHandler;
+} ) => {
+	return (
+		<>
+			<NavigatorProvider initialPath={ initialPath }>
+				<NavigatorScreen path={ PATHS.HOME }>
+					<p>{ SCREEN_TEXT.home }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable home screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.CHILD }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toChildScreen }
+					</CustomNavigatorButton>
+				</NavigatorScreen>
+
+				<NavigatorScreen path={ PATHS.CHILD }>
+					<p>{ SCREEN_TEXT.child }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable child screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.NESTED }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toNestedScreen }
+					</CustomNavigatorButton>
+					<CustomNavigatorToParentButton
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorToParentButton>
+				</NavigatorScreen>
+
+				<NavigatorScreen path={ PATHS.NESTED }>
+					<p>{ SCREEN_TEXT.nested }</p>
+					<CustomNavigatorToParentButtonAlternative
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorToParentButtonAlternative>
+				</NavigatorScreen>
+			</NavigatorProvider>
+		</>
+	);
+};
+
 const getScreen = ( screenKey: keyof typeof SCREEN_TEXT ) =>
 	screen.getByText( SCREEN_TEXT[ screenKey ] );
 const queryScreen = ( screenKey: keyof typeof SCREEN_TEXT ) =>
@@ -769,4 +850,53 @@ describe( 'Navigator', () => {
 			).toHaveFocus();
 		} );
 	} );
+
+	describe( 'deprecated APIs', () => {
+		it( 'should log a deprecation notice when using the NavigatorToParentButton component', async () => {
+			const user = userEvent.setup();
+
+			render( <MyDeprecatedNavigation initialPath={ PATHS.CHILD } /> );
+
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+
+			// Navigate back to home screen.
+			// The first tabbable element receives focus, since focus restoration
+			// it not possible (there was no forward navigation).
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable home screen button',
+				} )
+			).toHaveFocus();
+
+			// Rendering `NavigatorToParentButton` logs a deprecation notice
+			expect( console ).toHaveWarnedWith(
+				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.NavigatorBackButton instead.'
+			);
+		} );
+
+		it( 'should log a deprecation notice when using the useNavigator().goToParent() function', async () => {
+			const user = userEvent.setup();
+
+			render( <MyDeprecatedNavigation initialPath={ PATHS.NESTED } /> );
+
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// Navigate back to child screen using the back button.
+			// The first tabbable element receives focus, since focus restoration
+			// it not possible (there was no forward navigation).
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+
+			expect( console ).toHaveWarnedWith(
+				'wp.components.useNavigator().goToParent is deprecated since version 6.7. Please use wp.components.useNavigator().goBack instead.'
+			);
+		} );
+	} );
 } );
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 557f8074fd42e2..c45762d558af2d 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -11,26 +11,70 @@ import type { ButtonAsButtonProps } from '../button/types';
 export type MatchParams = Record< string, string | string[] >;
 
 export type NavigateOptions = {
+	/**
+	 * Specify the CSS selector used to restore focus on an given element when
+	 * navigating back. When not provided, the component will attempt to restore
+	 * focus on the element that originated the forward navigation.
+	 */
 	focusTargetSelector?: string;
+	/**
+	 * Whether the navigation is a backwards navigation. This enables focus
+	 * restoration (when possible), and causes the animation to be backwards.
+	 */
 	isBack?: boolean;
+	/**
+	 * Opt out of focus management. Useful when the consumer of the component
+	 * wants to manage focus themselves.
+	 */
 	skipFocus?: boolean;
+	/**
+	 * Whether the navigation should replace the current location in the stack.
+	 */
 	replace?: boolean;
 };
 
 export type NavigateToParentOptions = Omit< NavigateOptions, 'isBack' >;
 
 export type NavigatorLocation = NavigateOptions & {
+	/**
+	 * Whether the current location is the initial one (ie. first in the stack).
+	 */
 	isInitial?: boolean;
+	/**
+	 * The path associated to the location.
+	 */
 	path?: string;
+	/**
+	 * Whether focus was already restored for this location (in case of
+	 * backwards navigation).
+	 */
 	hasRestoredFocus?: boolean;
 };
 
 // Returned by the `useNavigator` hook.
 export type Navigator = {
+	/**
+	 * The current location.
+	 */
 	location: NavigatorLocation;
+	/**
+	 * Params associated with the current location
+	 */
 	params: MatchParams;
+	/**
+	 * Navigate to a new location.
+	 */
 	goTo: ( path: string, options?: NavigateOptions ) => void;
-	goBack: () => void;
+	/**
+	 * Go back to the parent location (ie. "/some/path" will navigate back
+	 * to "/some")
+	 */
+	goBack: ( options?: NavigateToParentOptions ) => void;
+	/**
+	 * _Note: This function is deprecated. Please use `goBack` instead._
+	 * @deprecated
+	 * @ignore
+	 */
 	goToParent: ( options?: NavigateToParentOptions ) => void;
 };
 
@@ -64,15 +108,6 @@ export type NavigatorScreenProps = {
 
 export type NavigatorBackButtonProps = ButtonAsButtonProps;
 
-export type NavigatorBackButtonHookProps = NavigatorBackButtonProps & {
-	/**
-	 * Whether we should navigate to the parent screen.
-	 *
-	 * @default 'false'
-	 */
-	goToParent?: boolean;
-};
-
 export type NavigatorToParentButtonProps = NavigatorBackButtonProps;
 
 export type NavigatorButtonProps = NavigatorBackButtonProps & {

From 65da2128fb798638717bc27d55823590afc3cd47 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 17 Aug 2024 01:56:12 +0900
Subject: [PATCH 156/205] CustomSelectControl: Add lint rule for 40px size prop
 usage (#64559)

* Fix in DateFormatPicker

* Make explicit in FontAppearanceControl

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                                   | 1 +
 .../block-editor/src/components/date-format-picker/index.js    | 1 +
 .../src/components/font-appearance-control/index.js            | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2cdbb5c056cb14..42bb0accd72f1a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -313,6 +313,7 @@ module.exports = {
 					...[
 						'BorderBoxControl',
 						'BorderControl',
+						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',
 						'ToggleGroupControl',
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 63c977b111e01c..edefd6249f1aae 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -129,6 +129,7 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
+				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 418d43e322ac89..38cb42e394a3bd 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -39,6 +39,8 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next40pxDefaultSize = false,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -150,6 +152,7 @@ export default function FontAppearanceControl( props ) {
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

From 78722b9e62b13308d8ce39a1a31901bdf70562b4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 17 Aug 2024 02:38:24 +0900
Subject: [PATCH 157/205] NumberControl: Add lint rule for 40px size prop usage
 (#64561)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                               | 1 +
 .../src/components/line-height-control/README.md           | 7 +++++++
 .../src/components/line-height-control/index.js            | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 42bb0accd72f1a..e21f7d6e6d7806 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -316,6 +316,7 @@ module.exports = {
 						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',
+						'NumberControl',
 						'ToggleGroupControl',
 					].map( ( componentName ) => ( {
 						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index dafad9145022b9..89bcc69622367f 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -36,6 +36,13 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
+#### `__next40pxDefaultSize`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index d605aea3d2ef18..b2c99c03f87840 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -16,6 +16,8 @@ import {
 } from './utils';
 
 const LineHeightControl = ( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
 	value: lineHeight,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -91,6 +93,7 @@ const LineHeightControl = ( {
 		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }

From a0951885b0a9bdd225046c2a5c7def9bf5c5aefc Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 17 Aug 2024 04:01:35 +0900
Subject: [PATCH 158/205] ComboboxControl: Add lint rule for 40px size prop
 usage (#64560)

* Fix in Author block

* Fix in Avatar block

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                  |   1 +
 .../block-library/src/avatar/user-control.js  |   1 +
 packages/block-library/src/editor.scss        |   1 +
 .../block-library/src/post-author/block.json  |   1 +
 .../block-library/src/post-author/edit.js     | 125 ++++++++++--------
 .../block-library/src/post-author/editor.scss |   7 +
 6 files changed, 78 insertions(+), 58 deletions(-)
 create mode 100644 packages/block-library/src/post-author/editor.scss

diff --git a/.eslintrc.js b/.eslintrc.js
index e21f7d6e6d7806..f6b24dcb15017f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -313,6 +313,7 @@ module.exports = {
 					...[
 						'BorderBoxControl',
 						'BorderControl',
+						'ComboboxControl',
 						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',
diff --git a/packages/block-library/src/avatar/user-control.js b/packages/block-library/src/avatar/user-control.js
index 598c05011eaed7..235202ffec90d7 100644
--- a/packages/block-library/src/avatar/user-control.js
+++ b/packages/block-library/src/avatar/user-control.js
@@ -33,6 +33,7 @@ function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 52f3aa64287fae..0669a082b1086f 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -31,6 +31,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index 6f814810744c6d..dde9320841820d 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -66,5 +66,6 @@
 			"clientNavigation": true
 		}
 	},
+	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"
 }
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 1bc1ef4ffcd8a3..6186b0d052e8aa 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -18,6 +18,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -100,74 +101,82 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ showAuthorControl &&
-						( ( showCombobox && (
-							<ComboboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								options={ authorOptions }
-								value={ authorId }
-								onChange={ handleSelect }
-								allowReset={ false }
-							/>
-						) ) || (
+					<VStack
+						spacing={ 4 }
+						className="wp-block-post-author__inspector-settings"
+					>
+						{ showAuthorControl &&
+							( ( showCombobox && (
+								<ComboboxControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									options={ authorOptions }
+									value={ authorId }
+									onChange={ handleSelect }
+									allowReset={ false }
+								/>
+							) ) || (
+								<SelectControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									value={ authorId }
+									options={ authorOptions }
+									onChange={ handleSelect }
+								/>
+							) ) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show avatar' ) }
+							checked={ showAvatar }
+							onChange={ () =>
+								setAttributes( { showAvatar: ! showAvatar } )
+							}
+						/>
+						{ showAvatar && (
 							<SelectControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								value={ authorId }
-								options={ authorOptions }
-								onChange={ handleSelect }
+								label={ __( 'Avatar size' ) }
+								value={ attributes.avatarSize }
+								options={ avatarSizes }
+								onChange={ ( size ) => {
+									setAttributes( {
+										avatarSize: Number( size ),
+									} );
+								} }
 							/>
-						) ) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show avatar' ) }
-						checked={ showAvatar }
-						onChange={ () =>
-							setAttributes( { showAvatar: ! showAvatar } )
-						}
-					/>
-					{ showAvatar && (
-						<SelectControl
-							__next40pxDefaultSize
+						) }
+						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Avatar size' ) }
-							value={ attributes.avatarSize }
-							options={ avatarSizes }
-							onChange={ ( size ) => {
-								setAttributes( {
-									avatarSize: Number( size ),
-								} );
-							} }
+							label={ __( 'Show bio' ) }
+							checked={ showBio }
+							onChange={ () =>
+								setAttributes( { showBio: ! showBio } )
+							}
 						/>
-					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show bio' ) }
-						checked={ showBio }
-						onChange={ () =>
-							setAttributes( { showBio: ! showBio } )
-						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link author name to author page' ) }
-						checked={ isLink }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					/>
-					{ isLink && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link author name to author page' ) }
+							checked={ isLink }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
 						/>
-					) }
+						{ isLink && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						) }
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 
diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
new file mode 100644
index 00000000000000..f6464893138cff
--- /dev/null
+++ b/packages/block-library/src/post-author/editor.scss
@@ -0,0 +1,7 @@
+.wp-block-post-author__inspector-settings {
+	// Counteract the margin added by the block inspector.
+	.components-base-control,
+	.components-base-control:last-child {
+		margin-bottom: 0;
+	}
+}

From c459a7bebec8d8c7db8af2a0be6517a02d573b3c Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:39:54 +0530
Subject: [PATCH 159/205] Feat: Button groups in Typography tools should use
 ToggleGroupControl (#64529)

* Update the letterCase typogrpahy panel to use toggleGroupOption component

* Remove unecessary style for segmented text control and match height with components

* Remove SegmentedTextControl component and use toggleControl

* Reduce the diff change in the PR

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../segmented-text-control/index.js           | 63 -------------------
 .../segmented-text-control/style.scss         | 15 -----
 .../text-alignment-control/index.js           | 28 ++++++---
 .../text-decoration-control/index.js          | 28 ++++++---
 .../text-transform-control/index.js           | 28 ++++++---
 .../components/writing-mode-control/index.js  | 28 ++++++---
 packages/block-editor/src/style.scss          |  1 -
 7 files changed, 80 insertions(+), 111 deletions(-)
 delete mode 100644 packages/block-editor/src/components/segmented-text-control/index.js
 delete mode 100644 packages/block-editor/src/components/segmented-text-control/style.scss

diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
deleted file mode 100644
index 28f049bfb40ec9..00000000000000
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { BaseControl, Button } from '@wordpress/components';
-
-/**
- * @typedef {Object} Option
- * @property {string} label The label of the option.
- * @property {string} value The value of the option.
- * @property {string} icon  The icon of the option.
- */
-
-/**
- * Control to facilitate selecting a text style from a set of options.
- *
- * @param {Object}   props           Component props.
- * @param {string}   props.label     A label for the option.
- * @param {string}   props.value     Currently selected value.
- * @param {Function} props.onChange  Callback to handle onChange.
- * @param {Option[]} props.options   Array of options to display.
- * @param {string}   props.className Additional class name to apply.
- *
- * @return {Element} Element to render.
- */
-export default function SegmentedTextControl( {
-	label,
-	value,
-	options,
-	onChange,
-	className,
-} ) {
-	return (
-		<fieldset
-			className={ clsx(
-				'block-editor-segmented-text-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-segmented-text-control__buttons">
-				{ options.map( ( option ) => {
-					return (
-						<Button
-							size="compact"
-							key={ option.value }
-							icon={ option.icon }
-							label={ option.label }
-							isPressed={ option.value === value }
-							onClick={ () => onChange( option.value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
-	);
-}
diff --git a/packages/block-editor/src/components/segmented-text-control/style.scss b/packages/block-editor/src/components/segmented-text-control/style.scss
deleted file mode 100644
index 7a4a3bbea7cb33..00000000000000
--- a/packages/block-editor/src/components/segmented-text-control/style.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.block-editor-segmented-text-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-segmented-text-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		margin-right: $grid-unit-05;
-	}
-}
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 88a6fe274ea09b..6eeaad784db0f0 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -14,11 +14,10 @@ import {
 	alignJustify,
 } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_ALIGNMENT_OPTIONS = [
 	{
@@ -75,9 +74,11 @@ export default function TextAlignmentControl( {
 	}
 
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
-			options={ validOptions }
 			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
@@ -86,6 +87,17 @@ export default function TextAlignmentControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ validOptions.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index d06632afdbb3ca..720f3d2d9558eb 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_DECORATIONS = [
 	{
@@ -48,9 +47,11 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
-			options={ TEXT_DECORATIONS }
 			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
@@ -59,6 +60,17 @@ export default function TextDecorationControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_DECORATIONS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index f448a55ed946c3..a3183e630c328a 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -13,11 +13,10 @@ import {
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_TRANSFORMS = [
 	{
@@ -54,9 +53,11 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
-			options={ TEXT_TRANSFORMS }
 			className={ clsx(
 				'block-editor-text-transform-control',
 				className
@@ -65,6 +66,17 @@ export default function TextTransformControl( { className, value, onChange } ) {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_TRANSFORMS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index 7732f54b1569a7..bffccfd579c6b0 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const WRITING_MODES = [
 	{
@@ -39,14 +38,27 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
-			options={ WRITING_MODES }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ WRITING_MODES.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 47b87bb50918df..feaabbbda94426 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -40,7 +40,6 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
-@import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
 @import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";

From 68dd5ce54901a2d5f8bf25ba170d603701426ad4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 17 Aug 2024 04:33:24 +0900
Subject: [PATCH 160/205] RangeControl: Add lint rule for 40px size prop usage
 (#64558)

* Fix in Query Loop block

* Fix in Excerpt block

* Fix in Grid block

* Fix in SpacingSizesControl

* Fix in Image block Zoom control

* Fix in HeightControl

* Fix in BorderRadiusControl

* Add lint rule

* Fixup in HeightControl

* Address in ColorPicker

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                  |  1 +
 .../components/border-radius-control/index.js |  1 +
 .../border-radius-control/style.scss          | 10 -------
 .../src/components/height-control/index.js    |  1 +
 .../components/image-editor/zoom-dropdown.js  | 26 ++++++++++++-------
 .../input-controls/spacing-input-control.js   |  2 ++
 .../spacing-sizes-control/style.scss          | 10 -------
 packages/block-editor/src/layouts/grid.js     |  2 ++
 .../block-library/src/post-excerpt/edit.js    |  1 +
 .../src/query-pagination-numbers/edit.js      |  1 +
 .../src/color-picker/input-with-slider.tsx    |  1 +
 11 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f6b24dcb15017f..5a939aeb9173b7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -318,6 +318,7 @@ module.exports = {
 						'DimensionControl',
 						'FontSizePicker',
 						'NumberControl',
+						'RangeControl',
 						'ToggleGroupControl',
 					].map( ( componentName ) => ( {
 						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js
index 4c614084a7e200..cab9b87b3b29c0 100644
--- a/packages/block-editor/src/components/border-radius-control/index.js
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -104,6 +104,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							__next40pxDefaultSize
 							label={ __( 'Border radius' ) }
 							hideLabelFromVision
 							className="components-border-radius-control__range-control"
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
index c94dfbbd0a8fdb..18360cf3162ab1 100644
--- a/packages/block-editor/src/components/border-radius-control/style.scss
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -20,16 +20,6 @@
 		.components-border-radius-control__range-control {
 			flex: 1;
 			margin-right: $grid-unit-15;
-
-			> div {
-				height: 40px;
-				display: flex;
-				align-items: center;
-			}
-		}
-
-		> span {
-			flex: 0 0 auto;
 		}
 	}
 
diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
index 71753a67beb021..5d42e217776d6a 100644
--- a/packages/block-editor/src/components/height-control/index.js
+++ b/packages/block-editor/src/components/height-control/index.js
@@ -164,6 +164,7 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
+							__next40pxDefaultSize
 							value={ customRangeValue }
 							min={ 0 }
 							max={
diff --git a/packages/block-editor/src/components/image-editor/zoom-dropdown.js b/packages/block-editor/src/components/image-editor/zoom-dropdown.js
index 70baa28b2e112c..5093b11feb6d87 100644
--- a/packages/block-editor/src/components/image-editor/zoom-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/zoom-dropdown.js
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
+import {
+	ToolbarButton,
+	RangeControl,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
 
@@ -27,14 +32,17 @@ export default function ZoomDropdown() {
 				/>
 			) }
 			renderContent={ () => (
-				<RangeControl
-					__nextHasNoMarginBottom
-					label={ __( 'Zoom' ) }
-					min={ MIN_ZOOM }
-					max={ MAX_ZOOM }
-					value={ Math.round( zoom ) }
-					onChange={ setZoom }
-				/>
+				<DropdownContentWrapper paddingSize="medium">
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Zoom' ) }
+						min={ MIN_ZOOM }
+						max={ MAX_ZOOM }
+						value={ Math.round( zoom ) }
+						onChange={ setZoom }
+					/>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
index 5cdfe47c452b23..d00feed704d17a 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -249,6 +249,7 @@ export default function SpacingInputControl( {
 						} }
 					/>
 					<RangeControl
+						__next40pxDefaultSize
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
 						onFocus={ onMouseOver }
@@ -270,6 +271,7 @@ export default function SpacingInputControl( {
 			) }
 			{ showRangeControl && ! showCustomValueControl && (
 				<RangeControl
+					__next40pxDefaultSize
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					className="spacing-sizes-control__range-control"
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
index 69f30a8c7d1e90..cbcc8e30c58253 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -18,17 +18,7 @@
 
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
-		height: 40px;
-		/* Vertically center the RangeControl until it has true 40px height. */
-		display: flex;
-		align-items: center;
-		margin-bottom: 0;
 		flex: 1;
-
-		> .components-base-control__field {
-			/* Fixes RangeControl contents when the outer wrapper is flex */
-			flex: 1;
-		}
 	}
 
 	.components-range-control__mark {
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index c574ad0ae43d5d..7ab5c7ebbc8c3d 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -264,6 +264,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
@@ -368,6 +369,7 @@ function GridLayoutColumnsAndRowsControl( {
 							/>
 						) : (
 							<RangeControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								value={ columnCount ?? 0 }
 								onChange={ ( value ) =>
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 45d0a79a411d61..05aaf543b59196 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -231,6 +231,7 @@ export default function PostExcerptEditor( {
 						}
 					/>
 					<RangeControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Max number of words' ) }
 						value={ excerptLength }
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
index e495fe8529a07a..b8d8c160cc874d 100644
--- a/packages/block-library/src/query-pagination-numbers/edit.js
+++ b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Number of links' ) }
 						help={ __(
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index b51db75c1f4513..535adc3f2af6ee 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -53,6 +53,7 @@ export const InputWithSlider = ( {
 			/>
 			<RangeControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ label }
 				hideLabelFromVision
 				min={ min }

From 8169dfd2c89b82ed39bb74be8063a715b467c184 Mon Sep 17 00:00:00 2001
From: Xinyu Liu <meteor.lxy@foxmail.com>
Date: Sat, 17 Aug 2024 05:51:32 +0800
Subject: [PATCH 161/205] CustomSelectControl: improve props type inferring
 (#64412)

* CustomSelectControl: improve props type inferring

* chore: update changelog

* chore: updates

Co-authored-by: meteorlxy <meteorlxy@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   4 +
 .../src/custom-select-control/test/index.tsx  | 125 ++++++++++++++++++
 .../src/custom-select-control/types.ts        |   6 +-
 3 files changed, 132 insertions(+), 3 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f824bf8d2b2ddc..f1b6ba3341de60 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -67,6 +67,10 @@
 -   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
 -   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 
+### Internal
+
+-   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
+
 ## 28.5.0 (2024-08-07)
 
 ### Bug Fixes
diff --git a/packages/components/src/custom-select-control/test/index.tsx b/packages/components/src/custom-select-control/test/index.tsx
index fdbe8d72a48dec..b2ac5c19c6ab3f 100644
--- a/packages/components/src/custom-select-control/test/index.tsx
+++ b/packages/components/src/custom-select-control/test/index.tsx
@@ -689,3 +689,128 @@ describe.each( [
 		} );
 	} );
 } );
+
+describe( 'Type checking', () => {
+	// eslint-disable-next-line jest/expect-expect
+	it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+		const options = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		];
+		const optionsReadOnly = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		] as const;
+
+		const onChange = (): void => {};
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'random string is also accepted for non-readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				// @ts-expect-error: random string is not accepted for immutable options
+				key: 'random string is not accepted for readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+	} );
+} );
diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts
index e37ba349a2b843..0cbc2388e79638 100644
--- a/packages/components/src/custom-select-control/types.ts
+++ b/packages/components/src/custom-select-control/types.ts
@@ -55,7 +55,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 * Function called with the control's internal state changes. The `selectedItem`
 	 * property contains the next selected item.
 	 */
-	onChange?: ( newValue: CustomSelectChangeObject< T > ) => void;
+	onChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;
 	/**
 	 * A handler for `blur` events on the trigger button.
 	 *
@@ -83,7 +83,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * The list of options that can be chosen from.
 	 */
-	options: Array< T >;
+	options: ReadonlyArray< T >;
 	/**
 	 * The size of the control.
 	 *
@@ -93,7 +93,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Can be used to externally control the value of the control.
 	 */
-	value?: T;
+	value?: NoInfer< T >;
 	/**
 	 * Use the `showSelectedHint` property instead.
 	 * @deprecated

From 898448ab292642aa6b6430b9bd0a2fe9b017d335 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Sat, 17 Aug 2024 15:36:16 +0530
Subject: [PATCH 162/205] Updated typo in doc file (#64596)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 docs/contributors/code/release.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index f304ec9cd3a487..ec3af0d7bd4cb2 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -227,7 +227,7 @@ The final step is to write a release post on [make.wordpress.org/core](https://m
 
 > The plugin was published to the WordPress.org plugin directory but the workflow failed.
 
-This has happened ocassionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
+This has happened occasionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
 
 It's important to check that:
 

From 633236b6d667608788bb033dbc917214c23a5f72 Mon Sep 17 00:00:00 2001
From: Shreya Agarwal <78657883+shreya0204@users.noreply.github.com>
Date: Sat, 17 Aug 2024 15:52:46 +0530
Subject: [PATCH 163/205] fix: empty content sidebar panel (#64569)

Co-authored-by: shreya0204 <shreya0204@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
---
 .../editor/src/components/template-content-panel/index.js    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js
index af9721dfdf2b32..41e170e76daef5 100644
--- a/packages/editor/src/components/template-content-panel/index.js
+++ b/packages/editor/src/components/template-content-panel/index.js
@@ -59,7 +59,10 @@ export default function TemplateContentPanel() {
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
+	if (
+		( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) ||
+		clientIds.length === 0
+	) {
 		return null;
 	}
 

From 699288326ed7c8320d481ed86cf4c4bfa192c9d8 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 05:25:14 +0900
Subject: [PATCH 164/205] Components: Add 40px size prop to readmes (#64592)

* Components: Add 40px size prop to readmes

* Fixup

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .../border-box-control/README.md               |  7 +++++++
 .../border-control/border-control/README.md    |  7 +++++++
 packages/components/src/button/README.md       |  7 +++++++
 .../components/src/combobox-control/README.md  |  8 ++++++++
 .../src/custom-select-control/README.md        |  7 +++++++
 .../components/src/dimension-control/README.md | 18 +++++++++++++-----
 .../src/focal-point-picker/README.md           | 10 +++++++++-
 .../components/src/font-size-picker/README.md  |  7 +++++++
 .../components/src/form-file-upload/README.md  |  8 ++++++++
 .../components/src/form-token-field/README.md  |  1 +
 .../components/src/input-control/README.md     |  8 ++++++++
 .../components/src/number-control/README.md    |  8 ++++++++
 .../components/src/query-controls/README.md    |  7 +++++++
 .../components/src/range-control/README.md     |  7 +++++++
 .../components/src/select-control/README.md    |  8 ++++++++
 packages/components/src/text-control/README.md |  8 ++++++++
 .../toggle-group-control/README.md             |  7 +++++++
 packages/components/src/unit-control/README.md |  7 +++++++
 18 files changed, 134 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 20352e03c8243d..5ec2263bf16741 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -169,3 +169,10 @@ const splitBorders = {
 ```
 
 - Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 51fb7172b7c553..74a212d00026bd 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -173,3 +173,10 @@ Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
 - Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index b3a83904bc9ba6..d458771494a338 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -292,6 +292,13 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component.
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 9d00804e2f30e0..61611f82fee233 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -118,6 +118,14 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   Required: No
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 #### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 6804f4cf6ecd3a..a764a0df133eab 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -142,6 +142,13 @@ A handler for `blur` events on the trigger button.
 
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index 42f4a9678c09a6..3cd0191a046068 100644
--- a/packages/components/src/dimension-control/README.md
+++ b/packages/components/src/dimension-control/README.md
@@ -93,10 +93,18 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 
 A string of classes to be added to the control component.
 
-### __nextHasNoMarginBottom
+### `__next40pxDefaultSize`
 
-Start opting into the new margin-free styles that will become the default in a future version.
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+### `__nextHasNoMarginBottom`
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index f5db4885fdf7a4..baa6601d74dbcf 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/packages/components/src/focal-point-picker/README.md
@@ -100,10 +100,18 @@ Callback which is called at the start of drag operations.
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
 
-#### __nextHasNoMarginBottom
+### `__next40pxDefaultSize`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
 
 Start opting into the new margin-free styles that will become the default in a future version.
 
+### `__nextHasNoMarginBottom`
+
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
\ No newline at end of file
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 790468acc6c1fa..5d7fe2b39a7373 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -113,3 +113,10 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index f4dc4d1ef5a023..4dd8affc5f54a0 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -85,3 +85,11 @@ Optional callback function used to render the UI. If passed, the component does
 
 -   Type: `Function`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3da19ba534d312..70e9bd09a61a36 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -61,6 +61,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
+-   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 7af244f823516d..58a3b4a3b1a094 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -107,3 +107,11 @@ The current value of the input.
 
 -   Type: `String`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 3a54351cd29258..8421691296e90a 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -139,3 +139,11 @@ Amount by which the `value` is changed when incrementing/decrementing. It is als
 -   Type: `Number | "any"`
 -   Required: No
 -   Default: `1`
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
index 83cae88952d407..3eb6d507c9ccd6 100644
--- a/packages/components/src/query-controls/README.md
+++ b/packages/components/src/query-controls/README.md
@@ -240,3 +240,10 @@ The selected category for the `categoriesList` prop.
 
 -   Required: No
 -   Platform: Web
+
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 3da335b9ecf6e8..cfa8c76740e74f 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -362,6 +362,13 @@ Determines if the `input` number field will render next to the RangeControl. Thi
 -   Required: No
 -   Platform: Web
 
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ### `__nextHasNoMarginBottom`: `boolean`
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index 464ee180b38639..6c3ecda886a188 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -229,6 +229,14 @@ The style variant of the control.
 -   Required: No
 -   Default: `'default'`
 
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
index 4e2bfccb786d22..0b6e2d4ebc684e 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -127,6 +127,14 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md
index 6db7ec20544185..ca5c5d14eb6b5a 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md
@@ -88,6 +88,13 @@ The value of the `ToggleGroupControl`.
 
 -   Required: No
 
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ### `__nextHasNoMarginBottom`: `boolean`
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index b3c0496f86b800..dd54de80357d8e 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -147,3 +147,10 @@ Example:
 ```
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`

From e266e3f59cd60a8a531e9dcedebe55072a908b0e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 05:27:45 +0900
Subject: [PATCH 165/205] TextDecorationControl, TextTransformControl: Remove
 size prop in Storybook (#64583)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .../components/text-decoration-control/stories/index.story.js | 4 ----
 .../components/text-transform-control/stories/index.story.js  | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
index cb50e4cd6c6f73..2212b484185cde 100644
--- a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -13,10 +13,6 @@ export default {
 	component: TextDecorationControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
index 3219d714257e81..96dd8ed479dc4e 100644
--- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
@@ -13,10 +13,6 @@ export default {
 	component: TextTransformControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 

From fdbc84cef37ba0d0a89c2c41e460861204ad357d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 11:35:43 +0900
Subject: [PATCH 166/205] FormFileUpload: Add lint rule for 40px size prop
 usage (#64585)

* FormFileUpload: Document `__next40pxDefaultSize` prop

* Switch to explicit Button in MediaPlaceholder

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                  |  7 +++++++
 .../src/components/media-placeholder/index.js | 19 ++++++++++++-------
 .../components/src/form-file-upload/types.ts  |  6 ++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5a939aeb9173b7..3d484a6b3ed9d0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -327,6 +327,13 @@ module.exports = {
 							componentName +
 							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					} ) ),
+					{
+						// Falsy `__next40pxDefaultSize` without a `render` prop.
+						selector:
+							'JSXOpeningElement[name.name="FormFileUpload"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="render"]))',
+						message:
+							'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					},
 					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
 					...[ 'SelectControl', 'TextControl' ].map(
 						( componentName ) => ( {
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 347cd3e42d130f..c54ee9c0caf617 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -491,17 +491,22 @@ export function MediaPlaceholder( {
 				<>
 					{ renderDropZone() }
 					<FormFileUpload
-						variant="primary"
-						className={ clsx(
-							'block-editor-media-placeholder__button',
-							'block-editor-media-placeholder__upload-button'
+						render={ ( { openFileDialog } ) => (
+							<Button
+								onClick={ openFileDialog }
+								variant="primary"
+								className={ clsx(
+									'block-editor-media-placeholder__button',
+									'block-editor-media-placeholder__upload-button'
+								) }
+							>
+								{ __( 'Upload' ) }
+							</Button>
 						) }
 						onChange={ onUpload }
 						accept={ accept }
 						multiple={ !! multiple }
-					>
-						{ __( 'Upload' ) }
-					</FormFileUpload>
+					/>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderFeaturedImageToggle() }
diff --git a/packages/components/src/form-file-upload/types.ts b/packages/components/src/form-file-upload/types.ts
index 5b9054fa869eea..728ed959aba76e 100644
--- a/packages/components/src/form-file-upload/types.ts
+++ b/packages/components/src/form-file-upload/types.ts
@@ -10,6 +10,12 @@ import type Icon from '../icon';
 
 // TODO: Replace `children` and `icon` types with props from Button once Button is typed.
 export type FormFileUploadProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A string passed to `input` element that tells the browser which file types can be
 	 * upload to the upload by the user use. e.g: `image/*,video/*`.

From 515d0d9bb75ec1e5a21deb1bbf3e4795d590e85f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 11:36:58 +0900
Subject: [PATCH 167/205] FormTokenField: Add lint rule for 40px size prop
 usage (#64590)

* Fix in Query Loop block

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                                     | 1 +
 .../src/query/edit/inspector-controls/parent-control.js          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3d484a6b3ed9d0..5408ad5da884e2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -317,6 +317,7 @@ module.exports = {
 						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',
+						'FormTokenField',
 						'NumberControl',
 						'RangeControl',
 						'ToggleGroupControl',
diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
index 33cc1f83eda591..5fb9ffaad20e88 100644
--- a/packages/block-library/src/query/edit/inspector-controls/parent-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -132,6 +132,7 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }

From 2ad366bd072e722b407eed1c9c8364fc0d1236b2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 12:09:49 +0900
Subject: [PATCH 168/205] TextControl: Fix remaining 40px size violations
 (#64594)

* Fix in DateFormatPicker

* Fix in ImageURLInputUI

* Fix in Button block

* Fix in Form block InputFieldBlock

* Fix in Form block

* Fix in Image block content only mode

* Fix in Navigation block

* Fix in Post Comment block (deprecated)

* Fix in Featured Image block

* Fix in Categories block

* Fix in Title block

* Fix in Social Icons block

* Fix in Template Part block

* Fix in Video block track editor

* Fix in Dataviews Add new view modal

* Fix in Dataviews Rename view modal

* Fix in PostPublishPanel

* Fix in PostSlug component (unused in app)

* Fix in HierarchicalTermSelector

* Fix in ReusableBlockConvertButton (unused in app)

* Move to stricter lint rule

* Update snapshot

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                    | 17 ++++++++---------
 .../src/components/date-format-picker/index.js  |  3 +--
 .../url-popover/image-url-input-ui.js           |  6 ++----
 packages/block-library/src/button/edit.js       |  3 +--
 packages/block-library/src/form-input/edit.js   |  3 +--
 packages/block-library/src/form/edit.js         |  6 ++----
 packages/block-library/src/image/image.js       |  3 +--
 .../edit/navigation-menu-name-control.js        |  3 +--
 packages/block-library/src/post-comment/edit.js |  4 ++--
 .../src/post-featured-image/edit.js             |  3 +--
 packages/block-library/src/post-terms/edit.js   |  3 +--
 packages/block-library/src/post-title/edit.js   |  3 +--
 packages/block-library/src/social-link/edit.js  |  6 ++----
 .../src/template-part/edit/advanced-controls.js |  6 ++----
 .../block-library/src/video/tracks-editor.js    |  9 +++------
 .../sidebar-dataviews/add-new-view.js           |  3 +--
 .../sidebar-dataviews/custom-dataviews-list.js  |  3 +--
 .../post-publish-panel/postpublish.js           | 12 ++++++++----
 .../test/__snapshots__/index.js.snap            | 16 ++++++++--------
 .../editor/src/components/post-slug/index.js    |  3 +--
 .../hierarchical-term-selector.js               |  3 +--
 .../reusable-block-convert-button.js            |  3 +--
 22 files changed, 50 insertions(+), 71 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5408ad5da884e2..0637f7d84354eb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -320,6 +320,7 @@ module.exports = {
 						'FormTokenField',
 						'NumberControl',
 						'RangeControl',
+						'TextControl',
 						'ToggleGroupControl',
 					].map( ( componentName ) => ( {
 						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
@@ -336,15 +337,13 @@ module.exports = {
 							'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					},
 					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
-					...[ 'SelectControl', 'TextControl' ].map(
-						( componentName ) => ( {
-							// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
-							selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
-							message:
-								componentName +
-								' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
-						} )
-					),
+					...[ 'SelectControl' ].map( ( componentName ) => ( {
+						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
 				],
 			},
 		},
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index edefd6249f1aae..eb269e03ca5abc 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -150,8 +150,7 @@ function NonDefaultControls( { format, onChange } ) {
 			/>
 			{ isCustom && (
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index c19021c52356f5..c68cf5e58b9530 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -227,16 +227,14 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index d9f8acc91e4c8e..28d42ef16ca1e4 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -380,8 +380,7 @@ function ButtonEdit( props ) {
 			<InspectorControls group="advanced">
 				{ isLinkTag && (
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Link rel' ) }
 						value={ rel || '' }
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index fb84b0465b8402..6939443011ee5b 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -63,8 +63,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index 6a30dd0b61bf9d..a7260afabedf39 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -130,8 +130,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Method' ) }
 						options={ [
@@ -147,8 +146,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						) }
 					/>
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						autoComplete="off"
 						label={ __( 'Form action' ) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 0623d576e75aec..c4b54259028d91 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -690,8 +690,7 @@ export default function Image( {
 						) }
 						renderContent={ () => (
 							<TextControl
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="wp-block-image__toolbar_content_textarea"
 								__nextHasNoMarginBottom
 								label={ __( 'Title attribute' ) }
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
index 97a97d7763fc72..db895b0b644aac 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
@@ -14,8 +14,7 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
index f6abb5ff60c68e..a5193e427fa981 100644
--- a/packages/block-library/src/post-comment/edit.js
+++ b/packages/block-library/src/post-comment/edit.js
@@ -34,8 +34,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
@@ -44,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					/>
 
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
 							setAttributes( { commentId: commentIdInput } );
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 675580c71c1d7b..b2fc63ba9cbdc4 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -230,8 +230,7 @@ export default function PostFeaturedImageEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index 0403a1d1406bd3..13d5b61ad13d6b 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -83,8 +83,7 @@ export default function PostTermsEdit( {
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index abd52febd1882b..fdfb8e7c2c6cd2 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -162,8 +162,7 @@ export default function PostTitleEdit( {
 										checked={ linkTarget === '_blank' }
 									/>
 									<TextControl
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										__nextHasNoMarginBottom
 										label={ __( 'Link rel' ) }
 										value={ rel }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 39e3803982f48b..5ba57a8a29edf9 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -139,8 +139,7 @@ const SocialLinkEdit = ( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							label={ __( 'Text' ) }
 							help={ __(
@@ -157,8 +156,7 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index bf834065d1a54b..0a2b8bebbf4fca 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -73,8 +73,7 @@ export function TemplatePartAdvancedControls( {
 			{ isEntityAvailable && (
 				<>
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
@@ -85,8 +84,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 521d54e9231d1b..8928c26840e3d9 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -99,8 +99,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</span>
 				<Grid columns={ 2 } gap={ 4 }>
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
@@ -116,8 +115,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						onChange={ ( newSrcLang ) =>
 							onChange( {
@@ -132,8 +130,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</Grid>
 				<VStack spacing="8">
 					<SelectControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						className="block-library-video-tracks-editor__single-track-editor-kind-select"
 						options={ KIND_OPTIONS }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index 69cca49fd84563..5f366a8f93e65f 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -78,8 +78,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index cab5b0d31fa2ed..847029e8d6dcfe 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -51,8 +51,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index fdc1194527f5f7..29ee1871057ea1 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -44,7 +44,7 @@ const getFuturePostUrl = ( post ) => {
 function CopyButton( { text, onCopy, children } ) {
 	const ref = useCopyToClipboard( text, onCopy );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -122,8 +122,7 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
@@ -147,12 +146,17 @@ class PostPublishPanelPostpublish extends Component {
 
 					<div className="post-publish-panel__postpublish-buttons">
 						{ ! isScheduled && (
-							<Button variant="primary" href={ link }>
+							<Button
+								variant="primary"
+								href={ link }
+								__next40pxDefaultSize
+							>
 								{ viewPostLabel }
 							</Button>
 						) }
 						<Button
 							variant={ isScheduled ? 'primary' : 'secondary' }
+							__next40pxDefaultSize
 							href={ addLink }
 						>
 							{ addNewPostLabel }
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 42fc0f7fe0f245..9331376d7f9c35 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -120,7 +120,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -132,7 +132,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -143,11 +143,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -312,7 +312,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -324,7 +324,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -335,11 +335,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js
index adabac2f18b0bd..1a4f8e93d7565c 100644
--- a/packages/editor/src/components/post-slug/index.js
+++ b/packages/editor/src/components/post-slug/index.js
@@ -24,8 +24,7 @@ function PostSlugControl() {
 
 	return (
 		<TextControl
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Slug' ) }
 			autoComplete="off"
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index c711268a91e631..14bcaef7a0399a 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -407,8 +407,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		<Flex direction="column" gap="4">
 			{ showFilter && (
 				<TextControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }
 					value={ filterValue }
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index b6f30e24a2fdb3..81536b70a7ad32 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -169,8 +169,7 @@ export default function ReusableBlockConvertButton( {
 					>
 						<VStack spacing="5">
 							<TextControl
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
 								value={ title }

From cb37db7796b71463b9a8fece6409e446157c57d2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 19 Aug 2024 12:33:09 +0900
Subject: [PATCH 169/205] InputControl: Add lint rule for 40px size prop usage
 (#64589)

* Fix in ShadowsEditPanel

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                                     | 1 +
 .../edit-site/src/components/global-styles/shadows-edit-panel.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0637f7d84354eb..8f9b2d3337e18e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -318,6 +318,7 @@ module.exports = {
 						'DimensionControl',
 						'FontSizePicker',
 						'FormTokenField',
+						'InputControl',
 						'NumberControl',
 						'RangeControl',
 						'TextControl',
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index acca656428d187..2445863549593e 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -223,6 +223,7 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }

From bca4aeb1df77949d1254bf99674053cead5a34ec Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 19 Aug 2024 09:39:32 +0200
Subject: [PATCH 170/205] RangeControl: disable reset button consistently
 (#64579)

* Add some temporary test TODOs

* Temporarily comment out initialPosition's default value in Storybook

* Tweak reset button disable logic, extract computeResetValue function

* Update test comments

* Clean up code

* Update reset-related tests

* Restore Storybook default args

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/range-control/index.tsx    | 47 ++++++++++++---
 .../src/range-control/test/index.tsx          | 60 +++++++++++++++----
 3 files changed, 86 insertions(+), 22 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f1b6ba3341de60..da44a5837bb816 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -59,6 +59,7 @@
 
 ### Bug Fixes
 
+-   `RangeControl`: disable reset button when the current value is equal to the reset value ([#64579](https://github.com/WordPress/gutenberg/pull/64579)).
 -   `RangeControl`: tweak mark and label absolute positioning ([#64487](https://github.com/WordPress/gutenberg/pull/64487)).
 
 ### Internal
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index 20d9712df9c251..c9fbdc0055c855 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -41,6 +41,25 @@ import { space } from '../utils/space';
 
 const noop = () => {};
 
+/**
+ * Computes the value that `RangeControl` should reset to when pressing
+ * the reset button.
+ */
+function computeResetValue( {
+	resetFallbackValue,
+	initialPosition,
+}: Pick< RangeControlProps, 'resetFallbackValue' | 'initialPosition' > ) {
+	if ( resetFallbackValue !== undefined ) {
+		return ! Number.isNaN( resetFallbackValue ) ? resetFallbackValue : null;
+	}
+
+	if ( initialPosition !== undefined ) {
+		return ! Number.isNaN( initialPosition ) ? initialPosition : null;
+	}
+
+	return null;
+}
+
 function UnforwardedRangeControl(
 	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -166,13 +185,12 @@ function UnforwardedRangeControl(
 	};
 
 	const handleOnReset = () => {
-		let resetValue: number | null = parseFloat( `${ resetFallbackValue }` );
-		let onChangeResetValue: number | undefined = resetValue;
-
-		if ( isNaN( resetValue ) ) {
-			resetValue = null;
-			onChangeResetValue = undefined;
-		}
+		// Reset to `resetFallbackValue` if defined, otherwise set internal value
+		// to `null` — which, if propagated to the `value` prop, will cause
+		// the value to be reset to the `initialPosition` prop if defined.
+		const resetValue = Number.isNaN( resetFallbackValue )
+			? null
+			: resetFallbackValue ?? null;
 
 		setValue( resetValue );
 
@@ -189,7 +207,7 @@ function UnforwardedRangeControl(
 		 * preserve the undefined callback argument, except when a
 		 * resetFallbackValue is defined.
 		 */
-		onChange( onChangeResetValue );
+		onChange( resetValue ?? undefined );
 	};
 
 	const handleShowTooltip = () => setShowTooltip( true );
@@ -210,6 +228,7 @@ function UnforwardedRangeControl(
 	const offsetStyle = {
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -329,7 +348,17 @@ function UnforwardedRangeControl(
 							className="components-range-control__reset"
 							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
 							accessibleWhenDisabled={ ! disabled }
-							disabled={ disabled || value === undefined }
+							// The reset button should be disabled if RangeControl itself is disabled,
+							// or if the current `value` is equal to the value that would be currently
+							// assigned when clicking the button.
+							disabled={
+								disabled ||
+								value ===
+									computeResetValue( {
+										resetFallbackValue,
+										initialPosition,
+									} )
+							}
 							variant="secondary"
 							size="small"
 							onClick={ handleOnReset }
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index a4c5d8c6f2bc7f..3ce741867d0dbc 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -298,14 +298,37 @@ describe( 'RangeControl', () => {
 	} );
 
 	describe( 'reset', () => {
-		it( 'should reset to a custom fallback value, defined by a parent component', () => {
+		it( 'should clear the input value when clicking the reset button', () => {
+			const spy = jest.fn();
+			render( <RangeControl allowReset onChange={ spy } /> );
+
+			const resetButton = getResetButton();
+			const rangeInput = getRangeInput();
+			const numberInput = getNumberInput();
+
+			fireChangeEvent( numberInput, '14' );
+
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
+			fireEvent.click( resetButton );
+
+			// range input resets to min + (max-min)/2
+			expect( rangeInput.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+
+		it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
 			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ 10 }
 					allowReset
+					initialPosition={ 23 }
 					onChange={ spy }
-					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -313,21 +336,29 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
+			fireChangeEvent( numberInput, '14' );
+
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
 			fireEvent.click( resetButton );
 
-			expect( rangeInput.value ).toBe( '33' );
-			expect( numberInput.value ).toBe( '33' );
-			expect( spy ).toHaveBeenCalledWith( 33 );
+			expect( rangeInput.value ).toBe( '23' );
+			expect( numberInput.value ).toBe( '23' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
+		it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
+			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ undefined }
-					min={ 0 }
-					max={ 100 }
+					initialPosition={ 10 }
 					allowReset
-					resetFallbackValue={ undefined }
+					onChange={ spy }
+					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -337,8 +368,11 @@ describe( 'RangeControl', () => {
 
 			fireEvent.click( resetButton );
 
-			expect( rangeInput.value ).toBe( '50' );
-			expect( numberInput.value ).toBe( '' );
+			expect( rangeInput.value ).toBe( '33' );
+			expect( numberInput.value ).toBe( '33' );
+			expect( spy ).toHaveBeenCalledWith( 33 );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 	} );
 } );

From c1517edb5ee2f42cf6898928def56cc837960c56 Mon Sep 17 00:00:00 2001
From: "Joen A." <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 19 Aug 2024 09:44:06 +0200
Subject: [PATCH 171/205] Try: Overlay caption w. text-shadow. (#63471)

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: beafialho <beafialho@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
---
 packages/block-library/src/gallery/style.scss | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index afbc3088049858..1c4d5549339e1f 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -43,22 +43,44 @@ figure.wp-block-gallery.has-nested-images {
 			width: auto;
 		}
 
+		// Position caption and scrim at the bottom.
+		&:has(figcaption)::before,
 		figcaption {
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			position: absolute;
 			bottom: 0;
+			right: 0;
+			left: 0;
+			max-height: 100%;
+		}
+
+		// Create a background blur layer.
+		&:has(figcaption)::before {
+			content: "";
+			height: 100%;
+			max-height: 40%;
+
+			// Blur the background under the gradient scrim.
+			backdrop-filter: blur(3px);
+
+			// Crop the caption so the blur is only on the edge.
+			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
+		}
+
+		// Place the caption at the bottom.
+		figcaption {
 			color: $white;
+			text-shadow: 0 0 1.5px $black;
 			font-size: $default-font-size;
-			left: 0;
-			margin-bottom: 0;
-			max-height: 60%;
+			margin: 0;
 			overflow: auto;
-			padding: 0 8px 8px;
-			position: absolute;
+			padding: 1em;
 			text-align: center;
-			width: 100%;
 			box-sizing: border-box;
 			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
 
+			// Dark gradient scrim.
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
+
 			img {
 				display: inline;
 			}
@@ -85,6 +107,10 @@ figure.wp-block-gallery.has-nested-images {
 				margin: 0;
 				padding: 10px 10px 9px;
 				position: relative;
+				text-shadow: none;
+			}
+			&::before {
+				content: none;
 			}
 		}
 	}

From 2862f2d1f169bea73e0550ff800d4ea121945a60 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 19 Aug 2024 09:42:37 +0100
Subject: [PATCH 172/205] Disallow dropping outside section root in Zoom Out
 mode (#64500)

* Conditionalise Zoom Out dragOver to account for section root

* Fix comment typo

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

* Refactor to only call functions inside throttled callback

---------

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
---
 .../components/use-block-drop-zone/index.js   | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
index 415ed5070d28da..8115fe8f72a647 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -313,6 +313,8 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
+		getSettings,
+		isZoomOutMode,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -343,6 +345,7 @@ export default function useBlockDropZone( {
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
 				] )[ 0 ];
+
 				const draggedBlockNames = getBlockNamesByClientId(
 					getDraggedBlockClientIds()
 				);
@@ -352,10 +355,23 @@ export default function useBlockDropZone( {
 					draggedBlockNames,
 					targetBlockName
 				);
+
 				if ( ! isBlockDroppingAllowed ) {
 					return;
 				}
 
+				const { sectionRootClientId } = unlock( getSettings() );
+
+				// In Zoom Out mode, if the target is not the section root provided by settings then
+				// do not allow dropping as the drop target is not within the root (that which is
+				// treated as "the content" by Zoom Out Mode).
+				if (
+					isZoomOutMode() &&
+					sectionRootClientId !== targetRootClientId
+				) {
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
@@ -470,6 +486,7 @@ export default function useBlockDropZone( {
 				} );
 			},
 			[
+				isDragging,
 				getAllowedBlocks,
 				targetRootClientId,
 				getBlockNamesByClientId,
@@ -481,13 +498,14 @@ export default function useBlockDropZone( {
 				parentBlockClientId,
 				getBlockIndex,
 				registry,
-				showInsertionPoint,
-				isDragging,
 				startDragging,
+				showInsertionPoint,
 				canInsertBlockType,
+				isGroupable,
 				getBlockVariations,
 				getGroupingBlockName,
-				isGroupable,
+				getSettings,
+				isZoomOutMode,
 			]
 		),
 		200

From ade27acfd25a7900e807ecfb52ef3d9dfe5c9ee3 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Mon, 19 Aug 2024 12:40:07 +0200
Subject: [PATCH 173/205] iAPI Docs: The first three Core Concepts guides
 (#63759)

* Initial version

* Convert all tabs to spaces (except in non-PHP code snippets)

* Initial SSR guide version

* Initial version

* Changes to properly add a subsection in the docs

* Reorganize headers a bit

* Add titles (are they necessary?)

* Reorganize SSR sections

* Use async handlers and update state/context guide

* Finish review of the Declarative/reactive guide

* Remove last "we's"

* added manifest and toc data and intro to guides

* Final revision

* Fix typos

Co-authored-by: Damon Cook <colorful-tones@users.noreply.github.com>

---------

Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
---
 docs/manifest.json                            |  24 +
 .../interactivity-api/core-concepts/README.md |   9 +
 .../core-concepts/server-side-rendering.md    | 491 ++++++++++++
 .../the-reactive-and-declarative-mindset.md   | 300 +++++++
 ...l-state-local-context-and-derived-state.md | 740 ++++++++++++++++++
 docs/toc.json                                 |  13 +
 6 files changed, 1577 insertions(+)
 create mode 100644 docs/reference-guides/interactivity-api/core-concepts/README.md
 create mode 100644 docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
 create mode 100644 docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
 create mode 100644 docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md

diff --git a/docs/manifest.json b/docs/manifest.json
index b483449872cc76..e4eba19d99fa29 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -497,6 +497,30 @@
 		"markdown_source": "../docs/reference-guides/interactivity-api/README.md",
 		"parent": "reference-guides"
 	},
+	{
+		"title": "Core Concepts",
+		"slug": "core-concepts",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/README.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "The Reactive and Declarative mindset",
+		"slug": "the-reactive-and-declarative-mindset",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Understanding global state, local context and derived state",
+		"slug": "undestanding-global-state-local-context-and-derived-state",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Server-side rendering: Processing directives on the server",
+		"slug": "server-side-rendering",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md",
+		"parent": "core-concepts"
+	},
 	{
 		"title": "Quick start guide",
 		"slug": "iapi-quick-start-guide",
diff --git a/docs/reference-guides/interactivity-api/core-concepts/README.md b/docs/reference-guides/interactivity-api/core-concepts/README.md
new file mode 100644
index 00000000000000..ef59fb6075f925
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/README.md
@@ -0,0 +1,9 @@
+# Core Concepts
+
+This section provides some guides on important concepts and mental models related to Interactivity API development. Use the following links to learn more:
+
+1. **[The Reactive and Declarative mindset](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset):** This guide covers core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
+
+2. **[Understanding global state, local context and derived state](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
+
+3. **[Server-side rendering: Processing directives on the server](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/server-side-rendering):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
new file mode 100644
index 00000000000000..2032d12d5670b1
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
@@ -0,0 +1,491 @@
+# Server-side rendering: Processing directives on the server
+
+WordPress has always been built on the foundation of server-side rendering. Traditionally, when a user requests a WordPress page, the server processes the PHP code, queries the database, and generates the HTML markup that is sent to the browser.
+
+In recent years, modern JavaScript frameworks like Vue, React, or Svelte have revolutionized the way we build web applications. These frameworks provide reactive and declarative programming models that enable developers to create dynamic, interactive user interfaces with ease.
+
+However, when it comes to server-side rendering, these frameworks require a JavaScript-based server, such as NodeJS, to execute their code and generate the initial HTML. This means that PHP-based servers, like WordPress, cannot directly utilize these frameworks without sacrificing their native PHP rendering capabilities. This limitation poses a challenge for WordPress developers who want to leverage the power of reactive and declarative programming while still benefiting from WordPress's traditional server-side rendering strengths. The Interactivity API bridges this gap by bringing [reactive and declarative programming principles](./the-reactive-and-declarative-mindset.md) to WordPress without compromising its server-side rendering foundation.
+
+In this guide, we'll explore how the Interactivity API processes directives on the server, enabling WordPress to deliver interactive, state-aware HTML from the initial page load, while setting the stage for seamless client-side interactivity.
+
+## Processing the directives on the server
+
+The Interactivity API's Server Directive Processing capabilities enable WordPress to generate the initial HTML with the correct interactive state, providing a faster initial render. After the initial server-side render, the Interactivity API's client-side JavaScript takes over, enabling dynamic updates and interactions without requiring full page reloads. This approach combines the best of both worlds: the SEO and performance benefits of traditional WordPress server-side rendering, and the dynamic, reactive user interfaces offered by modern JavaScript frameworks.
+
+To understand how the Server Directive Processing works, let's start with an example where a list of fruits is rendered using the `data-wp-each` directive.
+
+The following are the necessary steps to ensure that the directives are correctly processed by the Server Directive Processing of the Interactivity API during the server-side rendering of WordPress.
+
+-   **1. Mark the block as interactive**
+
+    First, to enable the server processing of the interactive block's directives, you must add `supports.interactivity` to the `block.json`:
+
+    ```json
+    {
+    	"supports": {
+    		"interactivity": true
+    	}
+    }
+    ```
+
+-   **2. Initialize the global state or local context**
+
+    Then, you must initialize either the global state or the local context that will be used during the server-side rendering of the page.
+
+    If you are using global state, you must use the `wp_interactivity_state` function:
+
+    ```php
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits' => array( 'Apple', 'Banana', 'Cherry' )
+    ));
+    ```
+
+    If you are using local context, the initial values are defined with the `data-wp-context` directive itself, either by:
+
+    -   Adding it directly to the HTML.
+
+        ```html
+        <ul data-wp-context='{ "fruits": ["Apple", "Banana", "Cherry"] }'>
+        	...
+        </ul>
+        ```
+
+    -   Using the `wp_interactivity_data_wp_context` helper.
+
+        ```php
+        <?php
+        $context = array( 'fruits' => array( 'Apple', 'Banana', 'Cherry' ) );
+        ?>
+
+        <ul <?php echo wp_interactivity_data_wp_context( $context ); ?>>
+          ...
+        </ul>
+        ```
+
+-   **3. Define the interactive elements using directives**
+
+    Next, you need to add the necessary directives to the HTML markup.
+
+    ```html
+    <ul data-wp-interactive="myFruitPlugin">
+    	<template data-wp-each="state.fruits">
+    		<li data-wp-text="context.item"></li>
+    	</template>
+    </ul>
+    ```
+
+    In this example:
+
+    -   The `data-wp-interactive` directive activates the interactivity for the DOM element and its children.
+    -   The `data-wp-each` directive is used to render a list of elements. The directive can be used in `<template>` tags, with the value being a reference path to an array stored in the global state or the local context.
+    -   The `data-wp-text` directive sets the inner text of an HTML element. Here, it points to `context.item`, which is where the `data-wp-each` directive stores each item of the array.
+
+    The exact same directives can also be used when using local context instead of global state. The only difference is that `data-wp-each` points to `context.fruits` instead of `state.fruits`:
+
+    ```html
+    <ul
+    	data-wp-interactive="myFruitPlugin"
+    	data-wp-context='{ "fruits": [ "Apple", "Banana", "Cherry" ] }'
+    >
+    	<template data-wp-each="context.fruits">
+    		<li data-wp-text="context.item"></li>
+    	</template>
+    </ul>
+    ```
+
+That's it! Once you've set up your interctive block with `supports.interactivity`, initialized your global state or local context, and added the directives to the HTML markup, the Interactivity API will take care of the rest. There's no additional code required from the developer to process these directives on the server side.
+
+Behind the scenes, WordPress uses the `wp_interactivity_process_directives` function to find and process the directives in the HTML markup of your block. This function uses the HTML API to make the necessary changes to the markup, based on the found directives and the initial global state and/or local context.
+
+As a result, the HTML markup sent to the browser is already in its final form, with all directives correctly processed. This means that when the page first loads in the browser, it already contains the correct initial state of all interactive elements, without needing any JavaScript to modify it.
+
+This is how the final HTML markup of the fruit list example would look like (directives omitted):
+
+```html
+<ul>
+	<li>Apple</li>
+	<li>Banana</li>
+	<li>Cherry</li>
+</ul>
+```
+
+As you can see, the `data-wp-each` directive has generated a `<li>` element for each fruit in the array, and the `data-wp-text` directive has been processed, populating each `<li>` with the correct fruit name.
+
+## Manipulating the global state and local context in the client
+
+One of the key strengths of the Interactivity API is how it bridges the gap between server-side rendering and client-side interactivity. To do so, the global state and local context initialized on the server are also serialized and made available to the Interactivity API stores in the client, allowing the application to continue functioning and manipulating the DOM dynamically.
+
+Let's extend this example to include a button that the user can click to add a new fruit to the list:
+
+```html
+<button data-wp-on-async--click="actions.addMango">Add Mango</button>
+```
+
+This new button has a `data-wp-on-async--click` directive that references `actions.addMango`, which is defined in our JavaScript store:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			state.fruits.push( 'Mango' );
+		},
+	},
+} );
+```
+
+The same example would also work if you were using local context:
+
+```javascript
+store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			const context = getContext();
+			context.fruits.push( 'Mango' );
+		},
+	},
+} );
+```
+
+Now, when the user clicks the "Add Mango" button:
+
+1.  The `addMango` action is triggered.
+2.  The `'Mango'` item is added to the `state.fruits` (or `context.fruits`) array.
+3.  The Interactivity API automatically updates the DOM, adding a new `<li>` element for the new fruit.
+
+```html
+<ul>
+	<li>Apple</li>
+	<li>Banana</li>
+	<li>Cherry</li>
+	<li>Mango</li>
+</ul>
+```
+
+Remember: initializing the state on the client is not necessary when it has already been done on the server.
+
+```javascript
+store( 'myFruitPlugin', {
+	state: {
+		fruits: [ 'Apple', 'Banana', 'Cherry' ], // This is not necessary!
+	},
+} );
+```
+
+## Initializing the derived state in the server
+
+The derived state, regardless of whether it derives from the global state, local context, or both, can also be processed on the server by the Server Directive Processing.
+
+_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+
+### Derived state that can be defined statically
+
+Let's imagine adding a button that can delete all fruits:
+
+```html
+<button data-wp-on-async--click="actions.deleteFruits">
+	Delete all fruits
+</button>
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		// ...
+		deleteFruits() {
+			state.fruits = [];
+		},
+	},
+} );
+```
+
+Now, let's display a special message when there is no fruit. To do this, let's use a `data-wp-bind--hidden` directive that references a derived state called `state.hasFruits` to show/hide the message.
+
+```html
+<div data-wp-interactive="myFruitPlugin">
+	<ul data-wp-bind--hidden="!state.hasFruits">
+		<template data-wp-each="state.fruits">
+			<li data-wp-text="context.item"></li>
+		</template>
+	</ul>
+	<div data-wp-bind--hidden="state.hasFruits">No fruits, sorry!</div>
+</div>
+```
+
+The derived state `state.hasFruits` is defined on the client using a getter:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	state: {
+		get hasFruits() {
+			return state.fruits.length > 0;
+		},
+	},
+	// ...
+} );
+```
+
+Up to this point, everything is fine in the client, and when we press the "Delete all fruits" button, the "No fruits, sorry!" message will be displayed. The problem is that since `state.hasFruits` is not defined on the server, the `hidden` attribute will not be part of the initial HTML, which means it will also be showing the message until JavaScript loads, causing not only confusion to the visitor, but also a layout shift when JavaScript finally loads and the message is hidden.
+
+To fix this, you must define the initial value of the derived state in the server using `wp_interactivity_state`.
+
+-   When the initial value is known and static, it can be defined directly:
+
+    ```php
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits'    => array( 'Apple', 'Banana', 'Cherry' ),
+      'hasFruits' => true
+    ));
+    ```
+
+-   Or it can be defined by doing the necessary computations:
+
+    ```php
+    $fruits    = array( 'Apple', 'Banana', 'Cherry' );
+    $hasFruits = count( $fruits ) > 0;
+
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits'    => $fruits,
+      'hasFruits' => $hasFruits,
+    ));
+    ```
+
+Regardless of the approach, the key point is that the initial value of `state.hasFruits` is now defined on the server. This allows the Server Directive Processing to handle the `data-wp-bind--hidden` directive and modify the HTML markup, adding the `hidden` attribute when needed.
+
+### Derived state that needs to be defined dynamically
+
+In most cases, the initial derived state can be defined statically, as in the previous example. But sometimes, the value depends on dynamic values that also change in the server, and the derived logic needs to be replicated in PHP.
+
+To see an example of this, let's continue by adding a shopping cart emoji (🛒) for each fruit, depending on whether it is on a shopping list or not.
+
+First, let's add an array that represents the shopping list. _Remember that even though these arrays are static for simplicity sake, usually you will work with dynamic information, for example, information coming from the database._
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'        => array( 'Apple', 'Banana', 'Cherry' ),
+  'shoppingList'  => array( 'Apple', 'Cherry' ),
+));
+```
+
+Now, let's add a derived state on the client that checks if each fruit is on the shopping list or not and returns the emoji.
+
+```javascript
+store( 'myFruitPlugin', {
+	state: {
+		get onShoppingList() {
+			const context = getContext();
+			return state.shoppingList.includes( context.item ) ? '🛒' : '';
+		},
+	},
+	// ...
+} );
+```
+
+And let's use that derived state to show the appropriate emoji for each fruit.
+
+```html
+<ul data-wp-interactive="myFruitPlugin">
+	<template data-wp-each="state.fruits">
+		<li>
+			<span data-wp-text="context.item"></span>
+			<span data-wp-text="state.onShoppingList"></span>
+		</li>
+	</template>
+</ul>
+```
+
+Again, up to this point, everything is fine on the client side and the visitor will see the correct emoji displayed for the fruits they have on their shopping list. However, since `state.onShoppingList` is not defined on the server, the emoji will not be part of the initial HTML, and it will not be shown until JavaScript loads.
+
+Let's fix that by adding the initial derived state using `wp_interactivity_state`. Remember that this time, the value depends on `context.item` that comes from the `data-wp-each` directive, which makes the derived value dynamic, so let's replicate the JavaScript logic in PHP:
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  // ...
+  'onShoppingList' => function() {
+    $state   = wp_interactivity_state();
+    $context = wp_interactivity_get_context();
+    return in_array( $context['item'], $state['shoppingList'] ) ? '🛒' : '';
+  }
+));
+```
+
+That's it! Now, our server can compute the derived state and know which fruits are on the shopping list and which are not. This allows the Server Directive Processing to populate the initial HTML with the correct values, ensuring that the user sees the correct information immediately, even before the JavaScript runtime loads.
+
+## Serializing other processed values to be consumed on the client
+
+The `wp_interactivity_state` function is also valuable for sending processed values from the server to the client so they can be consumed later on. This feature is useful in many situations, such as managing translations.
+
+Let's add translations to our example to see how this would work.
+
+```php
+<?php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'         => array( __( 'Apple' ), __( 'Banana' ), __( 'Cherry' ) ),
+  'shoppingList'   => array( __( 'Apple' ), __( 'Cherry' ) ),
+  // ...
+?>
+
+<div data-wp-interactive="myFruitPlugin">
+  <button data-wp-on-async--click="actions.deleteFruits">
+    <?php echo __( 'Delete all fruits' ); ?>
+  </button>
+  <button data-wp-on-async--click="actions.addMango">
+    <?php echo __( 'Add Mango' ); ?>
+  </button>
+  <ul data-wp-bind--hidden="!state.hasFruits">
+    <template data-wp-each="state.fruits">
+      <li>
+        <span data-wp-text="context.item"></span>
+        <span data-wp-text="state.onShoppingList"></span>
+      </li>
+    </template>
+  </ul>
+  <div data-wp-bind--hidden="state.hasFruits">
+    <?php echo __( 'No fruits, sorry!' ); ?>
+  </div>
+</div>
+```
+
+That's it! Since the Interactivity API works in PHP, you can add translations directly to the global state, the local context and the HTML markup.
+
+But wait, what happens with our `addMango` action? Remember, this action is defined only on JavaScript:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			state.fruits.push( 'Mango' ); // Not translated!
+		},
+	},
+} );
+```
+
+To fix this issue, you can use the `wp_interactivity_state` function to serialize the translated mango string and then access that value in your action.
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits' => array( __( 'Apple' ), __( 'Banana' ), __( 'Cherry' ) ),
+  'mango'  => __( 'Mango' ),
+));
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			// `state.mango` contains the 'Mango' string already translated.
+			state.fruits.push( state.mango );
+		},
+	},
+} );
+```
+
+Take into account that if your application is more dynamic, you could serialize an array with all the fruit translations and just work with _fruit keywords_ in your actions. For example:
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'           => array( 'apple', 'banana', 'cherry' ),
+  'translatedFruits' => array(
+    'apple'  => __( 'Apple' ),
+    'banana' => __( 'Banana' ),
+    'cherry' => __( 'Cherry' ),
+    'mango'  => __( 'Mango' ),
+  ),
+  'translatedFruit'  => function() {
+    $state   = wp_interactivity_state();
+    $context = wp_interactivity_get_context();
+    return $state['translatedFruits'][ $context['item'] ];
+  }
+));
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+  state: {
+    get translatedFruit() {
+      const context = getContext();
+      return state.translatedFruits[ context.item ];
+    }
+  }
+  actions: {
+    addMango() {
+      state.fruits.push( 'mango' );
+    },
+  },
+} );
+```
+
+```html
+<template data-wp-each="state.fruits">
+	<li data-wp-text="state.translatedFruit"></li>
+</template>
+```
+
+Serializing information from the server can also be useful in other scenarios, such as passing Ajax/REST-API URLs and nonces.
+
+```php
+wp_interactivity_state( 'myPlugin', array(
+  'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+  'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
+));
+```
+
+```js
+const { state } = store( 'myPlugin', {
+	actions: {
+		*doSomething() {
+			const formData = new FormData();
+			formData.append( 'action', 'do_something' );
+			formData.append( '_ajax_nonce', state.nonce );
+
+			const data = yield fetch( state.ajaxUrl, {
+				method: 'POST',
+				body: formData,
+			} ).then( ( response ) => response.json() );
+
+			console.log( 'Server data', data );
+		},
+	},
+} );
+```
+
+## Processing directives in classic themes
+
+Server Directive Processing happens automatically in your interactive blocks as soon as you add `supports.interactivity` to your `block.json` file. But what about classic themes?
+
+Classic themes can also use the Interactivity API, and if they want to take advantage of the Server Directive Processing (which they should), they can do so through the `wp_interactivity_process_directives` function. This function receives the HTML markup with unprocessed directives and returns the HTML markup modified according to the initial values of the global state, local context, and derived state.
+
+```php
+// Initializes the global and derived state…
+wp_interactivity_state( '...', /* ... */ );
+
+// The interactive HTML markup that contains the directives.
+$html = '<div data-wp-...>...</div>';
+
+// Processes the directives so they are ready to be sent to the client.
+$processed_html = wp_interactivity_process_directives( $html );
+```
+
+That's it! There's nothing else you need to do.
+
+If you want to use `wp_interactivity_process_directives` in a template file, you can use `ob_start` and `ob_get_clean` to capture the HTML output and process it before rendering.
+
+```php
+<?php
+wp_interactivity_state( 'myClassicTheme', /* ... */ );
+ob_start();
+?>
+
+<div data-wp-interactive="myClassicTheme">
+  ...
+</div>
+
+<?php
+$html = ob_get_clean();
+echo wp_interactivity_process_directives( $html );
+```
+
+**Important:** You only need to process the directives once. If you're including an inner template file within another template, ensure that `wp_interactivity_process_directives` is only called in the outermost template file to avoid redundant processing.
+
+## Conclusion
+
+The Interactivity API ensures a smooth and transparent transition from server-rendered content to client-side interactivity. The directives you define on the server, the initial global state or local context, and the client-side behavior all form part of the same ecosystem. This unified approach simplifies development, improves maintainability, and provides a better developer experience when creating interactive WordPress blocks.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
new file mode 100644
index 00000000000000..59940560fe20b6
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
@@ -0,0 +1,300 @@
+# The Reactive and Declarative mindset
+
+The Interactivity API is a reactive and declarative framework, similar to other modern frameworks like React, Vue, Svelte, or Alpine. When working with the Interactivity API, adopting the right mindset is crucial for maximizing its potential. This guide will explain the core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
+
+## Declarative vs. imperative
+
+**Declarative Programming** describes _what_ a program should accomplish. It focuses on the desired outcome without explicitly listing commands or steps to achieve that result. In contrast, **imperative programming** specifies _how_ to accomplish tasks by explicitly stating each step to manipulate the program’s state.
+
+### The imperative approach
+
+In the early days of web development, the imperative approach was predominant. This method involves manually updating the DOM with JavaScript to reflect changes.
+
+Take, for example, this interactive block with two buttons and a paragraph:
+
+-   **The show/hide button**: Toggles paragraph visibility and enables/disables the "Activate" button.
+-   **The activate/deactivate button**: Toggles the paragraph's text and color between "active" (green) and "inactive" (red).
+
+```html
+<div id="my-interactive-plugin">
+	<button
+		id="show-hide-btn"
+		aria-expanded="false"
+		aria-controls="status-paragraph"
+	>
+		show
+	</button>
+	<button id="activate-btn" disabled>activate</button>
+	<p id="status-paragraph" class="inactive" hidden>this is inactive</p>
+</div>
+
+<script>
+	const showHideBtn = document.getElementById( 'show-hide-btn' );
+	const activateBtn = document.getElementById( 'activate-btn' );
+	const statusParagraph = document.getElementById( 'status-paragraph' );
+
+	showHideBtn.addEventListener( 'click', () => {
+		if ( statusParagraph.hasAttribute( 'hidden' ) ) {
+			statusParagraph.removeAttribute( 'hidden' );
+			showHideBtn.textContent = 'hide';
+			showHideBtn.setAttribute( 'aria-expanded', 'true' );
+			activateBtn.removeAttribute( 'disabled' );
+		} else {
+			if ( statusParagraph.classList.contains( 'active' ) ) {
+				statusParagraph.textContent = 'this is inactive';
+				statusParagraph.classList.remove( 'active' );
+				activateBtn.textContent = 'activate';
+			}
+			statusParagraph.setAttribute( 'hidden', true );
+			showHideBtn.textContent = 'show';
+			showHideBtn.setAttribute( 'aria-expanded', 'false' );
+			activateBtn.setAttribute( 'disabled', true );
+		}
+	} );
+
+	activateBtn.addEventListener( 'click', () => {
+		if ( activateBtn.textContent === 'activate' ) {
+			statusParagraph.textContent = 'this is active';
+			statusParagraph.classList.remove( 'inactive' );
+			statusParagraph.classList.add( 'active' );
+			activateBtn.textContent = 'deactivate';
+		} else {
+			statusParagraph.textContent = 'this is inactive';
+			statusParagraph.classList.remove( 'active' );
+			statusParagraph.classList.add( 'inactive' );
+			activateBtn.textContent = 'activate';
+		}
+	} );
+</script>
+```
+
+As you can see, for each condition, you have to use JavaScript to modify everything in the DOM that has changed, taking into account the previous state.
+
+### The declarative approach
+
+The declarative approach simplifies the process by focusing on _what_ should happen. The UI updates automatically in response to changes in state. Here is a similar example using the Interactivity API's declarative approach:
+
+```html
+<div id="my-interactive-plugin" data-wp-interactive="myInteractivePlugin">
+	<button
+		data-wp-on--click="actions.toggleVisibility"
+		data-wp-bind--aria-expanded="state.isVisible"
+		data-wp-text="state.visibilityText"
+		aria-controls="status-paragraph"
+	>
+		show
+	</button>
+	<button
+		data-wp-on--click="actions.toggleActivation"
+		data-wp-bind--disabled="!state.isVisible"
+		data-wp-text="state.activationText"
+	>
+		activate
+	</button>
+	<p
+		id="status-paragraph"
+		data-wp-bind--hidden="!state.isVisible"
+		data-wp-class--active="state.isActive"
+		data-wp-class--inactive="!state.isActive"
+		data-wp-text="state.paragraphText"
+	>
+		this is inactive
+	</p>
+</div>
+```
+
+```js
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'myInteractivePlugin', {
+	state: {
+		isVisible: false,
+		isActive: false,
+		get visibilityText() {
+			return state.isVisible ? 'hide' : 'show';
+		},
+		get activationText() {
+			return state.isActive ? 'deactivate' : 'activate';
+		},
+		get paragraphText() {
+			return state.isActive ? 'this is active' : 'this is inactive';
+		},
+	},
+	actions: {
+		toggleVisibility() {
+			state.isVisible = ! state.isVisible;
+			if ( ! state.isVisible ) state.isActive = false;
+		},
+		toggleActivation() {
+			state.isActive = ! state.isActive;
+		},
+	},
+} );
+```
+
+In this declarative example, the UI automatically updates based on the current state. All you have to do as developers is to declare the necessary state, any derived state, the actions that modify the state, and which parts of the DOM depend on which parts of the state. The framework takes care of making all the necessary updates to the DOM so that it is always in sync with the current state. The logic remains simple and maintainable regardless of the number of elements controlled by the framework.
+
+### Can you spot the bug?
+
+In the imperative example, a bug has been intentionally introduced for didactical purposes. Can you find it? It's not easy!
+
+<details>
+<summary>Show me the answer!</summary>
+
+In the case that the Show button is pressed first, then the Activate button, and finally the Hide button, it doesn't add the `inactive` class using `statusParagraph.classList.add('inactive');`. Therefore, the next time the user presses Show, the paragraph will not appear in red.
+
+</details>
+
+These types of bugs are very common in imperative code because you have to manually control all the conditions. On the other hand, they do not exist in declarative code because the framework takes care of updating the DOM and never forgets about anything.
+
+### Benefits of the declarative approach
+
+As demonstrated, the imperative approach requires detailed steps and direct manipulation of the DOM, which can quickly become complex and hard to maintain as the interactivity complexity grows. The more possible states and elements there are, the more conditional logic needs to be added, making the code exponentially more complicated. The declarative approach, on the other hand, simplifies the process by managing the state and letting the framework handle the DOM updates. This leads to more readable, maintainable, and scalable code.
+
+## Reactivity
+
+The Interactivity API is a declarative framework thanks to its leverage of reactivity. In a reactive system, changes to the data automatically trigger updates in the user interface, ensuring that the view always reflects the current state of the application.
+
+### How reactivity works
+
+The Interactivity API uses a fine-grained reactivity system. Here's how it works:
+
+1. **Reactive State**: In the Interactivity API, both the global state and the local context are reactive. This means that when either of these data sources changes, any parts of the UI that depend on them will automatically update.
+
+    - **Global state**: This is global data that can be accessed throughout your interactive blocks.
+    - **Local context**: This is local data that is specific to a particular element and its children.
+    - **Derived State**: In addition to basic state properties, you can define computed properties that automatically update when their dependencies change.
+
+    _Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how to work with the different types of reactive state in the Interactivity API._
+
+2. **Actions**: These are functions, usually triggered by event handlers, that mutate the global state or local context.
+
+3. **Reactive Bindings**: HTML elements are bound to reactive state values using special attributes like `data-wp-bind`, `data-wp-text`, or `data-wp-class`.
+
+4. **Automatic Updates**: When the actions mutate the global state or local context, the Interactivity API automatically updates all the parts of the DOM that depend on that state (either directly or through the derived state).
+
+Let's break down these concepts by reviewing the previous example:
+
+```javascript
+const { state } = store( 'myInteractivePlugin', {
+	state: {
+		isVisible: false,
+		isActive: false,
+		get visibilityText() {
+			return state.isVisible ? 'hide' : 'show';
+		},
+		// ... other derived state
+	},
+	actions: {
+		toggleVisibility() {
+			state.isVisible = ! state.isVisible;
+		},
+		// ... other actions
+	},
+} );
+```
+
+In this code:
+
+-   `isVisible` and `isActive` are basic state properties.
+-   `visibilityText` is a derived state that automatically updates when `isVisible` changes.
+-   `toggleVisibility` is an action that modifies the state.
+
+The HTML bindings look like this:
+
+```html
+<button
+	data-wp-on--click="actions.toggleVisibility"
+	data-wp-text="state.visibilityText"
+	data-wp-bind--aria-expanded="state.isVisible"
+>
+	show
+</button>
+```
+
+Here's how reactivity works in practice:
+
+1. When the button is clicked, it triggers the `toggleVisibility` action.
+2. This action updates `state.isVisible`.
+3. The Interactivity API detects this change and automatically:
+    - Updates the button's text content (because of `data-wp-text="state.visibilityText"`).
+    - Changes the `aria-expanded` attribute (due to `data-wp-bind--aria-expanded="state.isVisible"`).
+    - Updates any other parts of the DOM that depend on `isVisible` or `visibilityText`.
+
+### Mutability vs immutability
+
+Unlike many other reactive frameworks, **the Interactivity API does not require the use of immutability** when updating the global state or the local context. You can directly mutate objects and arrays, and the reactivity system will still work as expected. This can lead to more intuitive and straightforward code in many cases.
+
+For example, you can push a new item to an array like this:
+
+```javascript
+const { state } = store( 'myArrayPlugin', {
+	state: {
+		list: [ 'item 1', 'item 2' ],
+	},
+	actions: {
+		addItem() {
+			// Right:
+			state.list.push( 'new item' );
+
+			// Wrong:
+			state.list = [ ...state.list, 'new item' ]; // Don't do this!
+		},
+	},
+} );
+```
+
+There's no need to create a new array or use the spread operator as you might in other frameworks. The Interactivity API will detect this change and update any parts of the UI that depend on `state.list`.
+
+### Reactive side effects
+
+In addition to automatically updating the UI, the Interactivity API allows you to perform side effects when reactive data changes using directives like `data-wp-watch`. Side effects are useful for tasks like logging, making API calls, or updating other parts of your application that aren't directly tied to the UI.
+
+Here's an example of how you might use `data-wp-watch`:
+
+```html
+<div
+	data-wp-interactive="myCounterPlugin"
+	data-wp-context='{ "counter": 0 }'
+	data-wp-watch="callbacks.logCounter"
+>
+	<p>Counter: <span data-wp-text="context.counter"></span></p>
+	<button data-wp-on--click="actions.increment">Increment</button>
+</div>
+```
+
+```javascript
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+	callbacks: {
+		logCounter: () => {
+			const context = getContext();
+			console.log( `The counter is now: ${ context.counter }` );
+		},
+	},
+} );
+```
+
+In this example:
+
+1. The `data-wp-context` directive adds a local context with a property `counter` whose value is `0`.
+2. The `data-wp-watch` directive is set to `callbacks.logCounter`.
+3. Every time `context.counter` changes, the `logCounter` callback will be executed.
+4. The `logCounter` callback logs the current counter to the console.
+
+This allows you to create declarative side effects that automatically run in response to data changes. Some other use cases for `data-wp-watch` might include:
+
+-   Saving data to `localStorage` when the data changes.
+-   Sending analytics events.
+-   Changing the focus for accessibility purposes.
+-   Updating the page title, meta tags, or `<body>` attributes.
+-   Triggering animations.
+
+## Conclusion
+
+As you continue to work with the Interactivity API, remember to think in terms of state, actions, and side effects. Define your data, describe how it should change, and let the Interactivity API handle the rest. This mental shift may take some time, especially if you're used to more imperative programming styles, but by embracing it, you'll unlock the full potential of the Interactivity API to create truly dynamic and interactive WordPress blocks that delight your users.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
new file mode 100644
index 00000000000000..0071f26fc8a333
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
@@ -0,0 +1,740 @@
+# Understanding global state, local context and derived state
+
+The Interactivity API offers a powerful framework for creating interactive blocks. To make the most of its capabilities, it's crucial to understand when to use global state, local context, or derived state. This guide will clarify these concepts and provide practical examples to help you decide when to use each one.
+
+Let's start with a brief definition of global state, local context and derived state.
+
+-   **Global state:** Global data that can be accessed and modified by any interactive block on the page, allowing different parts of your interactive blocks to stay in sync.
+-   **Local context:** Local data defined within a specific element in the HTML structure, accessible only to that element and its children, providing independent state for individual blocks.
+-   **Derived state:** Computed values based on global state or local context, dynamically calculated on-demand to ensure consistent data representation without storing redundant data.
+
+Let's now dive into each of these concepts to study them in more detail and provide some examples.
+
+## Global state
+
+**Global state** in the Interactivity API refers to global data that can be accessed and modified by any interactive block on the page. It serves as a shared information hub, allowing different parts of your blocks to communicate and stay in sync. Global state is the ideal mechanism for exchanging information between interactive blocks, regardless of their position in the DOM tree.
+
+You should use global state when:
+
+-   You need to share data between multiple interactive blocks that are not directly related in the DOM hierarchy.
+-   You want to maintain a single source of truth for certain data across all your interactive blocks.
+-   You're dealing with data that affects multiple parts of your UI simultaneously.
+-   You want to implement features that are global for the page.
+
+### Working with global state
+
+-   **Initializing the global state**
+
+    Typically, the initial global state values should be defined on the server using the `wp_interactivity_state` function:
+
+    ```php
+    // Populates the initial global state values.
+    wp_interactivity_state( 'myPlugin', array(
+      'isDarkTheme' => true,
+      'show'        => false,
+      'helloText'   => __( 'world' ),
+    ));
+    ```
+
+    These initial global state values will be used during the rendering of the page in PHP to populate the HTML markup that is sent to the browser.
+
+    -   HTML markup written in the PHP file by the developer:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin"
+        >
+        	<div data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText"></span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    -   HTML markup after the directives have been processed and it is ready to be sent to the browser:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin is-dark-theme"
+        >
+        	<div hidden data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText">world</span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    _Please, visit [the Server-side Rendering guide](./server-side-rendering.md) to learn more about how directives are processed on the server._
+
+    In cases where the global state is not used during the rendering of the page in PHP, it can also be defined directly on the client.
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		isLoading: false,
+    	},
+    	actions: {
+    		*loadSomething() {
+    			state.isLoading = true;
+    			// ...
+    		},
+    	},
+    } );
+    ```
+
+    _Please note that, although this works, in general it is a good practice to define all the global state on the server._
+
+-   **Accessing the global state**
+
+    In the HTML markup, you can access the global state values directly by referencing `state` in the directive attribute values:
+
+    ```html
+    <div data-wp-bind--hidden="!state.show">
+    	<span data-wp-text="state.helloText"></span>
+    </div>
+    ```
+
+    In JavaScript, the `store` function from the package at `@wordpress/interactivity` works both as a setter and a getter, returning the store of the selected namespace.
+
+    To access the global state in your actions and callbacks, you can use the `state` property of the object returned by the `store` function:
+
+    ```js
+    const myPluginStore = store( 'myPlugin' );
+
+    myPluginStore.state; // This is the state of the 'myPlugin' namespace.
+    ```
+
+    You can also destructure the object returned by `store`:
+
+    ```js
+    const { state } = store( 'myPlugin' );
+    ```
+
+    And you can do the same even if you are defining the store at that moment, which is the most common scenario:
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		// ...
+    	},
+    	actions: {
+    		toggle() {
+    			state.show = ! state.show;
+    		},
+    	},
+    } );
+    ```
+
+    The global state initialized on the server using the `wp_interactivity_state` function is also included in that object because it is automatically serialized from the server to the client:
+
+    ```php
+    wp_interactivity_state( 'myPlugin', array(
+      'someValue' => 1,
+    ));
+    ```
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		otherValue: 2,
+    	},
+    	actions: {
+    		readGlobalState() {
+    			state.someValue; // It exists and its initial value is 1.
+    			state.otherValue; // It exists and its initial value is 2.
+    		},
+    	},
+    } );
+    ```
+
+    Lastly, all calls to the `store` function with the same namespace are merged together:
+
+    ```js
+    store( 'myPlugin', { state: { someValue: 1 } } );
+
+    store( 'myPlugin', { state: { otherValue: 2 } } );
+
+    /* All calls to `store` return a stable reference to the same object, so you
+     * can get a reference to `state` from any of them. */
+    const { state } = store( 'myPlugin' );
+
+    store( 'myPlugin', {
+    	actions: {
+    		readValues() {
+    			state.someValue; // It exists and its initial value is 1.
+    			state.otherValue; // It exists and its initial value is 2.
+    		},
+    	},
+    } );
+    ```
+
+-   **Updating the global state**
+
+    To update the global state, all you need to do is mutate the `state` object once you have obtained it from the `store` function:
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	actions: {
+    		updateValues() {
+    			state.someValue = 3;
+    			state.otherValue = 4;
+    		},
+    	},
+    } );
+    ```
+
+    Changes to the global state will automatically trigger updates in any directives that depend on the modified values.
+
+    _Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+
+### Example: Two interactive blocks using global state to communicate
+
+In this example, there are two independent interactive blocks. One displays a counter, and the other a button to increment that counter. These blocks can be positioned anywhere on the page, regardless of the HTML structure. In other words, one does not need to be an inner block of the other.
+
+-   **Counter Block**
+
+    ```php
+    <?php
+    wp_interactivity_state( 'myCounterPlugin', array(
+      'counter' => 0
+    ));
+    ?>
+
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo get_block_wrapper_attributes(); ?>
+    >
+      Counter: <span data-wp-text="state.counter"></span>
+    </div>
+    ```
+
+-   **Increment Block**
+
+    ```php
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo get_block_wrapper_attributes(); ?>
+    >
+      <button data-wp-on-async--click="actions.increment">
+        Increment
+      </button>
+    </div>
+    ```
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    		},
+    	},
+    } );
+    ```
+
+In this example:
+
+1. The global state is initialized on the server using `wp_interactivity_state`, setting an initial `counter` of 0.
+2. The Counter Block displays the current counter using `data-wp-text="state.counter"`, which reads from the global state.
+3. The Increment Block contains a button that triggers the `increment` action when clicked, using `data-wp-on-async--click="actions.increment"`.
+4. In JavaScript, the `increment` action directly modifies the global state by incrementing `state.counter`.
+
+Both blocks are independent and can be placed anywhere on the page. They don't need to be nested or directly related in the DOM structure. Multiple instances of these interactive blocks can be added to the page, and they will all share and update the same global counter value.
+
+## Local context
+
+**Local context** in the Interactivity API refers to local data defined within a specific element in the HTML structure. Unlike global state, local context is only accessible to the element where it's defined and its child elements.
+
+The local context is particularly useful when you need independent state for individual interactive blocks, ensuring that each instance of a block can maintain its own unique data without interfering with others.
+
+You should use local context when:
+
+-   You need to maintain separate state for multiple instances of the same interactive block.
+-   You want to encapsulate data that's only relevant to a specific interactive block and its children.
+-   You need to implement features that are isolated to a specific part of your UI.
+
+### Working with local context
+
+-   **Initializing the local context**
+
+    The local context is initialized directly within the HTML structure using the `data-wp-context` directive. This directive accepts a JSON string that defines the initial values for that piece of context.
+
+    ```html
+    <div data-wp-context='{ "counter": 0 }'>
+    	<!-- Child elements will have access to `context.counter` -->
+    </div>
+    ```
+
+    You can also initialize the local context on the server using the `wp_interactivity_data_wp_context` PHP helper, which ensures proper escaping and formatting of the stringified values:
+
+    ```php
+    <?php
+    $context = array( 'counter' => 0 );
+    ?>
+
+    <div <?php echo wp_interactivity_data_wp_context( $context ); ?>>
+      <!-- Child elements will have access to `context.counter` -->
+    </div>
+    ```
+
+-   **Accessing the local context**
+
+    In the HTML markup, you can access the local context values directly by referencing `context` in the directive values:
+
+    ```html
+    <div data-wp-bind--hidden="!context.isOpen">
+    	<span data-wp-text="context.counter"></span>
+    </div>
+    ```
+
+    In JavaScript, you can access the local context values using the `getContext` function:
+
+    ```js
+    store( 'myPlugin', {
+    	actions: {
+    		sendAnalyticsEvent() {
+    			const { counter } = getContext();
+    			myAnalyticsLibrary.sendEvent( 'updated counter', counter );
+    		},
+    	},
+    	callbacks: {
+    		logCounter() {
+    			const { counter } = getContext();
+    			console.log( `Current counter: ${ counter }` );
+    		},
+    	},
+    } );
+    ```
+
+    The `getContext` function returns the local context of the element that triggered the action/callback execution.
+
+-   **Updating the local context**
+
+    To update the local context values in JavaScript, you can modify the object returned by `getContext`:
+
+    ```js
+    store( 'myPlugin', {
+    	actions: {
+    		increment() {
+    			const context = getContext();
+    			context.counter += 1;
+    		},
+    		updateName( event ) {
+    			const context = getContext();
+    			context.name = event.target.value;
+    		},
+    	},
+    } );
+    ```
+
+    Changes to the local context will automatically trigger updates in any directives that depend on the modified values.
+
+    _Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+
+-   **Nesting local contexts**
+
+    Local contexts can be nested, with child contexts inheriting and potentially overriding values from parent contexts:
+
+    ```html
+    <div data-wp-context='{ "theme": "light", "counter": 0 }'>
+    	<p>Theme: <span data-wp-text="context.theme"></span></p>
+    	<p>Counter: <span data-wp-text="context.counter"></span></p>
+
+    	<div data-wp-context='{ "theme": "dark" }'>
+    		<p>Theme: <span data-wp-text="context.theme"></span></p>
+    		<p>Counter: <span data-wp-text="context.counter"></span></p>
+    	</div>
+    </div>
+    ```
+
+    In this example, the inner `div` will have a `theme` value of `"dark"`, but will inherit the `counter` value `0` from its parent context.
+
+### Example: One interactive block using local context to have independent state
+
+In this example, there is a single interactive block that shows a counter and can increment it. By using local context, each instance of this block will have its own independent counter, even if multiple blocks are added to the page.
+
+```php
+<div
+  data-wp-interactive="myCounterPlugin"
+  <?php echo get_block_wrapper_attributes(); ?>
+  data-wp-context='{ "counter": 0 }'
+>
+  <p>Counter: <span data-wp-text="context.counter"></span></p>
+  <button data-wp-on-async--click="actions.increment">Increment</button>
+</div>
+```
+
+```js
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+In this example:
+
+1. A local context with an initial `counter` value of `0` is defined using the `data-wp-context` directive.
+2. The counter is displayed using `data-wp-text="context.counter"`, which reads from the local context.
+3. The increment button uses `data-wp-on-async--click="actions.increment"` to trigger the increment action.
+4. In JavaScript, the `getContext` function is used to access and modify the local context for each block instance.
+
+A user will be able to add multiple instances of this block to a page, and each will maintain its own independent counter. Clicking the "Increment" button on one block will only affect that specific block's counter and not the others.
+
+## Derived state
+
+**Derived state** in the Interactivity API refers to a value that is computed from other parts of the global state or local context. It's calculated on demand rather than stored. It ensures consistency, reduces redundancies, and enhances the declarative nature of your code.
+
+Derived state is a fundamental concept in modern state management, not unique to the Interactivity API. It's also used in other popular state management systems like Redux, where it's called `selectors`, or Preact Signals, where it's known as `computed` values.
+
+Derived state offers several key benefits that make it an essential part of a well-designed application state, including:
+
+1. **Single source of truth:** Derived state encourages you to store only the essential, raw data in your state. Any values that can be calculated from this core data become derived state. This approach reduces the risk of inconsistencies in your interactive blocks.
+
+2. **Automatic updates:** When you use derived state, values are recalculated automatically whenever the underlying data changes. This ensures that all parts of your interactive blocks always have access to the most up-to-date information without manual intervention.
+
+3. **Simplified state management:** By computing values on-demand rather than storing and updating them manually, you reduce the complexity of your state management logic. This leads to cleaner, more maintainable code.
+
+4. **Improved performance:** In many cases, derived state can be optimized to recalculate only when necessary, potentially improving your interactive blocks' performance.
+
+5. **Easier debugging:** With derived state, it's clearer where data originates and how it's transformed. This can make it easier to track down issues in your interactive blocks.
+
+In essence, derived state allows you to express relationships between different pieces of data in your interactive blocks declaratively, instead of imperatively updating related values whenever something changes.
+
+_Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how to leverage declarative coding in the Interactivity API._
+
+You should use derived state:
+
+-   When a part of your global state or local context can be computed from other state values.
+-   To avoid redundant data that needs to be manually kept in sync.
+-   To ensure consistency across your interactive blocks by automatically updating derived values.
+-   To simplify your actions by removing the need to update multiple related state properties.
+
+### Working with derived state
+
+-   **Initializing the derived state**
+
+    Typically, the derived state should be initialized on the server using the `wp_interactivity_state` function in the exact same way as the global state.
+
+    -   When the initial value is known and static, it can be defined directly:
+
+        ```php
+        wp_interactivity_state( 'myCounterPlugin', array(
+          'counter' => 1, // This is global state.
+          'double'  => 2, // This is derived state.
+        ));
+        ```
+
+    -   Or it can be defined by doing the necessary computations:
+
+        ```php
+        $counter = 1;
+        $double  = $counter * 2;
+
+        wp_interactivity_state( 'myCounterPlugin', array(
+          'counter' => $counter, // This is global state.
+          'double'  => $double,  // This is derived state.
+        ));
+        ```
+
+    Regardless of the approach, the initial derived state values will be used during the rendering of the page in PHP, and the HTML can be populated with the correct values.
+
+    _Please, visit [the Server-side Rendering guide](./server-side-rendering.md) to learn more about how directives are processed on the server._
+
+    The same mechanism applies even when the derived state property depends on the local context.
+
+    ```php
+    <?php
+    $counter = 1;
+
+    // This is the local context.
+    $context = array( 'counter' => $counter );
+
+    wp_interactivity_state( 'myCounterPlugin', array(
+      'double' => $counter * 2, // This is derived state.
+    ));
+    ?>
+
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo wp_interactivity_data_wp_context( $context ); ?>
+    >
+      <div>
+        Counter: <span data-wp-text="context.counter"></span>
+      </div>
+      <div>
+        Double: <span data-wp-text="state.double"></span>
+      </div>
+    </div>
+    ```
+
+    In JavaScript, the derived state is defined using getters:
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		get double() {
+    			return state.counter * 2;
+    		},
+    	},
+    } );
+    ```
+
+    Derived state can depend on local context, or local context and global state at the same time.
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		get double() {
+    			const { counter } = getContext();
+    			// Depends on local context.
+    			return counter * 2;
+    		},
+    		get product() {
+    			const { counter } = getContext();
+    			// Depends on local context and global state.
+    			return counter * state.factor;
+    		},
+    	},
+    } );
+    ```
+
+    In some cases, when the derived state depends on the local context and the local context can change dynamically in the server, instead of the initial derived state, you can use a function (Closure) that calculates it dynamically.
+
+    ```php
+    <?php
+    wp_interactivity_state( 'myProductPlugin', array(
+      'list'    => array( 1, 2, 3 ),
+      'factor'  => 3,
+      'product' => function() {
+        $state   = wp_interactivity_state();
+        $context = wp_interactivity_get_context();
+        return $context['item'] * $state['factor'];
+      }
+    ));
+    ?>
+
+    <template
+      data-wp-interactive="myProductPlugin"
+      data-wp-each="state.list"
+    >
+      <span data-wp-text="state.product"></span>
+    </template>
+    ```
+
+    This `data-wp-each` template will render this HTML (directives omitted):
+
+    ```html
+    <span>3</span>
+    <span>6</span>
+    <span>9</span>
+    ```
+
+-   **Accessing the derived state**
+
+    In the HTML markup, the syntax for the derived state is the same as the one for the global state, just by referencing `state` in the directive attribute values.
+
+    ```html
+    <span data-wp-text="state.double"></span>
+    ```
+
+    The same happens in JavaScript. Both global state and derived state can be consumed through the `state` property of the store:
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	// ...
+    	actions: {
+    		readValues() {
+    			state.counter; // Regular state, returns 1.
+    			state.double; // Derived state, returns 2.
+    		},
+    	},
+    } );
+    ```
+
+    This lack of distinction is intentional, allowing developers to consume both derived and global state uniformly, and making them interchangeable in practice.
+
+    You can also access the derived state from another derived state and, thus, create multiple levels of computed values.
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		get double() {
+    			return state.counter * 2;
+    		},
+    		get doublePlusOne() {
+    			return state.double + 1;
+    		},
+    	},
+    } );
+    ```
+
+-   **Updating the derived state**
+
+    The derived state cannot be updated directly. To update its values, you need to update the global state or local context on which that derived state depends.
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	// ...
+    	actions: {
+    		updateValues() {
+    			state.counter; // Regular state, returns 1.
+    			state.double; // Derived state, returns 2.
+
+    			state.counter = 2;
+
+    			state.counter; // Regular state, returns 2.
+    			state.double; // Derived state, returns 4.
+    		},
+    	},
+    } );
+    ```
+
+### Example: Not using derived state vs using derived state
+
+Let's consider a scenario where there is a counter and the double value needs to be displayed, and let's compare two approaches: one without derived state and one with derived state.
+
+-   **Not using derived state**
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 1,
+    		double: 2,
+    	},
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    			state.double = state.counter * 2;
+    		},
+    	},
+    } );
+    ```
+
+    In this approach, both the `state.counter` and `state.double` values are manually updated in the `increment` action. While this works, it has several drawbacks:
+
+    -   It's less declarative.
+    -   It can lead to bugs if `state.counter` is updated from multiple places and developers forget to keep `state.double` in sync.
+    -   It requires more cognitive load to remember to update related values.
+
+-   **Using derived state**
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 1,
+    		get double() {
+    			return state.counter * 2;
+    		},
+    	},
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    		},
+    	},
+    } );
+    ```
+
+    In this improved version:
+
+    -   `state.double` is defined as a getter, automatically deriving its value from `state.counter`.
+    -   The `increment` action only needs to update `state.counter`.
+    -   `state.double` is always guaranteed to have the correct value, regardless of how or where `state.counter` is updated.
+
+### Example: Using derived state with local context
+
+Let's now consider a scenario where there is a local context that initializes a counter.
+
+```js
+store( 'myCounterPlugin', {
+	state: {
+		get double() {
+			const { counter } = getContext();
+			return counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+```html
+<div data-wp-interactive="myCounterPlugin">
+	<!-- This will render "Double: 2" -->
+	<div data-wp-context='{ "counter": 1 }'>
+		Double: <span data-wp-text="state.double"></span>
+
+		<!-- This button will increment the local counter. -->
+		<button data-wp-on-async--click="actions.increment">Increment</button>
+	</div>
+
+	<!-- This will render "Double: 4" -->
+	<div data-wp-context='{ "counter": 2 }'>
+		Double: <span data-wp-text="state.double"></span>
+
+		<!-- This button will increment the local counter. -->
+		<button data-wp-on-async--click="actions.increment">Increment</button>
+	</div>
+</div>
+```
+
+In this example, the derived state `state.double` reads from the local context present in each element and returns the correct value for each instance where it is used.
+
+### Example: Using derived state with both local context and global state
+
+Let's now consider a scenario where there are a global tax rate and local product prices and calculate the final price, including tax.
+
+```html
+<div
+	data-wp-interactive="myProductPlugin"
+	data-wp-context='{ "priceWithoutTax": 100 }'
+>
+	<p>Product Price: $<span data-wp-text="context.priceWithoutTax"></span></p>
+	<p>Tax Rate: <span data-wp-text="state.taxRatePercentage"></span></p>
+	<p>Price (inc. tax): $<span data-wp-text="state.priceWithTax"></span></p>
+</div>
+```
+
+```js
+const { state } = store( 'myProductPlugin', {
+	state: {
+		taxRate: 0.21,
+		get taxRatePercentage() {
+			return `${ state.taxRate * 100 }%`;
+		},
+		get priceWithTax() {
+			const { priceWithoutTax } = getContext();
+			return price * ( 1 + state.taxRate );
+		},
+	},
+	actions: {
+		updateTaxRate( event ) {
+			// Updates the global tax rate.
+			state.taxRate = event.target.value;
+		},
+		updatePrice( event ) {
+			// Updates the local product price.
+			const context = getContext();
+			context.priceWithoutTax = event.target.value;
+		},
+	},
+} );
+```
+
+In this example, `priceWithTax` is derived from both the global `taxRate` and the local `priceWithoutTax`. Every time you update the global state or local context through the `updateTaxRate` or `updatePrice` actions, the Interactivity API recomputes the derived state and updates the necessary parts of the DOM.
+
+By using derived state, you create a more maintainable and less error-prone codebase. It ensures that related state values are always in sync, reduces the complexity of your actions, and makes your code more declarative and easier to reason about.
+
+## Conclusion
+
+Remember, the key to effective state management is to keep your state minimal and avoid redundancy. Use derived state to compute values dynamically, and choose between global state and local context based on the scope and requirements of your data. This will lead to a cleaner, more robust architecture that is easier to debug and maintain.
diff --git a/docs/toc.json b/docs/toc.json
index fa80ee6c4f4404..719ffa344e3744 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -204,6 +204,19 @@
 			},
 			{
 				"docs/reference-guides/interactivity-api/README.md": [
+					{
+						"docs/reference-guides/interactivity-api/core-concepts/README.md": [
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md": []
+							}
+						]
+					},
 					{
 						"docs/reference-guides/interactivity-api/iapi-quick-start-guide.md": []
 					},

From a8a202b13ebb87bc44f41154479b0552023c1198 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Mon, 19 Aug 2024 17:16:37 +0530
Subject: [PATCH 174/205] Post Author: Add Border Support (#64599)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 packages/block-library/src/post-author/block.json | 12 ++++++++++++
 packages/block-library/src/post-author/style.scss |  1 +
 2 files changed, 13 insertions(+)

diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index dde9320841820d..d66498c8ee3df9 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -64,6 +64,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-author-editor",
diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
index 0b2d63aab44f60..28fd4fad3cf5a7 100644
--- a/packages/block-library/src/post-author/style.scss
+++ b/packages/block-library/src/post-author/style.scss
@@ -1,6 +1,7 @@
 .wp-block-post-author {
 	display: flex;
 	flex-wrap: wrap;
+	box-sizing: border-box;
 
 	&__byline {
 		width: 100%;

From 31e9078d1209d428dc04b78f0102a7f71c52d928 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Mon, 19 Aug 2024 17:21:43 +0530
Subject: [PATCH 175/205] Query Title: Add Border Support (#64581)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 packages/block-library/src/query-title/block.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index 2a3c7d9f236995..de3e60214685c2 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -58,6 +58,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-query-title"

From 1db6ca0c5e79cd89ae1885d9720b822528c5afdd Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:12:56 +0530
Subject: [PATCH 176/205] Add border support to file block (#64509)

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 packages/block-library/src/file/block.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index a5dbaae0c10256..0526120c4dfc1e 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -74,6 +74,18 @@
 				"link": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"interactivity": true
 	},
 	"editorStyle": "wp-block-file-editor",

From d69aab423dd9bf8ee4ba8f13264673d2a05eb156 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Mon, 19 Aug 2024 16:23:26 +0100
Subject: [PATCH 177/205] fix internal links core-concepts (#64609)

---
 .../core-concepts/server-side-rendering.md             |  2 +-
 .../the-reactive-and-declarative-mindset.md            |  2 +-
 ...ing-global-state-local-context-and-derived-state.md | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
index 2032d12d5670b1..8c62bd82eaba90 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
@@ -4,7 +4,7 @@ WordPress has always been built on the foundation of server-side rendering. Trad
 
 In recent years, modern JavaScript frameworks like Vue, React, or Svelte have revolutionized the way we build web applications. These frameworks provide reactive and declarative programming models that enable developers to create dynamic, interactive user interfaces with ease.
 
-However, when it comes to server-side rendering, these frameworks require a JavaScript-based server, such as NodeJS, to execute their code and generate the initial HTML. This means that PHP-based servers, like WordPress, cannot directly utilize these frameworks without sacrificing their native PHP rendering capabilities. This limitation poses a challenge for WordPress developers who want to leverage the power of reactive and declarative programming while still benefiting from WordPress's traditional server-side rendering strengths. The Interactivity API bridges this gap by bringing [reactive and declarative programming principles](./the-reactive-and-declarative-mindset.md) to WordPress without compromising its server-side rendering foundation.
+However, when it comes to server-side rendering, these frameworks require a JavaScript-based server, such as NodeJS, to execute their code and generate the initial HTML. This means that PHP-based servers, like WordPress, cannot directly utilize these frameworks without sacrificing their native PHP rendering capabilities. This limitation poses a challenge for WordPress developers who want to leverage the power of reactive and declarative programming while still benefiting from WordPress's traditional server-side rendering strengths. The Interactivity API bridges this gap by bringing [reactive and declarative programming principles](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) to WordPress without compromising its server-side rendering foundation.
 
 In this guide, we'll explore how the Interactivity API processes directives on the server, enabling WordPress to deliver interactive, state-aware HTML from the initial page load, while setting the stage for seamless client-side interactivity.
 
diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
index 59940560fe20b6..3760fdf3867802 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
@@ -165,7 +165,7 @@ The Interactivity API uses a fine-grained reactivity system. Here's how it works
     - **Local context**: This is local data that is specific to a particular element and its children.
     - **Derived State**: In addition to basic state properties, you can define computed properties that automatically update when their dependencies change.
 
-    _Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how to work with the different types of reactive state in the Interactivity API._
+    _Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how to work with the different types of reactive state in the Interactivity API._
 
 2. **Actions**: These are functions, usually triggered by event handlers, that mutate the global state or local context.
 
diff --git a/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
index 0071f26fc8a333..a2b39fc4c77fb2 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
@@ -68,7 +68,7 @@ You should use global state when:
         </div>
         ```
 
-    _Please, visit [the Server-side Rendering guide](./server-side-rendering.md) to learn more about how directives are processed on the server._
+    _Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about how directives are processed on the server._
 
     In cases where the global state is not used during the rendering of the page in PHP, it can also be defined directly on the client.
 
@@ -189,7 +189,7 @@ You should use global state when:
 
     Changes to the global state will automatically trigger updates in any directives that depend on the modified values.
 
-    _Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+    _Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
 
 ### Example: Two interactive blocks using global state to communicate
 
@@ -332,7 +332,7 @@ You should use local context when:
 
     Changes to the local context will automatically trigger updates in any directives that depend on the modified values.
 
-    _Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+    _Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
 
 -   **Nesting local contexts**
 
@@ -407,7 +407,7 @@ Derived state offers several key benefits that make it an essential part of a we
 
 In essence, derived state allows you to express relationships between different pieces of data in your interactive blocks declaratively, instead of imperatively updating related values whenever something changes.
 
-_Please, visit [The Reactive and Declarative mindset](./the-reactive-and-declarative-mindset.md) guide to learn more about how to leverage declarative coding in the Interactivity API._
+_Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how to leverage declarative coding in the Interactivity API._
 
 You should use derived state:
 
@@ -445,7 +445,7 @@ You should use derived state:
 
     Regardless of the approach, the initial derived state values will be used during the rendering of the page in PHP, and the HTML can be populated with the correct values.
 
-    _Please, visit [the Server-side Rendering guide](./server-side-rendering.md) to learn more about how directives are processed on the server._
+    _Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about how directives are processed on the server._
 
     The same mechanism applies even when the derived state property depends on the local context.
 

From c828678c8b6f10ecd0daee9cd05e948a523c7138 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Mon, 19 Aug 2024 16:24:34 +0100
Subject: [PATCH 178/205] Docs - Interactivity API: Add code concepts to
 Navigating the Interactivity API docs (#64608)

---
 .../interactivity-api/README.md               | 47 +++++++++----------
 .../interactivity-api/core-concepts/README.md |  6 +--
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md
index f5d410a8439f45..3a5bbb84ff159c 100644
--- a/docs/reference-guides/interactivity-api/README.md
+++ b/docs/reference-guides/interactivity-api/README.md
@@ -16,17 +16,17 @@ For more information about the genesis of the Interactivity API, check out the [
 
 Use the following links to locate the topic you're interested in. If you have never worked with the Interactivity API before, consider reading through the following resources in the order listed.
 
-- **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
-- **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
-- **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
-- **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
-- **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
+-   **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
+-   **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
+-   **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
+-   **[Core Concepts](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/)** Gain a better understanding of concepts and mental models related to Interactivity API development from this section.
+-   **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
+-   **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
 
 To get a deeper understanding of what the Interactivity API is or find answers to questions you may have about this standard, check the following resources:
 
-- **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
-- **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
-
+-   **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
+-   **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
 
 ## Requirements of the Interactivity API
 
@@ -34,9 +34,9 @@ Interactivity API is included in Core in WordPress 6.5. For versions below, you'
 
 It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include:
 
-- [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
-- [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
-- [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
+-   [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
+-   [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
+-   [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
 
 You can start creating interactions once you set up a block development environment and run WordPress 6.5+ (or Gutenberg 17.5+).
 
@@ -56,7 +56,6 @@ Import the store into your `view.js`. Refer to the [store documentation](https:/
 import { store } from '@wordpress/interactivity';
 ```
 
-
 #### Add `interactivity` support to `block.json`
 
 To indicate that the block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Interactivity API features, add `"interactivity": true` to the `supports` attribute of the block's `block.json` file.
@@ -84,7 +83,6 @@ The Interactivity API provides the `@wordpress/interactivity` Script Module. Jav
 
 The use of `viewScriptModule` also requires the `--experimental-modules` flag for both the [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts of `wp-scripts` to ensure a proper build of the Script Modules.
 
-
 ```json
 // package.json
 {
@@ -99,11 +97,9 @@ The use of `viewScriptModule` also requires the `--experimental-modules` flag fo
 
 To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the DOM element in the block's `render.php` or `save.js` files.
 
-
-
 ```html
 <div data-wp-interactive="myPlugin">
-    <!-- Interactivity API zone -->
+	<!-- Interactivity API zone -->
 </div>
 ```
 
@@ -113,17 +109,16 @@ Refer to the [`wp-interactive` documentation](https://developer.wordpress.org/bl
 
 Here you have some more resources to learn/read more about the Interactivity API:
 
-- [WordPress 6.5 Dev Note](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)
-- [Merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/)
-- [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
-- [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.   
-- [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
-- Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
-  - [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
-  - [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
-  - [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
+-   [WordPress 6.5 Dev Note](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)
+-   [Merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/)
+-   [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
+-   [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.
+-   [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+-   Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
+    -   [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
+    -   [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
+    -   [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
 
 <div class="callout">
     There's a Tracking Issue opened to ease the coordination of the work related to the Interactivity API Docs: <a href="https://github.com/WordPress/gutenberg/issues/53296">Documentation for the Interactivity API - Tracking Issue #53296</a>
 </div>
-
diff --git a/docs/reference-guides/interactivity-api/core-concepts/README.md b/docs/reference-guides/interactivity-api/core-concepts/README.md
index ef59fb6075f925..f4e6891c4ff165 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/README.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/README.md
@@ -2,8 +2,8 @@
 
 This section provides some guides on important concepts and mental models related to Interactivity API development. Use the following links to learn more:
 
-1. **[The Reactive and Declarative mindset](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset):** This guide covers core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
+1. **[The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md):** This guide covers core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
 
-2. **[Understanding global state, local context and derived state](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
+2. **[Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
 
-3. **[Server-side rendering: Processing directives on the server](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/server-side-rendering):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.
+3. **[Server-side rendering: Processing directives on the server](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.

From 9c9f6535cdc3cd57a3b8583ea6292a2c90552ab3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 20 Aug 2024 12:46:20 +0900
Subject: [PATCH 179/205] Add 40px size lint rule for Block Editor typography
 components (#64591)

* Add 40px size lint rule for Block Editor typography components

* Exclude all test and story files

---------

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8f9b2d3337e18e..25173a9f0e8a82 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -280,7 +280,7 @@ module.exports = {
 		{
 			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
 			excludedFiles: [
-				'packages/components/src/**/@(test|stories)/**',
+				'packages/*/src/**/@(test|stories)/**',
 				'**/*.@(native|ios|android).js',
 			],
 			rules: {
@@ -316,9 +316,12 @@ module.exports = {
 						'ComboboxControl',
 						'CustomSelectControl',
 						'DimensionControl',
+						'FontAppearanceControl',
+						'FontFamilyControl',
 						'FontSizePicker',
 						'FormTokenField',
 						'InputControl',
+						'LineHeightControl',
 						'NumberControl',
 						'RangeControl',
 						'TextControl',

From 79340eb0791d9499a68cf670b9a2fe320940508f Mon Sep 17 00:00:00 2001
From: Christian Weiske <cweiske+github.com@cweiske.de>
Date: Tue, 20 Aug 2024 09:01:25 +0200
Subject: [PATCH 180/205] Note about image sizes in MediaUpload::onSelect
 (#64616)

Document that not all image sizes are available when an image has been selected in MediaUpload.

Co-authored-by: cweiske <cweiske@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-editor/src/components/media-upload/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
index 592d64e42f497d..27bbc93d8a2b65 100644
--- a/packages/block-editor/src/components/media-upload/README.md
+++ b/packages/block-editor/src/components/media-upload/README.md
@@ -105,6 +105,8 @@ Callback called when the media modal is closed after media is selected.
 
 This is called subsequent to `onClose` when media is selected. The selected media are passed as an argument.
 
+The `image.sizes.full` resolution does always exist. Other defined sizes are only available when the image is larger and thus could be scaled down.
+
 -   Type: `Function`
 -   Required: Yes
 -   Platform: Web | Mobile

From 8ef31233e593176e234aa6dff469af5d96ced10b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 20 Aug 2024 11:08:42 +0200
Subject: [PATCH 181/205] RadioControl: label radio group using fieldset and
 legend (#64582)

* Swap BaseControl for fieldset + legend

* Add help text

* Use group help text to describe the fieldset instead of each individual option

* CHANGELOG

* Re-apply ID and classname

* Render visually hidden label as div

* Fix spacing in latest post block

* Increase margin-top override specificity

* Remove redundant styles

* Use legend even when the label is visually hidden

* Test that group labelling works as expected also when label is visually hidden

* typo

* Revert to original classname order

* Move styles from styles.scss to editor.scss

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
---
 .../block-library/src/latest-posts/edit.js    |  1 +
 .../src/latest-posts/editor.scss              | 11 +++
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/radio-control/index.tsx    | 48 ++++++-----
 .../components/src/radio-control/style.scss   | 13 ++-
 .../src/radio-control/test/index.tsx          | 83 ++++++++++---------
 .../src/components/post-discussion/style.scss |  9 --
 .../src/components/post-format/style.scss     |  6 --
 .../src/components/post-status/style.scss     | 19 -----
 .../src/components/site-discussion/style.scss | 14 ----
 10 files changed, 96 insertions(+), 109 deletions(-)

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 533e9621fd4f2b..b02747bb1c1d8e 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -242,6 +242,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				/>
 				{ displayPostContent && (
 					<RadioControl
+						className="wp-block-latest-posts__post-content-radio"
 						label={ __( 'Show:' ) }
 						selected={ displayPostContentRadio }
 						options={ [
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index fe901480974461..aaab74cc0ef2d6 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -18,3 +18,14 @@
 		padding-left: 0;
 	}
 }
+
+// Apply the same styles that would be applied to
+// ".block-editor-block-inspector .components-base-control"
+// (see packages/block-editor/src/components/block-inspector/style.scss)
+.wp-block-latest-posts__post-content-radio {
+	margin-bottom: #{ $grid-unit-30 };
+
+	&:last-child {
+		margin-bottom: $grid-unit-10;
+	}
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index da44a5837bb816..4b1095db90327d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -61,6 +61,7 @@
 
 -   `RangeControl`: disable reset button when the current value is equal to the reset value ([#64579](https://github.com/WordPress/gutenberg/pull/64579)).
 -   `RangeControl`: tweak mark and label absolute positioning ([#64487](https://github.com/WordPress/gutenberg/pull/64487)).
+-   `RadioGroup`: use fieldset and legend to group radio inputs ([#64582](https://github.com/WordPress/gutenberg/pull/64582)).
 
 ### Internal
 
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index c574e5af539def..29927558c58cd4 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -16,8 +16,8 @@ import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
-import { useBaseControlProps } from '../base-control/hooks';
 import { StyledHelp } from '../base-control/styles/base-control-styles';
+import { VisuallyHidden } from '../visually-hidden';
 
 function generateOptionDescriptionId( radioGroupId: string, index: number ) {
 	return `${ radioGroupId }-${ index }-option-description`;
@@ -27,6 +27,10 @@ function generateOptionId( radioGroupId: string, index: number ) {
 	return `${ radioGroupId }-${ index }`;
 }
 
+function generateHelpId( radioGroupId: string ) {
+	return `${ radioGroupId }__help`;
+}
+
 /**
  * Render a user interface to select the user type using radio inputs.
  *
@@ -75,24 +79,24 @@ export function RadioControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	// Use `useBaseControlProps` to get the id of the help text.
-	const {
-		controlProps: { 'aria-describedby': helpTextId },
-	} = useBaseControlProps( { id, help } );
-
 	if ( ! options?.length ) {
 		return null;
 	}
 
 	return (
-		<BaseControl
-			__nextHasNoMarginBottom
-			label={ label }
+		<fieldset
 			id={ id }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
 			className={ clsx( className, 'components-radio-control' ) }
+			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>
+			{ hideLabelFromVision ? (
+				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			) : (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+
 			<VStack
 				spacing={ 3 }
 				className={ clsx( 'components-radio-control__group-wrapper', {
@@ -113,14 +117,9 @@ export function RadioControl(
 							onChange={ onChangeValue }
 							checked={ option.value === selected }
 							aria-describedby={
-								clsx( [
-									!! option.description &&
-										generateOptionDescriptionId(
-											id,
-											index
-										),
-									helpTextId,
-								] ) || undefined
+								!! option.description
+									? generateOptionDescriptionId( id, index )
+									: undefined
 							}
 							{ ...additionalProps }
 						/>
@@ -142,7 +141,16 @@ export function RadioControl(
 					</div>
 				) ) }
 			</VStack>
-		</BaseControl>
+			{ !! help && (
+				<StyledHelp
+					__nextHasNoMarginBottom
+					id={ generateHelpId( id ) }
+					className="components-base-control__help"
+				>
+					{ help }
+				</StyledHelp>
+			) }
+		</fieldset>
 	);
 }
 
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index e9732558f2901e..e3dcb8d1e58270 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -1,3 +1,12 @@
+.components-radio-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
 .components-radio-control__group-wrapper.has-help {
 	margin-block-end: $grid-unit-15;
 }
@@ -57,5 +66,7 @@
 
 	// Override the top margin of the StyledHelp component from BaseControl.
 	// TODO: we should tweak the StyledHelp component to not have a top margin.
-	margin-top: 0;
+	&.components-radio-control__option-description {
+		margin-top: 0;
+	}
 }
diff --git a/packages/components/src/radio-control/test/index.tsx b/packages/components/src/radio-control/test/index.tsx
index 0be166513a9a4d..7e30744d96b826 100644
--- a/packages/components/src/radio-control/test/index.tsx
+++ b/packages/components/src/radio-control/test/index.tsx
@@ -56,6 +56,47 @@ describe.each( [
 	const [ , Component ] = modeAndComponent;
 
 	describe( 'semantics and labelling', () => {
+		it( 'should group all radios under a fieldset with an accessible label (legend)', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toBeVisible();
+		} );
+
+		it( 'should group all radios under a fieldset with an accessible label even when the label is visually hidden', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultProps }
+					hideLabelFromVision
+					onChange={ onChangeSpy }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toBeVisible();
+		} );
+
+		it( 'should describe the radio group with the help text', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultProps }
+					help="Test help text"
+					onChange={ onChangeSpy }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toHaveAccessibleDescription( 'Test help text' );
+		} );
+
 		it( 'should render radio inputs with accessible labels', () => {
 			const onChangeSpy = jest.fn();
 			render(
@@ -101,46 +142,7 @@ describe.each( [
 			).toHaveAccessibleName( defaultProps.options[ 1 ].label );
 		} );
 
-		it( 'should use the group help text to describe individual options', () => {
-			const onChangeSpy = jest.fn();
-			render(
-				<Component
-					{ ...defaultProps }
-					onChange={ onChangeSpy }
-					selected={ defaultProps.options[ 1 ].value }
-					help="Select your favorite animal."
-				/>
-			);
-
-			for ( const option of defaultProps.options ) {
-				expect(
-					screen.getByRole( 'radio', { name: option.label } )
-				).toHaveAccessibleDescription( 'Select your favorite animal.' );
-			}
-		} );
-
 		it( 'should use the option description text to describe individual options', () => {
-			const onChangeSpy = jest.fn();
-			render(
-				<Component
-					{ ...defaultPropsWithDescriptions }
-					onChange={ onChangeSpy }
-					selected={ defaultProps.options[ 1 ].value }
-				/>
-			);
-
-			let index = 1;
-			for ( const option of defaultProps.options ) {
-				expect(
-					screen.getByRole( 'radio', { name: option.label } )
-				).toHaveAccessibleDescription(
-					`This is the option number ${ index }.`
-				);
-				index += 1;
-			}
-		} );
-
-		it( 'should use both the option description text and the group help text to describe individual options', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Component
@@ -151,12 +153,13 @@ describe.each( [
 				/>
 			);
 
+			// Group help text should not be used to describe individual options.
 			let index = 1;
 			for ( const option of defaultProps.options ) {
 				expect(
 					screen.getByRole( 'radio', { name: option.label } )
 				).toHaveAccessibleDescription(
-					`This is the option number ${ index }. Select your favorite animal`
+					`This is the option number ${ index }.`
 				);
 				index += 1;
 			}
diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
index b2d65c9aa7cf3f..d5320605579e41 100644
--- a/packages/editor/src/components/post-discussion/style.scss
+++ b/packages/editor/src/components/post-discussion/style.scss
@@ -2,15 +2,6 @@
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
-
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	.components-radio-control__label .components-text {
-		display: block;
-		margin-top: $grid-unit-05;
-	}
 }
 .editor-post-discussion__panel-toggle {
 
diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss
index ec3a8b1626b543..9c893f36bcc16c 100644
--- a/packages/editor/src/components/post-format/style.scss
+++ b/packages/editor/src/components/post-format/style.scss
@@ -7,9 +7,3 @@
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
 }
-
-.editor-post-format__options {
-	.components-base-control__field > .components-v-stack {
-		gap: $grid-unit-15;
-	}
-}
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
index bfd9de46234da3..c601d887d68c7f 100644
--- a/packages/editor/src/components/post-status/style.scss
+++ b/packages/editor/src/components/post-status/style.scss
@@ -18,25 +18,6 @@
 		padding: $grid-unit-20;
 	}
 
-	.editor-change-status__options {
-		.components-base-control__field > .components-v-stack {
-			gap: $grid-unit-15;
-		}
-
-		// TODO: it's not great to override component styles.. This might be resolved
-		// by the new radio control component.
-		.components-radio-control__option {
-			align-items: flex-start;
-		}
-
-		label {
-			.components-text {
-				display: block;
-				margin-top: $grid-unit-05;
-			}
-		}
-	}
-
 	.editor-change-status__password-legend {
 		padding: 0;
 		margin-bottom: $grid-unit-10;
diff --git a/packages/editor/src/components/site-discussion/style.scss b/packages/editor/src/components/site-discussion/style.scss
index 2c54424207ea5c..dc0608f0cf3ab1 100644
--- a/packages/editor/src/components/site-discussion/style.scss
+++ b/packages/editor/src/components/site-discussion/style.scss
@@ -3,17 +3,3 @@
 	padding: $grid-unit-20;
 }
 
-.editor-site-discussion__options {
-	// TODO: it's not great to override component styles.. This might be resolved
-	// by the new radio control component.
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	label {
-		.components-text {
-			display: block;
-			margin-top: $grid-unit-05;
-		}
-	}
-}

From c4a77c5813603c4a8ef9702008f3c6dae8dae4b9 Mon Sep 17 00:00:00 2001
From: arthur791004 <arthur.chu@automattic.com>
Date: Tue, 20 Aug 2024 17:19:51 +0800
Subject: [PATCH 182/205] Additional CSS: Localise the link if it exists
 (#64603)

---
 packages/edit-site/src/components/global-styles/screen-css.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index e49207aaea2241..b6d8cb7fd7086e 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -34,7 +34,9 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

From 8384d2a9f3762828cc90969ffc9e658647187be5 Mon Sep 17 00:00:00 2001
From: JuanMa <juanma.garrido@automattic.com>
Date: Tue, 20 Aug 2024 10:32:07 +0100
Subject: [PATCH 183/205] Docs - Dataviews: Better explanation of the
 "elements" property and its connection to the "filterBy" property (#64633)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* better explanation of the elements property

* Update packages/dataviews/README.md

Co-authored-by: André <583546+oandregal@users.noreply.github.com>

* Update packages/dataviews/README.md

Co-authored-by: André <583546+oandregal@users.noreply.github.com>

---------

Co-authored-by: André <583546+oandregal@users.noreply.github.com>
---
 packages/dataviews/README.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 368880b69b14f0..6c1e2af26386c7 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -120,13 +120,20 @@ Each field is an object with the following properties:
 -   `label`: the field's name to be shown in the UI.
 -   `getValue`: function that returns the value of the field, defaults to `field[id]`.
 -   `render`: function that renders the field. Optional, `getValue` will be used if `render` is not defined.
--   `elements`: the set of valid values for the field's value.
+-   <code id="fields-elements">elements</code>: The list of options to pick from when using the field as a filter or when editing (DataForm component). It expects an array of objects with the following properties:
+
+    -   `value`: The id of the value to filter to (for internal use)
+    -   `label`: The text that will be displayed in the UI for the item.
+    -    `description`: A longer description that describes the element, to also be displayed. Optional.
+
+    To enable the filter by a field we just need to set a proper value to the `elements` property of the field we'd like to filter by.
+
 -   `type`: the type of the field. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 -   `enableGlobalSearch`: whether the field is searchable. False by default.
--   `filterBy`: configuration for the filters.
-    -   `operators`: the list of operators supported by the field.
+-   `filterBy`: configuration for the filters enabled by the `elements` property.
+    -   `operators`: the list of [operators](#operators) supported by the field.
     -   `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
 
 ### `view`: `object`

From 7f1523c2432c1e47423abe0ba4169b3f4c11c072 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 20 Aug 2024 13:37:53 +0400
Subject: [PATCH 184/205] Block Editor: Use hooks instead of HoC in
 'MultiSelectionInspector' (#64634)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../multi-selection-inspector/index.js          | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index 14eda5f930cada..f5e7f696347686 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { sprintf, _n } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
@@ -13,7 +13,13 @@ import { copy } from '@wordpress/icons';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function MultiSelectionInspector( { blocks } ) {
+export default function MultiSelectionInspector() {
+	const { blocks } = useSelect( ( select ) => {
+		const { getMultiSelectedBlocks } = select( blockEditorStore );
+		return {
+			blocks: getMultiSelectedBlocks(),
+		};
+	}, [] );
 	const words = wordCount( serialize( blocks ), 'words' );
 
 	return (
@@ -38,10 +44,3 @@ function MultiSelectionInspector( { blocks } ) {
 		</div>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getMultiSelectedBlocks } = select( blockEditorStore );
-	return {
-		blocks: getMultiSelectedBlocks(),
-	};
-} )( MultiSelectionInspector );

From 3ed18120972d7af4a1e6445d6e719dd911727504 Mon Sep 17 00:00:00 2001
From: Rishit Gupta <rishitgupta2013@gmail.com>
Date: Tue, 20 Aug 2024 05:40:38 -0400
Subject: [PATCH 185/205] `ColorPalette`: partial support of `color-mix()` CSS
 colors (#64224)

* Fix incorrect dropdown label with selected color value

* Fix normalizeColorValue function

* Add isSimpleCSSColor function

* Fix isSimpleCSSColor function, add early return

* Update CHANGELOG.md with ColorPalette: partial support of color-mix() CSS colors

* Update packages/components/CHANGELOG.md

---------

Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/color-palette/utils.ts     | 33 +++++++++++++------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4b1095db90327d..c03d2455962c99 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -88,6 +88,7 @@
 
 ### Enhancements
 
+-   `ColorPalette`: partial support of `color-mix()` CSS colors ([#64224](https://github.com/WordPress/gutenberg/pull/64224)).
 -   `TimeInput`: Expose as subcomponent of `TimePicker` ([#63145](https://github.com/WordPress/gutenberg/pull/63145)).
 -   `RadioControl`: add support for option help text ([#63751](https://github.com/WordPress/gutenberg/pull/63751)).
 -   `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)).
diff --git a/packages/components/src/color-palette/utils.ts b/packages/components/src/color-palette/utils.ts
index 79141bf752eb73..cfe909c580f8bc 100644
--- a/packages/components/src/color-palette/utils.ts
+++ b/packages/components/src/color-palette/utils.ts
@@ -17,6 +17,18 @@ import type { ColorObject, ColorPaletteProps, PaletteObject } from './types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
+/**
+ * Checks if a color value is a simple CSS color.
+ *
+ * @param value The color value to check.
+ * @return A boolean indicating whether the color value is a simple CSS color.
+ */
+const isSimpleCSSColor = ( value: string ): boolean => {
+	const valueIsCssVariable = /var\(/.test( value ?? '' );
+	const valueIsColorMix = /color-mix\(/.test( value ?? '' );
+	return ! valueIsCssVariable && ! valueIsColorMix;
+};
+
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
 	colors: ColorPaletteProps[ 'colors' ] = [],
@@ -25,11 +37,12 @@ export const extractColorNameFromCurrentValue = (
 	if ( ! currentValue ) {
 		return '';
 	}
-
-	const currentValueIsCssVariable = /^var\(/.test( currentValue );
-	const normalizedCurrentValue = currentValueIsCssVariable
-		? currentValue
-		: colord( currentValue ).toHex();
+	const currentValueIsSimpleColor = currentValue
+		? isSimpleCSSColor( currentValue )
+		: false;
+	const normalizedCurrentValue = currentValueIsSimpleColor
+		? colord( currentValue ).toHex()
+		: currentValue;
 
 	// Normalize format of `colors` to simplify the following loop
 	type normalizedPaletteObject = { colors: ColorObject[] };
@@ -38,9 +51,9 @@ export const extractColorNameFromCurrentValue = (
 		: [ { colors: colors as ColorObject[] } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			const normalizedColorValue = currentValueIsCssVariable
-				? colorValue
-				: colord( colorValue ).toHex();
+			const normalizedColorValue = currentValueIsSimpleColor
+				? colord( colorValue ).toHex()
+				: colorValue;
 
 			if ( normalizedCurrentValue === normalizedColorValue ) {
 				return colorName;
@@ -79,9 +92,9 @@ export const normalizeColorValue = (
 	value: string | undefined,
 	element: HTMLElement | null
 ) => {
-	const currentValueIsCssVariable = /^var\(/.test( value ?? '' );
+	const valueIsSimpleColor = value ? isSimpleCSSColor( value ) : false;
 
-	if ( ! currentValueIsCssVariable || element === null ) {
+	if ( valueIsSimpleColor || element === null ) {
 		return value;
 	}
 

From 07c2a8e9f7aa185c20ff165e1267f216fbba8b79 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 20 Aug 2024 13:12:21 +0200
Subject: [PATCH 186/205] Performance: Fetch permissions for visible patterns
 only (#64606)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../src/components/page-patterns/index.js     |  6 +-
 .../components/page-patterns/use-patterns.js  | 63 ++++++++++---------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 66d2d25a4b8f04..be3bb7429c32f9 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -23,7 +23,7 @@ import {
 } from '../../utils/constants';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import usePatterns from './use-patterns';
+import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsHeader from './header';
 import { useEditPostAction } from '../dataviews-actions';
 import {
@@ -136,6 +136,8 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
+	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
+
 	const templatePartActions = usePostActions( {
 		postType: TEMPLATE_PART_POST_TYPE,
 		context: 'list',
@@ -175,7 +177,7 @@ export default function DataviewsPatterns() {
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
-					data={ data || EMPTY_ARRAY }
+					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
 					view={ view }
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index 2947088bb19b5f..f32e278e6354f5 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -256,12 +256,44 @@ const selectUserPatterns = createSelector(
 	]
 );
 
+export function useAugmentPatternsWithPermissions( patterns ) {
+	const idsAndTypes = useMemo(
+		() =>
+			patterns
+				?.filter( ( record ) => record.type !== PATTERN_TYPES.theme )
+				.map( ( record ) => [ record.type, record.id ] ) ?? [],
+		[ patterns ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordPermissions } = unlock(
+				select( coreStore )
+			);
+			return idsAndTypes.reduce( ( acc, [ type, id ] ) => {
+				acc[ id ] = getEntityRecordPermissions( 'postType', type, id );
+				return acc;
+			}, {} );
+		},
+		[ idsAndTypes ]
+	);
+
+	return useMemo(
+		() =>
+			patterns?.map( ( record ) => ( {
+				...record,
+				permissions: permissions?.[ record.id ] ?? {},
+			} ) ) ?? [],
+		[ patterns, permissions ]
+	);
+}
+
 export const usePatterns = (
 	postType,
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
-	const { patterns, ...rest } = useSelect(
+	return useSelect(
 		( select ) => {
 			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplateParts( select, categoryId, search );
@@ -284,35 +316,6 @@ export const usePatterns = (
 		},
 		[ categoryId, postType, search, syncStatus ]
 	);
-
-	const ids = useMemo(
-		() => patterns?.map( ( record ) => record.id ) ?? [],
-		[ patterns ]
-	);
-
-	const permissions = useSelect(
-		( select ) => {
-			const { getEntityRecordsPermissions } = unlock(
-				select( coreStore )
-			);
-			return getEntityRecordsPermissions( 'postType', postType, ids );
-		},
-		[ ids, postType ]
-	);
-
-	const patternsWithPermissions = useMemo(
-		() =>
-			patterns?.map( ( record, index ) => ( {
-				...record,
-				permissions: permissions[ index ],
-			} ) ) ?? [],
-		[ patterns, permissions ]
-	);
-
-	return {
-		...rest,
-		patterns: patternsWithPermissions,
-	};
 };
 
 export default usePatterns;

From ebc9865083d4f9ebb07d24b48ca40dd9c322ba58 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:58:52 +0300
Subject: [PATCH 187/205] Ariakit: Update to v0.4.10 (#64637)

* Ariakit: Update to v0.4.9

* CHANGELOG

* Deduplicate some ariakit dependencies

* TabPanel: keep tabs accessible when disabled

* Tab: enable accessibleWhenDisabled specifically

* Bump to 0.4.10

* Revert "TabPanel: keep tabs accessible when disabled"

This reverts commit 44ede08ef4976d1f683690fd504fa78c833d0c30.

* Revert "Tab: enable accessibleWhenDisabled specifically"

This reverts commit 312804105575044a83d6086268ec50cee4da26bb.

* Fix CHANGELOG

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

---------

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>
---
 package-lock.json                | 135 +++++++++++++------------------
 package.json                     |   2 +-
 packages/components/CHANGELOG.md |   4 +-
 packages/components/package.json |   2 +-
 packages/dataviews/package.json  |   2 +-
 5 files changed, 59 insertions(+), 86 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ddfec3a5dddc63..8db4860e895854 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,7 @@
 				"@actions/core": "1.9.1",
 				"@actions/github": "5.0.0",
 				"@apidevtools/json-schema-ref-parser": "11.6.4",
-				"@ariakit/test": "^0.4.0",
+				"@ariakit/test": "^0.4.2",
 				"@babel/core": "7.24.3",
 				"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 				"@babel/plugin-syntax-jsx": "7.24.1",
@@ -1527,14 +1527,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@ariakit/core": {
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.9.tgz",
+			"integrity": "sha512-nV0B/OTK/0iB+P9RC7fudznYZ8eR6rR1F912Zc54e3+wSW5RrRvNOiRxyMrgENidd4R7cCMDw77XJLSBLKgEPQ=="
+		},
 		"node_modules/@ariakit/test": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.0.tgz",
-			"integrity": "sha512-AcrppK61/AbsMDyDS3AxY3WXI6fcL+WedNpJm44Qx603dVYkS/potk0PrD1MfdC6aRt+2bRRj0n9dLN5lVMtbg==",
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.2.tgz",
+			"integrity": "sha512-WXAAiAyTaHV9klntOB81Y+YHyA5iGxy9wXCmjQOfYK5InsuIour+7TVXICUxn2NF0XD6j6OoEJbCVDJ2Y46xEA==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
-				"@ariakit/core": "0.4.7",
+				"@ariakit/core": "0.4.9",
 				"@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0"
 			},
 			"peerDependencies": {
@@ -1554,12 +1558,6 @@
 				}
 			}
 		},
-		"node_modules/@ariakit/test/node_modules/@ariakit/core": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-			"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==",
-			"dev": true
-		},
 		"node_modules/@aw-web-design/x-default-browser": {
 			"version": "1.4.126",
 			"resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz",
@@ -52622,7 +52620,7 @@
 			"version": "28.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@ariakit/react": "^0.4.7",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@emotion/cache": "^11.7.1",
 				"@emotion/css": "^11.7.1",
@@ -52678,17 +52676,12 @@
 				"react-dom": "^18.0.0"
 			}
 		},
-		"packages/components/node_modules/@ariakit/core": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-			"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q=="
-		},
 		"packages/components/node_modules/@ariakit/react": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz",
-			"integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+			"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 			"dependencies": {
-				"@ariakit/react-core": "0.4.7"
+				"@ariakit/react-core": "0.4.10"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -52700,11 +52693,11 @@
 			}
 		},
 		"packages/components/node_modules/@ariakit/react-core": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz",
-			"integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+			"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 			"dependencies": {
-				"@ariakit/core": "0.4.7",
+				"@ariakit/core": "0.4.9",
 				"@floating-ui/dom": "^1.0.0",
 				"use-sync-external-store": "^1.2.0"
 			},
@@ -52981,7 +52974,7 @@
 			"version": "4.1.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@ariakit/react": "^0.4.7",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
@@ -53003,17 +52996,12 @@
 				"react": "^18.0.0"
 			}
 		},
-		"packages/dataviews/node_modules/@ariakit/core": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-			"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q=="
-		},
 		"packages/dataviews/node_modules/@ariakit/react": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz",
-			"integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+			"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 			"dependencies": {
-				"@ariakit/react-core": "0.4.7"
+				"@ariakit/react-core": "0.4.10"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -53025,11 +53013,11 @@
 			}
 		},
 		"packages/dataviews/node_modules/@ariakit/react-core": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz",
-			"integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+			"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 			"dependencies": {
-				"@ariakit/core": "0.4.7",
+				"@ariakit/core": "0.4.9",
 				"@floating-ui/dom": "^1.0.0",
 				"use-sync-external-store": "^1.2.0"
 			},
@@ -56136,22 +56124,19 @@
 				}
 			}
 		},
+		"@ariakit/core": {
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.9.tgz",
+			"integrity": "sha512-nV0B/OTK/0iB+P9RC7fudznYZ8eR6rR1F912Zc54e3+wSW5RrRvNOiRxyMrgENidd4R7cCMDw77XJLSBLKgEPQ=="
+		},
 		"@ariakit/test": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.0.tgz",
-			"integrity": "sha512-AcrppK61/AbsMDyDS3AxY3WXI6fcL+WedNpJm44Qx603dVYkS/potk0PrD1MfdC6aRt+2bRRj0n9dLN5lVMtbg==",
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.2.tgz",
+			"integrity": "sha512-WXAAiAyTaHV9klntOB81Y+YHyA5iGxy9wXCmjQOfYK5InsuIour+7TVXICUxn2NF0XD6j6OoEJbCVDJ2Y46xEA==",
 			"dev": true,
 			"requires": {
-				"@ariakit/core": "0.4.7",
+				"@ariakit/core": "0.4.9",
 				"@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0"
-			},
-			"dependencies": {
-				"@ariakit/core": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-					"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q==",
-					"dev": true
-				}
 			}
 		},
 		"@aw-web-design/x-default-browser": {
@@ -67504,7 +67489,7 @@
 		"@wordpress/components": {
 			"version": "file:packages/components",
 			"requires": {
-				"@ariakit/react": "^0.4.7",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@emotion/cache": "^11.7.1",
 				"@emotion/css": "^11.7.1",
@@ -67552,25 +67537,20 @@
 				"uuid": "^9.0.1"
 			},
 			"dependencies": {
-				"@ariakit/core": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-					"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q=="
-				},
 				"@ariakit/react": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz",
-					"integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+					"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 					"requires": {
-						"@ariakit/react-core": "0.4.7"
+						"@ariakit/react-core": "0.4.10"
 					}
 				},
 				"@ariakit/react-core": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz",
-					"integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+					"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 					"requires": {
-						"@ariakit/core": "0.4.7",
+						"@ariakit/core": "0.4.9",
 						"@floating-ui/dom": "^1.0.0",
 						"use-sync-external-store": "^1.2.0"
 					}
@@ -67760,7 +67740,7 @@
 		"@wordpress/dataviews": {
 			"version": "file:packages/dataviews",
 			"requires": {
-				"@ariakit/react": "^0.4.7",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
@@ -67775,25 +67755,20 @@
 				"remove-accents": "^0.5.0"
 			},
 			"dependencies": {
-				"@ariakit/core": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.7.tgz",
-					"integrity": "sha512-GUy/3ZY4kW1KdYHtMZRrRlj5FYbZTAyHlimxHI7Zs0xsC+kAzIf8lopnf67Y9IYLgEMr37KosIV7kwpkJpNs5Q=="
-				},
 				"@ariakit/react": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.7.tgz",
-					"integrity": "sha512-uUruuCo1M0Nj2oq1nTwDfUlVTLuoI9xeHP75EkuXX46lg5hzE5vVWbSMO1D6MCy7UwrUx2Ts4IqxdKr97suTwQ==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+					"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 					"requires": {
-						"@ariakit/react-core": "0.4.7"
+						"@ariakit/react-core": "0.4.10"
 					}
 				},
 				"@ariakit/react-core": {
-					"version": "0.4.7",
-					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.7.tgz",
-					"integrity": "sha512-OogUyQ20cxkRNRuqLI05JbmpR4Lr5HwhUIqnb/sipzt6bkg/3wCXEnUAjfxg3nPjLTMjJ8+ODWmPC9JMJTW/yg==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+					"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 					"requires": {
-						"@ariakit/core": "0.4.7",
+						"@ariakit/core": "0.4.9",
 						"@floating-ui/dom": "^1.0.0",
 						"use-sync-external-store": "^1.2.0"
 					}
diff --git a/package.json b/package.json
index ee78f197a43e28..5b0bdf823e617a 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@apidevtools/json-schema-ref-parser": "11.6.4",
-		"@ariakit/test": "^0.4.0",
+		"@ariakit/test": "^0.4.2",
 		"@babel/core": "7.24.3",
 		"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 		"@babel/plugin-syntax-jsx": "7.24.1",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c03d2455962c99..cff965f161230a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -68,10 +68,8 @@
 -   `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
 -   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
 -   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
-
-### Internal
-
 -   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
+-   Update `ariakit` to version `0.4.10` ([#64637](https://github.com/WordPress/gutenberg/pull/64637)).
 
 ## 28.5.0 (2024-08-07)
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 7a33e5840c2311..5469e52bed8c68 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.4.7",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index c86a4feb9c0668..8b72104f106d02 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -28,7 +28,7 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.7",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",

From b1324c55d67d24d924f7c073b9c482e5d5699453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:57:16 +0200
Subject: [PATCH 188/205] DataViews: make the move left/right controls in table
 header always available (#64646)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/dataviews/CHANGELOG.md                               | 2 ++
 .../src/dataviews-layouts/table/column-header-menu.tsx        | 4 +---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index b1cb4504e72fad..cc6f4df9428b09 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
+
 ## 4.1.0 (2024-08-07)
 
 ## Internal
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index ef1dc3e3ed2e09..b8fd0517e49d1a 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -91,9 +91,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		!! field.elements?.length &&
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
-	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
-		return field.label;
-	}
+
 	return (
 		<DropdownMenu
 			align="start"

From bfd96033d1644e58ed364153174e50ed281b9a2e Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 21 Aug 2024 05:22:01 +0400
Subject: [PATCH 189/205] Missing Block: Use hooks instead of HoC (#64657)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/block-library/src/missing/edit.js | 30 +++++++++-------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/missing/edit.js b/packages/block-library/src/missing/edit.js
index f7aef453b5447c..e7945630534d70 100644
--- a/packages/block-library/src/missing/edit.js
+++ b/packages/block-library/src/missing/edit.js
@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	Warning,
 	useBlockProps,
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/block-editor';
 import { safeHTML } from '@wordpress/dom';
 
-function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
+export default function MissingEdit( { attributes, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
 	const { hasFreeformBlock, hasHTMLBlock } = useSelect(
@@ -34,6 +34,16 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		},
 		[ clientId ]
 	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	function convertToHTML() {
+		replaceBlock(
+			clientId,
+			createBlock( 'core/html', {
+				content: originalUndelimitedContent,
+			} )
+		);
+	}
 
 	const actions = [];
 	let messageHTML;
@@ -81,19 +91,3 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		</div>
 	);
 }
-
-const MissingEdit = withDispatch( ( dispatch, { clientId, attributes } ) => {
-	const { replaceBlock } = dispatch( blockEditorStore );
-	return {
-		convertToHTML() {
-			replaceBlock(
-				clientId,
-				createBlock( 'core/html', {
-					content: attributes.originalUndelimitedContent,
-				} )
-			);
-		},
-	};
-} )( MissingBlockWarning );
-
-export default MissingEdit;

From fc4c19e893a4f7742b73b8bec815c89fba6c2cb6 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:26:16 +0900
Subject: [PATCH 190/205] Site Editor: Always use auto cursor for editable text
 (#64627)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../block-editor/src/components/block-list/content.scss   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index c8f24e7efcbd2f..fb7687e69ffbe4 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -250,11 +250,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected {
+	&.is-selected,
+	&.is-hovered {
 		cursor: default;
 
-		&.rich-text {
-			cursor: unset;
+		&.rich-text,
+		.rich-text {
+			cursor: auto;
 		}
 	}
 

From 2719bc8129c7b15d64933cde5cc63a43fe6b15d1 Mon Sep 17 00:00:00 2001
From: Vipul Gupta <55375170+vipul0425@users.noreply.github.com>
Date: Wed, 21 Aug 2024 06:57:56 +0530
Subject: [PATCH 191/205] refactor: Update textControl to searchControl in
 taxonomy search. (#64605)

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../components/post-taxonomies/hierarchical-term-selector.js   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 14bcaef7a0399a..112bfaabd0c8ec 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -12,6 +12,7 @@ import {
 	withFilters,
 	Flex,
 	FlexItem,
+	SearchControl,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
@@ -406,7 +407,7 @@ export function HierarchicalTermSelector( { slug } ) {
 	return (
 		<Flex direction="column" gap="4">
 			{ showFilter && (
-				<TextControl
+				<SearchControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }

From d4539644fc2fd6c8102ced8e70bf2e5057a93949 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 21 Aug 2024 11:45:05 +0900
Subject: [PATCH 192/205] TextareaControl: Update styles (#64586)

* TextareaControl: Refactor styles

* Add 40px size prop

* Tweak typography styles

* Clarify with comment

* Remove opt-in prop

* Improve comment

* Clean up unnecessary prop type

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../textarea-control/stories/index.story.tsx  |  1 +
 .../styles/textarea-control-styles.ts         | 77 ++++++++++++++++++-
 packages/components/src/utils/input/base.js   | 30 --------
 packages/components/src/utils/input/index.js  |  1 -
 .../src/utils/input/input-control.js          | 63 ---------------
 6 files changed, 77 insertions(+), 96 deletions(-)
 delete mode 100644 packages/components/src/utils/input/base.js
 delete mode 100644 packages/components/src/utils/input/index.js
 delete mode 100644 packages/components/src/utils/input/input-control.js

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cff965f161230a..c97e25862addec 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -56,6 +56,7 @@
 -   `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
 -   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
 -   `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)).
+-   `TextareaControl`: Update styles ([#64586](https://github.com/WordPress/gutenberg/pull/64586)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
index e8cb986a141325..a8e5dc036248db 100644
--- a/packages/components/src/textarea-control/stories/index.story.tsx
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -54,4 +54,5 @@ Default.args = {
 	__nextHasNoMarginBottom: true,
 	label: 'Text',
 	help: 'Enter some text',
+	placeholder: 'Placeholder',
 };
diff --git a/packages/components/src/textarea-control/styles/textarea-control-styles.ts b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
index 046e17816eff24..022ce3560ea3a5 100644
--- a/packages/components/src/textarea-control/styles/textarea-control-styles.ts
+++ b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
@@ -2,13 +2,86 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { inputControl } from '../../utils/input';
+import { font } from '../../utils/font';
+import { COLORS } from '../../utils/colors-values';
+import { CONFIG } from '../../utils';
+import { breakpoint } from '../../utils/breakpoint';
+
+const inputStyleNeutral = css`
+	box-shadow: 0 0 0 transparent;
+	border-radius: ${ CONFIG.radiusSmall };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+
+	@media not ( prefers-reduced-motion ) {
+		transition: box-shadow 0.1s linear;
+	}
+`;
+
+const inputStyleFocus = css`
+	border-color: ${ COLORS.theme.accent };
+	box-shadow: 0 0 0
+		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
+		${ COLORS.theme.accent };
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+`;
 
 export const StyledTextarea = styled.textarea`
 	width: 100%;
-	${ inputControl }
+	display: block;
+	font-family: ${ font( 'default.fontFamily' ) };
+	line-height: 20px;
+
+	// Vertical padding is to match the standard 40px control height when rows=1,
+	// in conjunction with the 20px line-height.
+	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
+	padding: 9px 11px;
+
+	${ inputStyleNeutral };
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: ${ font( 'mobileTextMinFontSize' ) };
+
+	${ breakpoint( 'small' ) } {
+		font-size: ${ font( 'default.fontSize' ) };
+	}
+
+	&:focus {
+		${ inputStyleFocus }
+	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&:-ms-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	.is-dark-theme & {
+		&::-webkit-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+	}
 `;
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
deleted file mode 100644
index 9eebd1c0bcea78..00000000000000
--- a/packages/components/src/utils/input/base.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../colors-values';
-import { CONFIG } from '../';
-
-export const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusSmall };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
-export const inputStyleFocus = css`
-	border-color: ${ COLORS.theme.accent };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.theme.accent };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;
diff --git a/packages/components/src/utils/input/index.js b/packages/components/src/utils/input/index.js
deleted file mode 100644
index 23fd731db99d94..00000000000000
--- a/packages/components/src/utils/input/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './input-control';
diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js
deleted file mode 100644
index 8af838247d9c25..00000000000000
--- a/packages/components/src/utils/input/input-control.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { inputStyleNeutral, inputStyleFocus } from './base';
-import { font } from '../font';
-import { COLORS } from '../colors-values';
-import { breakpoint } from '../breakpoint';
-
-export const inputControl = css`
-	display: block;
-	font-family: ${ font( 'default.fontFamily' ) };
-	padding: 6px 8px;
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-	/* Override core line-height. To be reviewed. */
-	line-height: normal;
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-		/* Override core line-height. To be reviewed. */
-		line-height: normal;
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;

From 18d1752e5a0877e0b7b8c13e3b195334e64bd57d Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Wed, 21 Aug 2024 08:44:30 +0530
Subject: [PATCH 193/205] Updated @since order in Inline document in
 client-assets.php file (#64653)

* Updated @since Order in Inline document

* Updated @since Order in Inline document

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 lib/client-assets.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index a159bc53e6a591..62e874d6b06c82 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -487,7 +487,9 @@ function gutenberg_register_packages_styles( $styles ) {
  * This hook also exists, and should be backported to Core in future versions.
  * However, it is envisaged that Gutenberg will continue to use the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes to aid continuous development.
  *
- * See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
+ * @since 6.1
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
  *
  * @param array $options {
  *     Optional. An array of options to pass to gutenberg_style_engine_get_stylesheet_from_context(). Default empty array.
@@ -496,8 +498,6 @@ function gutenberg_register_packages_styles( $styles ) {
  *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
  * }
  *
- * @since 6.1
- *
  * @return void
  */
 function gutenberg_enqueue_stored_styles( $options = array() ) {

From 22e9896d9ad7ee1d8662deb1456d60816adc654b Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Wed, 21 Aug 2024 08:59:58 +0530
Subject: [PATCH 194/205] Post Author Biography: Add Border Support (#64615)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../src/post-author-biography/block.json          | 15 ++++++++++++++-
 .../src/post-author-biography/style.scss          |  4 ++++
 packages/block-library/src/style.scss             |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/post-author-biography/style.scss

diff --git a/packages/block-library/src/post-author-biography/block.json b/packages/block-library/src/post-author-biography/block.json
index c3845c77d6dbed..c6e27bc484dfd0 100644
--- a/packages/block-library/src/post-author-biography/block.json
+++ b/packages/block-library/src/post-author-biography/block.json
@@ -43,6 +43,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-biography"
 }
diff --git a/packages/block-library/src/post-author-biography/style.scss b/packages/block-library/src/post-author-biography/style.scss
new file mode 100644
index 00000000000000..9a69fac9ba95b8
--- /dev/null
+++ b/packages/block-library/src/post-author-biography/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-author-biography {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 1070bedc8c3dbc..7906a1231d922b 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -32,6 +32,7 @@
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
+@import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-content/style.scss";
 @import "./post-date/style.scss";

From f971fbffa21398c28ba866f4404a2de6068fa0f8 Mon Sep 17 00:00:00 2001
From: Raj Patel <71687258+imrraaj@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:52:21 +0530
Subject: [PATCH 195/205] DataViews: hide filter toggle if there are no filters
 (#64640)

Unlinked contributors: raj.patel@rtcamp.com.

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: imrraaj <imrraaj@git.wordpress.org>
Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
---
 packages/dataviews/src/components/dataviews-filters/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
index de3477914c0083..96e7f5b5d7b9d9 100644
--- a/packages/dataviews/src/components/dataviews-filters/index.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -95,6 +95,9 @@ export function FilterVisibilityToggle( {
 	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
 
 	const hasVisibleFilters = !! visibleFilters.length;
+	if ( filters.length === 0 ) {
+		return null;
+	}
 	if ( ! hasVisibleFilters ) {
 		return (
 			<AddFilterDropdownMenu

From 94091e03fed9ed5072650d5b7615efea83236663 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:28:20 +0200
Subject: [PATCH 196/205] DataViews: load the filter toggle as open if there
 are primary filters (#64651)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/dataviews/src/components/dataviews/index.tsx | 6 ++++--
 test/e2e/specs/site-editor/patterns.spec.js           | 7 -------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 81f901f0859bbc..c8a34028d78903 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -71,8 +71,6 @@ export default function DataViews< Item >( {
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const [ density, setDensity ] = useState< number >( 0 );
-	const [ isShowingFilter, setIsShowingFilter ] =
-		useState< boolean >( false );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -95,6 +93,10 @@ export default function DataViews< Item >( {
 	}, [ selection, data, getItemId ] );
 
 	const filters = useFilters( _fields, view );
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
+		( filters || [] ).some( ( filter ) => filter.isPrimary )
+	);
+
 	return (
 		<DataViewsContext.Provider
 			value={ {
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
index 538f9ba936a897..162ec15146c67e 100644
--- a/test/e2e/specs/site-editor/patterns.spec.js
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -149,13 +149,6 @@ test.describe( 'Patterns', () => {
 
 		await expect( patterns.item ).toHaveCount( 3 );
 
-		await patterns.content
-			.getByRole( 'button', {
-				name: 'Toggle filter display',
-				exact: true,
-			} )
-			.click();
-
 		const searchBox = patterns.content.getByRole( 'searchbox', {
 			name: 'Search',
 		} );

From 35bd3777d707abfcd095ef69b34cfefc381094f6 Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Wed, 21 Aug 2024 11:09:25 +0200
Subject: [PATCH 197/205] Block Bindings: Create utils to update or remove
 bindings (#64102)

* Add `useBlockBindingsUtils`

* Use utils in custom fields UI

* Use utils in pattern overrides

* Properly populate custom fields

* Add comments

* Update wrong comment

Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: artemiomorales <artemiosans@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
---
 .../block-editor/src/hooks/block-bindings.js  | 111 +++++-------------
 packages/block-editor/src/private-apis.js     |   2 +
 .../block-editor/src/utils/block-bindings.js  |  98 ++++++++++++++++
 .../components/pattern-overrides-controls.js  |  46 +++-----
 4 files changed, 144 insertions(+), 113 deletions(-)
 create mode 100644 packages/block-editor/src/utils/block-bindings.js

diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index ce3fdd2f327c40..a7aa72ae6693a6 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { useContext, Fragment } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -24,10 +24,10 @@ import {
 	canBindAttribute,
 	getBindableAttributes,
 } from '../hooks/use-bindings-attributes';
-import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -51,17 +51,15 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelDropdown( {
-	fieldsList,
-	addConnection,
-	attribute,
-	binding,
-} ) {
+function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+	const registeredSources = getBlockBindingsSources();
+	const { updateBlockBindings } = useBlockBindingsUtils();
 	const currentKey = binding?.args?.key;
 	return (
 		<>
-			{ Object.entries( fieldsList ).map( ( [ label, fields ], i ) => (
-				<Fragment key={ label }>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
 					<DropdownMenuGroup>
 						{ Object.keys( fieldsList ).length > 1 && (
 							<Text
@@ -70,14 +68,19 @@ function BlockBindingsPanelDropdown( {
 								variant="muted"
 								aria-hidden
 							>
-								{ label }
+								{ registeredSources[ name ].label }
 							</Text>
 						) }
 						{ Object.entries( fields ).map( ( [ key, value ] ) => (
 							<DropdownMenuRadioItem
 								key={ key }
 								onChange={ () =>
-									addConnection( key, attribute )
+									updateBlockBindings( {
+										[ attribute ]: {
+											source: name,
+											args: { key },
+										},
+									} )
 								}
 								name={ attribute + '-binding' }
 								value={ key }
@@ -141,9 +144,8 @@ function EditableBlockBindingsPanelItems( {
 	attributes,
 	bindings,
 	fieldsList,
-	addConnection,
-	removeConnection,
 } ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
@@ -155,7 +157,9 @@ function EditableBlockBindingsPanelItems( {
 						hasValue={ () => !! binding }
 						label={ attribute }
 						onDeselect={ () => {
-							removeConnection( attribute );
+							updateBlockBindings( {
+								[ attribute ]: undefined,
+							} );
 						} }
 					>
 						<DropdownMenu
@@ -175,7 +179,6 @@ function EditableBlockBindingsPanelItems( {
 						>
 							<BlockBindingsPanelDropdown
 								fieldsList={ fieldsList }
-								addConnection={ addConnection }
 								attribute={ attribute }
 								binding={ binding }
 							/>
@@ -187,91 +190,33 @@ function EditableBlockBindingsPanelItems( {
 	);
 }
 
-export const BlockBindingsPanel = ( { name, metadata } ) => {
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
 	const { bindings } = metadata || {};
-
-	const bindableAttributes = getBindableAttributes( name );
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( name, key ) ||
+			! canBindAttribute( blockName, key ) ||
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];
 		}
 	} );
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const { _id } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
-
-		return {
-			_id: getSelectedBlockClientId(),
-		};
-	}, [] );
-
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
 	}
 
-	const removeAllConnections = () => {
-		const newMetadata = { ...metadata };
-		delete newMetadata.bindings;
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
-	const addConnection = ( value, attribute ) => {
-		// Assuming the block expects a flat structure for its metadata attribute
-		const newMetadata = {
-			...metadata,
-			// Adjust this according to the actual structure expected by your block
-			bindings: {
-				...metadata?.bindings,
-				[ attribute ]: {
-					source: 'core/post-meta',
-					args: { key: value },
-				},
-			},
-		};
-		// Update the block's attributes with the new metadata
-		updateBlockAttributes( _id, {
-			metadata: newMetadata,
-		} );
-	};
-
-	const removeConnection = ( key ) => {
-		const newMetadata = { ...metadata };
-		if ( ! newMetadata.bindings ) {
-			return;
-		}
-
-		delete newMetadata.bindings[ key ];
-		if ( Object.keys( newMetadata.bindings ).length === 0 ) {
-			delete newMetadata.bindings;
-		}
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
 	const fieldsList = {};
 	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 	const registeredSources = getBlockBindingsSources();
-	Object.values( registeredSources ).forEach(
-		( { getFieldsList, label, usesContext } ) => {
+	Object.entries( registeredSources ).forEach(
+		( [ sourceName, { getFieldsList, usesContext } ] ) => {
 			if ( getFieldsList ) {
 				// Populate context.
 				const context = {};
@@ -286,7 +231,7 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 				} );
 				// Only add source if the list is not empty.
 				if ( sourceList ) {
-					fieldsList[ label ] = { ...sourceList };
+					fieldsList[ sourceName ] = { ...sourceList };
 				}
 			}
 		}
@@ -312,7 +257,7 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 			<ToolsPanel
 				label={ __( 'Attributes' ) }
 				resetAll={ () => {
-					removeAllConnections();
+					removeAllBlockBindings();
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
 				className="block-editor-bindings__panel"
@@ -327,8 +272,6 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 							attributes={ bindableAttributes }
 							bindings={ filteredBindings }
 							fieldsList={ fieldsList }
-							addConnection={ addConnection }
-							removeConnection={ removeConnection }
 						/>
 					) }
 				</ItemGroup>
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index cf464cedf04175..788bb2bef56efa 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -47,6 +47,7 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
+import { useBlockBindingsUtils } from './utils/block-bindings';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -92,4 +93,5 @@ lock( privateApis, {
 	useBlockDisplayTitle,
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
+	useBlockBindingsUtils,
 } );
diff --git a/packages/block-editor/src/utils/block-bindings.js b/packages/block-editor/src/utils/block-bindings.js
new file mode 100644
index 00000000000000..4ba6e1a362958c
--- /dev/null
+++ b/packages/block-editor/src/utils/block-bindings.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit';
+
+export function useBlockBindingsUtils() {
+	const { clientId } = useBlockEditContext();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { getBlockAttributes } = useSelect( blockEditorStore );
+
+	/**
+	 * Updates the value of the bindings connected to block attributes.
+	 * It removes the binding when the new value is `undefined`.
+	 *
+	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
+	 * @param {string} bindings.source The source name to connect to.
+	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { updateBlockBindings } = useBlockBindingsUtils();
+	 * updateBlockBindings( {
+	 *     url: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'url_custom_field',
+	 *         },
+	 * 	   },
+	 *     alt: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'text_custom_field',
+	 *         },
+	 * 	   }
+	 * } );
+	 * ```
+	 */
+	const updateBlockBindings = ( bindings ) => {
+		const { metadata } = getBlockAttributes( clientId );
+		const newBindings = { ...metadata?.bindings };
+		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
+			if ( ! binding && newBindings[ attribute ] ) {
+				delete newBindings[ attribute ];
+				return;
+			}
+			newBindings[ attribute ] = binding;
+		} );
+
+		const newMetadata = {
+			...metadata,
+			bindings: newBindings,
+		};
+
+		if ( Object.keys( newMetadata.bindings ).length === 0 ) {
+			delete newMetadata.bindings;
+		}
+
+		updateBlockAttributes( clientId, {
+			metadata:
+				Object.keys( newMetadata ).length === 0
+					? undefined
+					: newMetadata,
+		} );
+	};
+
+	/**
+	 * Removes the bindings property of the `metadata` attribute.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
+	 * removeAllBlockBindings();
+	 * ```
+	 */
+	const removeAllBlockBindings = () => {
+		const { metadata } = getBlockAttributes( clientId );
+		const newMetadata = { ...metadata };
+		delete newMetadata.bindings;
+		updateBlockAttributes( clientId, {
+			metadata:
+				Object.keys( newMetadata ).length === 0
+					? undefined
+					: newMetadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 9bec88a93471eb..28dd8788a390c6 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useState, useId } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -14,22 +17,9 @@ import {
 	AllowOverridesModal,
 	DisallowOverridesModal,
 } from './allow-overrides-modal';
+import { unlock } from '../lock-unlock';
 
-function removeBindings( bindings ) {
-	let updatedBindings = { ...bindings };
-	delete updatedBindings.__default;
-	if ( ! Object.keys( updatedBindings ).length ) {
-		updatedBindings = undefined;
-	}
-	return updatedBindings;
-}
-
-function addBindings( bindings ) {
-	return {
-		...bindings,
-		__default: { source: PATTERN_OVERRIDES_BINDING_SOURCE },
-	};
-}
+const { useBlockBindingsUtils } = unlock( blockEditorPrivateApis );
 
 function PatternOverridesControls( {
 	attributes,
@@ -49,24 +39,22 @@ function PatternOverridesControls( {
 	const isConnectedToOtherSources =
 		defaultBindings?.source &&
 		defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE;
+	const { updateBlockBindings } = useBlockBindingsUtils();
 
 	function updateBindings( isChecked, customName ) {
-		const prevBindings = attributes?.metadata?.bindings;
-		const updatedBindings = isChecked
-			? addBindings( prevBindings )
-			: removeBindings( prevBindings );
-
-		const updatedMetadata = {
-			...attributes.metadata,
-			bindings: updatedBindings,
-		};
-
 		if ( customName ) {
-			updatedMetadata.name = customName;
+			setAttributes( {
+				metadata: {
+					...attributes.metadata,
+					name: customName,
+				},
+			} );
 		}
 
-		setAttributes( {
-			metadata: updatedMetadata,
+		updateBlockBindings( {
+			__default: isChecked
+				? { source: PATTERN_OVERRIDES_BINDING_SOURCE }
+				: undefined,
 		} );
 	}
 

From 2a59bf1ee08410f1ee0a0c39c59b6bf5c7b920a0 Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:58:18 +0530
Subject: [PATCH 198/205] Image block: Add reset button (#64669)

* Add reset button on image block

* Update argument on onSelectImage function

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-library/src/image/image.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index c4b54259028d91..646299bb7e0892 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -3,6 +3,7 @@
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
+	MenuItem,
 	ExternalLink,
 	ResizableBox,
 	Spinner,
@@ -597,7 +598,11 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
-					/>
+					>
+						<MenuItem onClick={ () => onSelectImage( undefined ) }>
+							{ __( 'Reset' ) }
+						</MenuItem>
+					</MediaReplaceFlow>
 				</BlockControls>
 			) }
 			{ isSingleSelected && externalBlob && (

From 8352584988479e9d060645b9ce253a17cc8c2e4e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 21 Aug 2024 11:56:12 +0200
Subject: [PATCH 199/205] DataViews: Support defining field headers/names as
 React elements. (#64642)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/dataviews/CHANGELOG.md                    |  8 +++++++-
 .../src/components/dataviews/stories/fixtures.js   | 14 +++++++++++++-
 .../components/dataviews/stories/index.story.js    |  8 +++++++-
 .../dataviews/src/dataviews-layouts/grid/index.tsx |  2 +-
 .../dataviews-layouts/table/column-header-menu.tsx |  4 ++--
 packages/dataviews/src/normalize-fields.ts         |  1 +
 packages/dataviews/src/types.ts                    |  9 +++++++++
 7 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index cc6f4df9428b09..d51cf9c969016d 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,7 +2,13 @@
 
 ## Unreleased
 
-- The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
+## New features
+
+-   Support using a component for field headers or names by providing a `header` property in the field object. The string `label` property (or `id`) is still mandatory. ([#64642](https://github.com/WordPress/gutenberg/pull/64642)).
+
+## Internal
+
+-   The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
 
 ## 4.1.0 (2024-08-07)
 
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js
index f89cea81e6f15d..50401d97b026b5 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.js
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { trash } from '@wordpress/icons';
+import { trash, image, Icon, category } from '@wordpress/icons';
 import {
 	Button,
 	__experimentalText as Text,
@@ -173,6 +173,12 @@ export const fields = [
 	{
 		label: 'Image',
 		id: 'image',
+		header: (
+			<HStack spacing={ 1 } justify="start">
+				<Icon icon={ image } />
+				<span>Image</span>
+			</HStack>
+		),
 		render: ( { item } ) => {
 			return (
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
@@ -217,6 +223,12 @@ export const fields = [
 	{
 		label: 'Categories',
 		id: 'categories',
+		header: (
+			<HStack spacing={ 1 } justify="start">
+				<Icon icon={ category } />
+				<span>Categories</span>
+			</HStack>
+		),
 		elements: [
 			{ value: 'Space', label: 'Space' },
 			{ value: 'NASA', label: 'NASA' },
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.js b/packages/dataviews/src/components/dataviews/stories/index.story.js
index 9ce1c29573e55c..376b14a464666c 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.js
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.js
@@ -8,7 +8,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import DataViews from '../index';
 import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 
 const meta = {
@@ -61,5 +61,11 @@ Default.args = {
 				primaryField: 'title',
 			},
 		},
+		[ LAYOUT_LIST ]: {
+			layout: {
+				mediaField: 'image',
+				primaryField: 'title',
+			},
+		},
 	},
 };
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index c8cac31bf7db81..230ffe0dc50b5c 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -145,7 +145,7 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.label }
+										{ field.header }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index b8fd0517e49d1a..ba672715b91ccf 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -72,7 +72,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	);
 	const index = view.fields?.indexOf( fieldId ) as number;
 	if ( !! combinedField ) {
-		return combinedField.label;
+		return combinedField.header || combinedField.label;
 	}
 	const field = fields.find( ( f ) => f.id === fieldId );
 	if ( ! field ) {
@@ -102,7 +102,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.label }
+					{ field.header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index f9f95b5b8140dc..5f0baec12c4df2 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -55,6 +55,7 @@ export function normalizeFields< Item >(
 		return {
 			...field,
 			label: field.label || field.id,
+			header: field.header || field.label || field.id,
 			getValue,
 			render,
 			sort,
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index fa5cec8d7d0320..ca55442f6529a5 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -87,6 +87,12 @@ export type Field< Item > = {
 	 */
 	label?: string;
 
+	/**
+	 * The header of the field. Defaults to the label.
+	 * It allows the usage of a React Element to render the field labels.
+	 */
+	header?: string | ReactElement;
+
 	/**
 	 * A description of the field.
 	 */
@@ -151,6 +157,7 @@ export type Field< Item > = {
 
 export type NormalizedField< Item > = Field< Item > & {
 	label: string;
+	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
@@ -289,6 +296,8 @@ export interface CombinedField {
 
 	label: string;
 
+	header?: string | ReactElement;
+
 	/**
 	 * The fields to use as columns.
 	 */

From 5fb9c1cb1dc77863b4f9ec0bf55cd1c91eaa68b4 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Wed, 21 Aug 2024 12:20:52 +0200
Subject: [PATCH 200/205] Interactivity API: Fix context inheritance from
 namespaces different than the current one (#64677)

* Add failing test

* Fix contextStack generation to include other namespaces

* Update changelog

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
---
 .../directive-context/render.php              | 21 +++++++++++++++++++
 packages/interactivity/CHANGELOG.md           |  4 ++++
 packages/interactivity/src/directives.tsx     | 14 ++++++-------
 .../interactivity/directive-context.spec.ts   | 15 +++++++++++++
 4 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
index b52120debdc560..76635e37a26086 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -212,3 +212,24 @@
 		></span>
 	</div>
 </div>
+
+
+<div
+	data-testid="inheritance from other namespaces"
+	data-wp-interactive="directive-context/parent"
+	data-wp-context='{ "prop": "fromParentNs" }'
+>
+	<div
+		data-wp-interactive="directive-context/child"
+		data-wp-context='{ "prop": "fromChildNs" }'
+	>
+		<span
+			data-testid="parent"
+			data-wp-text="directive-context/parent::context.prop"
+		></span>
+		<span
+			data-testid="child"
+			data-wp-text="directive-context/child::context.prop"
+		></span>
+	</div>
+</div>
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 52707b70ba5a7b..9068e1780cc10e 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix context inheritance from namespaces different than the current one ([#64677](https://github.com/WordPress/gutenberg/pull/64677)).
+
 ## 6.5.0 (2024-08-07)
 
 ### Enhancements
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 357fe203399be3..715bc2ea7b16b6 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -273,12 +273,11 @@ export default () => {
 			const inheritedValue = useContext( inheritedContext );
 
 			const ns = defaultEntry!.namespace;
-			const currentValue = useRef( {
-				[ ns ]: proxifyState( ns, {} ),
-			} );
+			const currentValue = useRef( proxifyState( ns, {} ) );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
+				const result = { ...inheritedValue };
 				if ( defaultEntry ) {
 					const { namespace, value } = defaultEntry;
 					// Check that the value is a JSON object. Send a console warning if not.
@@ -288,15 +287,16 @@ export default () => {
 						);
 					}
 					updateContext(
-						currentValue.current[ namespace ],
+						currentValue.current,
 						deepClone( value ) as object
 					);
-					currentValue.current[ namespace ] = proxifyContext(
-						currentValue.current[ namespace ],
+					currentValue.current = proxifyContext(
+						currentValue.current,
 						inheritedValue[ namespace ]
 					);
+					result[ namespace ] = currentValue.current;
 				}
-				return currentValue.current;
+				return result;
 			}, [ defaultEntry, inheritedValue ] );
 
 			return createElement( Provider, { value: contextStack }, children );
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
index e806049ff55e75..0a27fe258d5a8d 100644
--- a/test/e2e/specs/interactivity/directive-context.spec.ts
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -380,4 +380,19 @@ test.describe( 'data-wp-context', () => {
 		expect( childContextAfter.obj2.prop6 ).toBe( 'child' );
 		expect( childContextAfter.obj2.overwritten ).toBeUndefined();
 	} );
+
+	test( 'properties from other namespaces defined in a parent context are inherited', async ( {
+		page,
+	} ) => {
+		const childProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'child' );
+
+		const parentProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'parent' );
+
+		await expect( childProp ).toHaveText( 'fromChildNs' );
+		await expect( parentProp ).toHaveText( 'fromParentNs' );
+	} );
 } );

From 5de4d860b9a55e3fbb7a8b1a230ae9643d294e25 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Aug 2024 19:23:12 +0900
Subject: [PATCH 201/205] Try: Hyphenate long block names in the inserter
 (#64667)

Unlinked contributors: La-Geek.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: hedgefield <hedgefield@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: laras126 <notlaura@git.wordpress.org>
Co-authored-by: Soean <soean@git.wordpress.org>
---
 .../block-editor/src/components/inserter-list-item/style.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index fb15113400522b..f91e4365db30ce 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -120,4 +120,5 @@
 .block-editor-block-types-list__item-title {
 	padding: 4px 2px 8px;
 	font-size: 12px;
+	hyphens: auto;
 }

From 543a4695aed3aeb2ea75b5d385b094c34d7024f2 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Aug 2024 19:24:21 +0900
Subject: [PATCH 202/205] Embed Block: Replace native input element with
 InputControl component (#64668)

* Embed Block: Replace native input element with InputControl component

* Don't use hardcoded label

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/block-library/src/embed/edit.js              |  2 +-
 packages/block-library/src/embed/editor.scss          |  4 ++++
 packages/block-library/src/embed/embed-placeholder.js | 11 +++++++----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 0b589eb68ecf49..6978e144794047 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -226,7 +226,7 @@ const EmbedEdit = ( props ) => {
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }
-					onChange={ ( event ) => setURL( event.target.value ) }
+					onChange={ ( value ) => setURL( value ) }
 					fallback={ () => fallback( url, onReplace ) }
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index 6d1fc5496bc73b..eda859eee9040c 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/packages/block-library/src/embed/editor.scss
@@ -12,6 +12,10 @@
 		justify-content: center;
 	}
 
+	.wp-block-embed__placeholder-input {
+		flex: 1 1 auto;
+	}
+
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
 		word-break: break-word;
diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
index 7b4cd5f8db9aa8..57aa0645ee3d94 100644
--- a/packages/block-library/src/embed/embed-placeholder.js
+++ b/packages/block-library/src/embed/embed-placeholder.js
@@ -8,6 +8,7 @@ import {
 	ExternalLink,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
@@ -31,15 +32,17 @@ const EmbedPlaceholder = ( {
 			) }
 		>
 			<form onSubmit={ onSubmit }>
-				<input
+				<InputControl
+					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
-					className="components-placeholder__input"
-					aria-label={ label }
+					className="wp-block-embed__placeholder-input"
+					label={ label }
+					hideLabelFromVision
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange }
 				/>
-				<Button variant="primary" type="submit">
+				<Button __next40pxDefaultSize variant="primary" type="submit">
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 			</form>

From cc8009e9e1f076a435e0443670ec1c7da4c30f62 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 21 Aug 2024 13:18:25 +0200
Subject: [PATCH 203/205] DropdownMenu V2: use themed color variables (#64647)

* Use foreground theme color instead of hardcoded gray 900

* Use shared theme variable for gray 700 text

* Use theme variables for remaining colors.gray variables

* Update comments

* Extract lighter background color

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/dropdown-menu-v2/styles.ts | 26 ++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c97e25862addec..357427f8f3443c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -69,6 +69,7 @@
 -   `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
 -   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
 -   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
+-   `DropdownMenu` v2: use themed color variables ([#64647](https://github.com/WordPress/gutenberg/pull/64647)).
 -   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
 -   Update `ariakit` to version `0.4.10` ([#64637](https://github.com/WordPress/gutenberg/pull/64637)).
 
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 3260a83f45f1c1..9e71316b6b9dc5 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -25,12 +25,14 @@ const ITEM_PADDING_BLOCK = space( 2 );
 const ITEM_PADDING_INLINE = space( 3 );
 
 // TODO:
-// - those values are different from saved variables?
-// - should bring this into the config, and make themeable
-// - border color and divider color are different?
-const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
-const DIVIDER_COLOR = COLORS.gray[ 200 ];
-const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
+// - border color and divider color are different from COLORS.theme variables
+// - lighter text color is not defined in COLORS.theme, should it be?
+// - lighter background color is not defined in COLORS.theme, should it be?
+const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
+const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
+const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
+const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
 const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
@@ -149,7 +151,7 @@ const baseItem = css`
 	font-weight: normal;
 	line-height: 20px;
 
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 	border-radius: ${ CONFIG.radiusSmall };
 
 	padding-block: ${ ITEM_PADDING_BLOCK };
@@ -193,8 +195,8 @@ const baseItem = css`
 
 	/* When the item is the trigger of an open submenu */
 	${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
-		background-color: ${ COLORS.gray[ 100 ] };
-		color: ${ COLORS.gray[ 900 ] };
+		background-color: ${ LIGHT_BACKGROUND_COLOR };
+		color: ${ COLORS.theme.foreground };
 	}
 
 	svg {
@@ -238,7 +240,7 @@ export const ItemPrefixWrapper = styled.span`
 	align-items: center;
 	justify-content: center;
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	* When the parent menu item is active, except when it's a non-focused/hovered
@@ -284,7 +286,7 @@ export const ItemSuffixWrapper = styled.span`
 	justify-content: center;
 	gap: ${ space( 3 ) };
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	 * When the parent menu item is active, except when it's a non-focused/hovered
@@ -343,7 +345,7 @@ export const DropdownMenuItemLabel = styled( Truncate )`
 export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 	word-break: break-all;
 
 	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,

From 9d51f4532ca576021e5a90651a9dccea3400df4b Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 21 Aug 2024 12:24:56 +0100
Subject: [PATCH 204/205] Apply elevation scale (#64656)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/block-editor/src/components/inserter/style.scss        | 2 +-
 packages/block-editor/src/components/url-input/style.scss       | 2 +-
 packages/block-library/src/gallery/editor.scss                  | 2 +-
 .../src/components/dataviews-bulk-actions-toolbar/style.scss    | 2 +-
 packages/edit-widgets/src/components/error-boundary/style.scss  | 2 +-
 packages/editor/src/components/error-boundary/style.scss        | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 960ca8b48cdf90..a567ce1cee07e5 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -36,7 +36,7 @@ $block-inserter-tabs-height: 44px;
 	.components-popover__content {
 		border: none;
 		outline: none;
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index f8d84ae43b8089..e6ba17a71aaa5b 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -120,7 +120,7 @@ $input-size: 300px;
 }
 
 .block-editor-url-input__button-modal {
-	box-shadow: $shadow-popover;
+	box-shadow: $elevation-x-small;
 	border: 1px solid $gray-300;
 	background: $white;
 }
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 025e86277f7edc..3184b9d3d8fb22 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -144,7 +144,7 @@
 	border: $border-width solid $gray-900;
 
 	&:hover {
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 	}
 
 	@include break-small() {
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
index 21e6c2ad4d4d64..5672234d8cbbb7 100644
--- a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
+++ b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
@@ -12,7 +12,7 @@
 
 	.components-accessible-toolbar {
 		border-color: $gray-300;
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 
 		.components-toolbar-group {
 			border-color: $gray-200;
diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss
index c1605b42a5ea86..b909b79dc1d304 100644
--- a/packages/edit-widgets/src/components/error-boundary/style.scss
+++ b/packages/edit-widgets/src/components/error-boundary/style.scss
@@ -3,5 +3,5 @@
 	max-width: 780px;
 	padding: 20px;
 	margin-top: 60px;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
 }
diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
index d1b792d0ff3d32..2913a644b94576 100644
--- a/packages/editor/src/components/error-boundary/style.scss
+++ b/packages/editor/src/components/error-boundary/style.scss
@@ -3,5 +3,5 @@
 	max-width: 780px;
 	padding: 20px;
 	margin-top: 60px;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
 }

From e6ecb4d93e1db53dddd5e65e63af316108735ba4 Mon Sep 17 00:00:00 2001
From: "Joen A." <1204802+jasmussen@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:25:16 +0200
Subject: [PATCH 205/205] Placeholders: Update radius temporarily. (#64672)

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md               | 1 +
 packages/components/src/placeholder/style.scss | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 357427f8f3443c..ff9749f2dad080 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -22,6 +22,7 @@
 
 ### Enhancements
 
+-   `Placeholder`: Temporarily rewind radius scale ([#64672](https://github.com/WordPress/gutenberg/pull/64672)).
 -   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
 -   `Composite`: use internal context to forward the composite store to sub-components ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 -   `QueryControls`: Default to new 40px size ([#64457](https://github.com/WordPress/gutenberg/pull/64457)).
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 61090c81110a5c..a38d7d3e3ace8b 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -19,7 +19,7 @@
 
 
 	// Block UI appearance.
-	border-radius: $radius-medium;
+	border-radius: $radius-small;	// Match the block toolbar material radius.
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
@@ -144,6 +144,9 @@
 	display: flex;
 	box-shadow: none;
 
+	// In the unselected state, radius should match Global Styles > Image > Radius.
+	border-radius: 0;
+
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
 	backdrop-filter: blur(100px);