From 014d1633b6986f54a0dd597d3d751f566a569570 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 22 Nov 2023 09:23:25 +0000
Subject: [PATCH 01/51] Migrating `InserterListbox` to use updated Composite
 implementation (#56246)

 - Removes `__unstableComposite` imports from `@wordpress/components`
 - Adds private `Composite*` exports from `@wordpress/components`
 - Refactors `InserterListbox`, `InserterListboxRow` and `InserterListboxItem` to use updated `Composite` components
 - Additionally updates `BlockTypesList` to ensure listbox items are appropriately grouped
---
 .../src/components/block-types-list/index.js  |  9 ++++----
 .../src/components/inserter-listbox/index.js  | 18 +++++++++------
 .../src/components/inserter-listbox/item.js   | 23 +++++++++----------
 .../src/components/inserter-listbox/row.js    | 18 +++++----------
 4 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 40e04b040d5a8..0be6f82a653d1 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>
diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
index 6345cb38c494a..6af26a1d746bf 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -1,26 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
+
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
+	const store = useCompositeStore( {
+		focusShift: true,
+		focusWrap: 'horizontal',
 	} );
+
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite store={ store } render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index 50adb4a788038..951eb86223ce8 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -3,32 +3,31 @@
  */
 import {
 	Button,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
 		<CompositeItem
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -45,7 +44,7 @@ function InserterListboxItem(
 				}
 				return <Button { ...propsWithTabIndex }>{ children }</Button>;
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
index 710267660199d..f9827f08b3fa3 100644
--- a/packages/block-editor/src/components/inserter-listbox/row.js
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -1,24 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );

From 9c6f6b1738a45f2891b5c7d4fde5c9a5ff80dc7e Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 22 Nov 2023 09:35:13 +0000
Subject: [PATCH 02/51] Update Changelog for 17.1.0

---
 changelog.txt | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index 2435ab1eceb4a..0f86c2d8f593b 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,7 +1,6 @@
 == Changelog ==
 
-= 17.1.0-rc.1 =
-
+= 17.1.0 =
 
 
 ## Changelog
@@ -27,7 +26,7 @@
 #### Global Styles
 - Global Style Revisions: Ensure consistent back button behaviour. ([55881](https://github.com/WordPress/gutenberg/pull/55881))
 - Global Styles Revisions: More descriptive text timeline. ([55868](https://github.com/WordPress/gutenberg/pull/55868))
-- Global styles revisions: Add route for single styles revisions. ([55827](https://github.com/WordPress/gutenberg/pull/55827))
+- Global Styles Revisions: Add route for single styles revisions. ([55827](https://github.com/WordPress/gutenberg/pull/55827))
 
 #### Block Locking
 - Block Quick Navigation: Truncate text. ([56142](https://github.com/WordPress/gutenberg/pull/56142))
@@ -89,7 +88,7 @@
 - DataViews: Make items per page an even number. ([55906](https://github.com/WordPress/gutenberg/pull/55906))
 - DataViews: Make used taxonomy private. ([55918](https://github.com/WordPress/gutenberg/pull/55918))
 - DataViews: Reset pagination upon filter change. ([55797](https://github.com/WordPress/gutenberg/pull/55797))
-- Dataviews: Add a missing icon for the side by side view. ([55925](https://github.com/WordPress/gutenberg/pull/55925))
+- DataViews: Add a missing icon for the side by side view. ([55925](https://github.com/WordPress/gutenberg/pull/55925))
 
 #### Components
 - DropdownMenu: Remove extra vertical space around the toggle button. ([56136](https://github.com/WordPress/gutenberg/pull/56136))
@@ -328,6 +327,8 @@ The following contributors merged PRs in this release:
 @afercia @andrewhayward @andrewserong @anomiex @anton-vlasenko @aristath @artemiomorales @bph @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @DAreRodz @dcalhoun @dsas @ellatrix @flootr @fluiddot @gaambo @glendaviesnz @gziolo @jameskoster @jeryj @jhnstn @joanrodas @jorgefilipecosta @JorgeVilchez95 @jsnajdr @juanmaguitar @kevin940726 @Mamaduka @masteradhoc @matiasbenedetto @ndiego @ntsekouras @oandregal @peterwilsoncc @pooja-muchandikar @priethor @ramonjd @renatho @richtabor @sacerro @scruffian @shimotmk @SiobhyB @Soean @swissspidy @t-hamano @talldan @tellthemachines @torounit @tyxla @WunderBart @youknowriad
 
 
+
+
 = 17.0.2 =
 
 

From a7911582cda6f11d1ebddcd27ccbb82fb86022c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 22 Nov 2023 10:39:45 +0100
Subject: [PATCH 03/51] DataViews: update filter component (#56110)

---
 .../src/components/dataviews/add-filter.js    |   2 +-
 .../src/components/dataviews/filters.js       |  13 +--
 .../src/components/dataviews/in-filter.js     | 105 ++++++++++--------
 .../src/components/dataviews/view-list.js     |  35 ++----
 4 files changed, 71 insertions(+), 84 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js
index 147b5a09ca59a..7192a507b2afe 100644
--- a/packages/edit-site/src/components/dataviews/add-filter.js
+++ b/packages/edit-site/src/components/dataviews/add-filter.js
@@ -54,10 +54,10 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 				<Button
 					disabled={ filters.length === view.filters?.length }
 					__experimentalIsFocusable
-					icon={ plus }
 					variant="tertiary"
 					size="compact"
 				>
+					<Icon icon={ plus } style={ { flexShrink: 0 } } />
 					{ __( 'Add filter' ) }
 				</Button>
 			}
diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
index 72ca0eb35bd87..c7681f53fe0ae 100644
--- a/packages/edit-site/src/components/dataviews/filters.js
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
@@ -23,13 +18,7 @@ export default function Filters( { fields, view, onChangeView } ) {
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					elements: [
-						{
-							value: '',
-							label: __( 'All' ),
-						},
-						...( field.elements || [] ),
-					],
+					elements: field.elements || [],
 					isVisible: view.filters.some(
 						( f ) =>
 							f.field === field.id && f.operator === OPERATOR_IN
diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
index 4f4170fdcbb0b..9dd85eb1eedb2 100644
--- a/packages/edit-site/src/components/dataviews/in-filter.js
+++ b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -2,65 +2,78 @@
  * WordPress dependencies
  */
 import {
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	SelectControl,
+	Button,
+	privateApis as componentsPrivateApis,
+	Icon,
 } from '@wordpress/components';
+import { chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { OPERATOR_IN } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
+} = unlock( componentsPrivateApis );
 
 export default ( { filter, view, onChangeView } ) => {
-	const valueFound = view.filters.find(
-		( f ) => f.field === filter.field && f.operator === OPERATOR_IN
+	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const activeElement = filter.elements.find(
+		( element ) => element.value === filterInView?.value
 	);
 
-	const activeValue =
-		! valueFound || ! valueFound.hasOwnProperty( 'value' )
-			? ''
-			: valueFound.value;
-
-	const id = `dataviews__filters-in-${ filter.field }`;
-
 	return (
-		<SelectControl
-			id={ id }
-			__nextHasNoMarginBottom
-			value={ activeValue }
-			prefix={
-				<InputControlPrefixWrapper
-					as="label"
-					htmlFor={ id }
-					className="dataviews__select-control-prefix"
-				>
-					{ sprintf(
-						/* translators: filter name. */
-						__( '%s:' ),
-						filter.name
-					) }
-				</InputControlPrefixWrapper>
+		<DropdownMenu
+			key={ filter.field }
+			trigger={
+				<Button variant="tertiary" size="compact" label={ filter.name }>
+					{ activeElement !== undefined
+						? sprintf(
+								/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
+								__( '%1$s is %2$s' ),
+								filter.name,
+								activeElement.label
+						  )
+						: filter.name }
+					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
+				</Button>
 			}
-			options={ filter.elements }
-			onChange={ ( value ) => {
-				const filters = view.filters.filter(
-					( f ) =>
-						f.field !== filter.field || f.operator !== OPERATOR_IN
+		>
+			{ filter.elements.map( ( element ) => {
+				return (
+					<DropdownMenuCheckboxItem
+						key={ element.value }
+						value={ element.value }
+						checked={ activeElement?.value === element.value }
+						onSelect={ () =>
+							onChangeView( ( currentView ) => ( {
+								...currentView,
+								page: 1,
+								filters: [
+									...view.filters.filter(
+										( f ) => f.field !== filter.field
+									),
+									{
+										field: filter.field,
+										operator: OPERATOR_IN,
+										value:
+											activeElement?.value ===
+											element.value
+												? undefined
+												: element.value,
+									},
+								],
+							} ) )
+						}
+					>
+						{ element.label }
+					</DropdownMenuCheckboxItem>
 				);
-
-				filters.push( {
-					field: filter.field,
-					operator: OPERATOR_IN,
-					value,
-				} );
-
-				onChangeView( ( currentView ) => ( {
-					...currentView,
-					page: 1,
-					filters,
-				} ) );
-			} }
-		/>
+			} ) }
+		</DropdownMenu>
 	);
 };
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 0939297e374df..8e131a350ac7d 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -73,13 +73,7 @@ function HeaderMenu( { dataView, header } ) {
 	if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
 		filter = {
 			field: header.column.columnDef.id,
-			elements: [
-				{
-					value: '',
-					label: __( 'All' ),
-				},
-				...( header.column.columnDef.elements || [] ),
-			],
+			elements: header.column.columnDef.elements || [],
 		};
 	}
 	const isFilterable = !! filter;
@@ -166,11 +160,6 @@ function HeaderMenu( { dataView, header } ) {
 										)[ 0 ] === filter.field
 								);
 
-								// Set the empty item as active if the filter is not set.
-								if ( ! columnFilter && element.value === '' ) {
-									isActive = true;
-								}
-
 								if ( columnFilter ) {
 									const value =
 										Object.values( columnFilter )[ 0 ];
@@ -205,19 +194,15 @@ function HeaderMenu( { dataView, header } ) {
 													}
 												);
 
-											if ( element.value === '' ) {
-												dataView.setColumnFilters(
-													otherFilters
-												);
-											} else {
-												dataView.setColumnFilters( [
-													...otherFilters,
-													{
-														[ filter.field +
-														':in' ]: element.value,
-													},
-												] );
-											}
+											dataView.setColumnFilters( [
+												...otherFilters,
+												{
+													[ filter.field + ':in' ]:
+														isActive
+															? undefined
+															: element.value,
+												},
+											] );
 										} }
 									>
 										{ element.label }

From 3b380b0917e2b39a1bd30e9228f37669e7c0c7f6 Mon Sep 17 00:00:00 2001
From: Birgit Pauli-Haack <birgit.pauli@gmail.com>
Date: Wed, 22 Nov 2023 12:20:06 +0100
Subject: [PATCH 04/51] Update Readme.txt tested up to 6.4 (#56427)

* fixes wrong link in #56084

* update 'tested up to' in readme.txt of GB plugin
---
 readme.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.txt b/readme.txt
index 668ccca48a5dc..8ebcfd1406b0d 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,6 +1,6 @@
 === Gutenberg ===
 Contributors: matveb, joen, karmatosed
-Tested up to: 6.3
+Tested up to: 6.4
 Stable tag: V.V.V
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

From 6e532f444a72d997b09441197caade90c49f19f3 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <me@andreidraganescu.info>
Date: Wed, 22 Nov 2023 13:31:02 +0200
Subject: [PATCH 05/51]  Add align support to the image block - alternative
 (#55954)

* only remove the alignment control

* use an effect to reset width, height, aspect ratio and cover when align is wide or full

* try a filter on block attributes when align control updates attributes

* new fixtures for the default align attribute of core/image

* updated snapshots

* modify the filter to always return the same shape of object, update naming

* remove filter, add undo skip

* update the react native component

* Remove align from custom image attributes

This allows the block supports to add the attribute instead keeping things cleaner.

* Fix tests

* Fix another fixture

---------

Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
---
 docs/reference-guides/core-blocks.md          |  4 +-
 .../test/__snapshots__/align.native.js.snap   | 10 ++---
 packages/block-library/src/image/block.json   |  4 +-
 packages/block-library/src/image/edit.js      | 37 ++++++++-----------
 .../block-library/src/image/edit.native.js    | 35 +++++++++---------
 packages/block-library/src/image/image.js     | 22 -----------
 .../src/mobile/utils/alignments.native.js     |  1 +
 .../blocks-raw-handling.test.js.snap          |  6 +--
 .../blocks/core__image__center-caption.json   |  4 +-
 ...ed-v2-add-is-resized-class.serialized.html |  2 +-
 ...cated-v3-add-align-wrapper.serialized.html |  2 +-
 ...ed-v4-remove-align-wrapper.serialized.html |  2 +-
 ...-v6-add-style-width-height.serialized.html |  2 +-
 .../fixtures/documents/wordpress-out.html     |  2 +-
 14 files changed, 52 insertions(+), 81 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0ae5979b79704..10f0f76d9eb0d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -378,8 +378,8 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone)
--	**Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
 
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
index 2782d6ae0b984..045fb0e3bd944 100644
--- a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
+++ b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
@@ -19,25 +19,25 @@ exports[`Align options for group block sets Wide width option 1`] = `
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
 <figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
 <figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
 <figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
@@ -49,7 +49,7 @@ exports[`Align options for media block sets None option 1`] = `
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
 <figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index d665a8a8f7708..b46829e5059a2 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -9,9 +9,6 @@
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
@@ -95,6 +92,7 @@
 		}
 	},
 	"supports": {
+		"align": [ "left", "center", "right", "wide", "full" ],
 		"anchor": true,
 		"color": {
 			"text": false,
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index c58a96e594911..d189af32efcbe 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -10,8 +10,6 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentControl,
-	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
 	useBlockProps,
@@ -106,13 +104,13 @@ export function ImageEdit( {
 		url = '',
 		alt,
 		caption,
-		align,
 		id,
 		width,
 		height,
 		sizeSlug,
 		aspectRatio,
 		scale,
+		align,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -126,6 +124,21 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
+	}, [ align ] );
+
 	const ref = useRef();
 	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -255,16 +268,6 @@ export function ImageEdit( {
 		}
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	let isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
@@ -375,14 +378,6 @@ export function ImageEdit( {
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
 			/>
-			{ ! url && blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				</BlockControls>
-			) }
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 804ae9e1671f6..44ebfda67d875 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -44,7 +44,6 @@ import {
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
 	blockSettingsScreens,
@@ -212,7 +211,6 @@ export class ImageEdit extends Component {
 		this.onSetFeatured = this.onSetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
-		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator =
 			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
@@ -305,6 +303,20 @@ export class ImageEdit extends Component {
 			this.replacedFeaturedImage = false;
 			setFeaturedImage( id );
 		}
+
+		const { align } = attributes;
+		const { __unstableMarkNextChangeAsNotPersistent } = this.props;
+
+		// Update the attributes if the align is wide or full
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -391,18 +403,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = Object.values(
-			WIDE_ALIGNMENTS.alignments
-		).includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		this.props.setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -711,10 +711,6 @@ export class ImageEdit extends Component {
 						onClick={ open }
 					/>
 				</ToolbarGroup>
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ this.updateAlignment }
-				/>
 			</BlockControls>
 		);
 
@@ -941,8 +937,11 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { createErrorNotice } = dispatch( noticesStore );
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 
 		return {
+			__unstableMarkNextChangeAsNotPersistent,
 			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 64eb03adedb32..11d460efd472c 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -25,7 +25,6 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSettings,
-	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
@@ -353,21 +352,6 @@ export default function Image( {
 		} );
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? {
-					width: undefined,
-					height: undefined,
-					aspectRatio: undefined,
-					scale: undefined,
-			  }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -455,12 +439,6 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ hasNonContentControls && (
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				) }
 				{ hasNonContentControls && (
 					<ToolbarButton
 						onClick={ () => {
diff --git a/packages/components/src/mobile/utils/alignments.native.js b/packages/components/src/mobile/utils/alignments.native.js
index 98635ea4681ad..bc42385988a5d 100644
--- a/packages/components/src/mobile/utils/alignments.native.js
+++ b/packages/components/src/mobile/utils/alignments.native.js
@@ -10,6 +10,7 @@ export const WIDE_ALIGNMENTS = {
 	},
 	excludeBlocks: [ 'core/heading' ],
 	notInnerContainers: [
+		'core/image',
 		'core/separator',
 		'core/media-text',
 		'core/pullquote',
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index 32f2dab713766..071870a420817 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -158,19 +158,19 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 `;
 
 exports[`rawHandler should convert a caption shortcode 1`] = `
-"<!-- wp:image {"align":"none","id":122,"className":"size-medium wp-image-122"} -->
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
 <figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption">test</figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with caption 1`] = `
-"<!-- wp:image {"align":"none","id":122,"className":"size-medium wp-image-122"} -->
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
 <figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption"><a href="https://w.org">test</a></figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with link 1`] = `
-"<!-- wp:image {"align":"none","id":754} -->
+"<!-- wp:image {"id":754,"align":"none"} -->
 <figure class="wp-block-image alignnone"><a href="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg"><img src="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604" alt="Bell on Wharf" class="wp-image-754"/></a><figcaption class="wp-element-caption">Bell on wharf in San Francisco</figcaption></figure>
 <!-- /wp:image -->"
 `;
diff --git a/test/integration/fixtures/blocks/core__image__center-caption.json b/test/integration/fixtures/blocks/core__image__center-caption.json
index a369e433b4028..034047c07089b 100644
--- a/test/integration/fixtures/blocks/core__image__center-caption.json
+++ b/test/integration/fixtures/blocks/core__image__center-caption.json
@@ -3,10 +3,10 @@
 		"name": "core/image",
 		"isValid": true,
 		"attributes": {
-			"align": "center",
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"alt": "",
-			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar."
+			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar.",
+			"align": "center"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
index 9a66da6c01898..c03189e9b456c 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
+<!-- wp:image {"width":100,"height":100,"align":"left"} -->
 <figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
index 9a66da6c01898..c03189e9b456c 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
+<!-- wp:image {"width":100,"height":100,"align":"left"} -->
 <figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
index 99da2155bce88..b9e58cc24fddb 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none"} -->
+<!-- wp:image {"id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-13" style="width:358px;height:164px"/></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
index 807ba3abc9f9c..57545968847e1 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
+<!-- wp:image {"width":164,"height":164,"sizeSlug":"large","align":"left","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
 <figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%;width:164px;height:164px"/></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/documents/wordpress-out.html b/test/integration/fixtures/documents/wordpress-out.html
index c394fa232081d..a0ac4b89ec552 100644
--- a/test/integration/fixtures/documents/wordpress-out.html
+++ b/test/integration/fixtures/documents/wordpress-out.html
@@ -28,7 +28,7 @@ <h3 class="wp-block-heading">Shortcode</h3>
 <figure class="wp-block-image"><img src="block.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {"align":"right","id":5114} -->
+<!-- wp:image {"id":5114,"align":"right"} -->
 <figure class="wp-block-image alignright"><img src="aligned.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->
 

From 77d0226badb0769b12e28b19fb439cf6777b672a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Wed, 22 Nov 2023 12:53:32 +0100
Subject: [PATCH 06/51] fix remove removal version from deprecated prop
 (#56336)

---
 packages/components/src/angle-picker-control/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
index f90394b12078f..06178e0b40101 100644
--- a/packages/components/src/angle-picker-control/index.tsx
+++ b/packages/components/src/angle-picker-control/index.tsx
@@ -41,7 +41,6 @@ function UnforwardedAnglePickerControl(
 			'Bottom margin styles for wp.components.AnglePickerControl',
 			{
 				since: '6.1',
-				version: '6.4',
 				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
 			}
 		);

From c3f00773cf989153c7b5f42e0cd3fab0399ca6fd Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 22 Nov 2023 21:37:36 +0900
Subject: [PATCH 07/51] NavigableContainers: Fix doc typo in onKeyDown prop
 (#56352)

* NavigableContainers: Fix doc typo in onKeyDown prop

* Update changelog

* Remove changelog
---
 packages/components/src/navigable-container/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/navigable-container/README.md b/packages/components/src/navigable-container/README.md
index a982219248f50..bbc1f16dcb8f6 100644
--- a/packages/components/src/navigable-container/README.md
+++ b/packages/components/src/navigable-container/README.md
@@ -24,7 +24,7 @@ Gets an offset, given an event.
 
 -   Required: No
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 

From 3539a97717b684bb93907f0e8f915842610098d3 Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Wed, 22 Nov 2023 13:38:19 +0100
Subject: [PATCH 08/51] Improve tooltip for parent blocks on the block toolbar
 (#56146)

* improve tolltip for parent blocks on the block toolbar

* fixed tests

* missing test

* another missing test

* fixed another test
---
 .../src/components/block-parent-selector/index.js    |  2 +-
 packages/block-library/src/cover/test/edit.js        |  2 +-
 .../specs/editor/various/pattern-blocks.test.js      |  2 +-
 test/e2e/specs/editor/blocks/list.spec.js            | 12 ++++++------
 .../plugins/inner-blocks-allowed-blocks.spec.js      | 12 +++++++++---
 .../editor/various/toolbar-roving-tabindex.spec.js   |  6 +++---
 6 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 31e0b1b8fd8cf..80b314eeb42e5 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -74,7 +74,7 @@ export default function BlockParentSelector() {
 				onClick={ () => selectBlock( firstParentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
-					__( 'Select %s' ),
+					__( 'Select parent block: %s' ),
 					blockInformation?.title
 				) }
 				showTooltip
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
index d1febe3c6fa11..879b77636255a 100644
--- a/packages/block-library/src/cover/test/edit.js
+++ b/packages/block-library/src/cover/test/edit.js
@@ -53,7 +53,7 @@ async function createAndSelectBlock() {
 	);
 	await userEvent.click(
 		screen.getByRole( 'button', {
-			name: 'Select Cover',
+			name: 'Select parent block: Cover',
 		} )
 	);
 }
diff --git a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
index cb5187a390e8b..0d00e3d9a545b 100644
--- a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
@@ -350,7 +350,7 @@ describe( 'Pattern blocks', () => {
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 
 		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Edited block' );
+		await clickBlockToolbarButton( 'Select parent block: Edited block' );
 		await clickBlockToolbarButton( 'Options' );
 		await clickMenuItem( 'Detach' );
 		await page.waitForXPath( selector, {
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index f10a266a41e65..48d50a862a50b 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -354,7 +354,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.transformBlockTo( 'core/paragraph' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -397,7 +397,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.transformBlockTo( 'core/quote' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -674,7 +674,7 @@ test.describe( 'List (@firefox)', () => {
 
 	test( 'should change the base list type', async ( { editor } ) => {
 		await editor.insertBlock( { name: 'core/list' } );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
@@ -694,7 +694,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.press( 'Enter' );
 		await editor.clickBlockToolbarButton( 'Indent' );
 		await page.keyboard.type( '1' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -1232,7 +1232,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '3' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -1264,7 +1264,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( 'b' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'c' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Unordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
index c0627121f1649..eaf171adf9313 100644
--- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -130,13 +130,17 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		await blockListBox.getByRole( 'option', { name: 'List' } ).click();
 		// Select the list wrapper and then parent block.
 		await page.keyboard.press( 'ArrowUp' );
-		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
 
 		// Insert the image.
 		await blockAppender.click();
 		await blockListBox.getByRole( 'option', { name: 'Image' } ).click();
 
-		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
 		await blockAppender.click();
 
 		// It should display a different allowed block list.
@@ -147,7 +151,9 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 
 		await blockListBox.getByRole( 'option', { name: 'Gallery' } ).click();
 
-		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
 		await blockAppender.click();
 
 		// It should display a different allowed block list.
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
index e706dfc3607dc..70509348983e6 100644
--- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -59,9 +59,9 @@ test.describe( 'Toolbar roving tabindex', () => {
 		await page.keyboard.type( 'List' );
 		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
 			'List text',
-			'Select List'
+			'Select parent block: List'
 		);
-		await page.click( `role=button[name="Select List"i]` );
+		await page.click( `role=button[name="Select parent block: List"i]` );
 		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' );
 		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
 			'Block: List',
@@ -201,7 +201,7 @@ class ToolbarRovingTabindexUtils {
 		await this.page.keyboard.press( 'ArrowRight' );
 		await this.expectLabelToHaveFocus( currentBlockLabel );
 		await this.pageUtils.pressKeys( 'shift+Tab' );
-		await this.expectLabelToHaveFocus( 'Select Group' );
+		await this.expectLabelToHaveFocus( 'Select parent block: Group' );
 		await this.page.keyboard.press( 'ArrowRight' );
 		await this.expectLabelToHaveFocus( currentBlockTitle );
 	}

From c5ac49093e11ee641f8599fe47d2276820d429ef Mon Sep 17 00:00:00 2001
From: Luis Felipe Zaguini <26530524+zaguiini@users.noreply.github.com>
Date: Wed, 22 Nov 2023 10:08:09 -0300
Subject: [PATCH 09/51] PostCSS style transformation: fail gracefully instead
 of throwing an error (#56093)

* PostCSS style transformation: fail gracefully instead of throwing error

* Display better warning messages
---
 .../src/utils/test/transform-styles.js        | 49 +++++++++++++++++++
 .../src/utils/transform-styles/index.js       | 44 ++++++++++++-----
 2 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index f162a0b2f6048..38eaa1947d2a8 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -4,6 +4,55 @@
 import transformStyles from '../transform-styles';
 
 describe( 'transformStyles', () => {
+	describe( 'error handling', () => {
+		beforeEach( () => {
+			// Intentionally suppress the expected console errors and warnings to reduce
+			// noise in the test output.
+			jest.spyOn( console, 'warn' ).mockImplementation( jest.fn() );
+		} );
+
+		it( 'should not throw error in case of invalid css', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			expect( run ).not.toThrow();
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'should warn invalid css in the console', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red; }', // valid CSS
+						},
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			const [ validCSS, invalidCSS ] = run();
+
+			expect( validCSS ).toBe( '.my-namespace h1 { color: red; }' );
+			expect( invalidCSS ).toBe( null );
+
+			expect( console ).toHaveWarnedWith(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				'<css input>:1:1: Unclosed block\n> 1 | h1 { color: red;\n    | ^'
+				//                                                        ^^^^ In PostCSS, a tab is equal four spaces
+			);
+		} );
+	} );
+
 	describe( 'selector wrap', () => {
 		it( 'should wrap regular selectors', () => {
 			const input = `h1 { color: red; }`;
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 8f5e1702307a4..4da6f6ce23795 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import postcss from 'postcss';
+import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
 
@@ -19,18 +19,36 @@ import rebaseUrl from 'postcss-urlrebase';
  */
 const transformStyles = ( styles, wrapperSelector = '' ) => {
 	return styles.map( ( { css, ignoredSelectors = [], baseURL } ) => {
-		return postcss(
-			[
-				wrapperSelector &&
-					wrap( wrapperSelector, {
-						ignoredSelectors: [
-							...ignoredSelectors,
-							wrapperSelector,
-						],
-					} ),
-				baseURL && rebaseUrl( { rootUrl: baseURL } ),
-			].filter( Boolean )
-		).process( css, {} ).css; // use sync PostCSS API
+		try {
+			return postcss(
+				[
+					wrapperSelector &&
+						wrap( wrapperSelector, {
+							ignoredSelectors: [
+								...ignoredSelectors,
+								wrapperSelector,
+							],
+						} ),
+					baseURL && rebaseUrl( { rootUrl: baseURL } ),
+				].filter( Boolean )
+			).process( css, {} ).css; // use sync PostCSS API
+		} catch ( error ) {
+			if ( error instanceof CssSyntaxError ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'wp.blockEditor.transformStyles Failed to transform CSS.',
+					error.message + '\n' + error.showSourceCode( false )
+				);
+			} else {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'wp.blockEditor.transformStyles Failed to transform CSS.',
+					error
+				);
+			}
+
+			return null;
+		}
 	} );
 };
 

From f73f8d2ae1e4769ccac645c4f6ae0819729f6926 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 22 Nov 2023 15:03:55 +0100
Subject: [PATCH 10/51] Documentation: Add the attributes definition page to
 the create block tutorial of the platform docs (#56429)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Héctor <27339341+priethor@users.noreply.github.com>
---
 platform-docs/docs/create-block/attributes.md | 86 ++++++++++++++++++-
 .../docs/create-block/block-supports.md       |  2 +-
 .../docs/create-block/using-styles.md         |  2 +-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/platform-docs/docs/create-block/attributes.md b/platform-docs/docs/create-block/attributes.md
index 044b326ae54a5..a2da8ee5c3694 100644
--- a/platform-docs/docs/create-block/attributes.md
+++ b/platform-docs/docs/create-block/attributes.md
@@ -1,5 +1,87 @@
 ---
-sidebar_position: 4
+sidebar_position: 2
 ---
 
-# Block attributes
\ No newline at end of file
+# Block Attributes
+
+Attributes are the way a block stores data, they define the structure of a block. Upon serialization, some attributes are saved into the HTML output while others are kept in a the HTML block comment delimiters.
+
+For this block tutorial, we want to allow the user to type a message that we will display stylized in the saved content. So, we need to add a **message** attribute that will hold the user message. The following code defines a **message** attribute; the attribute type is a string. When serializing the blocks, the message will be saved within a `div`container. This means that we're going to source the value attribute using `text` source from the selector, which is a `div` tag.
+
+```js
+const attributes = {
+	message: {
+		type: 'string',
+		source: 'text',
+		selector: 'div',
+		'default': ''
+	}
+};
+```
+
+Add this to the settings arguments of the `registerBlockType` function call. 
+
+**Note:** The text source is equivalent to `innerText` attribute of a DOM element.
+
+## Edit and Save
+
+The **attributes** are passed to both the `edit` and `save` functions. The **setAttributes** function is also passed, but only to the `edit` function. The **setAttributes** function is used to set the values.
+
+The `attributes` is a JavaScript object containing the values of each attribute, or default values if defined. The `setAttributes` is a function to update an attribute.
+
+```js
+function Edit( { attributes, setAttributes } ) {
+	// ...
+}
+
+function Save( { attributes } ) {
+	// ...
+}
+
+registerBlockType( 'gutenpride/gutenpride-block', {
+    // ...
+    attributes,
+    edit: Edit,
+    save: Save,
+} );
+```
+
+## TextControl Component
+
+For our example block, the component we are going to use is the **TextControl** component, which is similar to an HTML text input field. You can see [the documentation for the `TextControl` component](https://developer.wordpress.org/block-editor/reference-guides/components/text-control/). You can browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
+
+The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the message attribute value.
+
+The save function will simply write the `attributes.message` as a `div` tag since that is how we defined it to be parsed. Update the `edit.js` and `save.js` files to the following, replacing the existing functions.
+
+**edit.js** file:
+
+```js
+import { useBlockProps } from '@wordpress/block-editor';
+import { TextControl } from '@wordpress/components';
+
+function Edit( { attributes, setAttributes } ) {
+	return (
+		<div { ...useBlockProps() }>
+			<TextControl
+				label="Message"
+				value={ attributes.message }
+				onChange={ ( val ) => setAttributes( { message: val } ) }
+			/>
+		</div>
+	);
+}
+```
+
+**save.js** file:
+
+```jsx
+import { useBlockProps } from '@wordpress/block-editor';
+
+function Save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	return <div { ...blockProps }>{ attributes.message }</div>;
+}
+```
+
+Reload the editor and add the block. You can now type a message in the editor and it will be included in the serialized HTML output.
diff --git a/platform-docs/docs/create-block/block-supports.md b/platform-docs/docs/create-block/block-supports.md
index 20cfccebd4b05..4a245f210d654 100644
--- a/platform-docs/docs/create-block/block-supports.md
+++ b/platform-docs/docs/create-block/block-supports.md
@@ -1,3 +1,3 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
diff --git a/platform-docs/docs/create-block/using-styles.md b/platform-docs/docs/create-block/using-styles.md
index 1d5ac2bcd0721..c8d1bb91d5961 100644
--- a/platform-docs/docs/create-block/using-styles.md
+++ b/platform-docs/docs/create-block/using-styles.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # Using styles and stylesheets
\ No newline at end of file

From fbc962cc618775a8df9d2a6b36b4785010dd0e14 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 22 Nov 2023 23:20:33 +0900
Subject: [PATCH 11/51] Theme JSON schema: add heading/button key to color
 definition (#55674)

* Theme JSON schema: add heading/button key to color definition

* Update docs

* Add "in a block"
---
 .../theme-json-reference/theme-json-living.md      |  2 ++
 schemas/json/theme.json                            | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index 4890386ca8333..492cdaf089cc4 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -95,6 +95,8 @@ Settings related to colors.
 | link | boolean | false |  |
 | palette | array |  | color, name, slug |
 | text | boolean | true |  |
+| heading | boolean | true |  |
+| button | boolean | true |  |
 
 ---
 
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 5a24f1b16c1a3..68c649e337d82 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -200,7 +200,7 @@
 							}
 						},
 						"link": {
-							"description": "Allow users to set link colors.",
+							"description": "Allow users to set link colors in a block.",
 							"type": "boolean",
 							"default": false
 						},
@@ -228,7 +228,17 @@
 							}
 						},
 						"text": {
-							"description": "Allow users to set text colors.",
+							"description": "Allow users to set text colors in a block.",
+							"type": "boolean",
+							"default": true
+						},
+						"heading": {
+							"description": "Allow users to set heading colors in a block.",
+							"type": "boolean",
+							"default": true
+						},
+						"button": {
+							"description": "Allow users to set button colors in a block.",
 							"type": "boolean",
 							"default": true
 						}

From 8b59123df5e19a95142ef0e299d0713e99a129da Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 22 Nov 2023 18:33:58 +0400
Subject: [PATCH 12/51] Playwright Utils: Fix the method of getting post ID in
 'publishPost' (#56421)

* Playwright Utils: Fix the method of getting post ID in 'publishPost'
* Update sidebar permalink e2e test
---
 .../src/editor/publish-post.ts                        | 11 +++++------
 .../specs/editor/various/sidebar-permalink.spec.js    |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
index 09cca7417c4de..0a2b9e64dc597 100644
--- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -28,12 +28,11 @@ export async function publishPost( this: Editor ) {
 		'role=region[name="Editor publish"i] >> role=button[name="Publish"i]'
 	);
 
-	const urlString = await this.page
-		.getByRole( 'region', { name: 'Editor publish' } )
-		.getByRole( 'textbox', { name: 'address' } )
-		.inputValue();
-	const url = new URL( urlString );
-	const postId = url.searchParams.get( 'p' );
+	await this.page
+		.getByRole( 'button', { name: 'Dismiss this notice' } )
+		.filter( { hasText: 'published' } )
+		.waitFor();
+	const postId = new URL( this.page.url() ).searchParams.get( 'post' );
 
 	return typeof postId === 'string' ? parseInt( postId, 10 ) : null;
 }
diff --git a/test/e2e/specs/editor/various/sidebar-permalink.spec.js b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
index dcc16844d424a..96283e4b6b15f 100644
--- a/test/e2e/specs/editor/various/sidebar-permalink.spec.js
+++ b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
@@ -48,7 +48,7 @@ test.describe( 'Sidebar Permalink', () => {
 		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'aaaaa' );
-		await editor.saveDraft();
+		await editor.publishPost();
 		// Start editing again.
 		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )

From 57f117111c5f043bb89c0790d3759461a539bb59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 22 Nov 2023 16:20:57 +0100
Subject: [PATCH 13/51] Documentation: add new section to release docs about
 troubleshooting the release (#56436)

---
 docs/contributors/code/release.md | 36 +++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index 8c8ed3ff3c334..d19be240f4870 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -25,6 +25,7 @@ Similar requirements apply to releasing WordPress's [npm packages](https://devel
             -   [Automated cherry-picking](#automated-cherry-picking)
             -   [Manual cherry-picking](#manual-cherry-picking)
         -   [Publishing the release](#publishing-the-release)
+        -   [Troubleshooting the release](#troubleshooting-the-release)
     -   [Documenting the release](#documenting-the-release)
         -   [Selecting the release highlights](#selecting-the-release-highlights)
         -   [Requesting release assets](#requesting-release-assets)
@@ -253,6 +254,41 @@ Once approved, the new Gutenberg version will be available to WordPress users al
 
 The final step is to write a release post on [make.wordpress.org/core](https://make.wordpress.org/core/). You can find some tips on that below.
 
+#### Troubleshooting the release
+
+> The plugin was published to the WordPress.org plugin directory but the workflow failed.
+
+This has happened ocassionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
+
+It's important to check that:
+
+- the plugin from the directory works as expected
+- the ZIP contents (see [Downloads](https://plugins.trac.wordpress.org/browser/gutenberg/)) looks correct (doesn't have anything obvious missing)
+- the [Gutenberg SVN repo](https://plugins.trac.wordpress.org/browser/gutenberg/) has two new commits (see [the log](https://plugins.trac.wordpress.org/browser/gutenberg/)):
+  - the `trunk` folder should have "Commiting version X.Y.Z"
+  - there is a new `tags/X.Y.Z` folder with the same contents as `trunk` whose latest commit is "Tagging version X.Y.Z"
+
+Most likely, the tag folder couldn't be created. This is a [known issue](https://plugins.trac.wordpress.org/browser/gutenberg/) that [can be fixed manually](https://github.com/WordPress/gutenberg/issues/55295#issuecomment-1759292978).
+
+Either substitute SVN_USERNAME, SVN_PASSWORD, and VERSION for the proper values or set them as global environment variables first:
+
+```sh
+# CHECKOUT THE REPOSITORY
+svn checkout https://plugins.svn.wordpress.org/gutenberg/trunk --username "$SVN_USERNAME" --password "$SVN_PASSWORD" gutenberg-svn
+
+# MOVE TO THE LOCAL FOLDER
+cd gutenberg-svn
+
+# IF YOU HAPPEN TO HAVE ALREADY THE REPO LOCALLY
+# AND DIDN'T CHECKOUT, MAKE SURE IT IS UPDATED
+# svn up .
+
+# COPY CURRENT TRUNK INTO THE NEW TAGS FOLDER
+svn copy https://plugins.svn.wordpress.org/gutenberg/trunk https://plugins.svn.wordpress.org/gutenberg/tags/$VERSION -m 'Tagging version $VERSION' --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
+```
+
+Ask around if you need help with any of this.
+
 ### Documenting the release
 
 Documenting the release is led by the release manager with the help of [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams) members. This process is comprised of a series of sequential steps that, because of the number of people involved, and the coordination required, need to adhere to a timeline between the RC and stable releases. Stable Gutenberg releases happen on Wednesdays, one week after the initial RC.

From 16945143459acfe7085834c6b7358d8a7eeaa03d Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 22 Nov 2023 16:10:49 +0000
Subject: [PATCH 14/51] Migrating block editor `BlockPatternsList` component
 (#56210)

 - Removes `__unstableComposite` imports from `@wordpress/components`
 - Adds private `Composite*` exports from `@wordpress/components`
 - Refactors `BlockPatternsList` and `BlockPattern` to use updated `Composite` components
 - Additionally renames list component to be consistent with codebase
---
 .../components/block-patterns-list/README.md  |  8 +--
 .../components/block-patterns-list/index.js   | 70 ++++++++++++-------
 .../components/block-patterns-list/style.scss |  7 ++
 .../pattern-category-previews.js              |  4 +-
 4 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md
index 7b30dcecc7bbd..8b798f93b7190 100644
--- a/packages/block-editor/src/components/block-patterns-list/README.md
+++ b/packages/block-editor/src/components/block-patterns-list/README.md
@@ -1,6 +1,6 @@
 # Block Patterns List
 
-The `BlockPatternList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
+The `BlockPatternsList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
 
 For more infos about blocks patterns, read [this](https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/).
 
@@ -18,10 +18,10 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
 Renders a block patterns list.
 
 ```jsx
-import { BlockPatternList } from '@wordpress/block-editor';
+import { BlockPatternsList } from '@wordpress/block-editor';
 
-const MyBlockPatternList = () => (
-	<BlockPatternList
+const MyBlockPatternsList = () => (
+	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
 		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index daf07fa5c7fc0..a392d2687017f 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -6,13 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
+import { useEffect, useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
+	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -22,11 +20,18 @@ import { Icon, symbol } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
 		return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -35,11 +40,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
 };
 
 function BlockPattern( {
+	id,
 	isDraggable,
 	pattern,
 	onClick,
 	onHover,
-	composite,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -78,17 +83,27 @@ function BlockPattern( {
 						title={ pattern.title }
 					>
 						<CompositeItem
-							role="option"
-							as="div"
-							{ ...composite }
-							className={ classnames(
-								'block-editor-block-patterns-list__item',
-								{
-									'block-editor-block-patterns-list__list-item-synced':
-										pattern.type === PATTERN_TYPES.user &&
-										! pattern.syncStatus,
-								}
-							) }
+							render={
+								<div
+									role="option"
+									aria-label={ pattern.title }
+									aria-describedby={
+										pattern.description
+											? descriptionId
+											: undefined
+									}
+									className={ classnames(
+										'block-editor-block-patterns-list__item',
+										{
+											'block-editor-block-patterns-list__list-item-synced':
+												pattern.type ===
+													PATTERN_TYPES.user &&
+												! pattern.syncStatus,
+										}
+									) }
+								/>
+							}
+							id={ id }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -100,10 +115,6 @@ function BlockPattern( {
 								onHover?.( pattern );
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
-							aria-label={ pattern.title }
-							aria-describedby={
-								pattern.description ? descriptionId : undefined
-							}
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -147,7 +158,7 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList(
+function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
@@ -161,10 +172,19 @@ function BlockPatternList(
 	},
 	ref
 ) {
-	const composite = useCompositeState( { orientation } );
+	const compositeStore = useCompositeStore( { orientation } );
+	const { setActiveId } = compositeStore;
+
+	useEffect( () => {
+		// We reset the active composite item whenever the
+		// available patterns change, to make sure that
+		// focus is put back to the start.
+		setActiveId( undefined );
+	}, [ setActiveId, shownPatterns, blockPatterns ] );
+
 	return (
 		<Composite
-			{ ...composite }
+			store={ compositeStore }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
@@ -175,11 +195,11 @@ function BlockPatternList(
 				return isShown ? (
 					<BlockPattern
 						key={ pattern.name }
+						id={ pattern.name }
 						pattern={ pattern }
 						onClick={ onClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
-						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
@@ -191,4 +211,4 @@ function BlockPatternList(
 	);
 }
 
-export default forwardRef( BlockPatternList );
+export default forwardRef( BlockPatternsList );
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index e3b38deff5ef7..8009dfbcce1f2 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -18,6 +18,13 @@
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
+	// This is derived from the top padding set on
+	// `.block-editor-block-patterns-explorer__list`
+	scroll-margin-top: $grid-unit-30;
+	// This is derived from the bottom padding set on
+	// `.block-editor-block-patterns-explorer__list` and
+	// the bottom margin set on `...__list-item` above
+	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
 	.block-editor-block-preview__container {
 		display: flex;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index 76864a6a00ccc..9e5b6373e54d8 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -22,7 +22,7 @@ import {
  * Internal dependencies
  */
 import usePatternsState from '../hooks/use-patterns-state';
-import BlockPatternList from '../../block-patterns-list';
+import BlockPatternsList from '../../block-patterns-list';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import { PatternsFilter } from './patterns-filter';
 import { usePatternCategories } from './use-pattern-categories';
@@ -159,7 +159,7 @@ export function PatternCategoryPreviews( {
 			</VStack>
 
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternList
+				<BlockPatternsList
 					ref={ scrollContainerRef }
 					shownPatterns={ pagingProps.categoryPatternsAsyncList }
 					blockPatterns={ pagingProps.categoryPatterns }

From 574f62804085e09a3bdb97bc674d87cd24edf893 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 22 Nov 2023 17:48:15 +0100
Subject: [PATCH 15/51] Slot: add styles prop to bubblesVirtually version
 (#56428)

* Slot: add `styles` prop to `bubblesVirtually` version

* CHANHGELOG

* Update CHANGELOG

* Enhance clarity of JSDoc comments
---
 packages/components/CHANGELOG.md            |  4 ++++
 packages/components/src/slot-fill/README.md |  2 +-
 packages/components/src/slot-fill/types.ts  | 24 +++++++++++++++------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index eb6e595e304ec..cd1705d6cafd7 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)).
 
+### Internal
+
+-   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
+
 ## 25.12.0 (2023-11-16)
 
 ### Bug Fix
diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md
index a04416bdee50d..9059566deefdf 100644
--- a/packages/components/src/slot-fill/README.md
+++ b/packages/components/src/slot-fill/README.md
@@ -68,7 +68,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 -   By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
 -   If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
 
-`Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
+`Slot` with `bubblesVirtually` set to true also accept optional `className` and `style` props to add to the slot container.
 
 `Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts
index 763fa799c8d86..8abb9b941c527 100644
--- a/packages/components/src/slot-fill/types.ts
+++ b/packages/components/src/slot-fill/types.ts
@@ -36,15 +36,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: never;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: string;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: React.CSSProperties;
 	  } )
 	| ( SlotPropBase & {
 			/**
@@ -56,15 +62,21 @@ export type SlotComponentProps =
 
 			/**
 			 * A function that returns nodes to be rendered.
-			 * Not supported when `bubblesVirtually` is true.
+			 * Supported only when `bubblesVirtually` is `false`.
 			 */
 			children?: ( fills: ReactNode ) => ReactNode;
 
 			/**
-			 * className.
-			 * Not supported when `bubblesVirtually` is false.
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
 			 */
 			className?: never;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: never;
 	  } );
 
 export type FillComponentProps = {

From 20975005ead870e5bb96a0544d9d5960ec8be7a4 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 22 Nov 2023 17:14:09 +0000
Subject: [PATCH 16/51] Add focus rings to focusable disabled buttons (#56383)

Fixes the CSS to only remove borders from disabled secondary/tertiary buttons when they don't have focus
---
 packages/components/CHANGELOG.md          | 4 ++++
 packages/components/src/button/style.scss | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cd1705d6cafd7..9a3beb0342396 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements 
+
+-   `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).
+
 ### Experimental
 
 -   `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)).
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 03273056cfa17..4b11d9169a090 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -129,8 +129,11 @@
 			background: transparent;
 			transform: none;
 			opacity: 1;
-			box-shadow: none;
-			outline: none;
+
+			&:not(:focus) {
+				box-shadow: none;
+				outline: none;
+			}
 		}
 	}
 

From 564f23618997af9beb075f78bb265d28f9e0acc7 Mon Sep 17 00:00:00 2001
From: Luis Felipe Zaguini <26530524+zaguiini@users.noreply.github.com>
Date: Wed, 22 Nov 2023 14:24:43 -0300
Subject: [PATCH 17/51] Additional CSS: fix on change validation (#56434)

---
 .../block-editor/src/components/global-styles/advanced-panel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js
index 4460de0351318..af43552c0a3eb 100644
--- a/packages/block-editor/src/components/global-styles/advanced-panel.js
+++ b/packages/block-editor/src/components/global-styles/advanced-panel.js
@@ -30,7 +30,7 @@ export default function AdvancedPanel( {
 		} );
 		if ( cssError ) {
 			const [ transformed ] = transformStyles(
-				[ { css: value } ],
+				[ { css: newValue } ],
 				'.editor-styles-wrapper'
 			);
 			if ( transformed ) {

From e3a6917ff0353bba5d40660acb1bc273de2b2541 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 22 Nov 2023 22:27:08 +0400
Subject: [PATCH 18/51] Block Settings: Only display parent block selector on
 small screens (#56431)

---
 .../block-settings-dropdown.js                | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index bb8e00d0c11db..4d43865a7f83a 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -20,7 +20,7 @@ import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe, useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -47,6 +47,38 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
+function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}
+
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -132,8 +164,6 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 	const isMatch = __unstableUseShortcutEventMatch();
-
-	const { selectBlock } = useDispatch( blockEditorStore );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
@@ -175,14 +205,6 @@ export function BlockSettingsDropdown( {
 	const removeBlockLabel =
 		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const selectParentButtonRef = useRef();
-	const showParentOutlineGestures = useShowHoveredOrFocusedGestures( {
-		ref: selectParentButtonRef,
-		highlightParent: true,
-	} );
-
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
 	const parentBlockIsSelected =
@@ -297,30 +319,12 @@ export function BlockSettingsDropdown( {
 								/>
 								{ ! parentBlockIsSelected &&
 									!! firstParentClientId && (
-										<MenuItem
-											{ ...showParentOutlineGestures }
-											ref={ selectParentButtonRef }
-											icon={
-												<BlockIcon
-													icon={
-														parentBlockType.icon
-													}
-												/>
-											}
-											onClick={ () =>
-												selectBlock(
-													firstParentClientId
-												)
+										<ParentSelectorMenuItem
+											parentClientId={
+												firstParentClientId
 											}
-										>
-											{ sprintf(
-												/* translators: %s: Name of the block's parent. */
-												__(
-													'Select parent block (%s)'
-												),
-												parentBlockType.title
-											) }
-										</MenuItem>
+											parentBlockType={ parentBlockType }
+										/>
 									) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton

From 6ad5ca84c069d1e3f28a5f6198a2152239b3f052 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 22 Nov 2023 21:16:56 +0000
Subject: [PATCH 19/51] Add 'View site' action to 'Site updated' snackbar
 (#52693)

* Add 'View site' action to 'Site updated' snackbar

* Both Snackbars...
---
 .../edit-site/src/components/save-hub/index.js  | 15 +++++++++++++++
 .../components/entities-saved-states/index.js   | 17 ++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/save-hub/index.js b/packages/edit-site/src/components/save-hub/index.js
index f43e843ee73c1..6afd52c1f4c2a 100644
--- a/packages/edit-site/src/components/save-hub/index.js
+++ b/packages/edit-site/src/components/save-hub/index.js
@@ -106,6 +106,15 @@ export default function SaveHub() {
 		label = __( 'Saving' );
 	}
 
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;
 
@@ -135,6 +144,12 @@ export default function SaveHub() {
 
 			createSuccessNotice( __( 'Site updated.' ), {
 				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'View site' ),
+						url: homeUrl,
+					},
+				],
 				id: saveNoticeId,
 			} );
 		} catch ( error ) {
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 07097969fffc8..a47dd29fef036 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -3,7 +3,7 @@
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -85,6 +85,15 @@ export function EntitiesSavedStatesExtensible( {
 
 	const saveEnabled = saveEnabledProp ?? isDirty;
 
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
 	const saveCheckedEntities = () => {
 		const saveNoticeId = 'site-editor-save-success';
 		removeNotice( saveNoticeId );
@@ -149,6 +158,12 @@ export function EntitiesSavedStatesExtensible( {
 					createSuccessNotice( __( 'Site updated.' ), {
 						type: 'snackbar',
 						id: saveNoticeId,
+						actions: [
+							{
+								label: __( 'View site' ),
+								url: homeUrl,
+							},
+						],
 					} );
 				}
 			} )

From aac7844d5ba4a8768926fff55ad0d819f8f2fb9f Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 22 Nov 2023 21:18:35 +0000
Subject: [PATCH 20/51] Update Changelog for 17.0.3

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

diff --git a/changelog.txt b/changelog.txt
index 0f86c2d8f593b..8494a56d7160d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,17 @@
 == Changelog ==
 
+= 17.0.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+- PostCSS style transformation: fail gracefully instead of throwing an error (https://github.com/WordPress/gutenberg/pull/56093)
+
+
+
 = 17.1.0 =
 
 

From 799c807e6c1b2ad1eeb27e68806498477f4bae0b Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 23 Nov 2023 09:54:45 +1100
Subject: [PATCH 21/51] Post Schedule Panel: Fix Sass deprecation warning for
 division (#56412)

---
 packages/editor/src/components/post-schedule/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-schedule/style.scss b/packages/editor/src/components/post-schedule/style.scss
index ca5bc19ae7d5c..23cb185167db5 100644
--- a/packages/editor/src/components/post-schedule/style.scss
+++ b/packages/editor/src/components/post-schedule/style.scss
@@ -18,6 +18,6 @@
 	height: auto;
 
 	// The line height + the padding should be the same as the button size.
-	padding: ( ( $button-size - $grid-unit-20 ) / 2 ) 12px;
+	padding: math.div($button-size - $grid-unit-20, 2) 12px;
 	line-height: $grid-unit-20;
 }

From 8a2f5bc6b7266b477ced853dce87623bbe53fe64 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Thu, 23 Nov 2023 10:57:23 +0900
Subject: [PATCH 22/51] Post Template: fix incorrect offset query (#56440)

* Post Template: fix incorrect offset query

* Remove unnecessary code
---
 packages/block-library/src/post-template/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index 025a8bf4f6c93..2e668674e8530 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -123,7 +123,7 @@ export default function PostTemplateEdit( {
 					slug: templateSlug.replace( 'category-', '' ),
 				} );
 			const query = {
-				offset: perPage ? perPage + offset : 0,
+				offset: offset || 0,
 				order,
 				orderby: orderBy,
 			};

From 84de158e1631982a325b71f833b1164a1337e8c3 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Thu, 23 Nov 2023 13:19:04 +1100
Subject: [PATCH 23/51] Fix fatal error when calling undefined block library
 function. (#56459)

---
 .../class-wp-navigation-block-renderer.php    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php b/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
index 0e9166a7c7d54..e2eb4e10414fe 100644
--- a/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
+++ b/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
@@ -170,7 +170,7 @@ private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
 		// Add directives to the submenu if needed.
 		if ( $has_submenus && $should_load_view_script ) {
 			$tags              = new WP_HTML_Tag_Processor( $inner_blocks_html );
-			$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $tags, $attributes );
+			$inner_blocks_html = gutenberg_block_core_navigation_add_directives_to_submenu( $tags, $attributes );
 		}
 
 		return $inner_blocks_html;
@@ -195,7 +195,7 @@ private static function get_inner_blocks_from_navigation_post( $attributes ) {
 
 			// 'parse_blocks' includes a null block with '\n\n' as the content when
 			// it encounters whitespace. This code strips it.
-			$compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
+			$compacted_blocks = gutenberg_block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
 			// TODO - this uses the full navigation block attributes for the
 			// context which could be refined.
@@ -210,7 +210,7 @@ private static function get_inner_blocks_from_navigation_post( $attributes ) {
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
 	private static function get_inner_blocks_from_fallback( $attributes ) {
-		$fallback_blocks = block_core_navigation_get_fallback_blocks();
+		$fallback_blocks = gutenberg_block_core_navigation_get_fallback_blocks();
 
 		// Fallback my have been filtered so do basic test for validity.
 		if ( empty( $fallback_blocks ) || ! is_array( $fallback_blocks ) ) {
@@ -245,9 +245,9 @@ private static function get_inner_blocks( $attributes, $block ) {
 			defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&
 			array_key_exists( '__unstableLocation', $attributes ) &&
 			! array_key_exists( 'ref', $attributes ) &&
-			! empty( block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] ) )
+			! empty( gutenberg_block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] ) )
 		) {
-			$inner_blocks = block_core_navigation_get_inner_blocks_from_unstable_location( $attributes );
+			$inner_blocks = gutenberg_block_core_navigation_get_inner_blocks_from_unstable_location( $attributes );
 		}
 
 		// Load inner blocks from the navigation post.
@@ -270,7 +270,7 @@ private static function get_inner_blocks( $attributes, $block ) {
 		 */
 		$inner_blocks = apply_filters( 'block_core_navigation_render_inner_blocks', $inner_blocks );
 
-		$post_ids = block_core_navigation_get_post_ids( $inner_blocks );
+		$post_ids = gutenberg_block_core_navigation_get_post_ids( $inner_blocks );
 		if ( $post_ids ) {
 			_prime_post_caches( $post_ids, false, false );
 		}
@@ -353,8 +353,8 @@ private static function get_layout_class( $attributes ) {
 	private static function get_classes( $attributes ) {
 		// Restore legacy classnames for submenu positioning.
 		$layout_class       = static::get_layout_class( $attributes );
-		$colors             = block_core_navigation_build_css_colors( $attributes );
-		$font_sizes         = block_core_navigation_build_css_font_sizes( $attributes );
+		$colors             = gutenberg_block_core_navigation_build_css_colors( $attributes );
+		$font_sizes         = gutenberg_block_core_navigation_build_css_font_sizes( $attributes );
 		$is_responsive_menu = static::is_responsive( $attributes );
 
 		// Manually add block support text decoration as CSS class.
@@ -378,8 +378,8 @@ private static function get_classes( $attributes ) {
 	 * @return string Returns the styles for the navigation block.
 	 */
 	private static function get_styles( $attributes ) {
-		$colors       = block_core_navigation_build_css_colors( $attributes );
-		$font_sizes   = block_core_navigation_build_css_font_sizes( $attributes );
+		$colors       = gutenberg_block_core_navigation_build_css_colors( $attributes );
+		$font_sizes   = gutenberg_block_core_navigation_build_css_font_sizes( $attributes );
 		$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
 		return $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
 	}
@@ -394,7 +394,7 @@ private static function get_styles( $attributes ) {
 	 */
 	private static function get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html ) {
 		$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
-		$colors                  = block_core_navigation_build_css_colors( $attributes );
+		$colors                  = gutenberg_block_core_navigation_build_css_colors( $attributes );
 		$modal_unique_id         = wp_unique_id( 'modal-' );
 
 		$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
@@ -627,7 +627,7 @@ public static function render( $attributes, $content, $block ) {
 
 		$inner_blocks = static::get_inner_blocks( $attributes, $block );
 		// Prevent navigation blocks referencing themselves from rendering.
-		if ( block_core_navigation_block_contains_core_navigation( $inner_blocks ) ) {
+		if ( gutenberg_block_core_navigation_block_contains_core_navigation( $inner_blocks ) ) {
 			return '';
 		}
 

From 084eefebd28ecc79bd0f1d474e8ef215f9651d83 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 23 Nov 2023 03:21:19 +0000
Subject: [PATCH 24/51] Bump plugin version to 17.1.1

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

diff --git a/gutenberg.php b/gutenberg.php
index 018c269f4f565..a88e153766888 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.2
  * Requires PHP: 7.0
- * Version: 17.1.0
+ * Version: 17.1.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 601aafc18b268..d82b2404c610e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "17.1.0",
+	"version": "17.1.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "17.1.0",
+			"version": "17.1.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index 43ca7f0858f60..960ccd074ae60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "17.1.0",
+	"version": "17.1.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 8059f984c2f31b0b95e7eb6a25e4205667ea83cf Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 23 Nov 2023 03:38:08 +0000
Subject: [PATCH 25/51] Update Changelog for 17.1.1

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

diff --git a/changelog.txt b/changelog.txt
index 8494a56d7160d..b3750479e99fa 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,16 @@
 == Changelog ==
 
+= 17.1.1 =
+
+# Changelog
+
+## Bug Fixes
+
+### Block Library
+
+Fix fatal error when calling undefined block library function. #56459
+
+
 = 17.0.3 =
 
 ## Changelog

From c57fb7b872945bf9f99253e3ccd0818da0406569 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 23 Nov 2023 15:05:22 +1100
Subject: [PATCH 26/51] Cover block: Pass dropZoneElement reference to fix
 dragging within cover block area (#56312)

* Cover block: Pass dropZoneElement reference to fix dragging and dropping within cover block area

* Move to using a simple ref
---
 packages/block-library/src/cover/edit/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index ab49d58b766b0..8c5488584094c 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -335,6 +335,7 @@ function CoverEdit( {
 			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,
+			dropZoneElement: ref.current,
 		}
 	);
 

From 6510154314c70d302268690cf80cd121828deb41 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 23 Nov 2023 08:59:30 +0100
Subject: [PATCH 27/51] Move the DisableNonContentBlocks component to the
 editor package (#56423)

---
 .../block-editor/site-editor-canvas.js        |  4 +--
 .../back-to-page-notification.js              |  0
 .../edit-template-notification.js             |  0
 .../index.js                                  | 31 +++++++------------
 .../src/components/provider/constants.js      |  5 +++
 .../disable-non-page-content-blocks.js        |  6 ++--
 .../editor/src/components/provider/index.js   | 10 +++---
 7 files changed, 26 insertions(+), 30 deletions(-)
 rename packages/edit-site/src/components/{page-content-focus-manager => page-content-focus-notifications}/back-to-page-notification.js (100%)
 rename packages/edit-site/src/components/{page-content-focus-manager => page-content-focus-notifications}/edit-template-notification.js (100%)
 rename packages/edit-site/src/components/{page-content-focus-manager => page-content-focus-notifications}/index.js (58%)
 create mode 100644 packages/editor/src/components/provider/constants.js
 rename packages/{edit-site/src/components/page-content-focus-manager => editor/src/components/provider}/disable-non-page-content-blocks.js (89%)

diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index 643fa84559f60..0d2d522c8b3e1 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -27,7 +27,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusManager from '../page-content-focus-manager';
+import PageContentFocusNotifications from '../page-content-focus-notifications';
 
 const LAYOUT = {
 	type: 'default',
@@ -149,7 +149,7 @@ export default function SiteEditorCanvas() {
 					)
 				}
 			</EditorCanvasContainer.Slot>
-			<PageContentFocusManager contentRef={ contentRef } />
+			<PageContentFocusNotifications contentRef={ contentRef } />
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/page-content-focus-manager/back-to-page-notification.js b/packages/edit-site/src/components/page-content-focus-notifications/back-to-page-notification.js
similarity index 100%
rename from packages/edit-site/src/components/page-content-focus-manager/back-to-page-notification.js
rename to packages/edit-site/src/components/page-content-focus-notifications/back-to-page-notification.js
diff --git a/packages/edit-site/src/components/page-content-focus-manager/edit-template-notification.js b/packages/edit-site/src/components/page-content-focus-notifications/edit-template-notification.js
similarity index 100%
rename from packages/edit-site/src/components/page-content-focus-manager/edit-template-notification.js
rename to packages/edit-site/src/components/page-content-focus-notifications/edit-template-notification.js
diff --git a/packages/edit-site/src/components/page-content-focus-manager/index.js b/packages/edit-site/src/components/page-content-focus-notifications/index.js
similarity index 58%
rename from packages/edit-site/src/components/page-content-focus-manager/index.js
rename to packages/edit-site/src/components/page-content-focus-notifications/index.js
index 05bcc0da003cf..2b0e636f5231e 100644
--- a/packages/edit-site/src/components/page-content-focus-manager/index.js
+++ b/packages/edit-site/src/components/page-content-focus-notifications/index.js
@@ -7,27 +7,21 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import EditTemplateNotification from './edit-template-notification';
 import BackToPageNotification from './back-to-page-notification';
 import { unlock } from '../../lock-unlock';
 
-export default function PageContentFocusManager( { contentRef } ) {
-	const { hasPageContentFocus, pageContentFocusType, canvasMode } = useSelect(
-		( select ) => {
-			const { getPageContentFocusType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _canvasMode = getCanvasMode();
-			return {
-				canvasMode: _canvasMode,
-				pageContentFocusType: getPageContentFocusType(),
-				hasPageContentFocus:
-					select( editSiteStore ).hasPageContentFocus(),
-			};
-		},
-		[]
-	);
+export default function PageContentFocusNotifications( { contentRef } ) {
+	const { pageContentFocusType, canvasMode } = useSelect( ( select ) => {
+		const { getPageContentFocusType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _canvasMode = getCanvasMode();
+		return {
+			canvasMode: _canvasMode,
+			pageContentFocusType: getPageContentFocusType(),
+		};
+	}, [] );
 	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
 
 	/*
@@ -39,11 +33,10 @@ export default function PageContentFocusManager( { contentRef } ) {
 		if ( canvasMode !== 'edit' && !! pageContentFocusType ) {
 			setPageContentFocusType( null );
 		}
-	}, [ canvasMode, pageContentFocusType ] );
+	}, [ canvasMode, pageContentFocusType, setPageContentFocusType ] );
 
 	return (
 		<>
-			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
 			<EditTemplateNotification contentRef={ contentRef } />
 			<BackToPageNotification />
 		</>
diff --git a/packages/editor/src/components/provider/constants.js b/packages/editor/src/components/provider/constants.js
new file mode 100644
index 0000000000000..a81b2fd37563a
--- /dev/null
+++ b/packages/editor/src/components/provider/constants.js
@@ -0,0 +1,5 @@
+export const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
similarity index 89%
rename from packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
rename to packages/editor/src/components/provider/disable-non-page-content-blocks.js
index 2f81f80d0ce63..048b01d026c24 100644
--- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -11,7 +11,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 function DisableBlock( { clientId } ) {
 	const isDescendentOfQueryLoop = useSelect(
@@ -46,9 +46,7 @@ export default function DisableNonPageContentBlocks() {
 	const clientIds = useSelect( ( select ) => {
 		const { __experimentalGetGlobalBlocksByName } =
 			select( blockEditorStore );
-		return __experimentalGetGlobalBlocksByName(
-			Object.keys( PAGE_CONTENT_BLOCK_TYPES )
-		);
+		return __experimentalGetGlobalBlocksByName( PAGE_CONTENT_BLOCK_TYPES );
 	}, [] );
 
 	return clientIds.map( ( clientId ) => {
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 5fa79eedef987..75f1769927715 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -22,16 +22,13 @@ import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
-export const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
 
 /**
  * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
@@ -308,6 +305,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						>
 							{ children }
 							<PatternsMenuItems />
+							{ [ 'post-only', 'template-locked' ].includes(
+								mode
+							) && <DisableNonPageContentBlocks /> }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

From c03a097faadb66a2725dc96e8c23772abe6e0559 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 23 Nov 2023 12:19:23 +0400
Subject: [PATCH 28/51] Block Editor: Optimize 'Connections' inspector controls
 (#56443)

---
 .../block-editor/src/hooks/custom-fields.js   | 133 +++++++++---------
 1 file changed, 68 insertions(+), 65 deletions(-)

diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js
index 31721569781b6..adb9df15824a7 100644
--- a/packages/block-editor/src/hooks/custom-fields.js
+++ b/packages/block-editor/src/hooks/custom-fields.js
@@ -34,6 +34,65 @@ function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomFieldsControl( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	// If the block is a paragraph or image block, we need to know which
+	// attribute to use for the connection. Only the `content` attribute
+	// of the paragraph block and the `url` attribute of the image block are supported.
+	let attributeName;
+	if ( props.name === 'core/paragraph' ) attributeName = 'content';
+	if ( props.name === 'core/image' ) attributeName = 'url';
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Connections' ) } initialOpen={ true }>
+				<TextControl
+					__nextHasNoMarginBottom
+					autoComplete="off"
+					label={ __( 'Custom field meta_key' ) }
+					value={
+						props.attributes?.connections?.attributes?.[
+							attributeName
+						]?.value || ''
+					}
+					onChange={ ( nextValue ) => {
+						if ( nextValue === '' ) {
+							props.setAttributes( {
+								connections: undefined,
+								[ attributeName ]: undefined,
+								placeholder: undefined,
+							} );
+						} else {
+							props.setAttributes( {
+								connections: {
+									attributes: {
+										// The attributeName will be either `content` or `url`.
+										[ attributeName ]: {
+											// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+											// Could even be a custom source like a social media attribute.
+											source: 'meta_fields',
+											value: nextValue,
+										},
+									},
+								},
+								[ attributeName ]: undefined,
+								placeholder: sprintf(
+									'This content will be replaced on the frontend by the value of "%s" custom field.',
+									nextValue
+								),
+							} );
+						}
+					} }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning a connection to blocks that has support for connections.
@@ -46,7 +105,6 @@ function addAttribute( settings ) {
  */
 const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const blockEditingMode = useBlockEditingMode();
 		const hasCustomFieldsSupport = hasBlockSupport(
 			props.name,
 			'__experimentalConnections',
@@ -56,72 +114,17 @@ const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 		// Check if the current block is a paragraph or image block.
 		// Currently, only these two blocks are supported.
 		if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
-		// If the block is a paragraph or image block, we need to know which
-		// attribute to use for the connection. Only the `content` attribute
-		// of the paragraph block and the `url` attribute of the image block are supported.
-		let attributeName;
-		if ( props.name === 'core/paragraph' ) attributeName = 'content';
-		if ( props.name === 'core/image' ) attributeName = 'url';
-
-		if ( hasCustomFieldsSupport && props.isSelected ) {
-			return (
-				<>
-					<BlockEdit { ...props } />
-					{ blockEditingMode === 'default' && (
-						<InspectorControls>
-							<PanelBody
-								title={ __( 'Connections' ) }
-								initialOpen={ true }
-							>
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Custom field meta_key' ) }
-									value={
-										props.attributes?.connections
-											?.attributes?.[ attributeName ]
-											?.value || ''
-									}
-									onChange={ ( nextValue ) => {
-										if ( nextValue === '' ) {
-											props.setAttributes( {
-												connections: undefined,
-												[ attributeName ]: undefined,
-												placeholder: undefined,
-											} );
-										} else {
-											props.setAttributes( {
-												connections: {
-													attributes: {
-														// The attributeName will be either `content` or `url`.
-														[ attributeName ]: {
-															// Source will be variable, could be post_meta, user_meta, term_meta, etc.
-															// Could even be a custom source like a social media attribute.
-															source: 'meta_fields',
-															value: nextValue,
-														},
-													},
-												},
-												[ attributeName ]: undefined,
-												placeholder: sprintf(
-													'This content will be replaced on the frontend by the value of "%s" custom field.',
-													nextValue
-												),
-											} );
-										}
-									} }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
-				</>
-			);
-		}
-
-		return <BlockEdit { ...props } />;
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{ hasCustomFieldsSupport && props.isSelected && (
+					<CustomFieldsControl { ...props } />
+				) }
+			</>
+		);
 	};
 }, 'withCustomFieldsControls' );
 

From 56d1b71bb8d22e4619d90ca05d8018c2822c0385 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Thu, 23 Nov 2023 09:47:50 +0100
Subject: [PATCH 29/51] [RNMobile] Fix ungroup functionality in
 `WarningMaxDepthExceeded` component (#56445)

---
 .../warning-max-depth-exceeded.native.js      | 90 ++++++++++++-------
 1 file changed, 57 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
index 57a7b7a60483c..e363db4961c7c 100644
--- a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
+++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,54 +18,71 @@ import UnsupportedBlockDetails from '../unsupported-block-details';
 import { store as blockEditorStore } from '../../store';
 import { MAX_NESTING_DEPTH } from './constants';
 import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const EMPTY_ARRAY = [];
 
 const WarningMaxDepthExceeded = ( { clientId } ) => {
 	const [ showDetails, setShowDetails ] = useState( false );
 
-	const { isSelected, innerBlocks } = useSelect(
-		( select ) => {
-			const { getBlock, isBlockSelected } = select( blockEditorStore );
-			return {
-				innerBlocks: getBlock( clientId )?.innerBlocks || [],
-				isSelected: isBlockSelected( clientId ),
-			};
-		},
+	const isSelected = useSelect(
+		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
+	// determine whether to use the Ungroup action.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		clientId,
+	] );
+	const { isUngroupable } = convertToGroupButtonProps;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+	const onUngroup = convertToGroupButtons.ungroup.onSelect;
 
 	const {
 		isUnsupportedBlockEditorSupported,
 		canEnableUnsupportedBlockEditor,
 	} = useUnsupportedBlockEditor( clientId );
 
-	const onUngroup = () => {
-		if ( ! innerBlocks.length ) {
-			return;
-		}
-
-		replaceBlocks( clientId, innerBlocks );
-	};
-
-	let description;
-	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+	const descriptionFormat = __(
+		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
+	);
+	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
 	if (
 		! isUnsupportedBlockEditorSupported &&
 		! canEnableUnsupportedBlockEditor
 	) {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		// When UBE can't be used, the description mentions using the web browser to edit the block.
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using your web browser.'
+			);
 	}
 	// Otherwise, the description mentions using the web editor (i.e. UBE).
 	else {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using the web editor.'
+			);
+	}
+	// If the block can be flattened, we also suggest to ungroup the block.
+	if ( isUngroupable ) {
+		description +=
+			' ' +
+			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
+			__(
+				'Alternatively, you can flatten the content by ungrouping the block.'
+			);
 	}
 
 	return (
@@ -88,9 +105,16 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 					onCloseSheet={ () => setShowDetails( false ) }
 					title={ __( 'Deeply nested block' ) }
 					description={ description }
-					customActions={ [
-						{ label: __( 'Ungroup block' ), onPress: onUngroup },
-					] }
+					customActions={
+						isUngroupable
+							? [
+									{
+										label: __( 'Ungroup block' ),
+										onPress: onUngroup,
+									},
+							  ]
+							: EMPTY_ARRAY
+					}
 				/>
 			</View>
 		</TouchableWithoutFeedback>

From 726fc065983a202447c8cafe593759e6529bfbf0 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 23 Nov 2023 11:38:41 +0200
Subject: [PATCH 30/51] Dataviews: Remove link from author (#56467)

---
 packages/edit-site/src/components/dataviews/dataviews.js | 4 ++--
 packages/edit-site/src/components/page-pages/index.js    | 8 --------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index 682060203de7c..78d0ea83abb8e 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -56,8 +56,8 @@ export default function DataViews( {
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 } justify="flex-start">
-				<HStack>
-					<HStack justify="start">
+				<HStack alignment="flex-start">
+					<HStack justify="start" wrap>
 						{ search && (
 							<Search
 								label={ searchLabel }
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index b933f1d82500e..6f0b8b942ebe3 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -226,14 +226,6 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				render: ( { item } ) => {
-					const author = item._embedded?.author[ 0 ];
-					return (
-						<a href={ `user-edit.php?user_id=${ author.id }` }>
-							{ author.name }
-						</a>
-					);
-				},
 				type: ENUMERATION_TYPE,
 				elements:
 					authors?.map( ( { id, name } ) => ( {

From 2477561b4738b883fe41b2677be6006d3d733c6c Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 23 Nov 2023 13:47:59 +0400
Subject: [PATCH 31/51] useEntityRecord: Improve unit tests (#56415)

* useEntityRecord: Improve unit tests

Co-authored-by: Kai Hao <kevin830726@gmail.com>

* Add comment

---------

Co-authored-by: Kai Hao <kevin830726@gmail.com>
---
 .../src/hooks/test/use-entity-record.js       | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/core-data/src/hooks/test/use-entity-record.js b/packages/core-data/src/hooks/test/use-entity-record.js
index 1fe68c84a951b..fa1dea6df8146 100644
--- a/packages/core-data/src/hooks/test/use-entity-record.js
+++ b/packages/core-data/src/hooks/test/use-entity-record.js
@@ -116,22 +116,29 @@ describe( 'useEntityRecord', () => {
 	} );
 
 	it( 'does not resolve entity record when disabled via options', async () => {
-		// Provide response
 		triggerFetch.mockImplementation( () => TEST_RECORD );
 
 		let data;
-		const TestComponent = () => {
-			data = useEntityRecord( 'root', 'widget', 2, {
-				options: { enabled: false },
-			} );
+		const TestComponent = ( { enabled } ) => {
+			data = useEntityRecord( 'root', 'widget', 1, { enabled } );
 			return <div />;
 		};
-		render(
+		const UI = ( { enabled } ) => (
 			<RegistryProvider value={ registry }>
-				<TestComponent />
+				<TestComponent enabled={ enabled } />
 			</RegistryProvider>
 		);
 
+		const { rerender } = render( <UI enabled={ true } /> );
+
+		// A minimum delay for a fetch request. The same delay is used again as a control.
+		await act(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 0 ) )
+		);
+		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
+
+		rerender( <UI enabled={ false } /> );
+
 		expect( data ).toEqual( {
 			edit: expect.any( Function ),
 			editedRecord: {},
@@ -141,14 +148,10 @@ describe( 'useEntityRecord', () => {
 			save: expect.any( Function ),
 		} );
 
-		// Fetch request should have been issued.
-		await waitFor( () => {
-			expect( triggerFetch ).not.toHaveBeenCalled();
-		} );
-		await waitFor( () =>
-			expect( triggerFetch ).not.toHaveBeenCalledWith( {
-				path: '/wp/v2/widgets/2?context=edit',
-			} )
+		// The same delay.
+		await act(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 0 ) )
 		);
+		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
 	} );
 } );

From ea60d43e9545af7ed774c2201bfaba3151a63aa6 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 23 Nov 2023 11:51:51 +0200
Subject: [PATCH 32/51] DataViews: Make disabled pagination buttons focusable
 (#56422)

---
 packages/edit-site/src/components/dataviews/pagination.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
index 7948cf01ecfc2..25672208d993c 100644
--- a/packages/edit-site/src/components/dataviews/pagination.js
+++ b/packages/edit-site/src/components/dataviews/pagination.js
@@ -48,6 +48,7 @@ function Pagination( {
 								onChangeView( { ...view, page: 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'First page' ) }
 							icon={ previous }
 							showTooltip
@@ -58,6 +59,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page - 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'Previous page' ) }
 							icon={ chevronLeft }
 							showTooltip
@@ -115,6 +117,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page + 1 } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Next page' ) }
 							icon={ chevronRight }
 							showTooltip
@@ -125,6 +128,7 @@ function Pagination( {
 								onChangeView( { ...view, page: totalPages } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Last page' ) }
 							icon={ next }
 							showTooltip

From 0b6c4a003f90b18509ee6d3d120435444dc15e43 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 23 Nov 2023 13:42:17 +0100
Subject: [PATCH 33/51] DropdownMenu V2: add support for rendering in legacy
 popover slot (#56342)

* DropdownMenuV2: support rendering in slotfill

* Add temporary stories

* CHANGELOG
---
 packages/components/CHANGELOG.md              |  1 +
 .../src/dropdown-menu-v2-ariakit/index.tsx    | 14 ++++
 .../stories/index.story.tsx                   | 66 +++++++++++++++++++
 .../src/dropdown-menu-v2-ariakit/types.ts     |  7 ++
 .../src/dropdown-menu/stories/index.story.tsx | 52 +++++++++++++++
 packages/components/src/popover/index.tsx     |  2 +-
 6 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9a3beb0342396..cbb12e0146b55 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 ### Internal
 
+-   `DropdownMenuV2`: add support for rendering in legacy popover slot ([#56342](https://github.com/WordPress/gutenberg/pull/56342)).
 -   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
 
 ## 25.12.0 (2023-11-16)
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
index 10b93d8c552c1..b992c7b4c7b5a 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -26,6 +26,11 @@ import { SVG, Circle } from '@wordpress/primitives';
 import { useContextSystem, contextConnect } from '../context';
 import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
+import { useSlot } from '../slot-fill';
+import {
+	SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME,
+	slotNameContext,
+} from '../popover';
 import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
@@ -182,6 +187,9 @@ const UnconnectedDropdownMenu = (
 		shift,
 		modal = true,
 
+		// Other props
+		slotName: slotNameProp = POPOVER_DEFAULT_SLOT_NAME,
+
 		// From internal components context
 		variant,
 
@@ -270,6 +278,11 @@ const UnconnectedDropdownMenu = (
 		[ computedDirection ]
 	);
 
+	// Render the portal in the default slot used by the legacy Popover component.
+	const slotName = useContext( slotNameContext ) || slotNameProp;
+	const slot = useSlot( slotName );
+	const portalContainer = slot.ref?.current;
+
 	return (
 		<>
 			{ /* Menu trigger */ }
@@ -305,6 +318,7 @@ const UnconnectedDropdownMenu = (
 				wrapperProps={ wrapperProps }
 				hideOnEscape={ hideOnEscape }
 				unmountOnHide
+				portalElement={ portalContainer }
 			>
 				<DropdownMenuContext.Provider value={ contextValue }>
 					{ children }
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
index a6319c6cfdc93..147de3861b160 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
@@ -28,6 +28,7 @@ import {
 import Icon from '../../icon';
 import Button from '../../button';
 import Modal from '../../modal';
+import Popover from '../../popover';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
@@ -501,3 +502,68 @@ InsideModal.parameters = {
 		source: { type: 'code' },
 	},
 };
+
+export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
+	props
+) => (
+	<SlotFillProvider>
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot />
+		<DropdownMenu { ...props }>
+			<DropdownMenuItem>Top level item</DropdownMenuItem>
+			<DropdownMenu
+				trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
+			>
+				<DropdownMenuItem>Nested item</DropdownMenuItem>
+			</DropdownMenu>
+		</DropdownMenu>
+	</SlotFillProvider>
+);
+WithDefaultSlotFill.args = {
+	...Default.args,
+};
+
+export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
+	<SlotFillProvider>
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot name="dropdown-menu-slot-with-name" />
+		<DropdownMenu { ...props }>
+			<DropdownMenuItem>Top level item</DropdownMenuItem>
+			<DropdownMenu
+				trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
+			>
+				<DropdownMenuItem>Nested item</DropdownMenuItem>
+			</DropdownMenu>
+		</DropdownMenu>
+	</SlotFillProvider>
+);
+WithNamedSlotFill.args = {
+	...Default.args,
+	slotName: 'dropdown-menu-slot-with-name',
+};
+
+// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
+const SlotNameProvider = Popover.__unstableSlotNameProvider;
+export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
+	props
+) => (
+	<SlotFillProvider>
+		<SlotNameProvider value="dropdown-menu-slot-via-context">
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name="dropdown-menu-slot-via-context" />
+			<DropdownMenu { ...props }>
+				<DropdownMenuItem>Top level item</DropdownMenuItem>
+				<DropdownMenu
+					trigger={
+						<DropdownMenuItem>Open submenu</DropdownMenuItem>
+					}
+				>
+					<DropdownMenuItem>Nested item</DropdownMenuItem>
+				</DropdownMenu>
+			</DropdownMenu>
+		</SlotNameProvider>
+	</SlotFillProvider>
+);
+WithSlotFillViaContext.args = {
+	...Default.args,
+};
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/types.ts b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
index 27d3b1e8c4339..64c7134d62bff 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/types.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
@@ -79,6 +79,13 @@ export interface DropdownMenuProps {
 		| ( (
 				event: KeyboardEvent | React.KeyboardEvent< Element >
 		  ) => boolean );
+	/**
+	 * The name of the Slot in which the popover should be rendered. It should
+	 * be also passed to the corresponding `PopoverSlot` component.
+	 *
+	 * @default 'Popover'
+	 */
+	slotName?: string;
 }
 
 export interface DropdownMenuGroupProps {
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index d4b856380db92..e94b5199b2537 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -9,6 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { DropdownMenu } from '..';
 import MenuItem from '../../menu-item';
 import MenuGroup from '../../menu-group';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -116,3 +118,53 @@ WithChildren.args = {
 		</>
 	),
 };
+
+export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
+	props
+) => (
+	<SlotFillProvider>
+		<div style={ { height: 150 } }>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot />
+			<DropdownMenu { ...props } />
+		</div>
+	</SlotFillProvider>
+);
+WithDefaultSlotFill.args = {
+	...Default.args,
+};
+
+export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
+	<SlotFillProvider>
+		<div style={ { height: 150 } }>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name="dropdown-menu-slot-with-name" />
+			<DropdownMenu { ...props } />
+		</div>
+	</SlotFillProvider>
+);
+WithNamedSlotFill.args = {
+	...Default.args,
+	popoverProps: {
+		__unstableSlotName: 'dropdown-menu-slot-with-name',
+	},
+};
+
+// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
+const SlotNameProvider = Popover.__unstableSlotNameProvider;
+export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
+	props
+) => (
+	<SlotFillProvider>
+		<SlotNameProvider value="dropdown-menu-slot-via-context">
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name="dropdown-menu-slot-via-context" />
+			<div style={ { height: 150 } }>
+				<DropdownMenu { ...props } />
+			</div>
+		</SlotNameProvider>
+	</SlotFillProvider>
+);
+WithSlotFillViaContext.args = {
+	...Default.args,
+};
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 709d4b9884b5e..ff67b65cf5b0d 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -97,7 +97,7 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const slotNameContext = createContext< string | undefined >( undefined );
+export const slotNameContext = createContext< string | undefined >( undefined );
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {

From cc1870a49f57f89cb4c97b41782420a36f77e4da Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 23 Nov 2023 14:15:56 +0000
Subject: [PATCH 34/51] DataViews: Code Quality remove some unused props from
 action. (#56477)

---
 packages/edit-site/src/components/dataviews/item-actions.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index 777244e0396a7..2c3373c14bfdf 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -102,7 +102,6 @@ export default function ItemActions( { item, actions } ) {
 						<PrimaryActionTrigger
 							key={ action.id }
 							action={ action }
-							item={ item }
 							onClick={ () => action.callback( item ) }
 						/>
 					);
@@ -128,7 +127,6 @@ export default function ItemActions( { item, actions } ) {
 									<SecondaryActionTrigger
 										key={ action.id }
 										action={ action }
-										item={ item }
 										onClick={ () =>
 											action.callback( item )
 										}

From 130a145c7b41a6629a340ba46c200517e4085bc9 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 23 Nov 2023 16:48:55 +0200
Subject: [PATCH 35/51] Dataviews: Add preview and grid view in templates list
 (#56382)

* Dataviews: Add preview and grid view in templates list

* Update preview design

* Preview heights in grid view

* fix linting issue

* address feedback

* minor tweak

---------

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 .../src/components/dataviews/view-grid.js     | 13 +++-
 .../src/components/dataviews/view-list.js     | 10 ++-
 .../page-templates/dataviews-templates.js     | 73 ++++++++++++++++++-
 .../src/components/page-templates/style.scss  | 18 +++++
 packages/edit-site/src/style.scss             |  1 +
 5 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 packages/edit-site/src/components/page-templates/style.scss

diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index b9d4bd78d96d6..d97a9db04200d 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -8,6 +8,7 @@ import {
 	FlexBlock,
 	Placeholder,
 } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,9 +24,15 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 			! view.hiddenFields.includes( field.id ) &&
 			field.id !== view.layout.mediaField
 	);
+	const shownData = useAsyncList( data, { step: 3 } );
 	return (
-		<Grid gap={ 8 } columns={ 2 } alignment="top">
-			{ data.map( ( item, index ) => {
+		<Grid
+			gap={ 8 }
+			columns={ 2 }
+			alignment="top"
+			className="dataviews-grid-view"
+		>
+			{ shownData.map( ( item, index ) => {
 				return (
 					<VStack key={ getItemId?.( item ) || index }>
 						<div className="dataviews-view-grid__media">
@@ -50,7 +57,7 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 									) ) }
 								</VStack>
 							</FlexBlock>
-							<FlexBlock>
+							<FlexBlock style={ { maxWidth: 'min-content' } }>
 								<ItemActions
 									item={ item }
 									actions={ actions }
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 8e131a350ac7d..5e102d0f08f3f 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -14,6 +14,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 import {
 	chevronDown,
 	chevronUp,
@@ -332,8 +333,9 @@ function ViewList( {
 			return { field, operator, value };
 		} );
 
+	const shownData = useAsyncList( data );
 	const dataView = useReactTable( {
-		data,
+		data: shownData,
 		columns,
 		manualSorting: true,
 		manualFiltering: true,
@@ -455,6 +457,9 @@ function ViewList( {
 											width:
 												header.column.columnDef.width ||
 												undefined,
+											minWidth:
+												header.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												header.column.columnDef
 													.maxWidth || undefined,
@@ -480,6 +485,9 @@ function ViewList( {
 											width:
 												cell.column.columnDef.width ||
 												undefined,
+											minWidth:
+												cell.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												cell.column.columnDef
 													.maxWidth || undefined,
diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
index 39a9d1b60abad..26d1061432311 100644
--- a/packages/edit-site/src/components/page-templates/dataviews-templates.js
+++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -17,6 +17,11 @@ import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -31,9 +36,20 @@ import {
 	deleteTemplateAction,
 	renameTemplateAction,
 } from './template-actions';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 const EMPTY_ARRAY = [];
 
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'preview',
+	},
+};
+
 const DEFAULT_VIEW = {
 	type: 'list',
 	search: '',
@@ -41,7 +57,7 @@ const DEFAULT_VIEW = {
 	perPage: 20,
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
-	hiddenFields: [],
+	hiddenFields: [ 'preview' ],
 	layout: {},
 };
 
@@ -94,6 +110,32 @@ function AuthorField( { item } ) {
 	);
 }
 
+function TemplatePreview( { content, viewType } ) {
+	const settings = usePatternSettings();
+	const blocks = useMemo( () => {
+		return parse( content );
+	}, [ content ] );
+	if ( ! blocks?.length ) {
+		return null;
+	}
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<div
+				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
+			>
+				<BlockPreview blocks={ blocks } />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+}
+
 export default function DataviewsTemplates() {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { records: allTemplates, isResolving: isLoadingData } =
@@ -153,6 +195,21 @@ export default function DataviewsTemplates() {
 	}, [ allTemplates, view ] );
 	const fields = useMemo(
 		() => [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item, view: { type: viewType } } ) => {
+					return (
+						<TemplatePreview
+							content={ item.content.raw }
+							viewType={ viewType }
+						/>
+					);
+				},
+				minWidth: 120,
+				maxWidth: 120,
+				enableSorting: false,
+			},
 			{
 				header: __( 'Template' ),
 				id: 'title',
@@ -180,7 +237,6 @@ export default function DataviewsTemplates() {
 			{
 				header: __( 'Author' ),
 				id: 'author',
-				getValue: () => {},
 				render: ( { item } ) => <AuthorField item={ item } />,
 				enableHiding: false,
 				enableSorting: false,
@@ -199,10 +255,19 @@ export default function DataviewsTemplates() {
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
-			const updatedView =
+			let updatedView =
 				typeof viewUpdater === 'function'
 					? viewUpdater( view )
 					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
 			setView( updatedView );
 		},
 		[ view, setView ]
@@ -218,7 +283,7 @@ export default function DataviewsTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list' ] }
+				supportedLayouts={ [ 'list', 'grid' ] }
 			/>
 		</Page>
 	);
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
new file mode 100644
index 0000000000000..8af0097b8e2ec
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/style.scss
@@ -0,0 +1,18 @@
+.page-templates-preview-field {
+	.block-editor-block-preview__container {
+		border: 1px solid $gray-300;
+		border-radius: $radius-block-ui;
+	}
+
+	&.is-viewtype-list {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	&.is-viewtype-grid {
+		.block-editor-block-preview__container {
+			height: 320px;
+		}
+	}
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 0b49f48a3e584..30fbec3a94cc1 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -13,6 +13,7 @@
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
+@import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";

From a7d76c3f41b53084f04d55bd255f1c8edfa5f1e1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 23 Nov 2023 16:32:11 +0100
Subject: [PATCH 36/51] Tooltip: Don't render buttons tooltip when show button
 text labels is enabled (#55842)

* Don't render Preview button tooltip when show text labels is enabled.

* Don't render View button tooltip when show text labels is enabled.

* Fix comment block.

* Don't render View Post button tooltip when show text labels is enabled.
---
 .../src/components/preview-options/index.js   |  2 ++
 .../src/components/device-preview/index.js    | 36 +++++++++++--------
 .../src/components/view-link/index.js         | 31 ++++++++++------
 .../src/components/header-edit-mode/index.js  |  1 +
 .../src/components/save-button/index.js       |  2 +-
 .../src/components/post-saved-state/index.js  |  2 +-
 6 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 8dc5a70a91397..8ffdd4327de27 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -19,6 +19,7 @@ export default function PreviewOptions( {
 	deviceType,
 	setDeviceType,
 	label,
+	showIconLabels,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -35,6 +36,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		showTooltip: ! showIconLabels,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),
diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js
index ab38523969ace..a10688d185023 100644
--- a/packages/edit-post/src/components/device-preview/index.js
+++ b/packages/edit-post/src/components/device-preview/index.js
@@ -15,22 +15,27 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 
 export default function DevicePreview() {
-	const { hasActiveMetaboxes, isPostSaveable, isViewable, deviceType } =
-		useSelect( ( select ) => {
-			const { getEditedPostAttribute } = select( editorStore );
-			const { getPostType } = select( coreStore );
-			const postType = getPostType( getEditedPostAttribute( 'type' ) );
+	const {
+		hasActiveMetaboxes,
+		isPostSaveable,
+		isViewable,
+		deviceType,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
-			return {
-				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-				isPostSaveable: select( editorStore ).isEditedPostSaveable(),
-				isViewable: postType?.viewable ?? false,
-				deviceType:
-					select(
-						editPostStore
-					).__experimentalGetPreviewDeviceType(),
-			};
-		}, [] );
+		return {
+			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
+			isViewable: postType?.viewable ?? false,
+			deviceType:
+				select( editPostStore ).__experimentalGetPreviewDeviceType(),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+		};
+	}, [] );
 	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
 		useDispatch( editPostStore );
 
@@ -41,6 +46,7 @@ export default function DevicePreview() {
 			deviceType={ deviceType }
 			setDeviceType={ setPreviewDeviceType }
 			label={ __( 'Preview' ) }
+			showIconLabels={ showIconLabels }
 		>
 			{ ( { onClose } ) =>
 				isViewable && (
diff --git a/packages/edit-post/src/components/view-link/index.js b/packages/edit-post/src/components/view-link/index.js
index 10b10d8af1ee3..3ebf78b851e1f 100644
--- a/packages/edit-post/src/components/view-link/index.js
+++ b/packages/edit-post/src/components/view-link/index.js
@@ -8,18 +8,28 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
 export default function ViewLink() {
-	const { permalink, isPublished, label } = useSelect( ( select ) => {
-		// Grab post type to retrieve the view_item label.
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
+	const { permalink, isPublished, label, showIconLabels } = useSelect(
+		( select ) => {
+			// Grab post type to retrieve the view_item label.
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
 
-		return {
-			permalink: select( editorStore ).getPermalink(),
-			isPublished: select( editorStore ).isCurrentPostPublished(),
-			label: postType?.labels.view_item,
-		};
-	}, [] );
+			return {
+				permalink: select( editorStore ).getPermalink(),
+				isPublished: select( editorStore ).isCurrentPostPublished(),
+				label: postType?.labels.view_item,
+				showIconLabels:
+					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			};
+		},
+		[]
+	);
 
 	// Only render the view button if the post is published and has a permalink.
 	if ( ! isPublished || ! permalink ) {
@@ -32,6 +42,7 @@ export default function ViewLink() {
 			label={ label || __( 'View post' ) }
 			href={ permalink }
 			target="_blank"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index a7daf5570a204..ecb501f669ee9 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -229,6 +229,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							isEnabled={
 								! isFocusMode && hasDefaultEditorCanvasView
 							}
+							showIconLabels={ showIconLabels }
 						>
 							{ ( { onClose } ) => (
 								<MenuGroup>
diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
index 7be87e8956e7d..c2a213cc3e364 100644
--- a/packages/edit-site/src/components/save-button/index.js
+++ b/packages/edit-site/src/components/save-button/index.js
@@ -98,7 +98,7 @@ export default function SaveButton( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip={ showTooltip }
 			icon={ icon }
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index 9d6cb49d91e8e..57c46ab301338 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -156,7 +156,7 @@ export default function PostSavedState( {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
 			showTooltip
 			variant="tertiary"

From b55f86f6f94ca7e2339fc04f22d71a126e2dded1 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 23 Nov 2023 17:51:35 +0100
Subject: [PATCH 37/51] DropdownMenu V2 tweaks (#56041)

* Expose help text subcomponent (uses truncate under the hood)

* Remove DropdownMenuGroupLabel

* Submenu trigger always display chevron next to suffix

* Tweak gutter so that submenus overlap by 8px

* Implement auto-indentation via context

* Revert "Implement auto-indentation via context"

This reverts commit a1e2d3af0285f1f28d1677d41005bcdb25fd0659.

* Use CSS grid/subgrid to impement auto-indentation

* Fix slotfill example

* Tweak sizes, spacing, and colors. Tidy up styles.

* Add label subcomponent

* Update storybook examples

* Export help text and label subcomponents

* CHANGELOG

* README

* Fix unit test

* Allow disabled items to be keyboard focusable / accessible

* Display the "not allowed" cursor on disabled menu items

* Add scroll-margin to make sure that menu items are fully visible when scrolled into view

* Update unit tests

* Use inline styles instead of !important

* Apply design feedback

* CHANGELOG

* Update submenu shift
---
 packages/components/CHANGELOG.md              |   3 +-
 .../src/dropdown-menu-v2-ariakit/README.md    |  24 +-
 .../src/dropdown-menu-v2-ariakit/index.tsx    | 121 ++++---
 .../stories/index.story.tsx                   | 294 ++++++++++++------
 .../src/dropdown-menu-v2-ariakit/styles.ts    | 270 +++++++++-------
 .../dropdown-menu-v2-ariakit/test/index.tsx   |  15 +-
 .../src/dropdown-menu-v2-ariakit/types.ts     |   7 -
 packages/components/src/private-apis.ts       |   6 +-
 8 files changed, 472 insertions(+), 268 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cbb12e0146b55..9cfa25ecc7958 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,13 +2,14 @@
 
 ## Unreleased
 
-### Enhancements 
+### Enhancements
 
 -   `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).
 
 ### Experimental
 
 -   `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)).
+-   `DropdownMenuV2`: Design tweaks ([#56041](https://github.com/WordPress/gutenberg/pull/56041))
 
 ### Internal
 
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/README.md b/packages/components/src/dropdown-menu-v2-ariakit/README.md
index f74098efff410..2902b54116976 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/README.md
+++ b/packages/components/src/dropdown-menu-v2-ariakit/README.md
@@ -284,9 +284,9 @@ Event handler called when the checked radio menu item changes.
 
 - Required: no
 
-### `DropdownMenuGroup`
+### `DropdownMenuItemLabel`
 
-Used to group menu items.
+Used to render the menu item's label.
 
 #### Props
 
@@ -294,13 +294,27 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group.
+The label contents.
+
+- Required: yes
+
+### `DropdownMenuItemHelpText`
+
+Used to render the menu item's help text.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The help text contents.
 
 - Required: yes
 
-### `DropdownMenuGroupLabel`
+### `DropdownMenuGroup`
 
-Used to render a group label.
+Used to group menu items.
 
 #### Props
 
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
index b992c7b4c7b5a..1c1821aa50d43 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -35,7 +35,6 @@ import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
 	DropdownMenuGroupProps,
-	DropdownMenuGroupLabelProps,
 	DropdownMenuItemProps,
 	DropdownMenuCheckboxItemProps,
 	DropdownMenuRadioItemProps,
@@ -60,16 +59,23 @@ export const DropdownMenuItem = forwardRef<
 		<Styled.DropdownMenuItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
-			{ prefix && (
-				<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
-			) }
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuItem>
 	);
 } );
@@ -87,20 +93,30 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		<Styled.DropdownMenuCheckboxItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ check } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuCheckboxItem>
 	);
 } );
@@ -124,17 +140,30 @@ export const DropdownMenuRadioItem = forwardRef<
 		<Styled.DropdownMenuRadioItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
-			{ children }
-			{ suffix }
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuRadioItem>
 	);
 } );
@@ -153,20 +182,6 @@ export const DropdownMenuGroup = forwardRef<
 	);
 } );
 
-export const DropdownMenuGroupLabel = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
->( function DropdownMenuGroupLabel( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuGroupLabel
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-		/>
-	);
-} );
-
 const UnconnectedDropdownMenu = (
 	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
 	ref: React.ForwardedRef< HTMLDivElement >
@@ -293,12 +308,16 @@ const UnconnectedDropdownMenu = (
 					dropdownMenuStore.parent
 						? cloneElement( trigger, {
 								// Add submenu arrow, unless a `suffix` is explicitly specified
-								suffix: trigger.props.suffix ?? (
-									<Styled.SubmenuChevronIcon
-										aria-hidden="true"
-										icon={ chevronRightSmall }
-										size={ 24 }
-									/>
+								suffix: (
+									<>
+										{ trigger.props.suffix }
+										<Styled.SubmenuChevronIcon
+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"
+										/>
+									</>
 								),
 						  } )
 						: trigger
@@ -310,8 +329,12 @@ const UnconnectedDropdownMenu = (
 				{ ...otherProps }
 				modal={ modal }
 				store={ dropdownMenuStore }
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 16 : 8 ) }
-				shift={ shift ?? ( dropdownMenuStore.parent ? -8 : 0 ) }
+				// Root menu has an 8px distance from its trigger,
+				// otherwise 0 (which causes the submenu to slightly overlap)
+				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
+				// Align nested menu by the same (but opposite) amount
+				// as the menu container's padding.
+				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
 				hideOnHoverOutside={ false }
 				data-side={ appliedPlacementSide }
 				variant={ variant }
@@ -346,3 +369,29 @@ export const DropdownMenuSeparator = forwardRef<
 		/>
 	);
 } );
+
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
+
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
index 147de3861b160..53dc4e1704415 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
@@ -2,28 +2,28 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
-import { wordpress } from '@wordpress/icons';
+import { customLink, formatCapitalize } from '@wordpress/icons';
 import { useState, useMemo, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { COLORS, useCx } from '../../utils';
+import { useCx } from '../../utils';
 import {
 	DropdownMenu,
 	DropdownMenuItem,
 	DropdownMenuCheckboxItem,
 	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
 	DropdownMenuSeparator,
 	DropdownMenuContext,
 	DropdownMenuRadioItem,
+	DropdownMenuItemLabel,
+	DropdownMenuItemHelpText,
 } from '..';
 import Icon from '../../icon';
 import Button from '../../button';
@@ -38,6 +38,20 @@ const meta: Meta< typeof DropdownMenu > = {
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		DropdownMenuItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuCheckboxItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuSeparator,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuContext,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuRadioItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuItemLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuItemHelpText,
 	},
 	argTypes: {
 		children: { control: { type: null } },
@@ -66,54 +80,48 @@ const meta: Meta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const ItemHelpText = styled.span`
-	font-size: 12px;
-	color: ${ COLORS.gray[ '700' ] };
-
-	/* when the immediate parent item is hovered / focused */
-	[data-active-item] > * > &,
-	/* when the parent item is a submenu trigger and the submenu is open */
-	[aria-expanded='true'] > &,
-	/* when the parent item is disabled */
-	[aria-disabled='true'] > & {
-		color: inherit;
-	}
-`;
-
 export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<DropdownMenu { ...props }>
-		<DropdownMenuItem>Default item</DropdownMenuItem>
+		<DropdownMenuItem>
+			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+		<DropdownMenuItem>
+			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
+			<DropdownMenuItemHelpText>Help text</DropdownMenuItemHelpText>
+		</DropdownMenuItem>
+		<DropdownMenuItem>
+			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
+			<DropdownMenuItemHelpText>
+				The menu item help text is automatically truncated when there
+				are more than two lines of text
+			</DropdownMenuItemHelpText>
+		</DropdownMenuItem>
 		<DropdownMenuItem hideOnClick={ false }>
-			<div
-				style={ {
-					display: 'inline-flex',
-					flexDirection: 'column',
-				} }
-			>
-				Other item
-				<ItemHelpText>
-					Won&apos;t close the menu when clicked
-				</ItemHelpText>
-			</div>
+			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
+			<DropdownMenuItemHelpText>
+				This item doesn&apos;t close the menu on click
+			</DropdownMenuItemHelpText>
 		</DropdownMenuItem>
 		<DropdownMenuItem disabled>Disabled item</DropdownMenuItem>
 		<DropdownMenuSeparator />
 		<DropdownMenuGroup>
-			<DropdownMenuGroupLabel>Prefix and suffix</DropdownMenuGroupLabel>
 			<DropdownMenuItem
-				prefix={ <Icon icon={ wordpress } size={ 24 } /> }
+				prefix={ <Icon icon={ customLink } size={ 24 } /> }
 			>
-				With prefix
-			</DropdownMenuItem>
-			<DropdownMenuItem suffix={ <span>⌘S</span> }>
-				With suffix
+				<DropdownMenuItemLabel>With prefix</DropdownMenuItemLabel>
 			</DropdownMenuItem>
+			<DropdownMenuItem suffix={ '⌘S' }>With suffix</DropdownMenuItem>
 			<DropdownMenuItem
 				disabled
-				prefix={ <Icon icon={ wordpress } size={ 24 } /> }
-				suffix={ <span>⌥⌘T</span> }
+				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
+				suffix="⌥⌘T"
 			>
-				Disabled with prefix and suffix
+				<DropdownMenuItemLabel>
+					Disabled with prefix and suffix
+				</DropdownMenuItemLabel>
+				<DropdownMenuItemHelpText>
+					And help text
+				</DropdownMenuItemHelpText>
 			</DropdownMenuItem>
 		</DropdownMenuGroup>
 	</DropdownMenu>
@@ -130,15 +138,35 @@ export const WithSubmenu: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<DropdownMenu { ...props }>
 		<DropdownMenuItem>Level 1 item</DropdownMenuItem>
 		<DropdownMenu
-			trigger={ <DropdownMenuItem>Submenu trigger</DropdownMenuItem> }
+			trigger={
+				<DropdownMenuItem suffix="Suffix">
+					<DropdownMenuItemLabel>
+						Submenu trigger item with a long label
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
+			}
 		>
-			<DropdownMenuItem>Level 2 item</DropdownMenuItem>
-			<DropdownMenuItem>Level 2 item</DropdownMenuItem>
+			<DropdownMenuItem>
+				<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
+			</DropdownMenuItem>
+			<DropdownMenuItem>
+				<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
+			</DropdownMenuItem>
 			<DropdownMenu
-				trigger={ <DropdownMenuItem>Submenu trigger</DropdownMenuItem> }
+				trigger={
+					<DropdownMenuItem>
+						<DropdownMenuItemLabel>
+							Submenu trigger
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
+				}
 			>
-				<DropdownMenuItem>Level 3 item</DropdownMenuItem>
-				<DropdownMenuItem>Level 3 item</DropdownMenuItem>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>Level 3 item</DropdownMenuItemLabel>
+				</DropdownMenuItem>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>Level 3 item</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			</DropdownMenu>
 		</DropdownMenu>
 	</DropdownMenu>
@@ -168,35 +196,45 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
 	return (
 		<DropdownMenu { ...props }>
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Individual, uncontrolled checkboxes
-				</DropdownMenuGroupLabel>
 				<DropdownMenuCheckboxItem
 					name="checkbox-individual-uncontrolled-a"
 					value="a"
+					suffix="⌥⌘T"
 				>
-					Checkbox item A (initially unchecked)
+					<DropdownMenuItemLabel>
+						Checkbox item A
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 				<DropdownMenuCheckboxItem
 					name="checkbox-individual-uncontrolled-b"
 					value="b"
 					defaultChecked
 				>
-					Checkbox item B (initially checked)
+					<DropdownMenuItemLabel>
+						Checkbox item B
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 			</DropdownMenuGroup>
 			<DropdownMenuSeparator />
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Individual, controlled checkboxes
-				</DropdownMenuGroupLabel>
 				<DropdownMenuCheckboxItem
 					name="checkbox-individual-controlled-a"
 					value="a"
 					checked={ isAChecked }
 					onChange={ ( e ) => setAChecked( e.target.checked ) }
 				>
-					Checkbox item A
+					<DropdownMenuItemLabel>
+						Checkbox item A
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 				<DropdownMenuCheckboxItem
 					name="checkbox-individual-controlled-b"
@@ -204,40 +242,54 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
 					checked={ isBChecked }
 					onChange={ ( e ) => setBChecked( e.target.checked ) }
 				>
-					Checkbox item B (initially checked)
+					<DropdownMenuItemLabel>
+						Checkbox item B
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 			</DropdownMenuGroup>
 			<DropdownMenuSeparator />
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Multiple, uncontrolled checkboxes
-				</DropdownMenuGroupLabel>
 				<DropdownMenuCheckboxItem
 					name="checkbox-multiple-uncontrolled"
 					value="a"
 				>
-					Checkbox item A (initially unchecked)
+					<DropdownMenuItemLabel>
+						Checkbox item A
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled, multiple selection
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 				<DropdownMenuCheckboxItem
 					name="checkbox-multiple-uncontrolled"
 					value="b"
 					defaultChecked
 				>
-					Checkbox item B (initially checked)
+					<DropdownMenuItemLabel>
+						Checkbox item B
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled, multiple selection, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 			</DropdownMenuGroup>
 			<DropdownMenuSeparator />
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Multiple, controlled checkboxes
-				</DropdownMenuGroupLabel>
 				<DropdownMenuCheckboxItem
 					name="checkbox-multiple-controlled"
 					value="a"
 					checked={ multipleCheckboxesValue.includes( 'a' ) }
 					onChange={ onMultipleCheckboxesCheckedChange }
 				>
-					Checkbox item A (initially unchecked)
+					<DropdownMenuItemLabel>
+						Checkbox item A
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled, multiple selection
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 				<DropdownMenuCheckboxItem
 					name="checkbox-multiple-controlled"
@@ -245,7 +297,12 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
 					checked={ multipleCheckboxesValue.includes( 'b' ) }
 					onChange={ onMultipleCheckboxesCheckedChange }
 				>
-					Checkbox item B (initially checked)
+					<DropdownMenuItemLabel>
+						Checkbox item B
+					</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled, multiple selection, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuCheckboxItem>
 			</DropdownMenuGroup>
 		</DropdownMenu>
@@ -264,32 +321,35 @@ export const WithRadios: StoryFn< typeof DropdownMenu > = ( props ) => {
 	return (
 		<DropdownMenu { ...props }>
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Uncontrolled radios
-				</DropdownMenuGroupLabel>
 				<DropdownMenuRadioItem name="radio-uncontrolled" value="one">
-					Radio item 1
+					<DropdownMenuItemLabel>Radio item 1</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled
+					</DropdownMenuItemHelpText>
 				</DropdownMenuRadioItem>
 				<DropdownMenuRadioItem
 					name="radio-uncontrolled"
 					value="two"
 					defaultChecked
 				>
-					Radio item 2 (initially checked)
+					<DropdownMenuItemLabel>Radio item 2</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Uncontrolled, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuRadioItem>
 			</DropdownMenuGroup>
 			<DropdownMenuSeparator />
 			<DropdownMenuGroup>
-				<DropdownMenuGroupLabel>
-					Controlled radios
-				</DropdownMenuGroupLabel>
 				<DropdownMenuRadioItem
 					name="radio-controlled"
 					value="one"
 					checked={ radioValue === 'one' }
 					onChange={ onRadioChange }
 				>
-					Radio item 1
+					<DropdownMenuItemLabel>Radio item 1</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled
+					</DropdownMenuItemHelpText>
 				</DropdownMenuRadioItem>
 				<DropdownMenuRadioItem
 					name="radio-controlled"
@@ -297,7 +357,10 @@ export const WithRadios: StoryFn< typeof DropdownMenu > = ( props ) => {
 					checked={ radioValue === 'two' }
 					onChange={ onRadioChange }
 				>
-					Radio item 2 (initially checked)
+					<DropdownMenuItemLabel>Radio item 2</DropdownMenuItemLabel>
+					<DropdownMenuItemHelpText>
+						Controlled, initially checked
+					</DropdownMenuItemHelpText>
 				</DropdownMenuRadioItem>
 			</DropdownMenuGroup>
 		</DropdownMenu>
@@ -328,13 +391,17 @@ export const WithModals: StoryFn< typeof DropdownMenu > = ( props ) => {
 					onClick={ () => setOuterModalOpen( true ) }
 					hideOnClick={ false }
 				>
-					Open outer modal
+					<DropdownMenuItemLabel>
+						Open outer modal
+					</DropdownMenuItemLabel>
 				</DropdownMenuItem>
 				<DropdownMenuItem
 					onClick={ () => setInnerModalOpen( true ) }
 					hideOnClick={ false }
 				>
-					Open inner modal
+					<DropdownMenuItemLabel>
+						Open inner modal
+					</DropdownMenuItemLabel>
 				</DropdownMenuItem>
 				{ isInnerModalOpen && (
 					<Modal
@@ -384,7 +451,13 @@ const Slot = () => {
 		[ dropdownMenuContext ]
 	);
 
-	return <ExampleSlotFill.Slot fillProps={ fillProps } bubblesVirtually />;
+	return (
+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }
+		/>
+	);
 };
 
 type ForwardedContextTuple< P = {} > = [
@@ -415,18 +488,32 @@ export const WithSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => {
 	return (
 		<SlotFillProvider>
 			<DropdownMenu { ...props }>
-				<DropdownMenuItem>Item</DropdownMenuItem>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>Item</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 				<Slot />
 			</DropdownMenu>
 
 			<Fill>
-				<DropdownMenuItem>Item from fill</DropdownMenuItem>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>
+						Item from fill
+					</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 				<DropdownMenu
 					trigger={
-						<DropdownMenuItem>Submenu from fill</DropdownMenuItem>
+						<DropdownMenuItem>
+							<DropdownMenuItemLabel>
+								Submenu from fill
+							</DropdownMenuItemLabel>
+						</DropdownMenuItem>
 					}
 				>
-					<DropdownMenuItem>Submenu item from fill</DropdownMenuItem>
+					<DropdownMenuItem>
+						<DropdownMenuItemLabel>
+							Submenu item from fill
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
 				</DropdownMenu>
 			</Fill>
 		</SlotFillProvider>
@@ -442,15 +529,28 @@ const toolbarVariantContextValue = {
 	},
 };
 export const ToolbarVariant: StoryFn< typeof DropdownMenu > = ( props ) => (
+	// TODO: add toolbar
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenu { ...props }>
-			<DropdownMenuItem>Level 1 item</DropdownMenuItem>
-			<DropdownMenuItem>Level 1 item</DropdownMenuItem>
+			<DropdownMenuItem>
+				<DropdownMenuItemLabel>Level 1 item</DropdownMenuItemLabel>
+			</DropdownMenuItem>
+			<DropdownMenuItem>
+				<DropdownMenuItemLabel>Level 1 item</DropdownMenuItemLabel>
+			</DropdownMenuItem>
 			<DropdownMenuSeparator />
 			<DropdownMenu
-				trigger={ <DropdownMenuItem>Submenu trigger</DropdownMenuItem> }
+				trigger={
+					<DropdownMenuItem>
+						<DropdownMenuItemLabel>
+							Submenu trigger
+						</DropdownMenuItemLabel>
+					</DropdownMenuItem>
+				}
 			>
-				<DropdownMenuItem>Level 2 item</DropdownMenuItem>
+				<DropdownMenuItem>
+					<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
+				</DropdownMenuItem>
 			</DropdownMenu>
 		</DropdownMenu>
 	</ContextSystemProvider>
@@ -473,17 +573,31 @@ export const InsideModal: StoryFn< typeof DropdownMenu > = ( props ) => {
 			{ isModalOpen && (
 				<Modal onRequestClose={ () => setModalOpen( false ) }>
 					<DropdownMenu { ...props }>
-						<DropdownMenuItem>Level 1 item</DropdownMenuItem>
-						<DropdownMenuItem>Level 1 item</DropdownMenuItem>
+						<DropdownMenuItem>
+							<DropdownMenuItemLabel>
+								Level 1 item
+							</DropdownMenuItemLabel>
+						</DropdownMenuItem>
+						<DropdownMenuItem>
+							<DropdownMenuItemLabel>
+								Level 1 item
+							</DropdownMenuItemLabel>
+						</DropdownMenuItem>
 						<DropdownMenuSeparator />
 						<DropdownMenu
 							trigger={
 								<DropdownMenuItem>
-									Submenu trigger
+									<DropdownMenuItemLabel>
+										Submenu trigger
+									</DropdownMenuItemLabel>
 								</DropdownMenuItem>
 							}
 						>
-							<DropdownMenuItem>Level 2 item</DropdownMenuItem>
+							<DropdownMenuItem>
+								<DropdownMenuItemLabel>
+									Level 2 item
+								</DropdownMenuItemLabel>
+							</DropdownMenuItem>
 						</DropdownMenu>
 					</DropdownMenu>
 					<Button onClick={ () => setModalOpen( false ) }>
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
index 0858bba4289ef..465bdb1aebb30 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
 import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
+import { Truncate } from '../truncate';
 import type { DropdownMenuContext } from './types';
 
 const ANIMATION_PARAMS = {
@@ -20,13 +21,16 @@ const ANIMATION_PARAMS = {
 	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
 };
 
-const CONTENT_WRAPPER_PADDING = space( 2 );
-const ITEM_PREFIX_WIDTH = space( 7 );
-const ITEM_PADDING_INLINE_START = space( 2 );
-const ITEM_PADDING_INLINE_END = space( 2.5 );
+const CONTENT_WRAPPER_PADDING = space( 1 );
+const ITEM_PADDING_BLOCK = space( 2 );
+const ITEM_PADDING_INLINE = space( 3 );
 
-// TODO: should bring this into the config, and make themeable
-const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;
+// TODO:
+// - those values are different from saved variables?
+// - should bring this into the config, and make themeable
+// - border color and divider color are different?
+const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
+const DIVIDER_COLOR = COLORS.gray[ 200 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
 const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
@@ -71,12 +75,18 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	/* TODO: is there a way to read the sass variable? */
 	z-index: 1000000;
 
-	min-width: 220px;
+	display: grid;
+	grid-template-columns: minmax( 0, max-content ) 1fr;
+	grid-template-rows: auto;
+
+	box-sizing: border-box;
+	min-width: 160px;
+	max-width: 320px;
 	max-height: var( --popover-available-height );
 	padding: ${ CONTENT_WRAPPER_PADDING };
 
 	background-color: ${ COLORS.ui.background };
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: 4px;
 	${ ( props ) => css`
 		box-shadow: ${ props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BOX_SHADOW
@@ -110,102 +120,55 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	}
 `;
 
-const itemPrefix = css`
-	/* !important is to override some inline styles set by Ariakit */
-	width: ${ ITEM_PREFIX_WIDTH } !important;
-	/* !important is to override some inline styles set by Ariakit */
-	height: auto !important;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	/* Prefixes don't get affected by the item's inline start padding */
-	margin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );
-	/*
-		Negative margin allows the suffix to be as tall as the whole item
-		(incl. padding) before increasing the items' height. This can be useful,
-		e.g., when using icons that are bigger than 20x20 px
-	*/
-	margin-top: ${ space( -2 ) };
-	margin-bottom: ${ space( -2 ) };
-`;
-
-const itemSuffix = css`
-	width: max-content;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	/* Push prefix to the inline-end of the item */
-	margin-inline-start: auto;
-	/* Minimum space between the item's content and suffix */
-	padding-inline-start: ${ space( 6 ) };
-	/*
-		Negative margin allows the suffix to be as tall as the whole item
-		(incl. padding) before increasing the items' height. This can be useful,
-		e.g., when using icons that are bigger than 20x20 px
-	*/
-	margin-top: ${ space( -2 ) };
-	margin-bottom: ${ space( -2 ) };
-
-	/*
-		Override color in normal conditions, but inherit the item's color
-	  for altered conditions.
-
-		TODO:
-		  - For now, used opacity like for disabled item, which makes it work
-			  regardless of the theme
-		  - how do we translate this for themes? Should we have a new variable
-		for "secondary" text?
-	*/
-	opacity: 0.6;
+const baseItem = css`
+	all: unset;
 
-	/* when the parent item is hovered / focused */
-	[data-active-item] > &,
-	/* when the parent item is a submenu trigger and the submenu is open */
-	[aria-expanded='true'] > &,
-	/* when the parent item is disabled */
-	[aria-disabled='true'] > & {
-		opacity: 1;
-	}
-`;
+	position: relative;
+	min-height: ${ space( 10 ) };
+	box-sizing: border-box;
 
-export const ItemPrefixWrapper = styled.span`
-	${ itemPrefix }
-`;
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
 
-export const ItemSuffixWrapper = styled.span`
-	${ itemSuffix }
-`;
+	/*
+	 * Define a grid layout which inherits the same columns configuration
+	 * from the parent layout (ie. subgrid).
+	 */
+	display: grid;
+	grid-template-columns: subgrid;
+	align-items: center;
 
-const baseItem = css`
-	all: unset;
 	font-size: ${ font( 'default.fontSize' ) };
 	font-family: inherit;
 	font-weight: normal;
 	line-height: 20px;
+
 	color: ${ COLORS.gray[ 900 ] };
 	border-radius: ${ CONFIG.radiusBlockUi };
-	display: flex;
-	align-items: center;
-	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
-		${ ITEM_PADDING_INLINE_START };
-	position: relative;
+
+	padding-block: ${ ITEM_PADDING_BLOCK };
+	padding-inline: ${ ITEM_PADDING_INLINE };
+
+	/*
+	 * Make sure that, when an item is scrolled into view (eg. while using the
+	 * keyboard to move focus), the whole item comes into view
+	 */
+	scroll-margin: ${ CONTENT_WRAPPER_PADDING };
+
 	user-select: none;
 	outline: none;
 
 	&[aria-disabled='true'] {
-		/*
-		TODO:
-			- we need a disabled color in the Theme variables
-			- design specs use opacity instead of setting a new text color
-	*/
-		opacity: 0.5;
-		pointer-events: none;
+		color: ${ COLORS.ui.textDisabled };
+		cursor: not-allowed;
 	}
 
 	/* Hover */
-	&[data-active-item] {
-		/* TODO: reconcile with global focus styles */
-		background-color: ${ COLORS.gray[ '100' ] };
+	&[data-active-item]:not( [data-focus-visible] ):not(
+			[aria-disabled='true']
+		) {
+		background-color: ${ COLORS.theme.accent };
+		color: ${ COLORS.white };
 	}
 
 	/* Keyboard focus (focus-visible) */
@@ -224,74 +187,147 @@ const baseItem = css`
 
 	/* When the item is the trigger of an open submenu */
 	${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
-		/* TODO: should we style submenu triggers any different? */
+		background-color: ${ COLORS.gray[ 100 ] };
+		color: ${ COLORS.gray[ 900 ] };
 	}
 
 	svg {
 		fill: currentColor;
 	}
-
-	&:not( :has( ${ ItemPrefixWrapper } ) ) {
-		padding-inline-start: ${ ITEM_PREFIX_WIDTH };
-	}
 `;
 
 export const DropdownMenuItem = styled( Ariakit.MenuItem )`
-	${ baseItem }
+	${ baseItem };
 `;
 
 export const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
-	${ baseItem }
+	${ baseItem };
 `;
 
 export const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`
-	${ baseItem }
+	${ baseItem };
 `;
 
-export const DropdownMenuGroup = styled( Ariakit.MenuGroup )``;
+export const ItemPrefixWrapper = styled.span`
+	/* Always occupy the first column, even when auto-collapsing */
+	grid-column: 1;
+
+	&:not( :empty ) {
+		margin-inline-end: ${ space( 2 ) };
+	}
 
-export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
-	box-sizing: border-box;
 	display: flex;
 	align-items: center;
-	min-height: ${ space( 8 ) };
-
-	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
-		${ ITEM_PREFIX_WIDTH };
-	/* TODO: color doesn't match available UI variables */
-	color: ${ COLORS.gray[ 700 ] };
-
-	/* TODO: font size doesn't match available ones via "font" utils */
-	font-size: 11px;
-	line-height: 1.4;
-	font-weight: 500;
-	text-transform: uppercase;
+	justify-content: center;
+
+	color: ${ COLORS.gray[ '700' ] };
+
+	/*
+	* When the parent menu item is active, except when it's a non-focused/hovered
+	* submenu trigger (in that case, color should not be inherited)
+	*/
+	[data-active-item]:not( [data-focus-visible] ) > &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] > & {
+		color: inherit;
+	}
+`;
+
+export const DropdownMenuItemContentWrapper = styled.div`
+	/*
+	 * Always occupy the second column, since the first column
+	 * is taken by the prefix wrapper (when displayed).
+	 */
+	grid-column: 2;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: ${ space( 3 ) };
+
+	pointer-events: none;
+`;
+
+export const DropdownMenuItemChildrenWrapper = styled.div`
+	flex: 1;
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: ${ space( 1 ) };
+`;
+
+export const ItemSuffixWrapper = styled.span`
+	flex: 0;
+	width: max-content;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: ${ space( 3 ) };
+
+	color: ${ COLORS.gray[ '700' ] };
+
+	/*
+	 * When the parent menu item is active, except when it's a non-focused/hovered
+	 * submenu trigger (in that case, color should not be inherited)
+	 */
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ DropdownMenu }) &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] *:not(${ DropdownMenu }) & {
+		color: inherit;
+	}
+`;
+
+export const DropdownMenuGroup = styled( Ariakit.MenuGroup )`
+	/* Ignore this element when calculating the layout. Useful for subgrid */
+	display: contents;
 `;
 
 export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<
 	Pick< DropdownMenuContext, 'variant' >
 >`
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
+
 	border: none;
 	height: ${ CONFIG.borderWidth };
-	/* TODO: doesn't match border color from variables */
 	background-color: ${ ( props ) =>
 		props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BORDER_COLOR
-			: DEFAULT_BORDER_COLOR };
-	/* Negative horizontal margin to make separator go from side to side */
-	margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );
+			: DIVIDER_COLOR };
+	/* Align with menu items' content */
+	margin-block: ${ space( 2 ) };
+	margin-inline: ${ ITEM_PADDING_INLINE };
 
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 `;
 
 export const SubmenuChevronIcon = styled( Icon )`
+	width: ${ space( 1.5 ) };
 	${ rtl(
 		{
-			transform: `scaleX(1) translateX(${ space( 2 ) })`,
+			transform: `scaleX(1)`,
 		},
 		{
-			transform: `scaleX(-1) translateX(${ space( 2 ) })`,
+			transform: `scaleX(-1)`,
 		}
-	) }
+	) };
+`;
+
+export const DropdownMenuItemLabel = styled( Truncate )`
+	font-size: ${ font( 'default.fontSize' ) };
+	line-height: 20px;
+	color: inherit;
+`;
+
+export const DropdownMenuItemHelpText = styled( Truncate )`
+	font-size: ${ font( 'helpText.fontSize' ) };
+	line-height: 16px;
+	color: ${ COLORS.gray[ '700' ] };
+
+	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
+	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {
+		color: inherit;
+	}
 `;
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/test/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/test/index.tsx
index 297bc0dec9390..f58639a545a05 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/test/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/test/index.tsx
@@ -16,7 +16,6 @@ import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
 	DropdownMenuItem,
-	DropdownMenuGroupLabel,
 	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuGroup,
@@ -134,8 +133,9 @@ describe( 'DropdownMenu', () => {
 			await press.ArrowDown();
 
 			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible)
 			expect(
-				screen.getByRole( 'menuitem', { name: 'Second item' } )
+				screen.getByRole( 'menuitem', { name: 'First item' } )
 			).toHaveFocus();
 		} );
 
@@ -163,8 +163,9 @@ describe( 'DropdownMenu', () => {
 			await press.Space();
 
 			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible
 			expect(
-				screen.getByRole( 'menuitem', { name: 'Second item' } )
+				screen.getByRole( 'menuitem', { name: 'First item' } )
 			).toHaveFocus();
 		} );
 
@@ -452,9 +453,6 @@ describe( 'DropdownMenu', () => {
 				return (
 					<DropdownMenu trigger={ <button>Open dropdown</button> }>
 						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel>
-								Radio group label
-							</DropdownMenuGroupLabel>
 							<DropdownMenuRadioItem
 								name="radio-test"
 								value="radio-one"
@@ -532,9 +530,6 @@ describe( 'DropdownMenu', () => {
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuGroup>
-						<DropdownMenuGroupLabel>
-							Radio group label
-						</DropdownMenuGroupLabel>
 						<DropdownMenuRadioItem
 							name="radio-test"
 							value="radio-one"
@@ -991,7 +986,7 @@ describe( 'DropdownMenu', () => {
 			// The contents of the suffix are rendered after the item's children
 			expect(
 				screen.getByRole( 'menuitemradio', {
-					name: 'Radio item oneRadio suffix',
+					name: 'Radio item one Radio suffix',
 				} )
 			).toBeInTheDocument();
 		} );
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/types.ts b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
index 64c7134d62bff..271c204ee6eef 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/types.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
@@ -95,13 +95,6 @@ export interface DropdownMenuGroupProps {
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuGroupLabelProps {
-	/**
-	 * The contents of the dropdown menu group label.
-	 */
-	children: React.ReactNode;
-}
-
 export interface DropdownMenuItemProps {
 	/**
 	 * The contents of the menu item.
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index e39ccbdacc2f5..fb4679dbc3423 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -32,11 +32,12 @@ import {
 import {
 	DropdownMenu as DropdownMenuV2Ariakit,
 	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabel as DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItem as DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabel as DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2Ariakit,
 } from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
@@ -74,9 +75,10 @@ lock( privateApis, {
 	Theme,
 	DropdownMenuV2Ariakit,
 	DropdownMenuGroupV2Ariakit,
-	DropdownMenuGroupLabelV2Ariakit,
 	DropdownMenuItemV2Ariakit,
 	DropdownMenuCheckboxItemV2Ariakit,
 	DropdownMenuRadioItemV2Ariakit,
 	DropdownMenuSeparatorV2Ariakit,
+	DropdownMenuItemLabelV2Ariakit,
+	DropdownMenuItemHelpTextV2Ariakit,
 } );

From fc5619d6ac11605683f4a72dcea53e92d20f4410 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 23 Nov 2023 18:02:52 +0100
Subject: [PATCH 38/51] Revert "DropdownMenu V2: add support for rendering in
 legacy popover slot (#56342)" (#56484)

This reverts commit 0b6c4a003f90b18509ee6d3d120435444dc15e43.
---
 packages/components/CHANGELOG.md              |  1 -
 .../src/dropdown-menu-v2-ariakit/index.tsx    | 14 ----
 .../stories/index.story.tsx                   | 66 -------------------
 .../src/dropdown-menu-v2-ariakit/types.ts     |  7 --
 .../src/dropdown-menu/stories/index.story.tsx | 52 ---------------
 packages/components/src/popover/index.tsx     |  2 +-
 6 files changed, 1 insertion(+), 141 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9cfa25ecc7958..3fb47c5e3b3ec 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,7 +13,6 @@
 
 ### Internal
 
--   `DropdownMenuV2`: add support for rendering in legacy popover slot ([#56342](https://github.com/WordPress/gutenberg/pull/56342)).
 -   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
 
 ## 25.12.0 (2023-11-16)
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
index 1c1821aa50d43..37d4a1f9cfcc5 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -26,11 +26,6 @@ import { SVG, Circle } from '@wordpress/primitives';
 import { useContextSystem, contextConnect } from '../context';
 import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
-import { useSlot } from '../slot-fill';
-import {
-	SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME,
-	slotNameContext,
-} from '../popover';
 import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
@@ -202,9 +197,6 @@ const UnconnectedDropdownMenu = (
 		shift,
 		modal = true,
 
-		// Other props
-		slotName: slotNameProp = POPOVER_DEFAULT_SLOT_NAME,
-
 		// From internal components context
 		variant,
 
@@ -293,11 +285,6 @@ const UnconnectedDropdownMenu = (
 		[ computedDirection ]
 	);
 
-	// Render the portal in the default slot used by the legacy Popover component.
-	const slotName = useContext( slotNameContext ) || slotNameProp;
-	const slot = useSlot( slotName );
-	const portalContainer = slot.ref?.current;
-
 	return (
 		<>
 			{ /* Menu trigger */ }
@@ -341,7 +328,6 @@ const UnconnectedDropdownMenu = (
 				wrapperProps={ wrapperProps }
 				hideOnEscape={ hideOnEscape }
 				unmountOnHide
-				portalElement={ portalContainer }
 			>
 				<DropdownMenuContext.Provider value={ contextValue }>
 					{ children }
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
index 53dc4e1704415..fcc8f76294bc6 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx
@@ -28,7 +28,6 @@ import {
 import Icon from '../../icon';
 import Button from '../../button';
 import Modal from '../../modal';
-import Popover from '../../popover';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
@@ -616,68 +615,3 @@ InsideModal.parameters = {
 		source: { type: 'code' },
 	},
 };
-
-export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
-	props
-) => (
-	<SlotFillProvider>
-		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-		<Popover.Slot />
-		<DropdownMenu { ...props }>
-			<DropdownMenuItem>Top level item</DropdownMenuItem>
-			<DropdownMenu
-				trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
-			>
-				<DropdownMenuItem>Nested item</DropdownMenuItem>
-			</DropdownMenu>
-		</DropdownMenu>
-	</SlotFillProvider>
-);
-WithDefaultSlotFill.args = {
-	...Default.args,
-};
-
-export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<SlotFillProvider>
-		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-		<Popover.Slot name="dropdown-menu-slot-with-name" />
-		<DropdownMenu { ...props }>
-			<DropdownMenuItem>Top level item</DropdownMenuItem>
-			<DropdownMenu
-				trigger={ <DropdownMenuItem>Open submenu</DropdownMenuItem> }
-			>
-				<DropdownMenuItem>Nested item</DropdownMenuItem>
-			</DropdownMenu>
-		</DropdownMenu>
-	</SlotFillProvider>
-);
-WithNamedSlotFill.args = {
-	...Default.args,
-	slotName: 'dropdown-menu-slot-with-name',
-};
-
-// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
-const SlotNameProvider = Popover.__unstableSlotNameProvider;
-export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
-	props
-) => (
-	<SlotFillProvider>
-		<SlotNameProvider value="dropdown-menu-slot-via-context">
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-			<Popover.Slot name="dropdown-menu-slot-via-context" />
-			<DropdownMenu { ...props }>
-				<DropdownMenuItem>Top level item</DropdownMenuItem>
-				<DropdownMenu
-					trigger={
-						<DropdownMenuItem>Open submenu</DropdownMenuItem>
-					}
-				>
-					<DropdownMenuItem>Nested item</DropdownMenuItem>
-				</DropdownMenu>
-			</DropdownMenu>
-		</SlotNameProvider>
-	</SlotFillProvider>
-);
-WithSlotFillViaContext.args = {
-	...Default.args,
-};
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/types.ts b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
index 271c204ee6eef..478b89c67f136 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/types.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
@@ -79,13 +79,6 @@ export interface DropdownMenuProps {
 		| ( (
 				event: KeyboardEvent | React.KeyboardEvent< Element >
 		  ) => boolean );
-	/**
-	 * The name of the Slot in which the popover should be rendered. It should
-	 * be also passed to the corresponding `PopoverSlot` component.
-	 *
-	 * @default 'Popover'
-	 */
-	slotName?: string;
 }
 
 export interface DropdownMenuGroupProps {
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index e94b5199b2537..d4b856380db92 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -9,8 +9,6 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { DropdownMenu } from '..';
 import MenuItem from '../../menu-item';
 import MenuGroup from '../../menu-group';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -118,53 +116,3 @@ WithChildren.args = {
 		</>
 	),
 };
-
-export const WithDefaultSlotFill: StoryFn< typeof DropdownMenu > = (
-	props
-) => (
-	<SlotFillProvider>
-		<div style={ { height: 150 } }>
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-			<Popover.Slot />
-			<DropdownMenu { ...props } />
-		</div>
-	</SlotFillProvider>
-);
-WithDefaultSlotFill.args = {
-	...Default.args,
-};
-
-export const WithNamedSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<SlotFillProvider>
-		<div style={ { height: 150 } }>
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-			<Popover.Slot name="dropdown-menu-slot-with-name" />
-			<DropdownMenu { ...props } />
-		</div>
-	</SlotFillProvider>
-);
-WithNamedSlotFill.args = {
-	...Default.args,
-	popoverProps: {
-		__unstableSlotName: 'dropdown-menu-slot-with-name',
-	},
-};
-
-// @ts-expect-error __unstableSlotNameProvider is not currently typed on Popover
-const SlotNameProvider = Popover.__unstableSlotNameProvider;
-export const WithSlotFillViaContext: StoryFn< typeof DropdownMenu > = (
-	props
-) => (
-	<SlotFillProvider>
-		<SlotNameProvider value="dropdown-menu-slot-via-context">
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-			<Popover.Slot name="dropdown-menu-slot-via-context" />
-			<div style={ { height: 150 } }>
-				<DropdownMenu { ...props } />
-			</div>
-		</SlotNameProvider>
-	</SlotFillProvider>
-);
-WithSlotFillViaContext.args = {
-	...Default.args,
-};
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index ff67b65cf5b0d..709d4b9884b5e 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -97,7 +97,7 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-export const slotNameContext = createContext< string | undefined >( undefined );
+const slotNameContext = createContext< string | undefined >( undefined );
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {

From be5084ab4150e366be6d752a346309306999f7f1 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 23 Nov 2023 19:53:42 +0000
Subject: [PATCH 39/51] Simplify dataviews view button (#56485)

* Simplify dataviews view button

* remove prop that doesn't exist

---------

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
---
 packages/edit-site/src/components/dataviews/view-actions.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
index 8953e70242af6..8aacf095fab85 100644
--- a/packages/edit-site/src/components/dataviews/view-actions.js
+++ b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -285,7 +285,6 @@ export default function ViewActions( {
 } ) {
 	return (
 		<DropdownMenuV2
-			label={ __( 'Actions' ) }
 			trigger={
 				<Button
 					variant="tertiary"
@@ -293,9 +292,8 @@ export default function ViewActions( {
 					icon={
 						VIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list
 					}
-				>
-					{ __( 'View' ) }
-				</Button>
+					label={ __( 'View options' ) }
+				/>
 			}
 		>
 			<DropdownMenuGroupV2>

From 9e63f56e1b67c752330279f767308027c30a150a Mon Sep 17 00:00:00 2001
From: Phill <38789408+SavPhill@users.noreply.github.com>
Date: Fri, 24 Nov 2023 03:04:12 +0700
Subject: [PATCH 40/51] Update "All patterns" to "All" in block inserter
 (#55986)

* Update label

* Update utils.js with review change
---
 .../src/components/inserter/block-patterns-tab/utils.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
index 439955eca92b3..b1e5a99bbe6dc 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
@@ -21,7 +21,7 @@ export const SYNC_TYPES = {
 
 export const allPatternsCategory = {
 	name: 'allPatterns',
-	label: __( 'All patterns' ),
+	label: __( 'All' ),
 };
 
 export const myPatternsCategory = {

From 996004b796d606a575c6252afc713e2f256dd556 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 23 Nov 2023 21:12:43 +0100
Subject: [PATCH 41/51] Site Editor: Fix template resolution for templates
 assigned as home page (#56418)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
---
 .../sidebar-edit-mode/page-panels/hooks.js    | 29 +++++--
 .../page-panels/reset-default-template.js     |  6 +-
 .../use-init-edited-entity-from-url.js        | 86 +++++++++++++++----
 3 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
index 92fad17cd1d3e..1071479b2f9f2 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
@@ -18,13 +18,25 @@ export function useEditedPostContext() {
 	);
 }
 
-export function useIsPostsPage() {
+export function useAllowSwitchingTemplates() {
 	const { postId } = useEditedPostContext();
 	return useSelect(
-		( select ) =>
-			+postId ===
-			select( coreStore ).getEntityRecord( 'root', 'site' )
-				?.page_for_posts,
+		( select ) => {
+			const { getEntityRecord, getEntityRecords } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const templates = getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{ per_page: -1 }
+			);
+			const isPostsPage = +postId === siteSettings?.page_for_posts;
+			// If current page is set front page or posts page, we also need
+			// to check if the current theme has a template for it. If not
+			const isFrontPage =
+				+postId === siteSettings?.page_on_front &&
+				templates?.some( ( { slug } ) => slug === 'front-page' );
+			return ! isPostsPage && ! isFrontPage;
+		},
 		[ postId ]
 	);
 }
@@ -46,19 +58,18 @@ function useTemplates() {
 
 export function useAvailableTemplates() {
 	const currentTemplateSlug = useCurrentTemplateSlug();
-	const isPostsPage = useIsPostsPage();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const templates = useTemplates();
 	return useMemo(
 		() =>
-			// The posts page template cannot be changed.
-			! isPostsPage &&
+			allowSwitchingTemplate &&
 			templates?.filter(
 				( template ) =>
 					template.is_custom &&
 					template.slug !== currentTemplateSlug &&
 					!! template.content.raw // Skip empty templates.
 			),
-		[ templates, currentTemplateSlug, isPostsPage ]
+		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
 	);
 }
 
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
index 0f29292274546..795477cc8fc7c 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
@@ -10,18 +10,18 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import {
+	useAllowSwitchingTemplates,
 	useCurrentTemplateSlug,
 	useEditedPostContext,
-	useIsPostsPage,
 } from './hooks';
 
 export default function ResetDefaultTemplate( { onClick } ) {
 	const currentTemplateSlug = useCurrentTemplateSlug();
-	const isPostsPage = useIsPostsPage();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const { postType, postId } = useEditedPostContext();
 	const { editEntityRecord } = useDispatch( coreStore );
 	// The default template in a post is indicated by an empty string.
-	if ( ! currentTemplateSlug || isPostsPage ) {
+	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
 		return null;
 	}
 	return (
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 64eb3778a99c7..46079cbce8efd 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
@@ -28,21 +28,46 @@ const postTypesWithoutParentTemplate = [
 ];
 
 function useResolveEditedEntityAndContext( { postId, postType } ) {
-	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
-		const { getSite, getUnstableBase } = select( coreDataStore );
-		const siteData = getSite();
-		const base = getUnstableBase();
-
-		return {
-			isRequestingSite: ! base,
-			homepageId:
-				siteData?.show_on_front === 'page'
-					? siteData.page_on_front
-					: null,
-			url: base?.home,
-		};
-	}, [] );
+	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
+		useSelect( ( select ) => {
+			const { getSite, getUnstableBase, getEntityRecords } =
+				select( coreDataStore );
+			const siteData = getSite();
+			const base = getUnstableBase();
+			const templates = getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			);
+			let _frontPateTemplateId;
+			if ( templates ) {
+				const frontPageTemplate = templates.find(
+					( t ) => t.slug === 'front-page'
+				);
+				_frontPateTemplateId = frontPageTemplate
+					? frontPageTemplate.id
+					: false;
+			}
 
+			return {
+				hasLoadedAllDependencies: !! base && !! siteData,
+				homepageId:
+					siteData?.show_on_front === 'page'
+						? siteData.page_on_front.toString()
+						: null,
+				url: base?.home,
+				frontPageTemplateId: _frontPateTemplateId,
+			};
+		}, [] );
+
+	/**
+	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
+	 * in order to match the frontend as closely as possible in the site editor.
+	 *
+	 * It is not possible to rely on the server logic because there maybe unsaved changes that impact the template resolution.
+	 */
 	const resolvedTemplateId = useSelect(
 		( select ) => {
 			// If we're rendering a post type that doesn't have a template
@@ -62,6 +87,22 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				postTypeToResolve,
 				postIdToResolve
 			) {
+				// For the front page, we always use the front page template if existing.
+				if (
+					postTypeToResolve === 'page' &&
+					homepageId === postIdToResolve
+				) {
+					// We're still checking whether the front page template exists.
+					// Don't resolve the template yet.
+					if ( frontPageTemplateId === undefined ) {
+						return undefined;
+					}
+
+					if ( !! frontPageTemplateId ) {
+						return frontPageTemplateId;
+					}
+				}
+
 				const editedEntity = getEditedEntityRecord(
 					'postType',
 					postTypeToResolve,
@@ -91,6 +132,10 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				} );
 			}
 
+			if ( ! hasLoadedAllDependencies ) {
+				return undefined;
+			}
+
 			// If we're rendering a specific page, post... we need to resolve its template.
 			if ( postType && postId ) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
@@ -102,12 +147,19 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			}
 
 			// If we're not rendering a specific page, use the front page template.
-			if ( ! isRequestingSite && url ) {
+			if ( url ) {
 				const template = __experimentalGetTemplateForLink( url );
 				return template?.id;
 			}
 		},
-		[ homepageId, isRequestingSite, url, postId, postType ]
+		[
+			homepageId,
+			hasLoadedAllDependencies,
+			url,
+			postId,
+			postType,
+			frontPageTemplateId,
+		]
 	);
 
 	const context = useMemo( () => {
@@ -130,7 +182,7 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		return { isReady: true, postType, postId, context };
 	}
 
-	if ( ( postType && postId ) || homepageId || ! isRequestingSite ) {
+	if ( hasLoadedAllDependencies ) {
 		return {
 			isReady: resolvedTemplateId !== undefined,
 			postType: TEMPLATE_POST_TYPE,

From 352ab9993ed4eefd0d11f15dc4146283ec2080ff Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 23 Nov 2023 21:30:20 +0100
Subject: [PATCH 42/51] Performance: update base hash

---
 .github/workflows/performance.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 485668a755b8c..a30234e94360d 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -68,13 +68,13 @@ jobs:
             - name: Compare performance with base branch
               if: github.event_name == 'push'
               # The base hash used here need to be a commit that is compatible with the current WP version
-              # The current one is bd2a881101727b03b0be09382b34841af5a3c03e and it needs to be updated every WP major release.
+              # The current one is 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 and it needs to be updated every WP major release.
               # It is used as a base comparison point to avoid fluctuation in the performance metrics.
               run: |
                   WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf $GITHUB_SHA bd2a881101727b03b0be09382b34841af5a3c03e --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf $GITHUB_SHA 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
 
             - name: Compare performance with custom branches
               if: github.event_name == 'workflow_dispatch'
@@ -97,7 +97,7 @@ jobs:
                   CODEHEALTH_PROJECT_TOKEN: ${{ secrets.CODEHEALTH_PROJECT_TOKEN }}
               run: |
                   COMMITTED_AT=$(git show -s $GITHUB_SHA --format="%cI")
-                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA bd2a881101727b03b0be09382b34841af5a3c03e $COMMITTED_AT
+                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 $COMMITTED_AT
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3

From 427fa7603efe0726c6d5f6075ba752bb20c78d72 Mon Sep 17 00:00:00 2001
From: Brooke <35543432+brookewp@users.noreply.github.com>
Date: Thu, 23 Nov 2023 14:13:12 -0800
Subject: [PATCH 43/51] Try Ariakit Select for new CustomSelectControl
 component (#55790)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create base component using ariakit

* Simplify story example

* Add options for children and value with stories

* Update types

* Add uncontrolled story and adapt value

* Remove duplicate import

* Add size prop

* Changes from pairing session with ciampo

* Rename and cleanup

* Update styles

* Add context

* Add README

* Update manifest

* Update types and move context provider

* Add back types for multi-selection

* Remove file for moved component

* Add translation for placeholder

* Add check and cleanup styles

* Add multiselect example

* Require type children for CustomSelectItem

* Add small size and update sizing logic

* Update stories with ciampo’s suggested changes

* Update styles to match legacy CustomSelectControl

* Cleanup based on PR feedback

* Children as optional

* Incorporate ciampo’s suggestions to refine styles

* Make value required for CustomSelectItem and fix naming in comment

* Update changelog

* Refine styles and add styling to active item

* Only render label if defined

* Cleanup story

* Add suggestions to WIP README and types

* Make label required

* Improve logic for default rendered value

* Update stories
---
 docs/manifest.json                            |   6 +
 packages/components/CHANGELOG.md              |   4 +
 .../src/custom-select-control-v2/README.md    |  73 +++++++++
 .../src/custom-select-control-v2/index.tsx    |  99 ++++++++++++
 .../stories/index.story.tsx                   | 149 ++++++++++++++++++
 .../src/custom-select-control-v2/styles.ts    |  76 +++++++++
 .../src/custom-select-control-v2/types.ts     |  63 ++++++++
 7 files changed, 470 insertions(+)
 create mode 100644 packages/components/src/custom-select-control-v2/README.md
 create mode 100644 packages/components/src/custom-select-control-v2/index.tsx
 create mode 100644 packages/components/src/custom-select-control-v2/stories/index.story.tsx
 create mode 100644 packages/components/src/custom-select-control-v2/styles.ts
 create mode 100644 packages/components/src/custom-select-control-v2/types.ts

diff --git a/docs/manifest.json b/docs/manifest.json
index ba345e7716ee3..5906743512062 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -785,6 +785,12 @@
 		"markdown_source": "../packages/components/src/confirm-dialog/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CustomSelectControlV2",
+		"slug": "custom-select-control-v2",
+		"markdown_source": "../packages/components/src/custom-select-control-v2/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CustomSelectControl",
 		"slug": "custom-select-control",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 3fb47c5e3b3ec..f92bd43f80661 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,10 @@
 
 -   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
 
+### Internal
+
+-   Introduce experimental new version of `CustomSelectControl` based on `ariakit` ([#55790](https://github.com/WordPress/gutenberg/pull/55790))
+
 ## 25.12.0 (2023-11-16)
 
 ### Bug Fix
diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md
new file mode 100644
index 0000000000000..3cd9c3f8534e7
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/README.md
@@ -0,0 +1,73 @@
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+### `CustomSelect`
+
+Used to render a customizable select control component.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The child elements. This should be composed of CustomSelect.Item components.
+
+-   Required: yes
+
+##### `defaultValue`: `string`
+
+An optional default value for the control. If left `undefined`, the first non-disabled item will be used.
+
+-   Required: no
+
+##### `label`: `string`
+
+Label for the control.
+
+-   Required: yes
+
+##### `onChange`: `( newValue: string ) => void`
+
+A function that receives the new value of the input.
+
+-   Required: no
+
+##### `renderSelectedValue`: `( selectValue: string ) => React.ReactNode`
+
+Can be used to render select UI with custom styled values.
+
+-   Required: no
+
+##### `size`: `'default' | 'large'`
+
+The size of the control.
+
+-   Required: no
+
+##### `value`: `string`
+
+Can be used to externally control the value of the control.
+
+-   Required: no
+
+### `CustomSelectItem`
+
+Used to render a select item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `value`: `string`
+
+The value of the select item. This will be used as the children if children are left `undefined`.
+
+-   Required: yes
+
+##### `children`: `React.ReactNode`
+
+The children to display for each select item. The `value` will be used if left `undefined`.
+
+-   Required: no
diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx
new file mode 100644
index 0000000000000..88231078fa8d5
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/index.tsx
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as Styled from './styles';
+import type {
+	CustomSelectProps,
+	CustomSelectItemProps,
+	CustomSelectContext as CustomSelectContextType,
+} from './types';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
+	const isValueEmpty = Array.isArray( value )
+		? value.length === 0
+		: value === undefined || value === null;
+
+	if ( isValueEmpty ) {
+		return __( 'Select an item' );
+	}
+
+	if ( Array.isArray( value ) ) {
+		return value.length === 1
+			? value[ 0 ]
+			: // translators: %s: number of items selected (it will always be 2 or more items)
+			  sprintf( __( '%s items selected' ), value.length );
+	}
+
+	return value;
+}
+
+export function CustomSelect( props: CustomSelectProps ) {
+	const {
+		children,
+		defaultValue,
+		label,
+		onChange,
+		size = 'default',
+		value,
+		renderSelectedValue = defaultRenderSelectedValue,
+	} = props;
+
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	const { value: currentValue } = store.useState();
+
+	return (
+		<>
+			<Styled.CustomSelectLabel store={ store }>
+				{ label }
+			</Styled.CustomSelectLabel>
+			<Styled.CustomSelectButton
+				size={ size }
+				hasCustomRenderProp={ !! renderSelectedValue }
+				store={ store }
+			>
+				{ renderSelectedValue( currentValue ) }
+				<Ariakit.SelectArrow />
+			</Styled.CustomSelectButton>
+			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
+				<CustomSelectContext.Provider value={ { store } }>
+					{ children }
+				</CustomSelectContext.Provider>
+			</Styled.CustomSelectPopover>
+		</>
+	);
+}
+
+export function CustomSelectItem( {
+	children,
+	...props
+}: CustomSelectItemProps ) {
+	const customSelectContext = useContext( CustomSelectContext );
+	return (
+		<Styled.CustomSelectItem
+			store={ customSelectContext?.store }
+			{ ...props }
+		>
+			{ children ?? props.value }
+			<Ariakit.SelectItemCheck />
+		</Styled.CustomSelectItem>
+	);
+}
diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
new file mode 100644
index 0000000000000..2c7ae3507046b
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CustomSelect, CustomSelectItem } from '..';
+
+const meta: Meta< typeof CustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2',
+	component: CustomSelect,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CustomSelectItem,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+		renderSelectedValue: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+	return <CustomSelect { ...props } />;
+};
+
+const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label',
+	children: (
+		<>
+			<CustomSelectItem value="Small">
+				<span style={ { fontSize: '75%' } }>Small</span>
+			</CustomSelectItem>
+			<CustomSelectItem value="Something bigger">
+				<span style={ { fontSize: '200%' } }>Something bigger</span>
+			</CustomSelectItem>
+		</>
+	),
+};
+
+/**
+ * Multiple selection can be enabled by using an array for the `value` and
+ * `defaultValue` props. The argument of the `onChange` function will also
+ * change accordingly.
+ */
+export const MultiSelect = Template.bind( {} );
+MultiSelect.args = {
+	defaultValue: [ 'lavender', 'tangerine' ],
+	label: 'Select Colors',
+	renderSelectedValue: ( currentValue: string | string[] ) => {
+		if ( ! Array.isArray( currentValue ) ) {
+			return currentValue;
+		}
+		if ( currentValue.length === 0 ) return 'No colors selected';
+		if ( currentValue.length === 1 ) return currentValue[ 0 ];
+		return `${ currentValue.length } colors selected`;
+	},
+	children: (
+		<>
+			{ [
+				'amber',
+				'aquamarine',
+				'flamingo pink',
+				'lavender',
+				'maroon',
+				'tangerine',
+			].map( ( item ) => (
+				<CustomSelectItem key={ item } value={ item }>
+					{ item }
+				</CustomSelectItem>
+			) ) }
+		</>
+	),
+};
+
+const renderControlledValue = ( gravatar: string | string[] ) => {
+	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
+	return (
+		<div style={ { display: 'flex', alignItems: 'center' } }>
+			<img
+				style={ { maxHeight: '75px', marginRight: '10px' } }
+				key={ avatar }
+				src={ avatar }
+				alt=""
+				aria-hidden="true"
+			/>
+			<span>{ gravatar }</span>
+		</div>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {
+	label: 'Default Gravatars',
+	renderSelectedValue: renderControlledValue,
+	children: (
+		<>
+			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
+				( option ) => (
+					<CustomSelectItem key={ option } value={ option }>
+						{ renderControlledValue( option ) }
+					</CustomSelectItem>
+				)
+			) }
+		</>
+	),
+};
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
new file mode 100644
index 0000000000000..c04f6ac32e5ff
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../utils';
+import { space } from '../utils/space';
+import type { CustomSelectProps } from './types';
+
+export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+	margin-bottom: ${ space( 2 ) };
+`;
+
+const inputHeights = {
+	default: 40,
+	small: 24,
+};
+
+export const CustomSelectButton = styled( Ariakit.Select, {
+	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
+} )( ( {
+	size,
+	hasCustomRenderProp,
+}: {
+	size: NonNullable< CustomSelectProps[ 'size' ] >;
+	hasCustomRenderProp: boolean;
+} ) => {
+	const isSmallSize = size === 'small' && ! hasCustomRenderProp;
+	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
+
+	return {
+		display: 'flex',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		backgroundColor: COLORS.white,
+		border: `1px solid ${ COLORS.gray[ 600 ] }`,
+		borderRadius: space( 0.5 ),
+		cursor: 'pointer',
+		width: '100%',
+		[ heightProperty ]: `${ inputHeights[ size ] }px`,
+		padding: isSmallSize ? space( 2 ) : space( 4 ),
+		fontSize: isSmallSize ? '11px' : '13px',
+		'&[data-focus-visible]': {
+			outlineStyle: 'solid',
+		},
+		'&[aria-expanded="true"]': {
+			outlineStyle: `1.5px solid ${ COLORS.theme.accent }`,
+		},
+	};
+} );
+
+export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
+	border-radius: ${ space( 0.5 ) };
+	background: ${ COLORS.white };
+	border: 1px solid ${ COLORS.gray[ 900 ] };
+`;
+
+export const CustomSelectItem = styled( Ariakit.SelectItem )`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: ${ space( 2 ) };
+	&[data-active-item] {
+		background-color: ${ COLORS.gray[ 300 ] };
+	}
+`;
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
new file mode 100644
index 0000000000000..2aecc1d4746f5
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+export type CustomSelectContext =
+	| {
+			/**
+			 * The store object returned by Ariakit's `useSelectStore` hook.
+			 */
+			store: Ariakit.SelectStore;
+	  }
+	| undefined;
+
+export type CustomSelectProps = {
+	/**
+	 * The child elements. This should be composed of CustomSelectItem components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * An optional default value for the control. If left `undefined`, the first
+	 * non-disabled item will be used.
+	 */
+	defaultValue?: string | string[];
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange?: ( newValue: string | string[] ) => void;
+	/**
+	 * Can be used to render select UI with custom styled values.
+	 */
+	renderSelectedValue?: (
+		selectedValue: string | string[]
+	) => React.ReactNode;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: string | string[];
+};
+
+export type CustomSelectItemProps = {
+	/**
+	 * The value of the select item. This will be used as the children if
+	 * children are left `undefined`.
+	 */
+	value: string;
+	/**
+	 * The children to display for each select item. The `value` will be
+	 * used if left `undefined`.
+	 */
+	children?: React.ReactNode;
+};

From fef5de2f2dbd68af131dd7a8f69dd869e0cfe7a6 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 23 Nov 2023 17:33:05 -0500
Subject: [PATCH 44/51] Small tweaks to CreatePatternModal (#56016)

---
 .../src/components/post-sync-status/index.js  |  2 +-
 .../src/components/category-selector.js       |  1 +
 .../src/components/create-pattern-modal.js    |  7 ++++--
 packages/patterns/src/components/style.scss   | 23 ++++++++-----------
 .../reusable-block-convert-button.js          |  3 +--
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js
index c1a317e8e1812..9fa9f3181654e 100644
--- a/packages/editor/src/components/post-sync-status/index.js
+++ b/packages/editor/src/components/post-sync-status/index.js
@@ -113,7 +113,7 @@ export function PostSyncStatusModal() {
 									'Option that makes an individual pattern synchronized'
 								) }
 								help={ __(
-									'Editing the pattern will update it anywhere it is used.'
+									'Sync this pattern across multiple locations.'
 								) }
 								checked={ ! syncType }
 								onChange={ () => {
diff --git a/packages/patterns/src/components/category-selector.js b/packages/patterns/src/components/category-selector.js
index 7f00350e278ec..fdd56f159b092 100644
--- a/packages/patterns/src/components/category-selector.js
+++ b/packages/patterns/src/components/category-selector.js
@@ -61,6 +61,7 @@ export default function CategorySelector( {
 			tokenizeOnBlur
 			__experimentalExpandOnFocus
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 	);
 }
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
index f5e6e85b8602d..b12e4c9d21bed 100644
--- a/packages/patterns/src/components/create-pattern-modal.js
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -166,12 +166,13 @@ export default function CreatePatternModal( {
 			>
 				<VStack spacing="5">
 					<TextControl
-						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }
 						placeholder={ __( 'My pattern' ) }
 						className="patterns-create-modal__name-input"
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 					<CategorySelector
 						categoryTerms={ categoryTerms }
@@ -184,7 +185,7 @@ export default function CreatePatternModal( {
 							'Option that makes an individual pattern synchronized'
 						) }
 						help={ __(
-							'Editing the pattern will update it anywhere it is used.'
+							'Sync this pattern across multiple locations.'
 						) }
 						checked={ syncType === PATTERN_SYNC_TYPES.full }
 						onChange={ () => {
@@ -197,6 +198,7 @@ export default function CreatePatternModal( {
 					/>
 					<HStack justify="right">
 						<Button
+							__next40pxDefaultSize
 							variant="tertiary"
 							onClick={ () => {
 								onClose();
@@ -207,6 +209,7 @@ export default function CreatePatternModal( {
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							aria-disabled={ ! title || isSaving }
diff --git a/packages/patterns/src/components/style.scss b/packages/patterns/src/components/style.scss
index 12a6b380f646c..e913c924a2149 100644
--- a/packages/patterns/src/components/style.scss
+++ b/packages/patterns/src/components/style.scss
@@ -7,32 +7,27 @@
 	}
 
 	.patterns-menu-items__convert-modal-categories {
-		width: 100%;
 		position: relative;
-		min-height: 40px;
 	}
-	.components-form-token-field__suggestions-list {
+
+	.components-form-token-field__suggestions-list:not(:empty) {
 		position: absolute;
+		border: $border-width solid var(--wp-admin-theme-color);
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
+		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;
 		background-color: $white;
-		// Account for the border width of the token field.
-		width: calc(100% + 2px);
+		width: calc(100% + 2px); // Account for the border width of the token field.
 		left: -1px;
 		min-width: initial;
-		border: 1px solid var(--wp-admin-theme-color);
-		border-top: none;
-		box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
 	}
 }
 
 .patterns-create-modal__name-input input[type="text"] {
-	// Match the minimal height of the category selector.
-	min-height: 40px;
-	// Override the default 1px margin-x.
-	margin: 0;
+	margin: 0; // Override the default 1px margin-x.
 }
 
 .patterns-rename-pattern-category-modal__validation-message {
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index bb871b9c3153d..cf8b3d96c8d7e 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -183,14 +183,13 @@ export default function ReusableBlockConvertButton( {
 								onChange={ setTitle }
 								placeholder={ __( 'My pattern' ) }
 							/>
-
 							<ToggleControl
 								label={ _x(
 									'Synced',
 									'Option that makes an individual pattern synchronized'
 								) }
 								help={ __(
-									'Editing the pattern will update it anywhere it is used.'
+									'Sync this pattern across multiple locations.'
 								) }
 								checked={ ! syncType }
 								onChange={ () => {

From c58bb641945234a3d8505021dc3e4dde914ab724 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 23 Nov 2023 22:55:29 +0000
Subject: [PATCH 45/51] Bump plugin version to 17.1.2

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

diff --git a/gutenberg.php b/gutenberg.php
index a88e153766888..ca61f52f1afe4 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.2
  * Requires PHP: 7.0
- * Version: 17.1.1
+ * Version: 17.1.2
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index d82b2404c610e..b2deb50ef559f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "17.1.1",
+	"version": "17.1.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "17.1.1",
+			"version": "17.1.2",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index 960ccd074ae60..a7df84ea029a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "17.1.1",
+	"version": "17.1.2",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From d33755d50c2caf6fa0cf1140986b79d36f22512c Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 23 Nov 2023 23:09:20 +0000
Subject: [PATCH 46/51] Update Changelog for 17.1.2

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

diff --git a/changelog.txt b/changelog.txt
index b3750479e99fa..1814106e5e509 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,22 @@
 == Changelog ==
 
+= 17.1.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+- PostCSS style transformation: fail gracefully instead of throwing an error (https://github.com/WordPress/gutenberg/pull/56093)
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@zaguiini
+
+
 = 17.1.1 =
 
 # Changelog

From ab865c56e85a809c100927456a2a5497449ea163 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 24 Nov 2023 10:29:39 +1100
Subject: [PATCH 47/51] Core data: harmonize getRevision selector and resolver
 function signatures (#56416)

* Remove default value of query {} on getRevision. It messes up selector memoization since the function signatures are different.

* Resolve individual revisions as per `getEntityRecords`. This ensures that any subsequent calls to `getRevision` for revisions that we've already fetched via `getRevisions()` are marked as resolved and therefore do not trigger the resolver (and therefore an API call).

* Copy update.
Now that https://github.com/WordPress/gutenberg/pull/55827 has landed we can start supporting individual global styles URLs as well.

* While I'm here... :)
---
 packages/core-data/src/entities.js            |  8 ++++---
 .../core-data/src/queried-data/reducer.js     |  2 +-
 packages/core-data/src/resolvers.js           | 22 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index e85673492ef56..9f736af1c8378 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -209,10 +209,12 @@ export const rootEntitiesConfig = [
 		kind: 'root',
 		baseURL: '/wp/v2/global-styles',
 		baseURLParams: { context: 'edit' },
-		plural: 'globalStylesVariations', // Should be different than name.
+		plural: 'globalStylesVariations', // Should be different from name.
 		getTitle: ( record ) => record?.title?.rendered || record?.title,
-		getRevisionsUrl: ( parentId ) =>
-			`/wp/v2/global-styles/${ parentId }/revisions`,
+		getRevisionsUrl: ( parentId, revisionId ) =>
+			`/wp/v2/global-styles/${ parentId }/revisions${
+				revisionId ? '/' + revisionId : ''
+			}`,
 		supports: {
 			revisions: true,
 		},
diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js
index 3462f00b68569..1f9bb64c7889d 100644
--- a/packages/core-data/src/queried-data/reducer.js
+++ b/packages/core-data/src/queried-data/reducer.js
@@ -57,7 +57,7 @@ export function getMergedItemIds( itemIds, nextItemIds, page, perPage ) {
 	for ( let i = 0; i < size; i++ ) {
 		// Preserve existing item ID except for subset of range of next items.
 		// We need to check against the possible maximum upper boundary because
-		// a page could recieve less items than what was previously stored.
+		// a page could receive fewer than what was previously stored.
 		const isInNextItemsRange =
 			i >= nextItemIdsStartIndex && i < nextItemIdsStartIndex + perPage;
 		mergedItemIds[ i ] = isInNextItemsRange
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 8735764a880b8..6e821183e3116 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -801,6 +801,26 @@ export const getRevisions =
 			false,
 			meta
 		);
+
+		// When requesting all fields, the list of results can be used to
+		// resolve the `getRevision` selector in addition to `getRevisions`.
+		if ( ! query?._fields && ! query.context ) {
+			const key = entityConfig.key || DEFAULT_ENTITY_KEY;
+			const resolutionsArgs = records
+				.filter( ( record ) => record[ key ] )
+				.map( ( record ) => [ kind, name, recordKey, record[ key ] ] );
+
+			dispatch( {
+				type: 'START_RESOLUTIONS',
+				selectorName: 'getRevision',
+				args: resolutionsArgs,
+			} );
+			dispatch( {
+				type: 'FINISH_RESOLUTIONS',
+				selectorName: 'getRevision',
+				args: resolutionsArgs,
+			} );
+		}
 	};
 
 // Invalidate cache when a new revision is created.
@@ -823,7 +843,7 @@ getRevisions.shouldInvalidate = ( action, kind, name, recordKey ) =>
  *                                       fields, fields must always include the ID.
  */
 export const getRevision =
-	( kind, name, recordKey, revisionKey, query = {} ) =>
+	( kind, name, recordKey, revisionKey, query ) =>
 	async ( { dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
 		const entityConfig = configs.find(

From 45ffee3f35cb2209b23b67904b7d065804b6ebe3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 24 Nov 2023 13:35:31 +1100
Subject: [PATCH 48/51] Try updating base performance hash again.

---
 .github/workflows/performance.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index a30234e94360d..517febe9774a9 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -68,13 +68,13 @@ jobs:
             - name: Compare performance with base branch
               if: github.event_name == 'push'
               # The base hash used here need to be a commit that is compatible with the current WP version
-              # The current one is 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 and it needs to be updated every WP major release.
+              # The current one is b61dde2e5ec29d98801e623de968bfb286c5be3f and it needs to be updated every WP major release.
               # It is used as a base comparison point to avoid fluctuation in the performance metrics.
               run: |
                   WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf $GITHUB_SHA 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf $GITHUB_SHA b61dde2e5ec29d98801e623de968bfb286c5be3f --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
 
             - name: Compare performance with custom branches
               if: github.event_name == 'workflow_dispatch'
@@ -97,7 +97,7 @@ jobs:
                   CODEHEALTH_PROJECT_TOKEN: ${{ secrets.CODEHEALTH_PROJECT_TOKEN }}
               run: |
                   COMMITTED_AT=$(git show -s $GITHUB_SHA --format="%cI")
-                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA 7b2d078d4e0589d17e7a4e275d9f7e22d2cd89a4 $COMMITTED_AT
+                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA b61dde2e5ec29d98801e623de968bfb286c5be3f $COMMITTED_AT
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3

From c6e389078b42a4ecc2184a52d89d673436fa6cb3 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Fri, 24 Nov 2023 03:40:31 +0100
Subject: [PATCH 49/51] E2e tests: merge Puppeteer into single job, split
 Playwright further (#56363)

* E2e tests: merge Puppeteer into single job, split Playwright further

* Remove shard handling for Puppeteer

---------

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
---
 .github/workflows/end2end-test.yml | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 9bd6ba212f0d8..777549e334aa9 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -17,14 +17,11 @@ concurrency:
 
 jobs:
     e2e-puppeteer:
-        name: Puppeteer - ${{ matrix.part }}
+        name: Puppeteer
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
-            matrix:
-                part: [1, 2, 3]
-                totalParts: [3]
 
         steps:
             - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
@@ -43,8 +40,7 @@ jobs:
 
             - name: Running the tests
               run: |
-                  npx wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
-                  npx wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % ${{ matrix.totalParts }} == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
+                  npx wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache"
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
@@ -69,8 +65,8 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                part: [1, 2, 3, 4]
-                totalParts: [4]
+                part: [1, 2, 3, 4, 5, 6, 7, 8]
+                totalParts: [8]
 
         steps:
             - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1

From 55d0c8461971e607a05eb99073a3c43964c94f9f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 24 Nov 2023 02:49:28 +0000
Subject: [PATCH 50/51] Update data view menu item actions (#56398)

* Update data view menu item actions

* Small button size

* add specifc class to dropdown menu

* fix linting issue

---------

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
---
 .../components/sidebar-dataviews/custom-dataviews-list.js    | 2 ++
 .../edit-site/src/components/sidebar-dataviews/style.scss    | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index 12659a36bbf9b..0babb21ab2010 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -116,10 +116,12 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 					<DropdownMenu
 						icon={ moreVertical }
 						label={ __( 'Actions' ) }
+						className="edit-site-sidebar-dataviews-dataview-item__dropdown-menu"
 						toggleProps={ {
 							style: {
 								color: 'inherit',
 							},
+							size: 'small',
 						} }
 					>
 						{ ( { onClose } ) => (
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
index 6d8561dc8edca..9c5b8f48e944f 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/style.scss
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -9,6 +9,11 @@
 
 .edit-site-sidebar-dataviews-dataview-item {
 	border-radius: $radius-block-ui;
+	padding-right: $grid-unit-10;
+
+	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
+		min-width: initial;
+	}
 
 	&:hover,
 	&:focus,

From fce345dc4791e7d1b2362a6c5965785b0ab7441c Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 24 Nov 2023 16:31:19 +1100
Subject: [PATCH 51/51] isResolving wasn't updated in
 https://github.com/WordPress/gutenberg/pull/56349 (#56491)

This change does that
---
 .../use-global-styles-revisions.js            | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
index 0c293e417cf8e..bacc79a97cb6d 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -39,25 +39,26 @@ export default function useGlobalStylesRevisions() {
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		const _currentUser = getCurrentUser();
 		const _isDirty = dirtyEntityRecords.length > 0;
+		const query = {
+			per_page: 100,
+		};
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
 		const globalStylesRevisions =
-			getRevisions(
-				'root',
-				'globalStyles',
-				__experimentalGetCurrentGlobalStylesId(),
-				{
-					per_page: 100,
-				}
-			) || EMPTY_ARRAY;
+			getRevisions( 'root', 'globalStyles', globalStylesId, query ) ||
+			EMPTY_ARRAY;
 		const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
-
+		const _isResolving = isResolving( 'getRevisions', [
+			'root',
+			'globalStyles',
+			globalStylesId,
+			query,
+		] );
 		return {
 			authors: _authors,
 			currentUser: _currentUser,
 			isDirty: _isDirty,
 			revisions: globalStylesRevisions,
-			isLoadingGlobalStylesRevisions: isResolving(
-				'getCurrentThemeGlobalStylesRevisions'
-			),
+			isLoadingGlobalStylesRevisions: _isResolving,
 		};
 	}, [] );
 	return useMemo( () => {