From 86c3225039d71770c9492bb3a6f047972afbe094 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 5 Aug 2024 13:40:38 +0400
Subject: [PATCH 01/19] Fix flaky DataViews list layout e2e tests (#64244)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 .../site-editor/dataviews-list-layout-keyboard.spec.js   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
index f6b01db63d9118..16cc34ace8a82b 100644
--- a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
+++ b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
@@ -76,10 +76,15 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 
+		const firstItem = page
+			.getByRole( 'grid' )
+			.getByRole( 'button' )
+			.first();
+
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
 		await page.keyboard.press( 'Tab' );
-		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+		await expect( firstItem ).toBeFocused();
 
 		// Go to the preview.
 		await page.keyboard.press( 'Tab' );
@@ -91,7 +96,7 @@ test.describe( 'Dataviews List Layout', () => {
 
 		// Go back to the items list using SHIFT+TAB.
 		await page.keyboard.press( 'Shift+Tab' );
-		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+		await expect( firstItem ).toBeFocused();
 	} );
 
 	test( 'Navigates the items list via UP/DOWN arrow keys', async ( {

From ac9a41867f0fd7d882547b7d5e32e47355acc693 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 5 Aug 2024 10:50:38 +0100
Subject: [PATCH 02/19] Zoom Out: Add a control to enter and leave zoom out
 mode (#63870)

* Zoom Out: Add a control to enter and leave zoom out mode

revert changes

Use 100% for desktop and 50% for zoom out

update menu items

Allow users to set zoom out back to 100% when the patterns tab is open

Reset zoom when switching device mode

Add text for zoom

refactor click handler to a shared function

Move in and out of zoom out when resizing below tablet viewport size

* save the editing mode in a ref so we can restore it

* update logic

* Update packages/editor/src/components/preview-dropdown/index.js

Co-authored-by: Alex Lende <alex+github.com@lende.xyz>

* fix preview selection

* remove the experiment

* remove disconnected change

* make the code more readable

* simplify code

* remove changes from the rebase

* Render a down chevron in the dropdown

* don't run the use effect when the mode changes

* Remove incorrect comment

* Customized spacing for chevron in preview dropdown

* minor tweaks

* Simplify logic for preview selection and keep in line with editorMode

* Allow zoom out inserters if manually select zoom out mode from dropdown

* Use desktop icon with 50% for zoom out

---------

Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
---
 .../src/components/block-tools/index.js       |  11 +-
 .../src/components/iframe/index.js            |   6 +-
 .../block-editor/src/hooks/use-zoom-out.js    |   2 +-
 .../editor/src/components/header/index.js     |   3 +-
 .../src/components/preview-dropdown/index.js  | 108 +++++++++++++-----
 .../components/preview-dropdown/style.scss    |   5 +
 .../src/components/visual-editor/index.js     |  14 ++-
 7 files changed, 101 insertions(+), 48 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index c07adb34e584f3..163c35b54e4381 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -251,12 +251,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ window.__experimentalEnableZoomedOutPatternsTab &&
-					isZoomOutMode && (
-						<ZoomOutModeInserters
-							__unstableContentRef={ __unstableContentRef }
-						/>
-					) }
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3b0bce6d56b403..e7af77920ea127 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -242,10 +242,8 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
+		prevContainerWidth.current = containerWidth;
+	}, [ containerWidth ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 3ec701cfc4a14d..d0d7d0fd4d71c7 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -49,5 +49,5 @@ export function useZoomOut( zoomOut = true ) {
 		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 2a604229596005..b8eda30c721860 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -57,7 +57,6 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		isNestedEntity,
-		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -136,7 +135,7 @@ function Header( {
 				) }
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
-					disabled={ isNestedEntity || isZoomedOutView }
+					disabled={ isNestedEntity }
 				/>
 				<PostPreviewButton
 					className="editor-header__post-preview-button"
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index b157c8cc1cfc3b..6554f7c0228a77 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -14,7 +19,9 @@ import { __ } from '@wordpress/i18n';
 import { desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -23,21 +30,50 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getUnstableBase, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getUnstableBase()?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
+	const {
+		deviceType,
+		editorMode,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType } = select( editorStore );
+		const { getUnstableBase, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			editorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+		};
+	}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	/**
+	 * Save the original editing mode in a ref to restore it when we exit zoom out.
+	 */
+	const originalEditingMode = useRef( editorMode );
+	useEffect( () => {
+		if ( editorMode !== 'zoom-out' ) {
+			originalEditingMode.current = editorMode;
+		}
+
+		return () => {
+			if (
+				editorMode === 'zoom-out' &&
+				editorMode !== originalEditingMode.current
+			) {
+				__unstableSetEditorMode( originalEditingMode.current );
+			}
+		};
+	}, [ editorMode, __unstableSetEditorMode ] );
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -48,6 +84,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 	const toggleProps = {
 		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
@@ -58,9 +95,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const deviceIcons = {
+		desktop,
 		mobile,
 		tablet,
-		desktop,
 	};
 
 	/**
@@ -74,6 +111,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
+		{
+			value: 'ZoomOut',
+			label: __( 'Desktop (50%)' ),
+			icon: desktop,
+		},
 		{
 			value: 'Tablet',
 			label: __( 'Tablet' ),
@@ -86,29 +128,37 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		},
 	];
 
+	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
+
 	/**
-	 * The selected choice.
+	 * Handles the selection of a device type.
 	 *
-	 * @type {Object}
+	 * @param {string} value The device type.
 	 */
-	let selectedChoice = choices.find(
-		( choice ) => choice.value === deviceType
-	);
+	const onSelect = ( value ) => {
+		let newEditorMode = originalEditingMode.current;
 
-	/**
-	 * If no selected choice is found, default to the first
-	 */
-	if ( ! selectedChoice ) {
-		selectedChoice = choices[ 0 ];
-	}
+		if ( value === 'ZoomOut' ) {
+			newEditorMode = 'zoom-out';
+			setDeviceType( 'Desktop' );
+		} else {
+			setDeviceType( value );
+		}
+
+		__unstableSetEditorMode( newEditorMode );
+	};
 
 	return (
 		<DropdownMenu
-			className="editor-preview-dropdown"
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
@@ -117,8 +167,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ choices }
-							value={ selectedChoice.value }
-							onSelect={ setDeviceType }
+							value={ previewValue }
+							onSelect={ onSelect }
 						/>
 					</MenuGroup>
 					{ isTemplate && (
diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss
index 43fa7cdd8ecd97..c117a4239e9dfb 100644
--- a/packages/editor/src/components/preview-dropdown/style.scss
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -1,3 +1,8 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: 4px;
+	padding-left: 6px;
+}
+
 .editor-preview-dropdown__button-external {
 	width: 100%;
 	display: flex;
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 8b4877704f5f18..a67feb530e96a2 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -107,6 +107,7 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -341,12 +342,13 @@ function VisualEditor( {
 		} ),
 	] );
 
-	const zoomOutProps = isZoomOutMode
-		? {
-				scale: 'default',
-				frameSize: '48px',
-		  }
-		: {};
+	const zoomOutProps =
+		isZoomOutMode && ! isTabletViewport
+			? {
+					scale: 'default',
+					frameSize: '48px',
+			  }
+			: {};
 
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =

From 645ae89fb622c4a32aedf79391df1ccd66395dcd Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 5 Aug 2024 11:54:18 +0200
Subject: [PATCH 03/19] Update: De-emphasise bulk actions on Grid layout.
 (#64209)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/base-styles/_z-index.scss            |  3 +++
 packages/dataviews/src/layouts/grid/index.tsx | 16 +++++++--------
 .../dataviews/src/layouts/grid/style.scss     | 20 +++++++++++++++++++
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index b8a9088cfd72cc..4d5f22e02fa7d1 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -208,6 +208,9 @@ $z-layers: (
 	// Ensure checkbox + actions don't overlap table header
 	".dataviews-view-table thead": 1,
 
+	// Ensure selection checkbox stays above the preview field.
+	".dataviews-view-grid__card .dataviews-selection-checkbox": 1,
+
 	// Ensure quick actions toolbar appear above pagination
 	".dataviews-bulk-actions-toolbar": 2,
 );
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
index cbfccf5521a812..c8cac31bf7db81 100644
--- a/packages/dataviews/src/layouts/grid/index.tsx
+++ b/packages/dataviews/src/layouts/grid/index.tsx
@@ -84,18 +84,18 @@ function GridItem< Item >( {
 			<div className="dataviews-view-grid__media">
 				{ renderedMediaField }
 			</div>
+			<SingleSelectionCheckbox
+				item={ item }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				primaryField={ primaryField }
+				disabled={ ! hasBulkAction }
+			/>
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<SingleSelectionCheckbox
-					item={ item }
-					selection={ selection }
-					onChangeSelection={ onChangeSelection }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ renderedPrimaryField }
 				</HStack>
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/layouts/grid/style.scss
index a707401972cdab..ebe039ea7543b0 100644
--- a/packages/dataviews/src/layouts/grid/style.scss
+++ b/packages/dataviews/src/layouts/grid/style.scss
@@ -9,6 +9,7 @@
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
+		position: relative;
 
 		.dataviews-view-grid__title-actions {
 			padding: $grid-unit-10 0 $grid-unit-05;
@@ -22,6 +23,11 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
 		}
 	}
 
@@ -32,6 +38,7 @@
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;
 		position: relative;
+		overflow: hidden;
 
 		img {
 			object-fit: cover;
@@ -148,3 +155,16 @@
 .dataviews-view-grid__field:empty {
 	display: none;
 }
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}

From 4be49120a16cd79066d6528f25f7d10c046026c1 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 5 Aug 2024 12:33:29 +0200
Subject: [PATCH 04/19] Move filter UI into a toggle-able panel to improve
 experience on narrow viewports/containers (#63203)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
---
 .../dataviews-filters/add-filter.tsx          |  58 +++--
 .../components/dataviews-filters/index.tsx    | 210 +++++++++++++-----
 .../components/dataviews-filters/style.scss   |  30 +++
 .../src/components/dataviews-search/index.tsx |  13 +-
 .../src/components/dataviews/index.tsx        |  26 ++-
 .../src/components/dataviews/style.scss       |   7 +-
 .../src/components/page-patterns/index.js     |   1 +
 .../src/components/page-templates/index.js    |   1 +
 .../src/components/post-list/index.js         |   8 +-
 .../dataviews-list-layout-keyboard.spec.js    |   9 -
 .../site-editor/new-templates-list.spec.js    |   2 +-
 test/e2e/specs/site-editor/patterns.spec.js   |   8 +
 12 files changed, 266 insertions(+), 107 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-filters/add-filter.tsx b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
index 38dda38c96e70f..ca1043d6e99fdb 100644
--- a/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
@@ -32,29 +32,18 @@ interface AddFilterProps {
 	setOpenedFilter: ( filter: string | null ) => void;
 }
 
-function AddFilter(
-	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
-	ref: Ref< HTMLButtonElement >
-) {
-	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
-		return null;
-	}
+export function AddFilterDropdownMenu( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	trigger,
+}: AddFilterProps & {
+	trigger: React.ReactNode;
+} ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					accessibleWhenDisabled
-					size="compact"
-					className="dataviews-filters__button"
-					variant="tertiary"
-					disabled={ ! inactiveFilters.length }
-					ref={ ref }
-				>
-					{ __( 'Add filter' ) }
-				</Button>
-			}
-		>
+		<DropdownMenu trigger={ trigger }>
 			{ inactiveFilters.map( ( filter ) => {
 				return (
 					<DropdownMenuItem
@@ -85,4 +74,31 @@ function AddFilter(
 	);
 }
 
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
+		return null;
+	}
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<AddFilterDropdownMenu
+			trigger={
+				<Button
+					accessibleWhenDisabled
+					size="compact"
+					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+			{ ...{ filters, view, onChangeView, setOpenedFilter } }
+		/>
+	);
+}
+
 export default forwardRef( AddFilter );
diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
index 449e0ff0323a8b..de3477914c0083 100644
--- a/packages/dataviews/src/components/dataviews-filters/index.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -1,65 +1,150 @@
 /**
  * WordPress dependencies
  */
-import { memo, useContext, useRef } from '@wordpress/element';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	memo,
+	useContext,
+	useRef,
+	useMemo,
+	useCallback,
+} from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
+import { default as AddFilter, AddFilterDropdownMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
 import { sanitizeOperators } from '../../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
-import type { NormalizedFilter } from '../../types';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
-function Filters() {
-	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
-		useContext( DataViewsContext );
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters: NormalizedFilter[] = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.elements?.length ) {
-			return;
-		}
+export function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if ( ! field.elements?.length ) {
+				return;
+			}
 
-		const operators = sanitizeOperators( field );
-		if ( operators.length === 0 ) {
-			return;
-		}
+			const operators = sanitizeOperators( field );
+			if ( operators.length === 0 ) {
+				return;
+			}
 
-		const isPrimary = !! field.filterBy?.isPrimary;
-		filters.push( {
-			field: field.id,
-			name: field.label,
-			elements: field.elements,
-			singleSelection: operators.some( ( op ) =>
-				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
-			),
-			operators,
-			isVisible:
-				isPrimary ||
-				!! view.filters?.some(
-					( f ) =>
-						f.field === field.id &&
-						ALL_OPERATORS.includes( f.operator )
+			const isPrimary = !! field.filterBy?.isPrimary;
+			filters.push( {
+				field: field.id,
+				name: field.label,
+				elements: field.elements,
+				singleSelection: operators.some( ( op ) =>
+					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
 				),
-			isPrimary,
+				operators,
+				isVisible:
+					isPrimary ||
+					!! view.filters?.some(
+						( f ) =>
+							f.field === field.id &&
+							ALL_OPERATORS.includes( f.operator )
+					),
+				isPrimary,
+			} );
 		} );
-	} );
-	// Sort filters by primary property. We need the primary filters to be first.
-	// Then we sort by name.
-	filters.sort( ( a, b ) => {
-		if ( a.isPrimary && ! b.isPrimary ) {
-			return -1;
-		}
-		if ( ! a.isPrimary && b.isPrimary ) {
-			return 1;
-		}
-		return a.name.localeCompare( b.name );
-	} );
+		// Sort filters by primary property. We need the primary filters to be first.
+		// Then we sort by name.
+		filters.sort( ( a, b ) => {
+			if ( a.isPrimary && ! b.isPrimary ) {
+				return -1;
+			}
+			if ( ! a.isPrimary && b.isPrimary ) {
+				return 1;
+			}
+			return a.name.localeCompare( b.name );
+		} );
+		return filters;
+	}, [ fields, view ] );
+}
+
+export function FilterVisibilityToggle( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	isShowingFilter,
+	setIsShowingFilter,
+}: {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+	isShowingFilter: boolean;
+	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
+} ) {
+	const onChangeViewWithFilterVisibility = useCallback(
+		( _view: View ) => {
+			onChangeView( _view );
+			setIsShowingFilter( true );
+		},
+		[ onChangeView, setIsShowingFilter ]
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+
+	const hasVisibleFilters = !! visibleFilters.length;
+	if ( ! hasVisibleFilters ) {
+		return (
+			<AddFilterDropdownMenu
+				filters={ filters }
+				view={ view }
+				onChangeView={ onChangeViewWithFilterVisibility }
+				setOpenedFilter={ setOpenedFilter }
+				trigger={
+					<Button
+						className="dataviews-filters__visibility-toggle"
+						size="compact"
+						icon={ funnel }
+						label={ __( 'Add filter' ) }
+						isPressed={ false }
+						aria-expanded={ false }
+					/>
+				}
+			/>
+		);
+	}
+	return (
+		<div className="dataviews-filters__container-visibility-toggle">
+			<Button
+				className="dataviews-filters__visibility-toggle"
+				size="compact"
+				icon={ funnel }
+				label={ __( 'Toggle filter display' ) }
+				onClick={ () => {
+					if ( ! isShowingFilter ) {
+						setOpenedFilter( null );
+					}
+					setIsShowingFilter( ! isShowingFilter );
+				} }
+				isPressed={ isShowingFilter }
+				aria-expanded={ isShowingFilter }
+			/>
+			{ hasVisibleFilters && !! view.filters?.length && (
+				<span className="dataviews-filters-toggle__count">
+					{ view.filters?.length }
+				</span>
+			) }
+		</div>
+	);
+}
+
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
 	const addFilter = (
 		<AddFilter
 			key="add-filter"
@@ -70,12 +155,12 @@ function Filters() {
 			setOpenedFilter={ setOpenedFilter }
 		/>
 	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
 	const filterComponents = [
-		...filters.map( ( filter ) => {
-			if ( ! filter.isVisible ) {
-				return null;
-			}
-
+		...visibleFilters.map( ( filter ) => {
 			return (
 				<FilterSummary
 					key={ filter.field }
@@ -90,19 +175,22 @@ function Filters() {
 		addFilter,
 	];
 
-	if ( filterComponents.length > 1 ) {
-		filterComponents.push(
-			<ResetFilters
-				key="reset-filters"
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	}
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
 
 	return (
-		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			className="dataviews-filters__container"
+			wrap
+		>
 			{ filterComponents }
 		</HStack>
 	);
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index 26e5e613fcbe44..6912b5cc483164 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -2,6 +2,10 @@
 	position: relative;
 }
 
+.dataviews-filters__container {
+	padding-top: 0;
+}
+
 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
 	&,
 	&:hover {
@@ -250,3 +254,29 @@
 		width: $icon-size;
 	}
 }
+
+.dataviews-filters__container-visibility-toggle {
+	position: relative;
+	flex-shrink: 0;
+}
+
+.dataviews-filters-toggle__count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(50%, -50%);
+	background: var(--wp-admin-theme-color, #3858e9);
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
+	line-height: $grid-unit-20;
+	padding: 0 $grid-unit-05;
+	text-align: center;
+	border-radius: $grid-unit-10;
+	font-size: 11px;
+	outline: var(--wp-admin-border-width-focus) solid $white;
+	color: $white;
+}
+
+.dataviews-search {
+	width: fit-content;
+}
diff --git a/packages/dataviews/src/components/dataviews-search/index.tsx b/packages/dataviews/src/components/dataviews-search/index.tsx
index 5e5ce705e11195..1aef99872960be 100644
--- a/packages/dataviews/src/components/dataviews-search/index.tsx
+++ b/packages/dataviews/src/components/dataviews-search/index.tsx
@@ -30,15 +30,18 @@ const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
 		viewRef.current = view;
 	}, [ onChangeView, view ] );
 	useEffect( () => {
-		onChangeViewRef.current( {
-			...viewRef.current,
-			page: 1,
-			search: debouncedSearch,
-		} );
+		if ( debouncedSearch !== viewRef.current?.search ) {
+			onChangeViewRef.current( {
+				...viewRef.current,
+				page: 1,
+				search: debouncedSearch,
+			} );
+		}
 	}, [ debouncedSearch ] );
 	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
+			className="dataviews-search"
 			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index c2f75b9b32b1e8..f6f408065058d2 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -15,7 +15,11 @@ import { useMemo, useState } from '@wordpress/element';
 import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
 import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
 import DataViewsContext from '../dataviews-context';
-import DataViewsFilters from '../dataviews-filters';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FilterVisibilityToggle,
+} from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
 import DataviewsPagination from '../dataviews-pagination';
 import DataViewsSearch from '../dataviews-search';
@@ -69,6 +73,8 @@ 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;
@@ -90,6 +96,7 @@ export default function DataViews< Item >( {
 		);
 	}, [ selection, data, getItemId ] );
 
+	const filters = useFilters( _fields, view );
 	return (
 		<DataViewsContext.Provider
 			value={ {
@@ -113,14 +120,18 @@ export default function DataViews< Item >( {
 					alignment="top"
 					justify="start"
 					className="dataviews__view-actions"
+					spacing={ 1 }
 				>
-					<HStack
-						justify="start"
-						className="dataviews-filters__container"
-						wrap
-					>
+					<HStack justify="start" wrap>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<DataViewsFilters />
+						<FilterVisibilityToggle
+							filters={ filters }
+							view={ view }
+							onChangeView={ onChangeView }
+							setOpenedFilter={ setOpenedFilter }
+							setIsShowingFilter={ setIsShowingFilter }
+							isShowingFilter={ isShowingFilter }
+						/>
 					</HStack>
 					{ view.type === LAYOUT_GRID && (
 						<DensityPicker
@@ -140,6 +151,7 @@ export default function DataViews< Item >( {
 						{ header }
 					</HStack>
 				</HStack>
+				{ isShowingFilter && <DataViewsFilters /> }
 				<DataViewsLayout />
 				<DataviewsPagination />
 				<DataViewsBulkActionsToolbar />
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 6b8af6a90007dd..742c8c42134dfd 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -9,7 +9,8 @@
 	flex-direction: column;
 }
 
-.dataviews__view-actions {
+.dataviews__view-actions,
+.dataviews-filters__container {
 	box-sizing: border-box;
 	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
@@ -78,7 +79,8 @@
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
-	.dataviews__view-actions {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
 
 		.components-search-control {
@@ -95,3 +97,4 @@
 		padding-right: $grid-unit-30;
 	}
 }
+
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index a8db73272c0ce7..66d2d25a4b8f04 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -171,6 +171,7 @@ export default function DataviewsPatterns() {
 					descriptionId={ `${ id }-description` }
 				/>
 				<DataViews
+					key={ categoryId + postType }
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 01b17ae76fc9dc..5ffc2477337935 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -214,6 +214,7 @@ export default function PageTemplates() {
 			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index e63ed4ccebcf98..74bbee05246178 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -174,7 +174,12 @@ export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const location = useLocation();
-	const { postId, quickEdit = false } = location.params;
+	const {
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.params;
 	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -334,6 +339,7 @@ export default function PostList( { postType } ) {
 			}
 		>
 			<DataViews
+				key={ activeView + isCustom }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
diff --git a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
index 16cc34ace8a82b..0ff375a9f45a33 100644
--- a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
+++ b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
@@ -41,11 +41,6 @@ test.describe( 'Dataviews List Layout', () => {
 			page.getByRole( 'button', { name: 'Add filter' } )
 		).toBeFocused();
 
-		await page.keyboard.press( 'Tab' );
-		await expect(
-			page.getByRole( 'button', { name: 'Reset' } )
-		).toBeFocused();
-
 		await page.keyboard.press( 'Tab' );
 		await expect(
 			page.getByRole( 'button', { name: 'Layout' } )
@@ -74,7 +69,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		const firstItem = page
 			.getByRole( 'grid' )
@@ -109,7 +103,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
@@ -133,7 +126,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
@@ -175,7 +167,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
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 92edc741011834..878f0ed2eb48c3 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -56,7 +56,7 @@ test.describe( 'Templates', () => {
 		await expect( titles ).toHaveCount( 1 );
 		await expect( titles.first() ).toHaveText( 'Tag Archives' );
 		await page
-			.getByRole( 'button', { name: 'Reset', exact: true } )
+			.getByRole( 'button', { name: 'Reset search', exact: true } )
 			.click();
 		await expect( titles ).toHaveCount( 6 );
 
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
index 0b0fada39c2622..538f9ba936a897 100644
--- a/test/e2e/specs/site-editor/patterns.spec.js
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -148,6 +148,14 @@ test.describe( 'Patterns', () => {
 		await admin.visitSiteEditor( { postType: 'wp_block' } );
 
 		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 9a3d12aa900de3efcc1f623a170b9d7ee3841933 Mon Sep 17 00:00:00 2001
From: Erik <11491369+kebbet@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:36:34 +0200
Subject: [PATCH 05/19] Data Views: Add context to trash string (#64249)

Co-authored-by: kebbet <kebbet@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/editor/src/dataviews/actions/trash-post.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/dataviews/actions/trash-post.tsx b/packages/editor/src/dataviews/actions/trash-post.tsx
index c6a265eba81f5a..a8e42c510a6cd0 100644
--- a/packages/editor/src/dataviews/actions/trash-post.tsx
+++ b/packages/editor/src/dataviews/actions/trash-post.tsx
@@ -4,7 +4,7 @@
 import { trash } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useState } from '@wordpress/element';
 import {
@@ -185,7 +185,7 @@ const trashPost: Action< PostWithPermissions > = {
 						disabled={ isBusy }
 						accessibleWhenDisabled
 					>
-						{ __( 'Trash' ) }
+						{ _x( 'Trash', 'verb' ) }
 					</Button>
 				</HStack>
 			</VStack>

From 3f7611a8ae36d2fb5159185ea7b759e2b605755f Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:10:35 +0900
Subject: [PATCH 06/19] BlockDraggable: Remove invalid aria-hidden attribute
 from button (#64228)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-editor/src/components/block-mover/index.js        | 1 -
 .../src/components/block-tools/block-selection-button.js         | 1 -
 .../block-editor/src/components/block-tools/zoom-out-toolbar.js  | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 3b7f25800095a5..7aa273605bbe6b 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -89,7 +89,6 @@ function BlockMover( {
 						<Button
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 8d99b829a84bf4..77d37634b87217 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -259,7 +259,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 								<Button
 									icon={ dragHandle }
 									className="block-selection-button_drag-handle"
-									aria-hidden="true"
 									label={ dragHandleLabel }
 									// Should not be able to tab to drag handle as this
 									// button can only be used with a pointer device.
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index bb5955244cd823..4dcadc798489a4 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -100,7 +100,6 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 						<Button
 							icon={ dragHandle }
 							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							iconSize={ 24 }
 							size="compact"

From 525f756a89119992e378091daf7b336564b7d5db Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 5 Aug 2024 16:19:27 +0400
Subject: [PATCH 07/19] Plugin: Remove leftover 'WP_Rest_Customizer_Nonces'
 controller (#64221)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../class-wp-rest-customizer-nonces.php       | 74 -------------------
 lib/experimental/rest-api.php                 |  9 ---
 lib/load.php                                  |  5 --
 3 files changed, 88 deletions(-)
 delete mode 100644 lib/experimental/class-wp-rest-customizer-nonces.php

diff --git a/lib/experimental/class-wp-rest-customizer-nonces.php b/lib/experimental/class-wp-rest-customizer-nonces.php
deleted file mode 100644
index f4202a672f5202..00000000000000
--- a/lib/experimental/class-wp-rest-customizer-nonces.php
+++ /dev/null
@@ -1,74 +0,0 @@
-<?php
-/**
- * WP_Rest_Customizer_Nonces class.
- *
- * @package gutenberg
- */
-
-if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
-
-	/**
-	 * Class that returns the customizer "save" nonce that's required for the
-	 * batch save operation using the customizer API endpoint.
-	 */
-	class WP_Rest_Customizer_Nonces extends WP_REST_Controller {
-
-		/**
-		 * Constructor.
-		 */
-		public function __construct() {
-			$this->namespace = '__experimental';
-			$this->rest_base = 'customizer-nonces';
-		}
-
-		/**
-		 * Registers the necessary REST API routes.
-		 *
-		 * @access public
-		 */
-		public function register_routes() {
-			register_rest_route(
-				$this->namespace,
-				'/' . $this->rest_base . '/get-save-nonce',
-				array(
-					array(
-						'methods'             => WP_REST_Server::READABLE,
-						'callback'            => array( $this, 'get_save_nonce' ),
-						'permission_callback' => array( $this, 'permissions_check' ),
-						'args'                => $this->get_collection_params(),
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-		}
-
-		/**
-		 * Checks if a given request has access to read menu items if they have access to edit them.
-		 *
-		 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-		 */
-		public function permissions_check() {
-			$post_type = get_post_type_object( 'nav_menu_item' );
-			if ( ! current_user_can( $post_type->cap->edit_posts ) ) {
-				return new WP_Error( 'rest_forbidden_context', __( 'Sorry, you are not allowed to edit posts in this post type.', 'gutenberg' ), array( 'status' => rest_authorization_required_code() ) );
-			}
-			return true;
-		}
-
-		/**
-		 * Returns the nonce required to request the customizer API endpoint.
-		 *
-		 * @access public
-		 */
-		public function get_save_nonce() {
-			require_once ABSPATH . 'wp-includes/class-wp-customize-manager.php';
-			$wp_customize = new WP_Customize_Manager();
-			$nonce        = wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() );
-			return array(
-				'success'    => true,
-				'nonce'      => $nonce,
-				'stylesheet' => $wp_customize->get_stylesheet(),
-			);
-		}
-	}
-}
diff --git a/lib/experimental/rest-api.php b/lib/experimental/rest-api.php
index 77f7d091d2655d..6bb2947f889147 100644
--- a/lib/experimental/rest-api.php
+++ b/lib/experimental/rest-api.php
@@ -10,15 +10,6 @@
 	die( 'Silence is golden.' );
 }
 
-/**
- * Registers the customizer nonces REST API routes.
- */
-function gutenberg_register_rest_customizer_nonces() {
-	$customizer_nonces = new WP_Rest_Customizer_Nonces();
-	$customizer_nonces->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_customizer_nonces' );
-
 /**
  * Registers the Block editor settings REST API routes.
  */
diff --git a/lib/load.php b/lib/load.php
index 244b6a2d9e685a..5a299f3b696968 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -45,12 +45,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/class-wp-rest-edit-site-export-controller-gutenberg.php';
 	require_once __DIR__ . '/rest-api.php';
 
-	// Experimental.
-	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
-		require_once __DIR__ . '/experimental/class-wp-rest-customizer-nonces.php';
-	}
 	require_once __DIR__ . '/experimental/rest-api.php';
-
 	require_once __DIR__ . '/experimental/kses-allowed-html.php';
 }
 

From 396e470dd2d1fabb76f769786163c8c446a9f2d0 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 5 Aug 2024 16:19:48 +0400
Subject: [PATCH 08/19] Site Editor: Don't trigger template ID resolution for
 multi-selected posts (#64254)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../sync-state-with-url/use-init-edited-entity-from-url.js   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index 5c8cdfd58f6304..a0707802846fcf 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -90,6 +90,11 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				return undefined;
 			}
 
+			// Don't trigger resolution for multi-selected posts.
+			if ( postId && postId.includes( ',' ) ) {
+				return undefined;
+			}
+
 			const {
 				getEditedEntityRecord,
 				getEntityRecords,

From 7559e74027f3be144509b56ab010a054a1801a58 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 5 Aug 2024 21:55:28 +0900
Subject: [PATCH 09/19] Tweak Create custom template modal (#64255)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../components/post-template/create-new-template-modal.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js
index e6e5ea3f90680d..69d31b7f8f714e 100644
--- a/packages/editor/src/components/post-template/create-new-template-modal.js
+++ b/packages/editor/src/components/post-template/create-new-template-modal.js
@@ -118,6 +118,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			>
 				<VStack spacing="3">
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
@@ -129,11 +130,16 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						) }
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ cancel }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ cancel }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							isBusy={ isBusy }

From ee2fb2925df35fc141e0ecc86b907f0cf6a18cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wojciech=20Zi=C4=99ba?= <wojtek.zieba@automattic.com>
Date: Mon, 5 Aug 2024 18:05:13 +0200
Subject: [PATCH 10/19] Bump AGP to `8.5.1` (#64044)

* Bump AGP to 8.5.1 in `react-native-bridge`

* Bump AGP to 8.5.1 in `react-native-aztec`

* Bump AGP to 8.5.1 in `react-native-editor`

Co-authored-by: wzieba <wzieba@git.wordpress.org>
---
 packages/react-native-aztec/android/settings.gradle  | 2 +-
 packages/react-native-bridge/android/settings.gradle | 2 +-
 packages/react-native-editor/android/build.gradle    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle
index e77808bf87ac80..5c91464a042457 100644
--- a/packages/react-native-aztec/android/settings.gradle
+++ b/packages/react-native-aztec/android/settings.gradle
@@ -1,6 +1,6 @@
 pluginManagement {
     gradle.ext.kotlinVersion = '1.8.0'
-    gradle.ext.agpVersion = '8.1.0'
+    gradle.ext.agpVersion = '8.5.1'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle
index 35c14b4620d8e4..2863d3bb065127 100644
--- a/packages/react-native-bridge/android/settings.gradle
+++ b/packages/react-native-bridge/android/settings.gradle
@@ -1,6 +1,6 @@
 pluginManagement {
     gradle.ext.kotlinVersion = '1.8.0'
-    gradle.ext.agpVersion = '8.1.0'
+    gradle.ext.agpVersion = '8.5.1'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle
index a45374a58c7d3d..cadcfa8704b51a 100644
--- a/packages/react-native-editor/android/build.gradle
+++ b/packages/react-native-editor/android/build.gradle
@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        gradlePluginVersion = '8.1.0'
+        gradlePluginVersion = '8.5.1'
         kotlinVersion = '1.8.0'
         buildToolsVersion = "34.0.0"
         minSdkVersion = 24

From e3c2cd3c33f95119e2ffb0457118b1a7ddbdd62f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:38:18 +0200
Subject: [PATCH 11/19] DataForm: if a field of type `text` declare `elements`,
 render it as a `SelectControl` in `edit` (#64251)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../dataform/stories/index.story.tsx          | 12 ++++++++-
 packages/dataviews/src/field-types/text.tsx   | 26 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index f6f29d0e7f9ebd..6acf0c65d9bd4f 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -34,6 +34,15 @@ const fields = [
 			{ value: 2, label: 'John' },
 		],
 	},
+	{
+		id: 'status',
+		label: 'Status',
+		type: 'text' as const,
+		elements: [
+			{ value: 'draft', label: 'Draft' },
+			{ value: 'published', label: 'Published' },
+		],
+	},
 ];
 
 export const Default = () => {
@@ -41,10 +50,11 @@ export const Default = () => {
 		title: 'Hello, World!',
 		order: 2,
 		author: 1,
+		status: 'draft',
 	} );
 
 	const form = {
-		visibleFields: [ 'title', 'order', 'author' ],
+		visibleFields: [ 'title', 'order', 'author', 'status' ],
 	};
 
 	return (
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 45d1b66bf71d96..721b3fa2b59f63 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
+import { SelectControl, TextControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -47,6 +48,29 @@ function Edit< Item >( {
 		[ 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 }
+			/>
+		);
+	}
+
 	return (
 		<TextControl
 			label={ label }

From f6c809f561b16de496f5971c18b3f2961a8358fd Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 6 Aug 2024 01:59:13 +0900
Subject: [PATCH 12/19] Add margin-bottom lint rules for TextControl (#64212)

* Fix in Form block

* Fix in DataForm

* Fix in Add new post modal

* Fix in Language format popover

* Add lint rule

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .eslintrc.js                                  |  1 +
 packages/block-library/src/form-input/edit.js |  1 +
 .../src/components/dataform/index.tsx         | 25 +++++++++-------
 .../dataviews/src/field-types/integer.tsx     |  2 ++
 packages/dataviews/src/field-types/text.tsx   |  1 +
 .../src/components/add-new-post/index.js      |  3 +-
 .../src/components/post-edit/index.js         | 29 ++++++++++++-------
 packages/format-library/src/language/index.js | 12 ++++++--
 8 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0fc37713dce4d1..97c9f395194f35 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -295,6 +295,7 @@ module.exports = {
 						'FocalPointPicker',
 						'RangeControl',
 						'SearchControl',
+						'TextControl',
 						'TextareaControl',
 						'ToggleGroupControl',
 						'TreeSelect',
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 855fdbf4684626..856d09d3945e64 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -63,6 +63,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
 					value={ name }
diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
index a247601e739b29..02953b2930bd1f 100644
--- a/packages/dataviews/src/components/dataform/index.tsx
+++ b/packages/dataviews/src/components/dataform/index.tsx
@@ -6,6 +6,7 @@ import type { Dispatch, SetStateAction } from 'react';
 /**
  * WordPress dependencies
  */
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -37,14 +38,18 @@ export default function DataForm< Item >( {
 		[ fields, form.visibleFields ]
 	);
 
-	return visibleFields.map( ( field ) => {
-		return (
-			<field.Edit
-				key={ field.id }
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-			/>
-		);
-	} );
+	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/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index 823983bc010bf4..bf757776249b42 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -76,6 +76,8 @@ function Edit< Item >( {
 				value={ value }
 				options={ elements }
 				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 			/>
 		);
 	}
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 721b3fa2b59f63..227c70033cae09 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -78,6 +78,7 @@ function Edit< Item >( {
 			value={ value ?? '' }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/add-new-post/index.js b/packages/edit-site/src/components/add-new-post/index.js
index 7e75a47820fced..044e3c703b9948 100644
--- a/packages/edit-site/src/components/add-new-post/index.js
+++ b/packages/edit-site/src/components/add-new-post/index.js
@@ -95,9 +95,10 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			size="small"
 		>
 			<form onSubmit={ createPost }>
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
index f8519470749a94..6a6efc23861841 100644
--- a/packages/edit-site/src/components/post-edit/index.js
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -10,7 +10,11 @@ import { __ } from '@wordpress/i18n';
 import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	FlexItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 
 /**
@@ -71,22 +75,25 @@ function PostEditForm( { postType, postId } ) {
 
 	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
-		<form onSubmit={ onSubmit }>
+		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
 			<DataForm
 				data={ itemWithEdits }
 				fields={ fields }
 				form={ form }
 				onChange={ setEdits }
 			/>
-			<Button
-				variant="primary"
-				type="submit"
-				accessibleWhenDisabled
-				disabled={ isUpdateDisabled }
-			>
-				{ __( 'Update' ) }
-			</Button>
-		</form>
+			<FlexItem>
+				<Button
+					variant="primary"
+					type="submit"
+					accessibleWhenDisabled
+					disabled={ isUpdateDisabled }
+					__next40pxDefaultSize
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</FlexItem>
+		</VStack>
 	);
 }
 
diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
index d37d8d6dbd0cd8..6cfb8c4ad44927 100644
--- a/packages/format-library/src/language/index.js
+++ b/packages/format-library/src/language/index.js
@@ -13,6 +13,7 @@ import {
 	Button,
 	Popover,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
@@ -78,7 +79,9 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 			anchor={ popoverAnchor }
 			onClose={ onClose }
 		>
-			<form
+			<VStack
+				as="form"
+				spacing={ 4 }
 				className="block-editor-format-toolbar__language-container-content"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -95,6 +98,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				} }
 			>
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ title }
 					value={ lang }
 					onChange={ ( val ) => setLang( val ) }
@@ -103,6 +108,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 					) }
 				/>
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Text direction' ) }
 					value={ dir }
 					options={ [
@@ -119,12 +126,13 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				/>
 				<HStack alignment="right">
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						text={ __( 'Apply' ) }
 					/>
 				</HStack>
-			</form>
+			</VStack>
 		</Popover>
 	);
 }

From 650eb7f21f77dfb884eba606b7a995d5a25c5fff Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 6 Aug 2024 02:14:00 +0900
Subject: [PATCH 13/19] SelectControl: Pass through `options` props (#64211)

* SelectControl: Pass through `options` props

* Clean up types

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/select-control/README.md   |  9 ++++-
 .../components/src/select-control/index.tsx   | 34 ++++++++--------
 .../select-control/test/select-control.tsx    | 27 +++++++++++--
 .../components/src/select-control/types.ts    | 39 ++++++++++---------
 5 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 0c0fab401d02a8..570b7ac308c5fe 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)).
 -   `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)).
 
 ### Internal
 
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index bc37942231091b..464ee180b38639 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -190,7 +190,7 @@ In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl`
 
 #### options
 
-An array of objects containing the following properties:
+An array of objects containing the following properties, as well as any other `option` element attributes:
 
 -   `label`: (string) The label to be shown to the user.
 -   `value`: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
@@ -214,6 +214,13 @@ If multiple is false the value received is a single value with the new selected
 -   Type: `function`
 -   Required: Yes
 
+#### value
+
+The value of the selected option. If `multiple` is true, the `value` should be an array with the values of the selected options.
+
+-   Type: `String|String[]`
+-   Required: No
+
 #### variant
 
 The style variant of the control.
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 5db0316d02b129..874b6ace1ea949 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -26,6 +26,22 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
+function SelectOptions( {
+	options,
+}: {
+	options: NonNullable< SelectControlProps[ 'options' ] >;
+} ) {
+	return options.map( ( { id, label, value, ...optionProps }, index ) => {
+		const key = id || `${ label }-${ value }-${ index }`;
+
+		return (
+			<option key={ key } value={ value } { ...optionProps }>
+				{ label }
+			</option>
+		);
+	} );
+}
+
 function UnforwardedSelectControl(
 	props: WordPressComponentProps< SelectControlProps, 'select', false >,
 	ref: React.ForwardedRef< HTMLSelectElement >
@@ -115,23 +131,7 @@ function UnforwardedSelectControl(
 					value={ valueProp }
 					variant={ variant }
 				>
-					{ children ||
-						options.map( ( option, index ) => {
-							const key =
-								option.id ||
-								`${ option.label }-${ option.value }-${ index }`;
-
-							return (
-								<option
-									key={ key }
-									value={ option.value }
-									disabled={ option.disabled }
-									hidden={ option.hidden }
-								>
-									{ option.label }
-								</option>
-							);
-						} ) }
+					{ children || <SelectOptions options={ options } /> }
 				</Select>
 			</StyledInputBase>
 		</BaseControl>
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 03e3acbf1f7325..f2da74d9a6e911 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -17,8 +17,8 @@ describe( 'SelectControl', () => {
 		expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should not render its children', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its children', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -46,8 +46,8 @@ describe( 'SelectControl', () => {
 		);
 	} );
 
-	it( 'should not render its options', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its options', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -81,4 +81,23 @@ describe( 'SelectControl', () => {
 			expect.anything()
 		);
 	} );
+
+	it( 'should pass through options props', () => {
+		render(
+			<SelectControl
+				label="Select"
+				options={ [
+					{
+						value: 'value',
+						label: 'label',
+						'aria-label': 'Aria label',
+					},
+				] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'option', { name: 'Aria label' } )
+		).toBeInTheDocument();
+	} );
 } );
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index a1d02d444c1474..a5d0d740c593cc 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -22,9 +22,12 @@ type SelectControlBaseProps = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		options?: {
+		/**
+		 * An array of option property objects to be rendered,
+		 * each with a `label` and `value` property, as well as any other
+		 * `<option>` attributes.
+		 */
+		options?: ( {
 			/**
 			 * The label to be shown to the user.
 			 */
@@ -34,20 +37,10 @@ type SelectControlBaseProps = Pick<
 			 * This is also the value passed to `onChange` when the option is selected.
 			 */
 			value: string;
-			id?: string;
-			/**
-			 * Whether or not the option should have the disabled attribute.
-			 *
-			 * @default false
-			 */
-			disabled?: boolean;
-			/**
-			 * Whether or not the option should be hidden.
-			 *
-			 * @default false
-			 */
-			hidden?: boolean;
-		}[];
+		} & Omit<
+			React.OptionHTMLAttributes< HTMLOptionElement >,
+			'label' | 'value'
+		> )[];
 		/**
 		 * As an alternative to the `options` prop, `optgroup`s and `options` can be
 		 * passed in as `children` for more customizability.
@@ -70,6 +63,11 @@ export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
 	 * @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.
@@ -92,6 +90,11 @@ export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
 	 * @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.

From 6078a01f5778833d68a83959dd33b53fd9f9e469 Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Mon, 5 Aug 2024 15:08:32 -0400
Subject: [PATCH 14/19] Add docs for some dynamically generated selectors in
 the core-data store (#64269)

* Add post type and taxonomy selectors.

* Run docs build

* Change order to fix heading issue.

Co-authored-by: ryanwelcher <welcher@git.wordpress.org>
Co-authored-by: justintadlock <greenshady@git.wordpress.org>
---
 docs/reference-guides/data/data-core.md | 101 +++++++++++++++++++++++-
 1 file changed, 100 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index a2bcf31b4d2e28..f4138c49dc8d6b 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -2,7 +2,106 @@
 
 Namespace: `core`.
 
-## 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.
+
+### getPostType
+
+Returns the information for a given post type.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postType = useSelect(
+    	( select ) => select( coreDataStore ).getPostType( 'post' )
+
+    	// Equivalent to: select( coreDataStore ).getEntityRecord( 'root', 'postType', 'post' )
+    );
+
+_Parameters_
+
+-   postType `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getPostTypes
+
+Returns the information for post types.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postTypes = useSelect( ( select ) => {
+    	return select( coreDataStore ).getPostTypes( { per_page: 4 } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'postType', { per_page: 4 } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+### getTaxonomy
+
+Returns information for a given taxonomy.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomy = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomy( 'category' );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecord( 'root', 'taxonomy', 'category' );
+    } );
+
+_Parameters_
+
+-   taxonomy `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getTaxonomies
+
+Returns information for taxonomies.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomies = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomies( { type: 'post' } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'taxonomy', { type: 'post' } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+## Other Selectors
 
 <!-- START TOKEN(Autogenerated selectors|../../../packages/core-data/src/selectors.ts) -->
 

From 96cca231cd6b9ce56c94a3dc098016ba6eddefce Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 5 Aug 2024 21:45:29 +0200
Subject: [PATCH 15/19] Site Icon: Fix position in distraction free mode
 (#64261)

---
 packages/edit-site/src/components/editor/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 1e931e296d2f42..fbc231eb757c57 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -22,7 +22,6 @@
 	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 	view-transition-name: toggle;
 	/* stylelint-enable */
-	position: fixed;
 	top: 0;
 	left: 0;
 	height: $header-height;

From cf964194f6d6b620dc7ae6be8a23415242dd3a25 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 6 Aug 2024 02:13:06 +0200
Subject: [PATCH 16/19] Button: Improve the aria-disabled focus style (#62480)

* Improve Button aria-disabled focus style.

* Add changelog entry.

* Adjust changelog entry after rebase.

* Adjust changelog entry after rebase.

* Introduce new gray-500 for disabled controls.

* Use gray-500 for all disabled button variants.

* Fix is-pressed disabled styles regression

* Revert the introduction of the gray-500 variable

---------

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/components/CHANGELOG.md          |  1 +
 packages/components/src/button/style.scss | 53 ++++++++++++++---------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 570b7ac308c5fe..a71b5a0ddef35f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `ColorPalette`: Remove extra bottom margin when `CircularOptionPicker` is unneeded ([#63961](https://github.com/WordPress/gutenberg/pull/63961)).
 -   `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)).
 
 ### Enhancements
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3541699a08eefd..fcbd363e17c7dd 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -30,16 +30,10 @@
 	}
 
 	&[aria-expanded="true"],
-	&:hover {
+	&:hover:not(:disabled, [aria-disabled="true"]) {
 		color: $components-color-accent;
 	}
 
-	// Unset some hovers, instead of adding :not specificity.
-	&:disabled:hover,
-	&[aria-disabled="true"]:hover {
-		color: initial;
-	}
-
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
@@ -87,7 +81,6 @@
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
 			border-color: $components-color-accent;
-			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
@@ -132,7 +125,6 @@
 			color: $gray-600;
 			background: transparent;
 			transform: none;
-			opacity: 1;
 		}
 	}
 
@@ -206,17 +198,22 @@
 		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 			color: $alert-red;
 
-			&:hover:not(:disabled) {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
 				color: darken($alert-red, 20%);
 			}
 
-			&:focus:not(:disabled) {
+			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
 			}
 
-			&:active:not(:disabled) {
+			&:active:not(:disabled, [aria-disabled="true"]) {
 				background: $gray-400;
 			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-600;
+			}
 		}
 	}
 
@@ -244,6 +241,11 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+		}
 	}
 
 	&:not(:disabled, [aria-disabled="true"]):active {
@@ -253,7 +255,7 @@
 	&:disabled,
 	&[aria-disabled="true"] {
 		cursor: default;
-		opacity: 0.3;
+		color: $gray-600;
 	}
 
 	&.is-busy,
@@ -266,7 +268,6 @@
 		@media (prefers-reduced-motion: reduce) {
 			animation-duration: 0s;
 		}
-		opacity: 1;
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
@@ -332,8 +333,23 @@
 
 	// Toggled style.
 	&.is-pressed {
-		color: $components-color-foreground-inverted;
-		background: $components-color-foreground;
+		&,
+		&:hover {
+			color: $components-color-foreground-inverted;
+			&:not(:disabled, [aria-disabled="true"]) {
+				background: $components-color-foreground;
+			}
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+
+			&:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
+				color: $components-color-foreground-inverted;
+				background: $gray-600;
+			}
+		}
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
@@ -341,11 +357,6 @@
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
-
-		&:hover:not(:disabled) {
-			color: $components-color-foreground-inverted;
-			background: $components-color-foreground;
-		}
 	}
 
 	svg {

From 8b69df518b1b09d722ce0df89e3bcf2389629274 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:48:10 +1000
Subject: [PATCH 17/19] Spacing controls: using CustomSelectControlV2 for >= 8
 spacing sizes (#64284)

* Exports CustomSelectControlV2 from components private APIs for use in spacing-input-control.js
CustomSelectControlV2Legacy was removed in favour of V2 but the spacing input control was not updated.

* Log the change

* This commit is a version that uses the v1 component to save time later.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: ryelle <ryelle@git.wordpress.org>
---
 .../input-controls/spacing-input-control.js                | 7 +------
 1 file changed, 1 insertion(+), 6 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 6605d2de502fe8..4faf05ba254089 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
@@ -9,7 +9,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -31,11 +31,6 @@ import {
 	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
 } from '../utils';
-import { unlock } from '../../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },

From 8a9ce7f2c25f64ddfe4fedf93dd2fb82022224ba Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 6 Aug 2024 11:20:41 +0800
Subject: [PATCH 18/19] Grid: Unset the rowStart and columnStart attributes
 when a block is removed from a manual layout (#64186)

* Unset the rowStart and columnStart attributes when a block is removed from the grid

* Follow the same logic as existing code for unsetting attributes when switching to auto

* Add doc block

* Unset the `style.layout` attribute when its empty

* Also unset columnSpan and rowSpan

* Keep span when switching grid types

* Remove helper function in favour of `setImmutably`

* Try supporting drag and drop from one grid to another

* Do nothing when the new parent is a grid, it seems to work better by leaving all attributes in place

* Use a mixture of destructuring and setImmutably

* Only push attribute update when needed

* Fix potentially destructuring non-object

* Switch to for of loop

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
---
 .../components/grid/use-grid-layout-sync.js   | 61 ++++++++++++++++---
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/grid/use-grid-layout-sync.js b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
index 2cc17eed6b33bf..3e31530d4e526f 100644
--- a/packages/block-editor/src/components/grid/use-grid-layout-sync.js
+++ b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
@@ -10,6 +10,7 @@ import { usePrevious } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { GridRect } from './utils';
+import { setImmutably } from '../../utils/object';
 
 export function useGridLayoutSync( { clientId: gridClientId } ) {
 	const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
@@ -26,7 +27,8 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		[ gridClientId ]
 	);
 
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -40,6 +42,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	const previousIsManualPlacement = usePrevious(
 		gridLayout.isManualPlacement
 	);
+	const previousBlockOrder = usePrevious( blockOrder );
 
 	useEffect( () => {
 		const updates = {};
@@ -123,6 +126,46 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Unset grid layout attributes for blocks removed from the grid.
+			for ( const clientId of previousBlockOrder ?? [] ) {
+				if ( ! blockOrder.includes( clientId ) ) {
+					const rootClientId = getBlockRootClientId( clientId );
+
+					// Block was removed from the editor, so nothing to do.
+					if ( rootClientId === null ) {
+						continue;
+					}
+
+					// Check if the block is being moved to another grid.
+					// If so, do nothing and let the new grid parent handle
+					// the attributes.
+					const rootAttributes = getBlockAttributes( rootClientId );
+					if ( rootAttributes?.layout?.type === 'grid' ) {
+						continue;
+					}
+
+					const attributes = getBlockAttributes( clientId );
+					const {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+						...layout
+					} = attributes.style?.layout ?? {};
+
+					if ( columnStart || rowStart || columnSpan || rowSpan ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
 		} else {
 			// Remove all of the columnStart and rowStart values
 			// when switching from manual to auto mode,
@@ -133,12 +176,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 						attributes.style?.layout ?? {};
 					// Only update attributes if columnStart or rowStart are set.
 					if ( columnStart || rowStart ) {
-						updates[ clientId ] = {
-							style: {
-								...attributes.style,
-								layout,
-							},
-						};
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
 					}
 				}
 			}
@@ -166,12 +211,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		// Actual deps to sync:
 		gridClientId,
 		gridLayout,
+		previousBlockOrder,
 		blockOrder,
 		previouslySelectedBlockRect,
 		previousIsManualPlacement,
 		// These won't change, but the linter thinks they might:
 		__unstableMarkNextChangeAsNotPersistent,
 		getBlockAttributes,
+		getBlockRootClientId,
 		updateBlockAttributes,
 	] );
 }

From f12b78b7c4e830032d7f9a4641df40236644683b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 6 Aug 2024 17:22:39 +0900
Subject: [PATCH 19/19] Drag & Drop: Fix unexpected row/galley creation logic
 (#64241)

* Drag & Drop: Fix unexpected row/galley creation logic

* Add comment

* Remove function that checks if a row or gallery can be created

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 .../components/use-block-drop-zone/index.js   | 80 +++++++++++++++----
 .../src/components/use-on-block-drop/index.js | 10 +--
 2 files changed, 67 insertions(+), 23 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 857a132f1f9fa4..415ed5070d28da 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
@@ -301,8 +301,10 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockType, getBlockVariations, getGroupingBlockName } =
+		useSelect( blocksStore );
 	const {
+		canInsertBlockType,
 		getBlockListSettings,
 		getBlocks,
 		getBlockIndex,
@@ -310,6 +312,7 @@ export default function useBlockDropZone( {
 		getBlockNamesByClientId,
 		getAllowedBlocks,
 		isDragging,
+		isGroupable,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -385,21 +388,66 @@ export default function useBlockDropZone( {
 					};
 				} );
 
+				const dropTargetPosition = getDropTargetPosition(
+					blocksData,
+					{ x: event.clientX, y: event.clientY },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
+					}
+				);
+
 				const [ targetIndex, operation, nearestSide ] =
-					getDropTargetPosition(
-						blocksData,
-						{ x: event.clientX, y: event.clientY },
-						getBlockListSettings( targetRootClientId )?.orientation,
-						{
-							dropZoneElement,
-							parentBlockClientId,
-							parentBlockOrientation: parentBlockClientId
-								? getBlockListSettings( parentBlockClientId )
-										?.orientation
-								: undefined,
-							rootBlockIndex: getBlockIndex( targetRootClientId ),
-						}
+					dropTargetPosition;
+
+				if ( operation === 'group' ) {
+					const targetBlock = blocks[ targetIndex ];
+					const areAllImages = [
+						targetBlock.name,
+						...draggedBlockNames,
+					].every( ( name ) => name === 'core/image' );
+					const canInsertGalleryBlock = canInsertBlockType(
+						'core/gallery',
+						targetRootClientId
 					);
+					const areGroupableBlocks = isGroupable( [
+						targetBlock.clientId,
+						getDraggedBlockClientIds(),
+					] );
+					const groupBlockVariations = getBlockVariations(
+						getGroupingBlockName(),
+						'block'
+					);
+					const canInsertRow =
+						groupBlockVariations &&
+						groupBlockVariations.find(
+							( { name } ) => name === 'group-row'
+						);
+
+					// If the dragged blocks and the target block are all images,
+					// check if it is creatable either a Row variation or a Gallery block.
+					if (
+						areAllImages &&
+						! canInsertGalleryBlock &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+					// If the dragged blocks and the target block are not all images,
+					// check if it is creatable a Row variation.
+					if (
+						! areAllImages &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+				}
 
 				registry.batch( () => {
 					setDropTarget( {
@@ -436,6 +484,10 @@ export default function useBlockDropZone( {
 				showInsertionPoint,
 				isDragging,
 				startDragging,
+				canInsertBlockType,
+				getBlockVariations,
+				getGroupingBlockName,
+				isGroupable,
 			]
 		),
 		200
diff --git a/packages/block-editor/src/components/use-on-block-drop/index.js b/packages/block-editor/src/components/use-on-block-drop/index.js
index 420cd398edfa39..75b9a44e166f5c 100644
--- a/packages/block-editor/src/components/use-on-block-drop/index.js
+++ b/packages/block-editor/src/components/use-on-block-drop/index.js
@@ -232,7 +232,6 @@ export default function useOnBlockDrop(
 		getBlocksByClientId,
 		getSettings,
 		getBlock,
-		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
@@ -255,17 +254,11 @@ export default function useOnBlockDrop(
 			if ( ! Array.isArray( blocks ) ) {
 				blocks = [ blocks ];
 			}
-
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];
-			const blocksClientIds = blocks.map( ( block ) => block.clientId );
-			const areGroupableBlocks = isGroupable( [
-				...blocksClientIds,
-				clientId,
-			] );
 			if ( operation === 'replace' ) {
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
-			} else if ( operation === 'group' && areGroupableBlocks ) {
+			} else if ( operation === 'group' ) {
 				const targetBlock = getBlock( clientId );
 				if ( nearestSide === 'left' ) {
 					blocks.push( targetBlock );
@@ -325,7 +318,6 @@ export default function useOnBlockDrop(
 			getBlockOrder,
 			targetRootClientId,
 			targetBlockIndex,
-			isGroupable,
 			operation,
 			replaceBlocks,
 			getBlock,