From 0db2ddeb5860629c42b611e6b35316e401d1ba7f Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Dec 2022 05:42:22 +0900
Subject: [PATCH 001/209] Empty Theme: Add the `$schema` property in
 `theme.json` and rename template directories (#46300)

---
 test/emptytheme/{block-template-parts => parts}/header.html  | 0
 test/emptytheme/{block-templates => templates}/category.html | 0
 test/emptytheme/{block-templates => templates}/index.html    | 0
 test/emptytheme/{block-templates => templates}/singular.html | 0
 test/emptytheme/theme.json                                   | 1 +
 5 files changed, 1 insertion(+)
 rename test/emptytheme/{block-template-parts => parts}/header.html (100%)
 rename test/emptytheme/{block-templates => templates}/category.html (100%)
 rename test/emptytheme/{block-templates => templates}/index.html (100%)
 rename test/emptytheme/{block-templates => templates}/singular.html (100%)

diff --git a/test/emptytheme/block-template-parts/header.html b/test/emptytheme/parts/header.html
similarity index 100%
rename from test/emptytheme/block-template-parts/header.html
rename to test/emptytheme/parts/header.html
diff --git a/test/emptytheme/block-templates/category.html b/test/emptytheme/templates/category.html
similarity index 100%
rename from test/emptytheme/block-templates/category.html
rename to test/emptytheme/templates/category.html
diff --git a/test/emptytheme/block-templates/index.html b/test/emptytheme/templates/index.html
similarity index 100%
rename from test/emptytheme/block-templates/index.html
rename to test/emptytheme/templates/index.html
diff --git a/test/emptytheme/block-templates/singular.html b/test/emptytheme/templates/singular.html
similarity index 100%
rename from test/emptytheme/block-templates/singular.html
rename to test/emptytheme/templates/singular.html
diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
index ed2d7b8d0946aa..b28e6c9f274b2f 100644
--- a/test/emptytheme/theme.json
+++ b/test/emptytheme/theme.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,

From db830856f3dd5b843476c2769117bc2e1d4c07e7 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Dec 2022 06:16:10 +0900
Subject: [PATCH 002/209] Media & Text Block: create undo history when media
 width is changed (#46084)

---
 packages/block-library/src/media-text/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index b85249f3a74b27..83b7074e3d1550 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -199,7 +199,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( {
 			mediaWidth: applyWidthConstraints( width ),
 		} );
-		setTemporaryMediaWidth( applyWidthConstraints( width ) );
+		setTemporaryMediaWidth( null );
 	};
 
 	const classNames = classnames( {

From aba74e95fcf1b3784485bf4669f32681ec95a1df Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 8 Dec 2022 23:52:27 +0200
Subject: [PATCH 003/209] Block Editor: Fix `no-node-access` violations in
 `BlockSelectionClearer` (#46408)

---
 .../block-selection-clearer/test/index.js     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-selection-clearer/test/index.js b/packages/block-editor/src/components/block-selection-clearer/test/index.js
index 3886055aebaf4f..63e4a3fa2427c6 100644
--- a/packages/block-editor/src/components/block-selection-clearer/test/index.js
+++ b/packages/block-editor/src/components/block-selection-clearer/test/index.js
@@ -43,12 +43,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).toBeCalled();
 	} );
@@ -64,12 +64,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).toBeCalled();
 	} );
@@ -82,12 +82,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).not.toBeCalled();
 	} );
@@ -106,12 +106,12 @@ describe( 'BlockSelectionClearer component', () => {
 		} ) );
 
 		render(
-			<BlockSelectionClearer>
+			<BlockSelectionClearer data-testid="selection-clearer">
 				<button>Not a block</button>
 			</BlockSelectionClearer>
 		);
-		const button = screen.getByRole( 'button' );
-		fireEvent.mouseDown( button.parentElement );
+
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
 
 		expect( mockClearSelectedBlock ).not.toBeCalled();
 	} );

From 6c3bdc68a29788ab50744e3a0c64d6bcbc4c4e75 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 9 Dec 2022 07:09:57 +0900
Subject: [PATCH 004/209] Doc: Fix description and documentation for link color
 support (#46405)

---
 .../block-api/block-supports.md               | 31 ++++++-------------
 schemas/json/block.json                       |  2 +-
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
index f3d15f118ae8fa..68afd793231eff 100644
--- a/docs/reference-guides/block-api/block-supports.md
+++ b/docs/reference-guides/block-api/block-supports.md
@@ -351,36 +351,25 @@ supports: {
 Link color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).
 
 
-When the block declares support for `color.link`, the attributes definition is extended to include two new attributes: `linkColor` and `style`:
-
-- `linkColor`: attribute of `string` type with no default assigned.
-
-  When a user chooses from the list of preset link colors, the preset slug is stored in the `linkColor` attribute.
-
-  The block can apply a default preset text color by specifying its own attribute with a default e.g.:
-
-  ```js
-  attributes: {
-      linkColor: {
-          type: 'string',
-          default: 'some-preset-link-color-slug',
-      }
-  }
-  ```
+When the block declares support for `color.link`, the attributes definition is extended to include the `style` attribute:
 
 - `style`: attribute of `object` type with no default assigned.
 
-  When a custom link color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.link` attribute.
+  When a link color is selected, the color value is stored in the `style.elements.link.color.text` attribute.
 
-  The block can apply a default custom link color by specifying its own attribute with a default e.g.:
+  The block can apply a default link color by specifying its own attribute with a default e.g.:
 
   ```js
   attributes: {
       style: {
           type: 'object',
           default: {
-              color: {
-                  link: '#ff0000',
+              elements: {
+                  link: {
+                      color: {
+                          text: '#ff0000',
+                      }
+                  }
               }
           }
       }
@@ -583,7 +572,7 @@ attributes: {
 }
 ```
 
-A spacing property may define an array of allowable sides – 'top', 'right', 'bottom', 'left' – that can be configured. When such arbitrary sides are defined, only UI controls for those sides are displayed. 
+A spacing property may define an array of allowable sides – 'top', 'right', 'bottom', 'left' – that can be configured. When such arbitrary sides are defined, only UI controls for those sides are displayed.
 
 Axial sides are defined with the `vertical` and `horizontal` terms, and display a single UI control for each axial pair (for example, `vertical` controls both the top and bottom sides). A spacing property may support arbitrary individual sides **or** axial sides, but not a mix of both.
 
diff --git a/schemas/json/block.json b/schemas/json/block.json
index f23ef249577bd9..3a3726010d0b67 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -272,7 +272,7 @@
 						},
 						"link": {
 							"type": "boolean",
-							"description": "This property adds block controls which allow the user to set link color in a block, link color is disabled by default.\n\nLink color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.link, the attributes definition is extended to include two new attributes: linkColor and style",
+							"description": "This property adds block controls which allow the user to set link color in a block, link color is disabled by default.\n\nLink color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.link, the attributes definition is extended to include the style attribute",
 							"default": false
 						},
 						"text": {

From 3e435cd7c00267311afcf5f04b498b3a88cb1459 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Fri, 9 Dec 2022 09:15:21 +1100
Subject: [PATCH 005/209] Only pass parentLayout to block edit if not empty
 (#46390)

* Only pass parentLayout to block edit if not empty

* Make sure object.keys check doesn't error
---
 packages/block-editor/src/components/block-list/block.js   | 6 ++++--
 packages/block-editor/src/components/inner-blocks/index.js | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 70456ac213fc3b..3980dd7b2aead3 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -132,7 +132,7 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
-	const parentLayout = useLayout();
+	const parentLayout = useLayout() || {};
 
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
@@ -152,7 +152,9 @@ function BlockListBlock( {
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
 			__unstableLayoutClassNames={ layoutClassNames }
-			__unstableParentLayout={ parentLayout }
+			__unstableParentLayout={
+				Object.keys( parentLayout ).length ? parentLayout : undefined
+			}
 		/>
 	);
 
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 80362754a394fd..4542afc797462a 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -112,7 +112,9 @@ function UncontrolledInnerBlocks( props ) {
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
 				__experimentalLayout={ {
 					...__experimentalLayout,
-					allowSizingOnChildren,
+					...( allowSizingOnChildren && {
+						allowSizingOnChildren: true,
+					} ),
 				} }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }

From 0afb8682f63fc97bc42620f64a740c21b4b8b53b Mon Sep 17 00:00:00 2001
From: Chintan hingrajiya <38949444+chintu51@users.noreply.github.com>
Date: Fri, 9 Dec 2022 03:50:25 +0530
Subject: [PATCH 006/209] Add missing useState import in color picker docs.
 (#42069)

---
 packages/components/src/color-picker/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
index 3aa595183ac735..05ebf9a1abfac6 100644
--- a/packages/components/src/color-picker/README.md
+++ b/packages/components/src/color-picker/README.md
@@ -6,6 +6,7 @@
 
 ```jsx
 import { ColorPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [color, setColor] = useState();

From 87344e71b463c6a74b5a532e7f6dfcbd0a5f85d6 Mon Sep 17 00:00:00 2001
From: Chintan hingrajiya <38949444+chintu51@users.noreply.github.com>
Date: Fri, 9 Dec 2022 03:52:10 +0530
Subject: [PATCH 007/209] Add missing useState import in confirm dialog docs.
 (#42071)

---
 packages/components/src/confirm-dialog/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md
index 5ed36534898490..9274a8fa2eaea1 100644
--- a/packages/components/src/confirm-dialog/README.md
+++ b/packages/components/src/confirm-dialog/README.md
@@ -44,6 +44,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 
 ```jsx
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );

From e641c4a41882c03d41bda1feee3099f3b906ee5d Mon Sep 17 00:00:00 2001
From: Chintan hingrajiya <38949444+chintu51@users.noreply.github.com>
Date: Fri, 9 Dec 2022 03:53:53 +0530
Subject: [PATCH 008/209] Add missing useState import in BorderBoxControl
 documentation. (#42067)

---
 .../src/border-box-control/border-box-control/README.md          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index ce0c3a9ebc7054..4efe365cb50b7b 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -29,6 +29,7 @@ show "Mixed" placeholder text.
 ```jsx
 import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 const colors = [
 	{ name: 'Blue 20', color: '#72aee6' },

From 4c057c4da43a4164856a5e483fbf7a7a92e84d46 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 8 Dec 2022 22:30:30 +0000
Subject: [PATCH 009/209] Bump plugin version to 14.7.1

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

diff --git a/gutenberg.php b/gutenberg.php
index dcb8b7a511da1f..c5f94c50522dbd 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.7.0
+ * Version: 14.7.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 92dcebbe946dd4..72f8cef95c9aca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.0",
+	"version": "14.7.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index da5cd3a9367137..386b7b6314b0fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.0",
+	"version": "14.7.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 11e429a0f88e033e23454b7fab6aad64bad9799c Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Thu, 8 Dec 2022 22:45:30 +0000
Subject: [PATCH 010/209] Update Changelog for 14.7.1

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

diff --git a/changelog.txt b/changelog.txt
index 2ed8e64f0d1691..5427245e8d4688 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,23 @@
 == Changelog ==
 
+= 14.7.1 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Layout
+- Only pass parentLayout to block edit if not empty. ([46390](https://github.com/WordPress/gutenberg/pull/46390))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@tellthemachines
+
+
 = 14.7.0 =
 
 

From 2226a5e9574c0456087f4c22b209fe7b84081e89 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 9 Dec 2022 12:34:41 +1100
Subject: [PATCH 011/209] Block editor: hide fixed contextual toolbar (#46298)

* Hide contextual block toolbar if no blocks are selected. This is because it creates a large, empty space at the top of the page, taking up room in mobile and showing an empty space in the site editor view mode.

* Revert hiding toolbar editor-wide
Temporary CSS rule to hide the contextual toolbar in view mode for the site editor
---
 .../edit-site/src/components/block-editor/index.js  |  2 ++
 .../src/components/block-editor/style.scss          | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index b3b2b9212fd6bc..6ea9b01d7ce7e2 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -180,6 +180,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		canvasMode !== 'view' &&
 		// Disable resizing in mobile viewport.
 		! isMobileViewport;
+	const isViewMode = canvasMode === 'view';
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
@@ -243,6 +244,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						<BlockTools
 							className={ classnames( 'edit-site-visual-editor', {
 								'is-focus-mode': isTemplatePart || !! styleBook,
+								'is-view-mode': isViewMode,
 							} ) }
 							__unstableContentRef={ contentRef }
 							onClick={ ( event ) => {
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 76ddabe01adc6f..f767c650d5ce75 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -49,6 +49,19 @@
 		// Removing this will cancel the bottom margins in the iframe.
 		overflow: auto;
 	}
+
+	/*
+		Temporary to hide the contextual toolbar in view mode.
+		See: https://github.com/WordPress/gutenberg/pull/46298
+		This rule can possibly be removed once the
+		contextual toolbar has been redesigned.
+		See: https://github.com/WordPress/gutenberg/issues/40450
+	*/
+	&.is-view-mode {
+		.block-editor-block-contextual-toolbar {
+			display: none;
+		}
+	}
 }
 
 .edit-site-visual-editor__back-button {

From 3cb388172d6024c65807f14b33ab5bfa06715b2a Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Thu, 8 Dec 2022 23:03:54 -0300
Subject: [PATCH 012/209] WP Webfonts: avoid duplicated font families if the
 font family name was defined using fallback values. (#46378)

* WP Webfonts: avoid duplicated font families if the font family name was defined using fallback values.

* lint

* get_font_slug: if font slug is defined it returns the slug

* format
---
 lib/experimental/class-wp-webfonts.php | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/experimental/class-wp-webfonts.php b/lib/experimental/class-wp-webfonts.php
index e40aca9e8671f8..0c0cb06a27ffb3 100644
--- a/lib/experimental/class-wp-webfonts.php
+++ b/lib/experimental/class-wp-webfonts.php
@@ -178,7 +178,9 @@ public function enqueue_webfont( $font_family_name ) {
 	 */
 	public static function get_font_slug( $to_convert ) {
 		if ( is_array( $to_convert ) ) {
-			if ( isset( $to_convert['font-family'] ) ) {
+			if ( isset( $to_convert['slug'] ) ) {
+				return $to_convert['slug'];
+			} elseif ( isset( $to_convert['font-family'] ) ) {
 				$to_convert = $to_convert['font-family'];
 			} elseif ( isset( $to_convert['fontFamily'] ) ) {
 				$to_convert = $to_convert['fontFamily'];
@@ -188,6 +190,11 @@ public static function get_font_slug( $to_convert ) {
 			}
 		}
 
+		// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
+		if ( strpos( $to_convert, ',' ) !== false ) {
+			$to_convert = explode( ',', $to_convert )[0];
+		}
+
 		return sanitize_title( $to_convert );
 	}
 

From 7c927d0a0c0273795e10207ab23caceeaeffe90c Mon Sep 17 00:00:00 2001
From: Derek Blank <derekpblank@gmail.com>
Date: Fri, 9 Dec 2022 12:10:27 +1000
Subject: [PATCH 013/209] Mobile Release v1.86.0 (#46389)

* Release script: Update react-native-editor version to 1.86.0

* Release script: Update with changes from 'npm run core preios'

* Update CHANGELOG
---
 packages/react-native-aztec/package.json      |  2 +-
 packages/react-native-bridge/package.json     |  2 +-
 packages/react-native-editor/CHANGELOG.md     |  3 +++
 packages/react-native-editor/ios/Podfile.lock | 14 +++++++-------
 packages/react-native-editor/package.json     |  2 +-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index dfaa2409c5955c..ba382a39b52aa5 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.85.1",
+	"version": "1.86.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index c774196860c911..4458cfeb3a3051 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-bridge",
-	"version": "1.85.1",
+	"version": "1.86.0",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 374e297fc6d2a9..5551a5344dab96 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,9 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+
+## 1.86.0
+-   [**] Upgrade React Native to 0.69.4 [#43485]
 -   [**] Prevent error message from unneccesarily firing when uploading to Gallery block [#46175]
 
 ## 1.85.0
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 3a97ea92fe7697..e376938d797c9b 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.69.4)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.85.1):
+  - Gutenberg (1.86.0):
     - React-Core (= 0.69.4)
     - React-CoreModules (= 0.69.4)
     - React-RCTImage (= 0.69.4)
@@ -362,7 +362,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6):
     - React-Core
-  - RNTAztecView (1.85.1):
+  - RNTAztecView (1.86.0):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.8)
   - SDWebImage (5.11.1):
@@ -540,14 +540,14 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BVLinearGradient: ace34fab72158c068ae989a0ebdbf86cb4ef0e49
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: c71b8c429a8af2aff1013934a7152e9d9d0c937d
   FBReactNativeSpec: 2ff441cbe6e58c1778d8a5cf3311831a6a8c0809
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
-  Gutenberg: 3030a119b01cbfa29925327398a7cfaa63c9bfc7
+  glog: 5337263514dd6f09803962437687240c5dc39aa4
+  Gutenberg: 943a12eae51ca3dcda2ef86b4efe4f4a23854763
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
-  RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
+  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
   RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4
   RCTTypeSafety: e44e139bf6ec8042db396201834fc2372f6a21cd
   React: 482cd1ba23c471be1aed3800180be2427418d7be
@@ -588,7 +588,7 @@ SPEC CHECKSUMS:
   RNReanimated: 8b189a09da0345d84b33b8cde57a57f8ed847352
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 0d144de38c612c41953b2222f6facdcdae67fca8
+  RNTAztecView: 634d437faf2908196c7d1237c210936466d6a37d
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index c20912d7e88026..52311f5aea4b00 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.85.1",
+	"version": "1.86.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

From 82680ec3c959fcff039f5f9887eb3e43791e88c4 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri, 9 Dec 2022 09:07:06 +0200
Subject: [PATCH 014/209] Block Editor: Fix no-node-access violations in
 BlockPreview (#46409)

---
 .../components/block-preview/test/index.js    | 53 +++++++------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/test/index.js b/packages/block-editor/src/components/block-preview/test/index.js
index b83bef8a1453b1..8687f2e066db51 100644
--- a/packages/block-editor/src/components/block-preview/test/index.js
+++ b/packages/block-editor/src/components/block-preview/test/index.js
@@ -17,36 +17,6 @@ import {
  */
 import { useBlockPreview } from '../';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
-
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( ...arguments );
-				},
-			},
-		},
-	};
-} );
-
 jest.useRealTimers();
 
 describe( 'useBlockPreview', () => {
@@ -78,14 +48,19 @@ describe( 'useBlockPreview', () => {
 			blocks,
 			props: { className },
 		} );
-		return <div { ...blockPreviewProps } />;
+		return (
+			<div
+				{ ...blockPreviewProps }
+				data-testid="block-preview-component"
+			/>
+		);
 	}
 
 	it( 'will render a block preview with minimal nesting', async () => {
 		const blocks = [];
 		blocks.push( createBlock( 'core/test-block' ) );
 
-		const { container } = render(
+		render(
 			<BlockPreviewComponent
 				className="test-container-classname"
 				blocks={ blocks }
@@ -99,12 +74,20 @@ describe( 'useBlockPreview', () => {
 		);
 		expect( previewedBlockContents ).toBeInTheDocument();
 
+		const blockPreviewComponent = screen.getByTestId(
+			'block-preview-component'
+		);
+
 		// Ensure the block preview class names are merged with the component's class name.
-		expect( container.firstChild.className ).toBe(
-			'test-container-classname block-editor-block-preview__live-content components-disabled'
+		expect( blockPreviewComponent ).toHaveClass(
+			'block-editor-block-preview__live-content'
+		);
+		expect( blockPreviewComponent ).toHaveClass(
+			'test-container-classname'
 		);
+		expect( blockPreviewComponent ).toHaveClass( 'components-disabled' );
 
 		// Ensure there is no nesting between the parent component and rendered blocks.
-		expect( container.firstChild.firstChild ).toBe( previewedBlock );
+		expect( blockPreviewComponent ).toContainElement( previewedBlock );
 	} );
 } );

From da8c004b6792f968eb49d9a964f9ef466aa0ac46 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Dec 2022 11:09:29 +0400
Subject: [PATCH 015/209] Group: Remove unnecessary 'useCallback' (#46418)

---
 packages/block-library/src/group/edit.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 7c324d76c587d3..8962d8a8a3bf16 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -12,7 +12,6 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -123,13 +122,10 @@ function GroupEdit( {
 	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const updateSelection = useCallback(
-		( newClientId ) => selectBlock( newClientId, -1 ),
-		[ selectBlock ]
-	);
+
 	const selectVariation = ( nextVariation ) => {
 		setAttributes( nextVariation.attributes );
-		updateSelection( clientId );
+		selectBlock( clientId, -1 );
 		setShowPlaceholder( false );
 	};
 

From cdf49b370877fdff6e05f1401eebe16d407a7a77 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Dec 2022 12:45:18 +0400
Subject: [PATCH 016/209] Template Parts: Remove unnecessary 'useCallback'
 (#46420)

---
 .../block-library/src/template-part/edit/selection-modal.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/selection-modal.js b/packages/block-library/src/template-part/edit/selection-modal.js
index 7a544d9898ff1a..9a83914ddb4241 100644
--- a/packages/block-library/src/template-part/edit/selection-modal.js
+++ b/packages/block-library/src/template-part/edit/selection-modal.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
@@ -57,7 +57,7 @@ export default function TemplatePartSelectionModal( {
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const onTemplatePartSelect = useCallback( ( templatePart ) => {
+	const onTemplatePartSelect = ( templatePart ) => {
 		setAttributes( {
 			slug: templatePart.slug,
 			theme: templatePart.theme,
@@ -74,7 +74,7 @@ export default function TemplatePartSelectionModal( {
 			}
 		);
 		onClose();
-	}, [] );
+	};
 
 	const createFromBlocks = useCreateTemplatePartFromBlocks(
 		area,

From 04bfaad266a54d16dbf554cfa9a536daff03ef67 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Fri, 9 Dec 2022 10:54:47 +0200
Subject: [PATCH 017/209] Rich text: add button to clear unknown format
 (#44086)

---
 .../rich-text/format-toolbar/index.js         |  2 +-
 .../format-library/src/default-formats.js     |  2 +
 packages/format-library/src/unknown/index.js  | 42 +++++++++++++++++++
 packages/rich-text/src/create.js              | 23 +++++-----
 .../src/remove-unregistered-formatting.js     |  0
 packages/rich-text/src/store/selectors.js     | 12 ++++--
 packages/rich-text/src/test/helpers/index.js  |  4 ++
 packages/rich-text/src/to-tree.js             |  8 +++-
 .../specs/editor/plugins/format-api.spec.js   | 22 ++++++++++
 9 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 packages/format-library/src/unknown/index.js
 create mode 100644 packages/rich-text/src/remove-unregistered-formatting.js

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index 7817fc284ae520..445cd38b4cc1de 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -23,7 +23,7 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
+			{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }
diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js
index 412ae23f4b686d..791cabb1f118e4 100644
--- a/packages/format-library/src/default-formats.js
+++ b/packages/format-library/src/default-formats.js
@@ -12,6 +12,7 @@ import { textColor } from './text-color';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
+import { unknown } from './unknown';
 
 export default [
 	bold,
@@ -25,4 +26,5 @@ export default [
 	subscript,
 	superscript,
 	keyboard,
+	unknown,
 ];
diff --git a/packages/format-library/src/unknown/index.js b/packages/format-library/src/unknown/index.js
new file mode 100644
index 00000000000000..68c6d099fcad1f
--- /dev/null
+++ b/packages/format-library/src/unknown/index.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { removeFormat, slice } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { help } from '@wordpress/icons';
+
+const name = 'core/unknown';
+const title = __( 'Clear Unknown Formatting' );
+
+export const unknown = {
+	name,
+	title,
+	tagName: '*',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		function onClick() {
+			onChange( removeFormat( value, name ) );
+			onFocus();
+		}
+
+		const selectedValue = slice( value );
+		const hasUnknownFormats = selectedValue.formats.some( ( formats ) => {
+			return formats.some( ( format ) => format.type === name );
+		} );
+
+		if ( ! isActive && ! hasUnknownFormats ) {
+			return null;
+		}
+
+		return (
+			<RichTextToolbarButton
+				name="unknown"
+				icon={ help }
+				title={ title }
+				onClick={ onClick }
+				isActive={ true }
+			/>
+		);
+	},
+};
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index b9b31e14762573..7fdcf8adba7628 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -43,7 +43,7 @@ function createEmptyValue() {
 	};
 }
 
-function toFormat( { type, attributes } ) {
+function toFormat( { tagName, attributes } ) {
 	let formatType;
 
 	if ( attributes && attributes.class ) {
@@ -65,11 +65,11 @@ function toFormat( { type, attributes } ) {
 
 	if ( ! formatType ) {
 		formatType =
-			select( richTextStore ).getFormatTypeForBareElement( type );
+			select( richTextStore ).getFormatTypeForBareElement( tagName );
 	}
 
 	if ( ! formatType ) {
-		return attributes ? { type, attributes } : { type };
+		return attributes ? { type: tagName, attributes } : { type: tagName };
 	}
 
 	if (
@@ -80,7 +80,7 @@ function toFormat( { type, attributes } ) {
 	}
 
 	if ( ! attributes ) {
-		return { type: formatType.name };
+		return { type: formatType.name, tagName };
 	}
 
 	const registeredAttributes = {};
@@ -115,6 +115,7 @@ function toFormat( { type, attributes } ) {
 
 	return {
 		type: formatType.name,
+		tagName,
 		attributes: registeredAttributes,
 		unregisteredAttributes,
 	};
@@ -368,7 +369,7 @@ function createFromElement( {
 	// Optimise for speed.
 	for ( let index = 0; index < length; index++ ) {
 		const node = element.childNodes[ index ];
-		const type = node.nodeName.toLowerCase();
+		const tagName = node.nodeName.toLowerCase();
 
 		if ( node.nodeType === node.TEXT_NODE ) {
 			let filter = removeReservedCharacters;
@@ -398,19 +399,19 @@ function createFromElement( {
 			// Ignore any placeholders.
 			( node.getAttribute( 'data-rich-text-placeholder' ) ||
 				// Ignore any line breaks that are not inserted by us.
-				( type === 'br' &&
+				( tagName === 'br' &&
 					! node.getAttribute( 'data-rich-text-line-break' ) ) )
 		) {
 			accumulateSelection( accumulator, node, range, createEmptyValue() );
 			continue;
 		}
 
-		if ( type === 'script' ) {
+		if ( tagName === 'script' ) {
 			const value = {
 				formats: [ , ],
 				replacements: [
 					{
-						type,
+						type: tagName,
 						attributes: {
 							'data-rich-text-script':
 								node.getAttribute( 'data-rich-text-script' ) ||
@@ -425,20 +426,20 @@ function createFromElement( {
 			continue;
 		}
 
-		if ( type === 'br' ) {
+		if ( tagName === 'br' ) {
 			accumulateSelection( accumulator, node, range, createEmptyValue() );
 			mergePair( accumulator, create( { text: '\n' } ) );
 			continue;
 		}
 
 		const format = toFormat( {
-			type,
+			tagName,
 			attributes: getAttributes( { element: node } ),
 		} );
 
 		if (
 			multilineWrapperTags &&
-			multilineWrapperTags.indexOf( type ) !== -1
+			multilineWrapperTags.indexOf( tagName ) !== -1
 		) {
 			const value = createFromMultilineElement( {
 				element: node,
diff --git a/packages/rich-text/src/remove-unregistered-formatting.js b/packages/rich-text/src/remove-unregistered-formatting.js
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/rich-text/src/store/selectors.js b/packages/rich-text/src/store/selectors.js
index 32a50cf89020d2..52aa4dead99bf7 100644
--- a/packages/rich-text/src/store/selectors.js
+++ b/packages/rich-text/src/store/selectors.js
@@ -37,9 +37,15 @@ export function getFormatType( state, name ) {
  * @return {?Object} Format type.
  */
 export function getFormatTypeForBareElement( state, bareElementTagName ) {
-	return getFormatTypes( state ).find( ( { className, tagName } ) => {
-		return className === null && bareElementTagName === tagName;
-	} );
+	const formatTypes = getFormatTypes( state );
+	return (
+		formatTypes.find( ( { className, tagName } ) => {
+			return className === null && bareElementTagName === tagName;
+		} ) ||
+		formatTypes.find( ( { className, tagName } ) => {
+			return className === null && '*' === tagName;
+		} )
+	);
 }
 
 /**
diff --git a/packages/rich-text/src/test/helpers/index.js b/packages/rich-text/src/test/helpers/index.js
index 96090ea64b51a4..15aa032978c66b 100644
--- a/packages/rich-text/src/test/helpers/index.js
+++ b/packages/rich-text/src/test/helpers/index.js
@@ -784,6 +784,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {},
 					},
@@ -808,6 +809,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {
 							class: 'test',
@@ -834,6 +836,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'core/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {
 							class: 'custom-format',
@@ -899,6 +902,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {},
 					},
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index 8b2397013de4d5..74cc08581e83c4 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -35,6 +35,7 @@ function restoreOnAttributes( attributes, isEditableTree ) {
  *
  * @param {Object}  $1                        Named parameters.
  * @param {string}  $1.type                   The format type.
+ * @param {string}  $1.tagName                The tag name.
  * @param {Object}  $1.attributes             The format attributes.
  * @param {Object}  $1.unregisteredAttributes The unregistered format
  *                                            attributes.
@@ -48,6 +49,7 @@ function restoreOnAttributes( attributes, isEditableTree ) {
  */
 function fromFormat( {
 	type,
+	tagName,
 	attributes,
 	unregisteredAttributes,
 	object,
@@ -100,7 +102,7 @@ function fromFormat( {
 	}
 
 	return {
-		type: formatType.tagName,
+		type: formatType.tagName === '*' ? tagName : formatType.tagName,
 		object: formatType.object,
 		attributes: restoreOnAttributes( elementAttributes, isEditableTree ),
 	};
@@ -241,7 +243,8 @@ export function toTree( {
 					return;
 				}
 
-				const { type, attributes, unregisteredAttributes } = format;
+				const { type, tagName, attributes, unregisteredAttributes } =
+					format;
 
 				const boundaryClass =
 					isEditableTree &&
@@ -253,6 +256,7 @@ export function toTree( {
 					parent,
 					fromFormat( {
 						type,
+						tagName,
 						attributes,
 						unregisteredAttributes,
 						boundaryClass,
diff --git a/test/e2e/specs/editor/plugins/format-api.spec.js b/test/e2e/specs/editor/plugins/format-api.spec.js
index a294a2034f0558..1b1d3b3d4173ff 100644
--- a/test/e2e/specs/editor/plugins/format-api.spec.js
+++ b/test/e2e/specs/editor/plugins/format-api.spec.js
@@ -34,6 +34,28 @@ test.describe( 'Using Format API', () => {
 		expect( content ).toBe(
 			`<!-- wp:paragraph -->
 <p>First <a href="https://example.com" class="my-plugin-link">paragraph</a></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should show unknow formatting button', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '<big>test</big>' },
+		} );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:paragraph -->
+<p><big>test</big></p>
+<!-- /wp:paragraph -->`
+		);
+		await page.keyboard.press( 'ArrowRight' );
+		await editor.clickBlockToolbarButton( 'Clear Unknown Formatting' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:paragraph -->
+<p>test</p>
 <!-- /wp:paragraph -->`
 		);
 	} );

From 299b85e17b564f1f993328fdb46d71e70bec9a2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 9 Dec 2022 10:32:14 +0100
Subject: [PATCH 018/209] Try template drill down on shell sidebar (browse
 mode) (#45100)

Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 packages/base-styles/_mixins.scss             |  33 ++++
 .../blocks/post-comments-form.test.js         |   7 +-
 .../src/components/layout/style.scss          |   4 +-
 .../sidebar-navigation-item/index.js          |  14 +-
 .../sidebar-navigation-item/style.scss        |  10 +-
 .../sidebar-navigation-root/index.js          |  86 ---------
 .../sidebar-navigation-root/style.scss        |   3 -
 .../sidebar-navigation-screen-main/index.js   |  72 ++++++++
 .../index.js                                  | 167 ++++++++++++++++++
 .../style.scss                                |   4 +
 .../sidebar-navigation-screen/index.js        |  55 ++++++
 .../sidebar-navigation-screen/style.scss      |  39 ++++
 .../sidebar-navigation-title/index.js         |  30 ----
 .../sidebar-navigation-title/style.scss       |  16 --
 .../edit-site/src/components/sidebar/index.js |  18 +-
 .../src/components/sidebar/style.scss         |   8 +-
 packages/edit-site/src/style.scss             |   4 +-
 17 files changed, 416 insertions(+), 154 deletions(-)
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-root/index.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-root/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen/style.scss
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-title/index.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-title/style.scss

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index fae5488e5e3d0c..9eee5820eba811 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -550,3 +550,36 @@
 	}
 	/* stylelint-enable function-comma-space-after */
 }
+
+@mixin custom-scrollbars-on-hover() {
+	visibility: hidden;
+
+	$handle-color: #757575;
+	$track-color: #1e1e1e;
+
+	// WebKit
+	&::-webkit-scrollbar {
+		width: 12px;
+		height: 12px;
+	}
+	&::-webkit-scrollbar-track {
+		background-color: $track-color;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-color: $handle-color;
+		border-radius: 8px;
+		border: 3px solid transparent;
+		background-clip: padding-box;
+	}
+
+	// Firefox 109+ and Chrome 111+
+	scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
+
+	&:hover,
+	&:focus,
+	& > * {
+		visibility: visible;
+	}
+}
diff --git a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
index 4253c38a3da049..5c36049468427a 100644
--- a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
@@ -27,9 +27,10 @@ describe( 'Post Comments Form', () => {
 				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
-			await expect( page ).toClick( '.components-heading > a', {
-				text: /singular/i,
-			} );
+			await expect( page ).toClick(
+				'.edit-site-sidebar-navigation-item',
+				{ text: /singular/i }
+			);
 			await enterEditMode();
 
 			// Insert post comments form
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 81c7c9869f8d99..de34bc008f739b 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -45,7 +45,9 @@
 .edit-site-layout__sidebar {
 	grid-area: sidebar;
 	z-index: 1;
-	padding-top: $grid-unit-80;
+	overflow-y: auto;
+	max-height: calc(100vh - #{$header-height});
+	@include custom-scrollbars-on-hover;
 
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
index a39ecfe7734bfc..fb5cfdf1b32f84 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -9,13 +9,14 @@ import classnames from 'classnames';
 import {
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
-	FlexItem,
+	FlexBlock,
 } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
+import { chevronRight, Icon } from '@wordpress/icons';
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
+	withChevron = false,
 	children,
 	...props
 } ) {
@@ -34,7 +35,14 @@ export default function SidebarNavigationItem( {
 						icon={ icon }
 						size={ 24 }
 					/>
-					<FlexItem>{ children }</FlexItem>
+					<FlexBlock>{ children }</FlexBlock>
+					{ withChevron && (
+						<Icon
+							style={ { fill: 'currentcolor' } }
+							icon={ chevronRight }
+							size={ 24 }
+						/>
+					) }
 				</HStack>
 			) }
 			{ ! icon && children }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 61885c0132fa28..7d77e2cb8b76db 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -1,9 +1,17 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
+	border-width: $border-width-tab;
 
 	&:hover,
-	&:focus,
+	&:focus {
+		color: $white;
+		background: $gray-800;
+		border-width: $border-width-tab;
+	}
+
 	&[aria-current] {
 		color: $white;
+		background: var(--wp-admin-theme-color);
+		border-width: $border-width-tab;
 	}
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-root/index.js b/packages/edit-site/src/components/sidebar-navigation-root/index.js
deleted file mode 100644
index 96c3a9324c0cfa..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-root/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	Button,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationTitle from '../sidebar-navigation-title';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
-
-export default function SidebarNavigationRoot() {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const templatesLink = useLink( {
-		postType: 'wp_template',
-		postId: undefined,
-	} );
-	const templatePartsLink = useLink( {
-		postType: 'wp_template_part',
-		postId: undefined,
-	} );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isTemplatesPage =
-		params.postType === 'wp_template' && ! params.postId;
-	const isTemplatePartsPage =
-		params.postType === 'wp_template_part' && ! params.postId;
-
-	return (
-		<VStack spacing={ 6 }>
-			<SidebarNavigationTitle
-				title={
-					<HStack style={ { minHeight: 36 } }>
-						<div>{ __( 'Design' ) }</div>
-						{ ! isMobileViewport && isEditorPage && (
-							<Button
-								className="edit-site-layout__edit-button"
-								label={ __( 'Open the editor' ) }
-								onClick={ () => {
-									__unstableSetCanvasMode( 'edit' );
-								} }
-							>
-								{ __( 'Edit' ) }
-							</Button>
-						) }
-					</HStack>
-				}
-			/>
-			<nav className="edit-site-sidebar-navigation-root">
-				<ItemGroup>
-					<SidebarNavigationItem
-						{ ...templatesLink }
-						icon={ layout }
-						aria-current={ isTemplatesPage ? 'page' : undefined }
-					>
-						{ __( 'Templates' ) }
-					</SidebarNavigationItem>
-					<SidebarNavigationItem
-						{ ...templatePartsLink }
-						icon={ symbolFilled }
-						aria-current={
-							isTemplatePartsPage ? 'page' : undefined
-						}
-					>
-						{ __( 'Template Parts' ) }
-					</SidebarNavigationItem>
-				</ItemGroup>
-			</nav>
-		</VStack>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-root/style.scss b/packages/edit-site/src/components/sidebar-navigation-root/style.scss
deleted file mode 100644
index 7d2efc6efeb292..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-root/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-site-sidebar-navigation-root {
-	margin: 0 $button-size;
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
new file mode 100644
index 00000000000000..9a7b4479c972bc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalNavigatorButton as NavigatorButton,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbolFilled } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+
+export default function SidebarNavigationScreenMain() {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	return (
+		<SidebarNavigationScreen
+			path="/"
+			title={
+				<HStack style={ { minHeight: 36 } }>
+					<div>{ __( 'Design' ) }</div>
+					{ ! isMobileViewport && isEditorPage && (
+						<Button
+							className="edit-site-layout__edit-button"
+							label={ __( 'Open the editor' ) }
+							onClick={ () => {
+								__unstableSetCanvasMode( 'edit' );
+							} }
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					) }
+				</HStack>
+			}
+			content={
+				<ItemGroup>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/templates"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</NavigatorButton>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/template-parts"
+						withChevron
+						icon={ symbolFilled }
+					>
+						{ __( 'Template Parts' ) }
+					</NavigatorButton>
+				</ItemGroup>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
new file mode 100644
index 00000000000000..f807c2bacd62a6
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
+
+const Item = ( { item } ) => {
+	const linkInfo = useLink( item.params );
+	const props = item.params
+		? { ...omit( item, 'params' ), ...linkInfo }
+		: item;
+	return <SidebarNavigationItem { ...props } />;
+};
+
+const config = {
+	wp_template: {
+		path: '/templates',
+		labels: {
+			title: __( 'Templates' ),
+			loading: __( 'Loading templates' ),
+			notFound: __( 'No templates found' ),
+			manage: __( 'Manage all templates' ),
+		},
+	},
+	wp_template_part: {
+		path: '/template-parts',
+		labels: {
+			title: __( 'Template parts' ),
+			loading: __( 'Loading template parts' ),
+			notFound: __( 'No template parts found' ),
+			manage: __( 'Manage all template parts' ),
+		},
+	},
+};
+
+export default function SidebarNavigationScreenTemplates( {
+	postType = 'wp_template',
+} ) {
+	const { params } = useLocation();
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+
+	// Ideally the URL params would be enough.
+	// Loading the editor should ideally redirect to the home page
+	// instead of fetching the edited entity here.
+	const { editedPostId, editedPostType } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		return {
+			editedPostId: getEditedPostId(),
+			editedPostType: getEditedPostType(),
+		};
+	}, [] );
+
+	const { records: templates, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		postType,
+		{
+			per_page: -1,
+		}
+	);
+
+	let items = [];
+	if ( isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.loading,
+			},
+		];
+	} else if ( ! templates && ! isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.notFound,
+			},
+		];
+	} else {
+		items = templates?.map( ( template ) => ( {
+			params: {
+				postType,
+				postId: template.id,
+			},
+			children: decodeEntities(
+				template.title?.rendered || template.slug
+			),
+			'aria-current':
+				( params.postType === postType &&
+					params.postId === template.id ) ||
+				// This is a special case for the home page.
+				( editedPostId === template.id &&
+					editedPostType === postType &&
+					!! params.postId )
+					? 'page'
+					: undefined,
+		} ) );
+	}
+
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			parentTitle={ __( 'Design' ) }
+			title={
+				<HStack style={ { minHeight: 36 } }>
+					<div>{ config[ postType ].labels.title }</div>
+					{ ! isMobileViewport && isEditorPage && (
+						<Button
+							className="edit-site-layout__edit-button"
+							label={ __( 'Open the editor' ) }
+							onClick={ () => {
+								__unstableSetCanvasMode( 'edit' );
+							} }
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					) }
+				</HStack>
+			}
+			content={
+				<>
+					<ItemGroup>
+						{ items.map( ( item, index ) => (
+							<Item item={ item } key={ index } />
+						) ) }
+
+						<SidebarNavigationItem
+							className="edit-site-sidebar-navigation-screen-templates__see-all"
+							{ ...useLink( {
+								postType,
+								postId: undefined,
+							} ) }
+							aria-current={
+								params.postType === postType && ! params.postId
+									? 'page'
+									: undefined
+							}
+							children={ config[ postType ].labels.manage }
+						/>
+					</ItemGroup>
+				</>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
new file mode 100644
index 00000000000000..432774f903e465
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-templates__see-all {
+	/* Overrides the margin that comes from the Item component */
+	margin-top: $grid-unit-20 !important;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
new file mode 100644
index 00000000000000..7edca14681007d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+export default function SidebarNavigationScreen( {
+	path,
+	parentTitle,
+	title,
+	content,
+} ) {
+	return (
+		<NavigatorScreen
+			className="edit-site-sidebar-navigation-screen"
+			path={ path }
+		>
+			<VStack spacing={ 2 }>
+				<HStack
+					spacing={ 4 }
+					justify="flex-start"
+					className="edit-site-sidebar-navigation-screen__title-icon"
+				>
+					{ parentTitle ? (
+						<NavigatorBackButton
+							className="edit-site-sidebar-navigation-screen__back"
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							aria-label={ sprintf(
+								/* translators: %s: previous page. */
+								__( 'Navigate to the previous view: %s' ),
+								parentTitle
+							) }
+						/>
+					) : (
+						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
+					) }
+
+					<div className="edit-site-sidebar-navigation-screen__title">
+						{ title }
+					</div>
+				</HStack>
+
+				<nav className="edit-site-sidebar-navigation-screen__content">
+					{ content }
+				</nav>
+			</VStack>
+		</NavigatorScreen>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
new file mode 100644
index 00000000000000..e3044e95bbdd05
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -0,0 +1,39 @@
+.edit-site-sidebar-navigation-screen {
+	display: flex;
+	flex-direction: column;
+	overflow-x: unset !important;
+	position: relative;
+}
+
+.edit-site-sidebar-navigation-screen__content {
+	margin: 0 $button-size;
+	flex-grow: 1;
+	overflow-y: auto;
+}
+
+.edit-site-sidebar-navigation-screen__title-icon {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding-top: $grid-unit-80;
+	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
+	margin-bottom: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+}
+
+.edit-site-sidebar-navigation-screen__title {
+	font-size: calc(1.56 * 13px);
+	font-weight: 600;
+}
+
+.edit-site-sidebar-navigation-screen__back {
+	color: $gray-200;
+
+	&:hover {
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__icon-placeholder {
+	width: $button-size;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-title/index.js b/packages/edit-site/src/components/sidebar-navigation-title/index.js
deleted file mode 100644
index c233b06544ffe9..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-title/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-} from '@wordpress/components';
-import { isRTL, __, sprintf } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
-
-export default function SidebarNavigationTitle( { parentTitle, title } ) {
-	return (
-		<HStack spacing={ 4 } justify="flex-start">
-			{ parentTitle ? (
-				<NavigatorBackButton
-					className="edit-site-sidebar-navigation-title__back"
-					icon={ isRTL() ? chevronRight : chevronLeft }
-					aria-label={ sprintf(
-						/* translators: %s: previous page. */
-						__( 'Navigate to the previous view: %s' ),
-						parentTitle
-					) }
-				/>
-			) : (
-				<div className="edit-site-sidebar-navigation-title__icon-placeholder" />
-			) }
-			<div className="edit-site-sidebar-navigation-title">{ title }</div>
-		</HStack>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-title/style.scss b/packages/edit-site/src/components/sidebar-navigation-title/style.scss
deleted file mode 100644
index 0ac287fec2cdfa..00000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-title/style.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.edit-site-sidebar-navigation-title {
-	font-size: calc(1.56 * 13px);
-	font-weight: 600;
-}
-
-.edit-site-sidebar-navigation-title__back {
-	color: $gray-200;
-
-	&:hover {
-		color: $white;
-	}
-}
-
-.edit-site-sidebar-navigation-title__icon-placeholder {
-	width: $button-size;
-}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 578f13813305b9..154fa9c0a17b48 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -1,19 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import SidebarNavigationRoot from '../sidebar-navigation-root';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 
 export function Sidebar() {
 	return (
-		<VStack alignment="top" spacing={ 10 }>
-			<div className="edit-site-sidebar__content">
-				<SidebarNavigationRoot />
-			</div>
-		</VStack>
+		<NavigatorProvider
+			className="edit-site-sidebar__content"
+			initialPath="/"
+		>
+			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenTemplates postType="wp_template" />
+			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+		</NavigatorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index 3fbdfbafbe06f4..456a5bf9dc9de3 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -1,4 +1,8 @@
-.edit-site-sidebar__content {
+.edit-site-sidebar__content.edit-site-sidebar__content {
+	overflow-x: unset;
+}
+
+.edit-site-sidebar__content > div {
 	// This matches the logo padding
-	padding: $grid-unit-15;
+	padding: 0 $grid-unit-15;
 }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 9b871cff4f2d50..be5b51e16ea084 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -20,8 +20,8 @@
 @import "./components/layout/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
-@import "./components/sidebar-navigation-root/style.scss";
-@import "./components/sidebar-navigation-title/style.scss";
+@import "./components/sidebar-navigation-screen/style.scss";
+@import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 

From c48fec7da1c5e5e1a45c9f15a6eb98d5474ea0d2 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Dec 2022 13:36:57 +0400
Subject: [PATCH 019/209] Template Parts: Fix modal search stacking context
 (#46421)

---
 packages/base-styles/_z-index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 6ae833adde1c2e..ec3be48f1b9752 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -13,7 +13,7 @@ $z-layers: (
 	".edit-site-code-editor__toolbar": 1,
 
 	// These next three share a stacking context
-	".block-library-template-part__selection-search": 1, // higher sticky element
+	".block-library-template-part__selection-search": 2, // higher sticky element
 
 	// These next two share a stacking context
 	".interface-complementary-area .components-panel" : 0, // lower scrolling content

From b1a4b76864c319ec5a24780bff71202f26216a00 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 9 Dec 2022 12:09:54 +0200
Subject: [PATCH 020/209] [Block Library - Group]: Remove placeholder leftovers
 (#46423)

---
 .../block-library/src/group/placeholder.js    | 31 ++++---------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index 0f8fbc253c8986..daf535df8bf607 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -24,10 +24,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
 			</SVG>
 		),
 		'group-row': (
@@ -37,10 +34,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 		'group-stack': (
@@ -50,10 +44,7 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				height="32"
 				viewBox="0 0 44 32"
 			>
-				<Path
-					d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z"
-					// style="fill:#ccc"
-				/>
+				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
 	};
@@ -130,23 +121,13 @@ export function useShouldShowPlaceHolder( {
  * @return {JSX.Element}                The placeholder.
  */
 function GroupPlaceHolder( { name, onSelect } ) {
-	const { defaultVariation, variations } = useSelect(
-		( select ) => {
-			const { getBlockVariations, getDefaultBlockVariation } =
-				select( blocksStore );
-			return {
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: getBlockVariations( name, 'block' ) || [],
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const blockProps = useBlockProps( {
 		className: 'wp-block-group__placeholder',
 	} );
-	const selectVariation = ( nextVariation = defaultVariation ) =>
-		onSelect( nextVariation );
-
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -171,7 +152,7 @@ function GroupPlaceHolder( { name, onSelect } ) {
 									variation.name
 								) }
 								iconSize={ 44 }
-								onClick={ () => selectVariation( variation ) }
+								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }
 							/>

From 4bf53ef23e9dbefeebdac8a94b26c87e8eb2efce Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 9 Dec 2022 12:10:11 +0200
Subject: [PATCH 021/209] [Inserter]: Pattern title tooltip (#46419)

* [Inserter]: Try pattern title tooltip

* rename to `showTitlesAsTooltip`
---
 .../components/block-patterns-list/index.js   | 71 ++++++++++++-------
 .../components/inserter/block-patterns-tab.js |  5 ++
 .../src/components/inserter/menu.js           |  1 +
 .../src/components/inserter/style.scss        |  4 --
 4 files changed, 53 insertions(+), 28 deletions(-)

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 925410e760f6a4..12b1d362a24fa1 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -6,6 +6,7 @@ import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
+	Tooltip,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -16,7 +17,20 @@ import { __ } from '@wordpress/i18n';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 
-function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
+const WithToolTip = ( { showTooltip, title, children } ) => {
+	if ( showTooltip ) {
+		return <Tooltip text={ title }>{ children }</Tooltip>;
+	}
+	return <>{ children }</>;
+};
+
+function BlockPattern( {
+	isDraggable,
+	pattern,
+	onClick,
+	composite,
+	showTooltip,
+} ) {
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
@@ -34,30 +48,37 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
 				>
-					<CompositeItem
-						role="option"
-						as="div"
-						{ ...composite }
-						className="block-editor-block-patterns-list__item"
-						onClick={ () => onClick( pattern, blocks ) }
-						aria-label={ pattern.title }
-						aria-describedby={
-							pattern.description ? descriptionId : undefined
-						}
+					<WithToolTip
+						showTooltip={ showTooltip }
+						title={ pattern.title }
 					>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ viewportWidth }
-						/>
-						<div className="block-editor-block-patterns-list__item-title">
-							{ pattern.title }
-						</div>
-						{ !! pattern.description && (
-							<VisuallyHidden id={ descriptionId }>
-								{ pattern.description }
-							</VisuallyHidden>
-						) }
-					</CompositeItem>
+						<CompositeItem
+							role="option"
+							as="div"
+							{ ...composite }
+							className="block-editor-block-patterns-list__item"
+							onClick={ () => onClick( pattern, blocks ) }
+							aria-label={ pattern.title }
+							aria-describedby={
+								pattern.description ? descriptionId : undefined
+							}
+						>
+							<BlockPreview
+								blocks={ blocks }
+								viewportWidth={ viewportWidth }
+							/>
+							{ ! showTooltip && (
+								<div className="block-editor-block-patterns-list__item-title">
+									{ pattern.title }
+								</div>
+							) }
+							{ !! pattern.description && (
+								<VisuallyHidden id={ descriptionId }>
+									{ pattern.description }
+								</VisuallyHidden>
+							) }
+						</CompositeItem>
+					</WithToolTip>
 				</div>
 			) }
 		</InserterDraggableBlocks>
@@ -77,6 +98,7 @@ function BlockPatternList( {
 	onClickPattern,
 	orientation,
 	label = __( 'Block Patterns' ),
+	showTitlesAsTooltip,
 } ) {
 	const composite = useCompositeState( { orientation } );
 	return (
@@ -95,6 +117,7 @@ function BlockPatternList( {
 						onClick={ onClickPattern }
 						isDraggable={ isDraggable }
 						composite={ composite }
+						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index f4d22efa7f6fc6..a1e9c839894650 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -83,6 +83,7 @@ export function BlockPatternsCategoryDialog( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const container = useRef();
 
@@ -103,6 +104,7 @@ export function BlockPatternsCategoryDialog( {
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
 				category={ category }
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -112,6 +114,7 @@ export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
 	category,
+	showTitlesAsTooltip,
 } ) {
 	const [ allPatterns, , onClick ] = usePatternsState(
 		onInsert,
@@ -161,6 +164,7 @@ export function BlockPatternsCategoryPanel( {
 				orientation="vertical"
 				category={ category.label }
 				isDraggable
+				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
 		</div>
 	);
@@ -233,6 +237,7 @@ function BlockPatternsTabs( {
 							onInsert={ onInsert }
 							rootClientId={ rootClientId }
 							category={ category }
+							showTitlesAsTooltip={ false }
 						/>
 					) }
 				</MobileTabNavigation>
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 830374f3de5649..beb97af1466987 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -293,6 +293,7 @@ function InserterMenu(
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
 					category={ selectedPatternCategory }
+					showTitlesAsTooltip
 				/>
 			) }
 		</div>
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 9abce3edfaac57..fe2f49ad7c9a3f 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -316,10 +316,6 @@ $block-inserter-tabs-height: 44px;
 			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 		}
 	}
-
-	.block-editor-block-patterns-list__item-title {
-		display: none;
-	}
 }
 
 .block-editor-inserter__patterns-category-panel {

From 8810e56ccd4a8c131ef58f8910ebed905c593db9 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Dec 2022 14:32:39 +0400
Subject: [PATCH 022/209] Query: Cleanup variation picker component (#46424)

---
 .../src/query/edit/query-placeholder.js       | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index 8e1debe5341a61..fa1ef818e2f1f7 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -104,20 +104,8 @@ function QueryVariationPicker( {
 	icon,
 	label,
 } ) {
-	const { defaultVariation, scopeVariations } = useSelect(
-		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			return {
-				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				scopeVariations: getBlockVariations( name, 'block' ),
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
@@ -127,8 +115,8 @@ function QueryVariationPicker( {
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }
-				variations={ scopeVariations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
+				variations={ variations }
+				onSelect={ ( nextVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( {
 							...nextVariation.attributes,

From abc4dbdb36dbc8a1c93644569e506ddacb0a5fa5 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Fri, 9 Dec 2022 15:27:44 +0100
Subject: [PATCH 023/209] Check popover positioning by adding and testing
 is-positioned class (#46429)

---
 .../components/url-popover/test/__snapshots__/index.js.snap | 6 +++---
 packages/components/src/popover/index.tsx                   | 1 +
 .../src/components/dot-tip/test/__snapshots__/index.js.snap | 2 +-
 test/unit/config/matchers/to-be-positioned-popover.js       | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
index 023dd8769b783a..12c09f2c7c98ab 100644
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -4,7 +4,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >
@@ -52,7 +52,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >
@@ -107,7 +107,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 1d3b2af1dec1ae..c56d1f8475315a 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -472,6 +472,7 @@ const UnforwardedPopover = (
 			placement={ computedPlacement }
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
+				'is-positioned': x !== null && y !== null,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index 7d87549eac0aa1..876bae4b690887 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 exports[`DotTip should render correctly 1`] = `
 <div
   aria-label="Editor tips"
-  class="components-popover nux-dot-tip"
+  class="components-popover nux-dot-tip is-positioned"
   role="dialog"
   style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0; left: 0px; top: 0px;"
   tabindex="-1"
diff --git a/test/unit/config/matchers/to-be-positioned-popover.js b/test/unit/config/matchers/to-be-positioned-popover.js
index f646ff291d2131..526b8de49a7534 100644
--- a/test/unit/config/matchers/to-be-positioned-popover.js
+++ b/test/unit/config/matchers/to-be-positioned-popover.js
@@ -5,7 +5,7 @@
  * @param {HTMLElement} element Popover element.
  */
 function toBePositionedPopover( element ) {
-	const pass = element.style.top !== '' && element.style.left !== '';
+	const pass = element.classList.contains( 'is-positioned' );
 	return {
 		pass,
 		message: () => `Received element is ${ pass ? '' : 'not ' }positioned`,

From 2c570001ff9dda80b588989accdec221bb8fcc6b Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Fri, 9 Dec 2022 17:15:26 +0200
Subject: [PATCH 024/209] Site editor: do not remount iframe (#46431)

---
 packages/edit-site/src/components/block-editor/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 6ea9b01d7ce7e2..b2978267654e00 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -62,7 +62,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const {
 		storedSettings,
 		templateType,
-		templateId,
 		page,
 		isNavigationSidebarOpen,
 		canvasMode,
@@ -71,7 +70,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			const {
 				getSettings,
 				getEditedPostType,
-				getEditedPostId,
 				getPage,
 				__unstableGetCanvasMode,
 			} = select( editSiteStore );
@@ -79,7 +77,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
-				templateId: getEditedPostId(),
 				page: getPage(),
 				isNavigationSidebarOpen:
 					select( interfaceStore ).getActiveComplementaryArea(
@@ -257,8 +254,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 							<BlockEditorKeyboardShortcuts.Register />
 							<BackButton />
 							<ResizableEditor
-								// Reinitialize the editor and reset the states when the template changes.
-								key={ templateId }
 								enableResizing={ enableResizing }
 								height={ sizes.height }
 							>

From 783bb0834031f8ef8e29d00900d7e286fdf3f697 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 9 Dec 2022 17:51:50 +0000
Subject: [PATCH 025/209] Synced block hover styles in Inserter

---
 .../components/inserter-list-item/style.scss  | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 67e49db0d6c4d9..6dfc9ae199f5f4 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -3,9 +3,29 @@
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+
 	&.is-synced {
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
+		.components-button.block-editor-block-types-list__item {
+			&:not(:disabled) {
+				.block-editor-block-icon.has-colors {
+					color: var(--wp-block-synced-color);
+				}
+
+				&:hover {
+					.block-editor-block-types-list__item-title {
+						color: var(--wp-block-synced-color) !important;
+						filter: brightness(0.95);
+					}
+		
+					svg {
+						color: var(--wp-block-synced-color) !important;
+					}
+				}
+
+				&:after {
+					background: var(--wp-block-synced-color);
+				}
+			}
 		}
 	}
 }

From a0bb0514af10ed9926a440b6b15679e612d76c25 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 9 Dec 2022 17:52:23 +0000
Subject: [PATCH 026/209] Revert "Synced block hover styles in Inserter"

This reverts commit 783bb0834031f8ef8e29d00900d7e286fdf3f697.
---
 .../components/inserter-list-item/style.scss  | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 6dfc9ae199f5f4..67e49db0d6c4d9 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -3,29 +3,9 @@
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
-
 	&.is-synced {
-		.components-button.block-editor-block-types-list__item {
-			&:not(:disabled) {
-				.block-editor-block-icon.has-colors {
-					color: var(--wp-block-synced-color);
-				}
-
-				&:hover {
-					.block-editor-block-types-list__item-title {
-						color: var(--wp-block-synced-color) !important;
-						filter: brightness(0.95);
-					}
-		
-					svg {
-						color: var(--wp-block-synced-color) !important;
-					}
-				}
-
-				&:after {
-					background: var(--wp-block-synced-color);
-				}
-			}
+		.block-editor-block-icon.has-colors {
+			color: var(--wp-block-synced-color);
 		}
 	}
 }

From 157127d755dd01158a94a8d2c49b969e5405c0ea Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 9 Dec 2022 19:12:15 +0100
Subject: [PATCH 027/209] [Mobile] - Updates packages to not use Git HTTPS URLs
 (#46422)

- jsdom-jscore-rn to use the latest version that includes the commit hash we had
- react-native-hr to use a fork instead of a git https URL until we create our own component
---
 package-lock.json                         | 23 ++++++++++++-----------
 packages/react-native-editor/package.json |  4 ++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72f8cef95c9aca..bb28f83b398d20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19123,13 +19123,13 @@
 				"fast-average-color": "^9.1.1",
 				"gettext-parser": "^1.3.1",
 				"jed": "^1.1.1",
-				"jsdom-jscore-rn": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
+				"jsdom-jscore-rn": "0.1.8",
 				"node-fetch": "^2.6.0",
 				"react-native": "0.69.4",
 				"react-native-fast-image": "8.5.11",
 				"react-native-gesture-handler": "https://raw.githubusercontent.com/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-2/react-native-gesture-handler-2.3.2-wp-2.tgz",
 				"react-native-get-random-values": "1.4.0",
-				"react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
+				"react-native-hr": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
 				"react-native-hsv-color-picker": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz",
 				"react-native-keyboard-aware-scroll-view": "https://raw.githubusercontent.com/wordpress-mobile/react-native-keyboard-aware-scroll-view/v0.8.8-wp-1/react-native-keyboard-aware-scroll-view-0.8.8-wp-1.tgz",
 				"react-native-linear-gradient": "https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-3/react-native-linear-gradient-2.5.6-wp-3.tgz",
@@ -33118,9 +33118,9 @@
 			}
 		},
 		"domutils": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-			"integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+			"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
 			"requires": {
 				"dom-serializer": "0",
 				"domelementtype": "1"
@@ -35019,7 +35019,7 @@
 		"eventemitter2": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz",
-			"integrity": "sha1-+YNhBRexc3wLncZDvsqTiTwE3xg="
+			"integrity": "sha512-EUFhWUYzqqBZlzBMI+dPU8rnKXfQZEUnitnccQuEIAnvWFHCpt3+4fts2+4dpxLtlsiseVXCMFg37KjYChSxpg=="
 		},
 		"eventemitter3": {
 			"version": "4.0.7",
@@ -38257,7 +38257,7 @@
 		"htmlparser2-without-node-native": {
 			"version": "3.9.2",
 			"resolved": "https://registry.npmjs.org/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz",
-			"integrity": "sha1-s+0FDYd9D/NGWWnjOYd7f59mMfY=",
+			"integrity": "sha512-+FplQXqmY5fRx6vCIp2P5urWaoBCpTNJMXnKP/6mNCcyb+AZWWJzA8D03peXfozlxDL+vpgLK5dJblqEgu8j6A==",
 			"requires": {
 				"domelementtype": "^1.3.0",
 				"domhandler": "^2.3.0",
@@ -43564,8 +43564,9 @@
 			}
 		},
 		"jsdom-jscore-rn": {
-			"version": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
-			"from": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/jsdom-jscore-rn/-/jsdom-jscore-rn-0.1.8.tgz",
+			"integrity": "sha512-Sm0BCCQL3RRmJwztZa9B4QIOxgFOiu7vpsJjLsjG55HlRzOgUdmTOHrhV4SZkjXef5sBF+E8qKnrhsBUO7Gxjg==",
 			"requires": {
 				"htmlparser2-without-node-native": "^3.9.2",
 				"querystring": "^0.2.0"
@@ -53167,8 +53168,8 @@
 			"integrity": "sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g=="
 		},
 		"react-native-hr": {
-			"version": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
-			"from": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3"
+			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
+			"integrity": "sha512-iwKdUpLc7lGN0+yiVfKxvvouMEXJeR4sRmfXFKXNnWOaBRdcf412zPa5vK4yEGPh5s38GDR29jYMM/RRw5U4nw=="
 		},
 		"react-native-hsv-color-picker": {
 			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz",
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 52311f5aea4b00..0a4f901c8f1c49 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -54,13 +54,13 @@
 		"fast-average-color": "^9.1.1",
 		"gettext-parser": "^1.3.1",
 		"jed": "^1.1.1",
-		"jsdom-jscore-rn": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
+		"jsdom-jscore-rn": "0.1.8",
 		"node-fetch": "^2.6.0",
 		"react-native": "0.69.4",
 		"react-native-fast-image": "8.5.11",
 		"react-native-gesture-handler": "https://raw.githubusercontent.com/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-2/react-native-gesture-handler-2.3.2-wp-2.tgz",
 		"react-native-get-random-values": "1.4.0",
-		"react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
+		"react-native-hr": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
 		"react-native-hsv-color-picker": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz",
 		"react-native-keyboard-aware-scroll-view": "https://raw.githubusercontent.com/wordpress-mobile/react-native-keyboard-aware-scroll-view/v0.8.8-wp-1/react-native-keyboard-aware-scroll-view-0.8.8-wp-1.tgz",
 		"react-native-linear-gradient": "https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-3/react-native-linear-gradient-2.5.6-wp-3.tgz",

From b333d1d515c7fe91ec063112a6c178d5ed66b1e4 Mon Sep 17 00:00:00 2001
From: Michael Burridge <mburridge@zyriab.co.uk>
Date: Fri, 9 Dec 2022 20:48:11 +0000
Subject: [PATCH 028/209] Adds clarifications and clears up inaccuracies
 (#46283)

* Adds clarifications and clears up inaccuracies

* Add word: 'subsequently'

* Fixes typo

* Update docs/getting-started/create-block/attributes.md

Co-authored-by: Ryan Welcher <me@ryanwelcher.com>

Co-authored-by: Ryan Welcher <me@ryanwelcher.com>
---
 docs/getting-started/create-block/attributes.md    | 2 +-
 docs/getting-started/create-block/block-anatomy.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/getting-started/create-block/attributes.md b/docs/getting-started/create-block/attributes.md
index 5ec6f60c3d6a4d..02a55f380dcee1 100644
--- a/docs/getting-started/create-block/attributes.md
+++ b/docs/getting-started/create-block/attributes.md
@@ -23,7 +23,7 @@ Note: The text portion is equivalent to `innerText` attribute of a DOM element.
 
 ## Edit and Save
 
-The **attributes** are passed to the `edit` and `save` functions, along with a **setAttributes** function to set the values. Additional parameters are also passed in to these functions, see [the edit/save documentation](/docs/reference-guides/block-api/block-edit-save.md) for more details.
+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. Additional parameters are also passed in to the `edit` and `save` functions, see [the edit/save documentation](/docs/reference-guides/block-api/block-edit-save.md) for more details.
 
 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.
 
diff --git a/docs/getting-started/create-block/block-anatomy.md b/docs/getting-started/create-block/block-anatomy.md
index 3f43c018cea39c..83dbcf14696325 100644
--- a/docs/getting-started/create-block/block-anatomy.md
+++ b/docs/getting-started/create-block/block-anatomy.md
@@ -29,7 +29,7 @@ registerBlockType( metadata.name, {
 } );
 ```
 
-The first parameter in the **registerBlockType** function is the block name, this should match exactly to the name registered in the PHP file.
+The first parameter in the **registerBlockType** function is the block name, this should match exactly to the `name` property in the `block.json` file. By importing the metadata from `block.json` and referencing the `name` property in the first parameter we ensure that they will match, and continue to match even if the name is subsequently changed in `block.json`.
 
 The second parameter to the function is the block object. See the [block registration documentation](/docs/reference-guides/block-api/block-registration.md) for full details.
 
@@ -37,7 +37,7 @@ The last two block object properties are **edit** and **save**, these are the ke
 
 The results of the edit function is what the editor will render to the editor page when the block is inserted.
 
-The results of the save function is what the editor will insert into the **post_content** field when the post is saved. The post_content field is the field in the WordPress database used to store the content of the post.
+The results of the save function is what the editor will insert into the **post_content** field when the post is saved. The post_content field is the field in the **wp_posts** table in the WordPress database that is used to store the content of the post.
 
 Most of the properties are set in the `src/block.json` file.
 

From 5544df110c528521719180548d2dcd6198a2ef61 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 12 Dec 2022 00:05:16 +0000
Subject: [PATCH 029/209] Navigation: Add a 'open list view' button (#46335)

* Navigation: Add a 'open list view' button

* Remove invalid comment

* Update packages/edit-post/src/plugins/navigation-list-view-menu-item.js
---
 packages/edit-post/src/plugins/index.js       |  2 +
 .../plugins/navigation-list-view-menu-item.js | 56 +++++++++++++++++++
 .../src/components/block-editor/index.js      | 46 +++++----------
 3 files changed, 72 insertions(+), 32 deletions(-)
 create mode 100644 packages/edit-post/src/plugins/navigation-list-view-menu-item.js

diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index 94a5d4c98396cf..c0f3c5264596a0 100644
--- a/packages/edit-post/src/plugins/index.js
+++ b/packages/edit-post/src/plugins/index.js
@@ -14,6 +14,7 @@ import CopyContentMenuItem from './copy-content-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import NavigationListViewMenuItem from './navigation-list-view-menu-item';
 
 registerPlugin( 'edit-post', {
 	render() {
@@ -55,6 +56,7 @@ registerPlugin( 'edit-post', {
 						</>
 					) }
 				</ToolsMoreMenuGroup>
+				<NavigationListViewMenuItem />
 			</>
 		);
 	},
diff --git a/packages/edit-post/src/plugins/navigation-list-view-menu-item.js b/packages/edit-post/src/plugins/navigation-list-view-menu-item.js
new file mode 100644
index 00000000000000..18bb1bed3760ac
--- /dev/null
+++ b/packages/edit-post/src/plugins/navigation-list-view-menu-item.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	__unstableBlockToolbarLastItem,
+	__unstableBlockNameContext,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
+
+const NavMenuSidebarToggle = () => {
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				className="components-toolbar__control"
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () => openGeneralSidebar( 'edit-post/block' ) }
+				icon={ listView }
+			/>
+		</ToolbarGroup>
+	);
+};
+
+let MaybeNavMenuSidebarToggle = Fragment;
+
+const isOffCanvasNavigationEditorEnabled =
+	window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+if ( isOffCanvasNavigationEditorEnabled ) {
+	MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+}
+
+const NavigationEditMenuItem = () => {
+	return (
+		<BlockEditorProvider>
+			<__unstableBlockToolbarLastItem>
+				<__unstableBlockNameContext.Consumer>
+					{ ( blockName ) =>
+						blockName === 'core/navigation' && (
+							<MaybeNavMenuSidebarToggle />
+						)
+					}
+				</__unstableBlockNameContext.Consumer>
+			</__unstableBlockToolbarLastItem>
+		</BlockEditorProvider>
+	);
+};
+
+export default NavigationEditMenuItem;
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index b2978267654e00..4dbebdf1ea8bb7 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -35,7 +35,6 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { listView } from '@wordpress/icons';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -56,16 +55,8 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const {
-		storedSettings,
-		templateType,
-		page,
-		isNavigationSidebarOpen,
-		canvasMode,
-	} = useSelect(
+	const { storedSettings, templateType, page, canvasMode } = useSelect(
 		( select ) => {
 			const {
 				getSettings,
@@ -78,10 +69,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
@@ -156,14 +143,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const toggleNavigationSidebar = useCallback( () => {
-		const toggleComplementaryArea = isNavigationSidebarOpen
-			? disableComplementaryArea
-			: enableComplementaryArea;
-		toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
-	}, [ isNavigationSidebarOpen ] );
+
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -179,28 +159,30 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		! isMobileViewport;
 	const isViewMode = canvasMode === 'view';
 
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
 			<ToolbarButton
 				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () =>
+					enableComplementaryArea(
+						'core/edit-site',
+						'edit-site/block-inspector'
+					)
 				}
-				onClick={ toggleNavigationSidebar }
 				icon={ listView }
-				isActive={ isNavigationSidebarOpen }
 			/>
 		</ToolbarGroup>
 	);
 
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavMenuSidebarToggle = Fragment;
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( isOffCanvasNavigationEditorEnabled ) {
 		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
 	}
 

From c69c82ed6254c5cce969ea39ad97961e3dd85199 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:58:31 +0900
Subject: [PATCH 030/209] E2E tests: Add width and color test to button block
 (#46452)

* E2E tests: Add width and color test to button block

* polish selectors

* Fix tests

* Update test

* A survey of the causes of GitHub Actions failures

* Fix test

* Remove `waitForSelector`

* Simplify HEX color input
---
 test/e2e/specs/editor/blocks/buttons.spec.js | 130 +++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index ece3d06a5e9e8e..d88f042ebdf9ff 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -123,6 +123,136 @@ test.describe( 'Buttons', () => {
 <div class="wp-block-buttons"><!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.wordpress.org/">WordPress</a></div>
 <!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	test( 'can resize width', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'Content' );
+		await editor.openDocumentSettingsSidebar();
+		await page.click(
+			'role=group[name="Button width"i] >> role=button[name="25%"i]'
+		);
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	test( 'can apply named colors', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'Content' );
+		await editor.openDocumentSettingsSidebar();
+
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+		);
+		await page.click( 'role=button[name="Color: Cyan bluish gray"i]' );
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+		);
+		await page.click( 'role=button[name="Color: Vivid red"i]' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:buttons -->
+<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-red\",\"textColor\":\"cyan-bluish-gray\"} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-cyan-bluish-gray-color has-vivid-red-background-color has-text-color has-background wp-element-button\">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	test( 'can apply custom colors', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'Content' );
+		await editor.openDocumentSettingsSidebar();
+
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+		);
+		await page.click( 'role=button[name="Custom color picker."i]' );
+		await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
+
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+		);
+		await page.click( 'role=button[name="Custom color picker."i]' );
+		await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:buttons -->
+<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"color\":{\"text\":\"#ff0000\",\"background\":\"#00ff00\"}}} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" style=\"color:#ff0000;background-color:#00ff00\">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	test( 'can apply named gradient background color', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'Content' );
+		await editor.openDocumentSettingsSidebar();
+
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+		);
+		await page.click( 'role=tab[name="Gradient"i]' );
+		await page.click( 'role=button[name="Gradient: Purple to yellow"i]' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:buttons -->
+<div class=\"wp-block-buttons\"><!-- wp:button {\"gradient\":\"purple-to-yellow\"} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-purple-to-yellow-gradient-background has-background wp-element-button\">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`
+		);
+	} );
+
+	test( 'can apply custom gradient background color', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'Content' );
+		await editor.openDocumentSettingsSidebar();
+
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+		);
+		await page.click( 'role=tab[name="Gradient"i]' );
+		await page.click(
+			'role=button[name=/^Gradient control point at position 0% with color code/]'
+		);
+		await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
+		await page.keyboard.press( 'Escape' );
+		await page.click(
+			'role=button[name=/^Gradient control point at position 100% with color code/]'
+		);
+		await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:buttons -->
+<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\"}}} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" style=\"background:linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\">Content</a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->`
 		);
 	} );

From 13f8ae4575a467d503cc113facbbbd63efb02e53 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 12 Dec 2022 16:29:36 +1100
Subject: [PATCH 031/209] Style Book: Clear Global Styles navigation history
 when selecting a block (#46391)

* Style Book: Clear Navigator history when selecting a block

* Update CHANGELOG.md
---
 packages/components/CHANGELOG.md              |  1 +
 .../navigator-provider/component.tsx          | 23 +++++++++-------
 .../src/components/global-styles/palette.js   |  2 +-
 .../global-styles/screen-block-list.js        |  2 +-
 .../components/global-styles/screen-block.js  |  5 +++-
 .../components/global-styles/screen-colors.js |  3 ++-
 .../src/components/global-styles/ui.js        | 26 ++++++++++++++-----
 test/e2e/specs/site-editor/style-book.spec.js | 18 +++++++++++++
 8 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7f2381c0190a03..bcb1b610267188 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 -   `ColorPalette`: show "Clear" button even when colors array is empty ([#46001](https://github.com/WordPress/gutenberg/pull/46001)).
 -   `InputControl`: Fix internal `Flex` wrapper usage that could add an unintended `height: 100%` ([#46213](https://github.com/WordPress/gutenberg/pull/46213)).
+-   `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
 
 ### Enhancements
 
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 57b18f6d92dba0..e80beaec9d14c4 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -43,8 +43,8 @@ function UnconnectedNavigatorProvider(
 
 	const goTo: NavigatorContextType[ 'goTo' ] = useCallback(
 		( path, options = {} ) => {
-			setLocationHistory( [
-				...locationHistory,
+			setLocationHistory( ( prevLocationHistory ) => [
+				...prevLocationHistory,
 				{
 					...options,
 					path,
@@ -53,21 +53,24 @@ function UnconnectedNavigatorProvider(
 				},
 			] );
 		},
-		[ locationHistory ]
+		[]
 	);
 
 	const goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {
-		if ( locationHistory.length > 1 ) {
-			setLocationHistory( [
-				...locationHistory.slice( 0, -2 ),
+		setLocationHistory( ( prevLocationHistory ) => {
+			if ( prevLocationHistory.length <= 1 ) {
+				return prevLocationHistory;
+			}
+			return [
+				...prevLocationHistory.slice( 0, -2 ),
 				{
-					...locationHistory[ locationHistory.length - 2 ],
+					...prevLocationHistory[ prevLocationHistory.length - 2 ],
 					isBack: true,
 					hasRestoredFocus: false,
 				},
-			] );
-		}
-	}, [ locationHistory ] );
+			];
+		} );
+	}, [] );
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 4d37b234eb9afe..0b4bbbbbb7f63e 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -49,7 +49,7 @@ function Palette( { name } ) {
 
 	const screenPath = ! name
 		? '/colors/palette'
-		: '/blocks/' + name + '/colors/palette';
+		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
 		colors.length > 0
 			? sprintf(
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index a203a99ba276ab..30c03c17bec014 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -68,7 +68,7 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ '/blocks/' + block.name }
+			path={ '/blocks/' + encodeURIComponent( block.name ) }
 			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index b9d2502ef8bc10..57860a8623c6ae 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -20,7 +20,10 @@ function ScreenBlock( { name } ) {
 			<Spacer paddingX={ 4 }>
 				<BlockPreviewPanel name={ name } />
 			</Spacer>
-			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
+			<ContextMenu
+				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
+				name={ name }
+			/>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 87d74604e63e14..c713cb5ee5818f 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -174,7 +174,8 @@ function ButtonColorItem( { name, parentMenu } ) {
 }
 
 function ScreenColors( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 8f7fa28e93eee6..532a211597a81f 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -43,7 +43,8 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 }
 
 function ContextScreens( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>
@@ -124,14 +125,27 @@ function ContextScreens( { name } ) {
 
 function GlobalStylesStyleBook( { onClose } ) {
 	const navigator = useNavigator();
+	const { path } = navigator.location;
 	return (
 		<StyleBook
 			isSelected={ ( blockName ) =>
-				navigator.location.path.startsWith( '/blocks/' + blockName )
-			}
-			onSelect={ ( blockName ) =>
-				navigator.goTo( '/blocks/' + blockName )
+				// Match '/blocks/core%2Fbutton' and
+				// '/blocks/core%2Fbutton/typography', but not
+				// '/blocks/core%2Fbuttons'.
+				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+				path.startsWith(
+					`/blocks/${ encodeURIComponent( blockName ) }/`
+				)
 			}
+			onSelect={ ( blockName ) => {
+				// Clear navigator history by going back to the root.
+				const depth = path.match( /\//g ).length;
+				for ( let i = 0; i < depth; i++ ) {
+					navigator.goBack();
+				}
+				// Now go to the selected block.
+				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
+			} }
 			onClose={ onClose }
 		/>
 	);
@@ -159,7 +173,7 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
-					path={ '/blocks/' + block.name }
+					path={ '/blocks/' + encodeURIComponent( block.name ) }
 				>
 					<ScreenBlock name={ block.name } />
 				</GlobalStylesNavigationScreen>
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 779e54322a9102..4f3d092a5c8d93 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -98,6 +98,24 @@ test.describe( 'Style Book', () => {
 		).toBeVisible();
 	} );
 
+	test( 'should clear Global Styles navigator history when example is clicked', async ( {
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Blocks styles"]' );
+		await page.click( 'role=button[name="Heading block styles"]' );
+		await page.click( 'role=button[name="Typography styles"]' );
+
+		await page.click(
+			'role=button[name="Open Quote styles in Styles panel"i]'
+		);
+
+		await page.click( 'role=button[name="Navigate to the previous view"]' );
+
+		await expect(
+			page.locator( 'role=button[name="Navigate to the previous view"]' )
+		).not.toBeVisible();
+	} );
+
 	test( 'should disappear when closed', async ( { page } ) => {
 		await page.click(
 			'role=region[name="Style Book"i] >> role=button[name="Close Style Book"i]'

From 49c80596917e7fa318afdb66d01612a2c44b2ed6 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 12 Dec 2022 08:31:15 +0000
Subject: [PATCH 032/209] Update the synced block hover styles in Inserter
 (#46442)

* Synced block hover styles in Inserter

* Formatting
---
 .../components/inserter-list-item/style.scss  | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 67e49db0d6c4d9..fb15113400522b 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -1,11 +1,32 @@
+
 .block-editor-block-types-list__list-item {
 	display: block;
 	width: 33.33%;
 	padding: 0;
 	margin: 0;
+
 	&.is-synced {
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
+		.components-button.block-editor-block-types-list__item {
+			&:not(:disabled) {
+				.block-editor-block-icon.has-colors {
+					color: var(--wp-block-synced-color);
+				}
+
+				&:hover {
+					.block-editor-block-types-list__item-title {
+						color: var(--wp-block-synced-color) !important;
+						filter: brightness(0.95);
+					}
+
+					svg {
+						color: var(--wp-block-synced-color) !important;
+					}
+				}
+
+				&::after {
+					background: var(--wp-block-synced-color);
+				}
+			}
 		}
 	}
 }

From 2f058ee2d19405413879b92681e8c3b1665b6f7b Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:02:50 +0200
Subject: [PATCH 033/209] Lodash: Refactor blocks away from _.find() (#46428)

---
 packages/blocks/src/store/reducer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 29bd7c9ef02aa7..16f95127137a52 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, isEmpty, map, mapValues } from 'lodash';
+import { get, isEmpty, map, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -265,7 +265,9 @@ export function categories( state = DEFAULT_CATEGORIES, action ) {
 			if ( ! action.category || isEmpty( action.category ) ) {
 				return state;
 			}
-			const categoryToChange = find( state, [ 'slug', action.slug ] );
+			const categoryToChange = state.find(
+				( { slug } ) => slug === action.slug
+			);
 			if ( categoryToChange ) {
 				return map( state, ( category ) => {
 					if ( category.slug === action.slug ) {

From ce55da3f8ee53e428b820b21bae80f06f4e35454 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:03:08 +0200
Subject: [PATCH 034/209] Lodash: Refactor post editor away from _.find()
 (#46432)

---
 .../edit-post/src/hooks/validate-multiple-use/index.js    | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/edit-post/src/hooks/validate-multiple-use/index.js b/packages/edit-post/src/hooks/validate-multiple-use/index.js
index 9507f56cf085f1..3877a894632c9a 100644
--- a/packages/edit-post/src/hooks/validate-multiple-use/index.js
+++ b/packages/edit-post/src/hooks/validate-multiple-use/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,8 +39,7 @@ const enhance = compose(
 		// Otherwise, only pass `originalBlockClientId` if it refers to a different
 		// block from the current one.
 		const blocks = select( blockEditorStore ).getBlocks();
-		const firstOfSameType = find(
-			blocks,
+		const firstOfSameType = blocks.find(
 			( { name } ) => block.name === name
 		);
 		const isInvalid =

From cbec06145257224771cb56ee9c98a432d8f07c05 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Dec 2022 10:27:20 +0100
Subject: [PATCH 035/209] Synchronize the sidebar state in the url (#46433)

---
 .../data/data-core-edit-site.md               | 41 ++++++++----
 .../src/components/block-editor/index.js      | 14 ++--
 .../edit-site/src/components/editor/index.js  | 30 ++++-----
 .../src/components/navigate-to-link/index.js  | 10 +--
 .../edit-site/src/components/sidebar/index.js | 17 ++++-
 .../use-init-edited-entity-from-url.js}       |  2 +
 .../use-sync-sidebar-path-with-url.js         | 36 +++++++++++
 packages/edit-site/src/store/actions.js       | 64 +++++++++++--------
 packages/edit-site/src/store/reducer.js       | 33 ++--------
 packages/edit-site/src/store/selectors.js     | 36 +++++++----
 packages/edit-site/src/store/test/actions.js  | 18 +-----
 packages/edit-site/src/store/test/reducer.js  | 49 +++-----------
 .../edit-site/src/store/test/selectors.js     | 23 +------
 13 files changed, 183 insertions(+), 190 deletions(-)
 rename packages/edit-site/src/components/{use-init-edited-entity-from-url/index.js => sync-state-with-url/use-init-edited-entity-from-url.js} (82%)
 create mode 100644 packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js

diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 6577ae72575ffe..53fd4d138383ae 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -34,6 +34,20 @@ _Returns_
 
 -   `Array`: Template parts and their blocks in an array.
 
+### getEditedPostContext
+
+> **Deprecated**
+
+Returns the edited post's context object.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `Object`: Page.
+
 ### getEditedPostId
 
 Returns the ID of the currently edited template or template part.
@@ -72,15 +86,7 @@ _Returns_
 
 ### getHomeTemplateId
 
-Returns the current home template ID.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `number?`: Home template ID.
+> **Deprecated**
 
 ### getNavigationPanelActiveMenu
 
@@ -88,6 +94,8 @@ _Returns_
 
 ### getPage
 
+> **Deprecated**
+
 Returns the current page object.
 
 _Parameters_
@@ -230,14 +238,21 @@ _Parameters_
 -   _options_ `[Object]`:
 -   _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.
 
-### setHomeTemplateId
+### setEditedPostContext
 
-Action that sets the home template ID to the template ID of the page resolved
-from a given path.
+Set's the current block editor context.
 
 _Parameters_
 
--   _homeTemplateId_ `number`: The template ID for the homepage.
+-   _context_ `Object`: The context object.
+
+_Returns_
+
+-   `number`: The resolved template ID for the page route.
+
+### setHomeTemplateId
+
+> **Deprecated**
 
 ### setIsInserterOpened
 
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 4dbebdf1ea8bb7..0f39f771a5d360 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -56,19 +56,14 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { storedSettings, templateType, page, canvasMode } = useSelect(
+	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				getEditedPostType,
-				getPage,
-				__unstableGetCanvasMode,
-			} = select( editSiteStore );
+			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
+				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
-				page: getPage(),
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
@@ -200,11 +195,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					( fillProps ) => (
 						<NavigateToLink
 							{ ...fillProps }
-							activePage={ page }
 							onActivePageChange={ setPage }
 						/>
 					),
-					[ page ]
+					[]
 				) }
 			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 8ed10e81f626c7..2bb06063bc75aa 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -31,7 +31,7 @@ import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import useInitEditedEntityFromURL from '../use-init-edited-entity-from-url';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
@@ -59,7 +59,7 @@ export default function Editor() {
 		editedPostId,
 		editedPostType,
 		editedPost,
-		page,
+		context,
 		hasLoadedPost,
 		editorMode,
 		canvasMode,
@@ -75,7 +75,7 @@ export default function Editor() {
 		const {
 			getEditedPostType,
 			getEditedPostId,
-			getPage,
+			getEditedPostContext,
 			getEditorMode,
 			__unstableGetCanvasMode,
 			isInserterOpened,
@@ -99,7 +99,7 @@ export default function Editor() {
 			editedPost: postId
 				? getEntityRecord( 'postType', postType, postId )
 				: null,
-			page: getPage(),
+			context: getEditedPostContext(),
 			hasLoadedPost: postId
 				? hasFinishedResolution( 'getEntityRecord', [
 						'postType',
@@ -128,7 +128,8 @@ export default function Editor() {
 			),
 		};
 	}, [] );
-	const { setIsSaveViewOpened, setPage } = useDispatch( editSiteStore );
+	const { setIsSaveViewOpened, setEditedPostContext } =
+		useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -142,23 +143,20 @@ export default function Editor() {
 		: __( 'Block Library' );
 	const blockContext = useMemo(
 		() => ( {
-			...page?.context,
+			...context,
 			queryContext: [
-				page?.context.queryContext || { page: 1 },
+				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
-					setPage( {
-						...page,
-						context: {
-							...page?.context,
-							queryContext: {
-								...page?.context.queryContext,
-								...newQueryContext,
-							},
+					setEditedPostContext( {
+						...context,
+						queryContext: {
+							...context?.queryContext,
+							...newQueryContext,
 						},
 					} ),
 			],
 		} ),
-		[ page?.context ]
+		[ context ]
 	);
 	const isReady = editedPostType !== undefined && editedPostId !== undefined;
 
diff --git a/packages/edit-site/src/components/navigate-to-link/index.js b/packages/edit-site/src/components/navigate-to-link/index.js
index 77f440abfc78f0..26347f153eaad4 100644
--- a/packages/edit-site/src/components/navigate-to-link/index.js
+++ b/packages/edit-site/src/components/navigate-to-link/index.js
@@ -9,12 +9,7 @@ import { edit } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function NavigateToLink( {
-	type,
-	id,
-	activePage,
-	onActivePageChange,
-} ) {
+export default function NavigateToLink( { type, id, onActivePageChange } ) {
 	const post = useSelect(
 		( select ) =>
 			type &&
@@ -27,7 +22,6 @@ export default function NavigateToLink( {
 	const onClick = useMemo( () => {
 		if ( ! post?.link ) return null;
 		const path = getPathAndQueryString( post.link );
-		if ( path === activePage?.path ) return null;
 		return () =>
 			onActivePageChange( {
 				type,
@@ -38,7 +32,7 @@ export default function NavigateToLink( {
 					postId: post.id,
 				},
 			} );
-	}, [ post, activePage?.path, onActivePageChange ] );
+	}, [ post, onActivePageChange ] );
 
 	return (
 		onClick && (
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 154fa9c0a17b48..06abec6f024cac 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -8,6 +8,19 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
+import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+
+function SidebarScreens() {
+	useSyncSidebarPathWithURL();
+
+	return (
+		<>
+			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenTemplates postType="wp_template" />
+			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+		</>
+	);
+}
 
 export function Sidebar() {
 	return (
@@ -15,9 +28,7 @@ export function Sidebar() {
 			className="edit-site-sidebar__content"
 			initialPath="/"
 		>
-			<SidebarNavigationScreenMain />
-			<SidebarNavigationScreenTemplates postType="wp_template" />
-			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+			<SidebarScreens />
 		</NavigatorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/use-init-edited-entity-from-url/index.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
similarity index 82%
rename from packages/edit-site/src/components/use-init-edited-entity-from-url/index.js
rename to packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index dec0889f38e9a9..a6061d205ffc07 100644
--- a/packages/edit-site/src/components/use-init-edited-entity-from-url/index.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -19,6 +19,8 @@ export default function useInitEditedEntityFromURL() {
 
 	// Set correct entity on page navigation.
 	useEffect( () => {
+		// This URL scheme mean we can't open a template part with the context of a given post.
+		// Potentially posts and pages could be moved to a "context" query string instead.
 		if ( 'page' === postType || 'post' === postType ) {
 			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
 		} else if ( 'wp_template' === postType ) {
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js
new file mode 100644
index 00000000000000..885772cdf4046c
--- /dev/null
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncSidebarPathWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { sidebar = '/' } = params;
+	const { location, goTo } = useNavigator();
+	const currentSidebar = useRef( sidebar );
+	const currentNavigatorLocation = useRef( location.path );
+	useEffect( () => {
+		currentSidebar.current = sidebar;
+		if ( sidebar !== currentNavigatorLocation.current ) {
+			goTo( sidebar );
+		}
+	}, [ sidebar ] );
+	useEffect( () => {
+		currentNavigatorLocation.current = location.path;
+		if ( location.path !== currentSidebar.current ) {
+			history.push( {
+				...params,
+				sidebar: location.path,
+			} );
+		}
+	}, [ location.path, history ] );
+
+	return sidebar;
+}
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index b587d2fe0045ea..7c9f31bbd4308c 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -72,9 +72,10 @@ export const setTemplate =
 		}
 
 		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId,
-			page: { context: { templateSlug } },
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: templateId,
+			context: { templateSlug },
 		} );
 	};
 
@@ -105,9 +106,10 @@ export const addTemplate =
 		}
 
 		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId: newTemplate.id,
-			page: { context: { templateSlug: newTemplate.slug } },
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: newTemplate.id,
+			context: { templateSlug: newTemplate.slug },
 		} );
 	};
 
@@ -167,21 +169,37 @@ export const removeTemplate =
  */
 export function setTemplatePart( templatePartId ) {
 	return {
-		type: 'SET_TEMPLATE_PART',
-		templatePartId,
+		type: 'SET_EDITED_POST',
+		postType: 'wp_template_part',
+		id: templatePartId,
 	};
 }
 
 /**
- * Action that sets the home template ID to the template ID of the page resolved
- * from a given path.
+ * @deprecated
+ */
+export function setHomeTemplateId() {
+	deprecated( "dispatch( 'core/edit-site' ).setHomeTemplateId", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return {
+		type: 'NOTHING',
+	};
+}
+
+/**
+ * Set's the current block editor context.
+ *
+ * @param {Object} context The context object.
  *
- * @param {number} homeTemplateId The template ID for the homepage.
+ * @return {number} The resolved template ID for the page route.
  */
-export function setHomeTemplateId( homeTemplateId ) {
+export function setEditedPostContext( context ) {
 	return {
-		type: 'SET_HOME_TEMPLATE',
-		homeTemplateId,
+		type: 'SET_EDITED_POST_CONTEXT',
+		context,
 	};
 }
 
@@ -221,17 +239,13 @@ export const setPage =
 		}
 
 		dispatch( {
-			type: 'SET_PAGE',
-			page: template.slug
-				? {
-						...page,
-						context: {
-							...page.context,
-							templateSlug: template.slug,
-						},
-				  }
-				: page,
-			templateId: template.id,
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: template.id,
+			context: {
+				...page.context,
+				templateSlug: template.slug,
+			},
 		} );
 
 		return template.id;
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 327159635617aa..6a7e68fccb3c90 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -51,40 +51,22 @@ export function settings( state = {}, action ) {
  */
 export function editedPost( state = {}, action ) {
 	switch ( action.type ) {
-		case 'SET_TEMPLATE':
-		case 'SET_PAGE':
+		case 'SET_EDITED_POST':
 			return {
-				type: 'wp_template',
-				id: action.templateId,
-				page: action.page,
+				postType: action.postType,
+				id: action.id,
+				context: action.context,
 			};
-		case 'SET_TEMPLATE_PART':
+		case 'SET_EDITED_POST_CONTEXT':
 			return {
-				type: 'wp_template_part',
-				id: action.templatePartId,
+				...state,
+				context: action.context,
 			};
 	}
 
 	return state;
 }
 
-/**
- * Reducer for information about the site's homepage.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function homeTemplateId( state, action ) {
-	switch ( action.type ) {
-		case 'SET_HOME_TEMPLATE':
-			return action.homeTemplateId;
-	}
-
-	return state;
-}
-
 /**
  * Reducer to set the block inserter panel open or closed.
  *
@@ -162,7 +144,6 @@ export default combineReducers( {
 	deviceType,
 	settings,
 	editedPost,
-	homeTemplateId,
 	blockInserterPanel,
 	listViewPanel,
 	saveViewPanel,
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index a99467addd334a..2137525b07b63f 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -146,18 +146,13 @@ export const getSettings = createSelector(
 );
 
 /**
- * Returns the current home template ID.
- *
- * @param {Object} state Global application state.
- *
- * @return {number?} Home template ID.
+ * @deprecated
  */
-export function getHomeTemplateId( state ) {
-	return state.homeTemplateId;
-}
-
-function getCurrentEditedPost( state ) {
-	return state.editedPost;
+export function getHomeTemplateId() {
+	deprecated( "select( 'core/edit-site' ).getHomeTemplateId", {
+		since: '6.2',
+		version: '6.4',
+	} );
 }
 
 /**
@@ -168,7 +163,7 @@ function getCurrentEditedPost( state ) {
  * @return {TemplateType?} Template type.
  */
 export function getEditedPostType( state ) {
-	return getCurrentEditedPost( state ).type;
+	return state.editedPost.postType;
 }
 
 /**
@@ -179,18 +174,31 @@ export function getEditedPostType( state ) {
  * @return {string?} Post ID.
  */
 export function getEditedPostId( state ) {
-	return getCurrentEditedPost( state ).id;
+	return state.editedPost.id;
+}
+
+/**
+ * Returns the edited post's context object.
+ *
+ * @deprecated
+ * @param {Object} state Global application state.
+ *
+ * @return {Object} Page.
+ */
+export function getEditedPostContext( state ) {
+	return state.editedPost.context;
 }
 
 /**
  * Returns the current page object.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  *
  * @return {Object} Page.
  */
 export function getPage( state ) {
-	return getCurrentEditedPost( state ).page;
+	return { context: state.editedPost.context };
 }
 
 /**
diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
index 96fa931efc8710..fc2e5ca6a7c617 100644
--- a/packages/edit-site/src/store/test/actions.js
+++ b/packages/edit-site/src/store/test/actions.js
@@ -81,7 +81,7 @@ describe( 'actions', () => {
 
 			const select = registry.select( editSiteStore );
 			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
+			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
 		} );
 
 		it( 'should set the template by fetching the template slug', async () => {
@@ -109,7 +109,7 @@ describe( 'actions', () => {
 
 			const select = registry.select( editSiteStore );
 			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
+			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
 		} );
 	} );
 
@@ -146,7 +146,7 @@ describe( 'actions', () => {
 
 			const select = registry.select( editSiteStore );
 			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
+			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
 		} );
 	} );
 
@@ -207,18 +207,6 @@ describe( 'actions', () => {
 			const select = registry.select( editSiteStore );
 			expect( select.getEditedPostId() ).toBe( 'emptytheme//single' );
 			expect( select.getEditedPostType() ).toBe( 'wp_template' );
-			expect( select.getPage().path ).toBe( '/' );
-		} );
-	} );
-
-	describe( 'setHomeTemplateId', () => {
-		it( 'should set the home template ID', () => {
-			const registry = createRegistryWithStores();
-
-			registry.dispatch( editSiteStore ).setHomeTemplateId( 90 );
-			expect( registry.select( editSiteStore ).getHomeTemplateId() ).toBe(
-				90
-			);
 		} );
 	} );
 
diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js
index a3ea8e356fc0aa..f6ce205ad63533 100644
--- a/packages/edit-site/src/store/test/reducer.js
+++ b/packages/edit-site/src/store/test/reducer.js
@@ -8,7 +8,6 @@ import deepFreeze from 'deep-freeze';
  */
 import {
 	settings,
-	homeTemplateId,
 	editedPost,
 	blockInserterPanel,
 	listViewPanel,
@@ -46,17 +45,6 @@ describe( 'state', () => {
 		} );
 	} );
 
-	describe( 'homeTemplateId()', () => {
-		it( 'should apply default state', () => {
-			expect( homeTemplateId( undefined, {} ) ).toEqual( undefined );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			const state = {};
-			expect( homeTemplateId( state, {} ) ).toBe( state );
-		} );
-	} );
-
 	describe( 'editedPost()', () => {
 		it( 'should apply default state', () => {
 			expect( editedPost( undefined, {} ) ).toEqual( {} );
@@ -72,36 +60,17 @@ describe( 'state', () => {
 				editedPost(
 					{ id: 1, type: 'wp_template' },
 					{
-						type: 'SET_TEMPLATE',
-						templateId: 2,
-					}
-				)
-			).toEqual( { id: 2, type: 'wp_template' } );
-		} );
-
-		it( 'should update when a page is set', () => {
-			expect(
-				editedPost(
-					{ id: 1, type: 'wp_template' },
-					{
-						type: 'SET_PAGE',
-						templateId: 2,
-						page: {},
+						type: 'SET_EDITED_POST',
+						postType: 'wp_template',
+						id: 2,
+						context: { templateSlug: 'slug' },
 					}
 				)
-			).toEqual( { id: 2, type: 'wp_template', page: {} } );
-		} );
-
-		it( 'should update when a template part is set', () => {
-			expect(
-				editedPost(
-					{ id: 1, type: 'wp_template' },
-					{
-						type: 'SET_TEMPLATE_PART',
-						templatePartId: 2,
-					}
-				)
-			).toEqual( { id: 2, type: 'wp_template_part' } );
+			).toEqual( {
+				postType: 'wp_template',
+				id: 2,
+				context: { templateSlug: 'slug' },
+			} );
 		} );
 	} );
 
diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
index bf0ec33452580e..223bcd1f0ba041 100644
--- a/packages/edit-site/src/store/test/selectors.js
+++ b/packages/edit-site/src/store/test/selectors.js
@@ -9,10 +9,8 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import {
 	getCanUserCreateMedia,
 	getSettings,
-	getHomeTemplateId,
 	getEditedPostType,
 	getEditedPostId,
-	getPage,
 	getReusableBlocks,
 	isInserterOpened,
 	isListViewOpened,
@@ -70,7 +68,7 @@ describe( 'selectors', () => {
 			const state = {
 				settings: {},
 				preferences: {},
-				editedPost: { type: 'wp_template' },
+				editedPost: { postType: 'wp_template' },
 			};
 			const setInserterOpened = () => {};
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
@@ -93,7 +91,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				settings: { key: 'value' },
-				editedPost: { type: 'wp_template_part' },
+				editedPost: { postType: 'wp_template_part' },
 			};
 			const setInserterOpened = () => {};
 
@@ -112,13 +110,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'getHomeTemplateId', () => {
-		it( 'returns the home template ID', () => {
-			const state = { homeTemplateId: {} };
-			expect( getHomeTemplateId( state ) ).toBe( state.homeTemplateId );
-		} );
-	} );
-
 	describe( 'getEditedPostId', () => {
 		it( 'returns the template ID', () => {
 			const state = { editedPost: { id: 10 } };
@@ -128,19 +119,11 @@ describe( 'selectors', () => {
 
 	describe( 'getEditedPostType', () => {
 		it( 'returns the template type', () => {
-			const state = { editedPost: { type: 'wp_template' } };
+			const state = { editedPost: { postType: 'wp_template' } };
 			expect( getEditedPostType( state ) ).toBe( 'wp_template' );
 		} );
 	} );
 
-	describe( 'getPage', () => {
-		it( 'returns the page object', () => {
-			const page = {};
-			const state = { editedPost: { page } };
-			expect( getPage( state ) ).toBe( page );
-		} );
-	} );
-
 	describe( 'isInserterOpened', () => {
 		it( 'returns the block inserter panel isOpened state', () => {
 			const state = {

From 7c4fe12dbf83306121b37b7f3668caf79a7bb2d7 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Mon, 12 Dec 2022 10:42:03 +0100
Subject: [PATCH 036/209] Columns mobile edit: remove unused
 updateBlockSettings action bind (#46455)

---
 packages/block-library/src/columns/edit.native.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 96855e3da17e46..98b04cdace4a69 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -332,11 +332,6 @@ const ColumnsEditContainerWrapper = withDispatch(
 				width: value,
 			} );
 		},
-		updateBlockSettings( settings ) {
-			const { clientId } = ownProps;
-			const { updateBlockListSettings } = dispatch( blockEditorStore );
-			updateBlockListSettings( clientId, settings );
-		},
 		/**
 		 * Updates the column columnCount, including necessary revisions to child Column
 		 * blocks to grant required or redistribute available space.

From 669049484acfb36e0acd84eab68357938d6da7bd Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Mon, 12 Dec 2022 11:03:11 +0100
Subject: [PATCH 037/209] Columns mobile block: avoid returning unstable
 innerWidths from useSelect (#46403)

---
 .../block-library/src/columns/edit.native.js  | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 98b04cdace4a69..6331097f96b991 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -445,7 +445,7 @@ const ColumnsEdit = ( props ) => {
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerWidths = [],
+		innerBlocks,
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -458,24 +458,20 @@ const ColumnsEdit = ( props ) => {
 				getBlockAttributes,
 			} = select( blockEditorStore );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
-			const innerBlocks = getBlocks( clientId );
 
-			const isContentEmpty = map(
-				innerBlocks,
-				( innerBlock ) => innerBlock.innerBlocks.length
+			const innerBlocksList = getBlocks( clientId );
+
+			const isContentEmpty = innerBlocksList.every(
+				( innerBlock ) => innerBlock.innerBlocks.length === 0
 			);
 
-			const innerColumnsWidths = innerBlocks.map( ( inn ) => ( {
-				clientId: inn.clientId,
-				attributes: { width: inn.attributes.width },
-			} ) );
 			const parents = getBlockParents( clientId, true );
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
-				innerWidths: innerColumnsWidths,
-				hasParents: !! parents.length,
+				isDefaultColumns: isContentEmpty,
+				innerBlocks: innerBlocksList,
+				hasParents: parents.length > 0,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
 				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
@@ -483,13 +479,14 @@ const ColumnsEdit = ( props ) => {
 		[ clientId, isSelected ]
 	);
 
-	const memoizedInnerWidths = useMemo( () => {
-		return innerWidths;
-	}, [
-		// The JSON.stringify is used because innerWidth is always a new reference.
-		// The innerBlocks is a new reference after each attribute change of any nested block.
-		JSON.stringify( innerWidths ),
-	] );
+	const innerWidths = useMemo(
+		() =>
+			innerBlocks.map( ( inn ) => ( {
+				clientId: inn.clientId,
+				attributes: { width: inn.attributes.width },
+			} ) ),
+		[ innerBlocks ]
+	);
 
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -509,7 +506,7 @@ const ColumnsEdit = ( props ) => {
 		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerWidths={ memoizedInnerWidths }
+				innerWidths={ innerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }

From 30d4f2e9028a3c79960a924917144e656ad5cc7c Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Mon, 12 Dec 2022 12:36:04 +0200
Subject: [PATCH 038/209] [Patterns]: Add new pattern categories (#46144)

* [Patterns]: Add new pattern categories

* remove some categories

* update php code

* update php

* add php test and update/remove test that are in core

* map more categories

* migrate only `columns` to `text` and show `text` at the bottom of categories list

* address feedback
---
 ...rg-rest-block-patterns-controller-6-1.php} |  99 +-------------
 lib/compat/wordpress-6.1/rest-api.php         |   9 --
 lib/compat/wordpress-6.2/block-patterns.php   | 102 ++++++++++++---
 ...erg-rest-block-patterns-controller-6-2.php | 107 +++++++++++++++
 lib/compat/wordpress-6.2/rest-api.php         |   9 ++
 lib/load.php                                  |   3 +-
 .../components/inserter/block-patterns-tab.js |  11 +-
 ...rg-rest-block-patterns-controller-test.php | 123 +++++++++++++-----
 8 files changed, 305 insertions(+), 158 deletions(-)
 rename lib/compat/wordpress-6.1/{class-gutenberg-rest-block-patterns-controller.php => class-gutenberg-rest-block-patterns-controller-6-1.php} (60%)
 create mode 100644 lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php

diff --git a/lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller.php b/lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller-6-1.php
similarity index 60%
rename from lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller.php
rename to lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller-6-1.php
index c053a678083da8..b40f3aa2497f16 100644
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller.php
+++ b/lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller-6-1.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * REST API: Gutenberg_REST_Block_Patterns_Controller class
+ * REST API: Gutenberg_REST_Block_Patterns_Controller_6_1 class
  *
  * @package    Gutenberg
  * @subpackage REST_API
@@ -13,104 +13,12 @@
  *
  * @see WP_REST_Controller
  */
-class Gutenberg_REST_Block_Patterns_Controller extends WP_REST_Controller {
-
-	/**
-	 * Defines whether remote patterns should be loaded.
-	 *
-	 * @since 6.0.0
-	 * @var bool
-	 */
-	private $remote_patterns_loaded;
-
-	/**
-	 * Constructs the controller.
-	 *
-	 * @since 6.0.0
-	 */
-	public function __construct() {
-		$this->namespace = 'wp/v2';
-		$this->rest_base = 'block-patterns/patterns';
-	}
-
-	/**
-	 * Registers the routes for the objects of the controller.
-	 *
-	 * @since 6.0.0
-	 */
-	public function register_routes() {
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base,
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_items' ),
-					'permission_callback' => array( $this, 'get_items_permissions_check' ),
-				),
-				'schema' => array( $this, 'get_public_item_schema' ),
-			),
-			true
-		);
-	}
-
-	/**
-	 * Checks whether a given request has permission to read block patterns.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-	 */
-	public function get_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		if ( current_user_can( 'edit_posts' ) ) {
-			return true;
-		}
-
-		foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) {
-			if ( current_user_can( $post_type->cap->edit_posts ) ) {
-				return true;
-			}
-		}
-
-		return new WP_Error(
-			'rest_cannot_view',
-			__( 'Sorry, you are not allowed to view the registered block patterns.', 'gutenberg' ),
-			array( 'status' => rest_authorization_required_code() )
-		);
-	}
-
-	/**
-	 * Retrieves all block patterns.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function get_items( $request ) {
-		if ( ! $this->remote_patterns_loaded ) {
-			// Load block patterns from w.org.
-			_load_remote_block_patterns(); // Patterns with the `core` keyword.
-			_load_remote_featured_patterns(); // Patterns in the `featured` category.
-			_register_remote_theme_patterns(); // Patterns requested by current theme.
-
-			$this->remote_patterns_loaded = true;
-		}
-
-		$response = array();
-		$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();
-		foreach ( $patterns as $pattern ) {
-			$prepared_pattern = $this->prepare_item_for_response( $pattern, $request );
-			$response[]       = $this->prepare_response_for_collection( $prepared_pattern );
-		}
-		return rest_ensure_response( $response );
-	}
-
+class Gutenberg_REST_Block_Patterns_Controller_6_1 extends WP_REST_Block_Patterns_Controller {
 	/**
 	 * Prepare a raw block pattern before it gets output in a REST API response.
 	 *
 	 * @since 6.0.0
+	 * @since 6.1.0 Added `postTypes` property.
 	 *
 	 * @param array           $item    Raw pattern as registered, before any changes.
 	 * @param WP_REST_Request $request Request object.
@@ -147,6 +55,7 @@ public function prepare_item_for_response( $item, $request ) {
 	 * Retrieves the block pattern schema, conforming to JSON Schema.
 	 *
 	 * @since 6.0.0
+	 * @since 6.1.0 Added `post_types` property.
 	 *
 	 * @return array Item schema data.
 	 */
diff --git a/lib/compat/wordpress-6.1/rest-api.php b/lib/compat/wordpress-6.1/rest-api.php
index f3391389d9e38a..5dd06d3aad855b 100644
--- a/lib/compat/wordpress-6.1/rest-api.php
+++ b/lib/compat/wordpress-6.1/rest-api.php
@@ -35,15 +35,6 @@ function gutenberg_update_post_types_rest_response( $response, $post_type ) {
 }
 add_filter( 'rest_prepare_post_type', 'gutenberg_update_post_types_rest_response', 10, 2 );
 
-/**
- * Registers the block patterns REST API routes.
- */
-function gutenberg_register_gutenberg_rest_block_patterns() {
-	$block_patterns = new Gutenberg_REST_Block_Patterns_Controller();
-	$block_patterns->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_gutenberg_rest_block_patterns', 100 );
-
 /**
  * Exposes the site logo URL through the WordPress REST API.
  *
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
index 8f50c9ff33c5d6..1e529faf963210 100644
--- a/lib/compat/wordpress-6.2/block-patterns.php
+++ b/lib/compat/wordpress-6.2/block-patterns.php
@@ -8,7 +8,7 @@
 /**
  * Registers the block pattern categories.
  */
-function gutenberg_register_core_block_patterns_and_categories() {
+function gutenberg_register_core_block_patterns_categories() {
 	register_block_pattern_category(
 		'banner',
 		array(
@@ -30,49 +30,115 @@ function gutenberg_register_core_block_patterns_and_categories() {
 		)
 	);
 	register_block_pattern_category(
-		'footer',
+		'text',
 		array(
-			'label'       => _x( 'Footers', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'A variety of footer designs displaying information and site navigation.', 'gutenberg' ),
+			'label'       => _x( 'Text', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Patterns containing mostly text.', 'gutenberg' ),
 		)
 	);
 	register_block_pattern_category(
-		'gallery',
+		'query',
 		array(
-			'label'       => _x( 'Gallery', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'Patterns containing mostly images or other media.', 'gutenberg' ),
+			'label'       => _x( 'Posts', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Display your latest posts in lists, grids or other layouts.', 'gutenberg' ),
 		)
 	);
 	register_block_pattern_category(
-		'header',
+		'featured',
 		array(
-			'label'       => _x( 'Headers', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'A variety of header designs displaying your site title and navigation.', 'gutenberg' ),
+			'label'       => _x( 'Featured', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'A set of high quality curated patterns.', 'gutenberg' ),
 		)
 	);
+
+	// Register new core block pattern categories.
 	register_block_pattern_category(
-		'text',
+		'call-to-action',
 		array(
-			'label'       => _x( 'Text', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'Patterns containing mostly text.', 'gutenberg' ),
+			'label'       => _x( 'Call to Action', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Sections whose purpose is to trigger a specific action.', 'gutenberg' ),
 		)
 	);
 	register_block_pattern_category(
-		'query',
+		'team',
+		array(
+			'label'       => _x( 'Team', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'A variety of designs to display your team members.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'testimonials',
+		array(
+			'label'       => _x( 'Testimonials', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Share reviews and feedback about your brand/business.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'services',
+		array(
+			'label'       => _x( 'Services', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Briefly describe what your business does and how you can help.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'contact',
+		array(
+			'label'       => _x( 'Contact', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Display your contact information.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'about',
+		array(
+			'label'       => _x( 'About', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Introduce yourself.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'portfolio',
+		array(
+			'label'       => _x( 'Portfolio', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Showcase your latest work.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'gallery',
+		array(
+			'label'       => _x( 'Gallery', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Different layouts for displaying images.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'media',
+		array(
+			'label'       => _x( 'Media', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Different layouts containing video or audio.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'posts',
 		array(
 			'label'       => _x( 'Posts', 'Block pattern category', 'gutenberg' ),
 			'description' => __( 'Display your latest posts in lists, grids or other layouts.', 'gutenberg' ),
 		)
 	);
+	// Site building pattern categories.
 	register_block_pattern_category(
-		'featured',
+		'footer',
 		array(
-			'label'       => _x( 'Featured', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'A set of high quality curated patterns.', 'gutenberg' ),
+			'label'       => _x( 'Footers', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'A variety of footer designs displaying information and site navigation.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'header',
+		array(
+			'label'       => _x( 'Headers', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'A variety of header designs displaying your site title and navigation.', 'gutenberg' ),
 		)
 	);
 }
-add_action( 'init', 'gutenberg_register_core_block_patterns_and_categories' );
+add_action( 'init', 'gutenberg_register_core_block_patterns_categories' );
 
 /**
  * Registers Gutenberg-bundled patterns, with a focus on headers and footers
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
new file mode 100644
index 00000000000000..d34160edb2af0b
--- /dev/null
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Block_Patterns_Controller_6_2 class
+ *
+ * @package    Gutenberg
+ * @subpackage REST_API
+ */
+
+/**
+ * Core class used to access block patterns via the REST API.
+ *
+ * @since 6.0.0
+ *
+ * @see WP_REST_Controller
+ */
+class Gutenberg_REST_Block_Patterns_Controller_6_2 extends Gutenberg_REST_Block_Patterns_Controller_6_1 {
+	/**
+	 * Defines whether remote patterns should be loaded.
+	 *
+	 * @since 6.0.0
+	 * @var bool
+	 */
+	private $remote_patterns_loaded;
+
+	/**
+	 * An array that maps old categories names to new ones.
+	 *
+	 * @since 6.2.0
+	 * @var array
+	 */
+	protected static $categories_migration = array(
+		'buttons' => 'call-to-action',
+		'columns' => 'text',
+		'query'   => 'posts',
+	);
+
+	/**
+	 * Registers the routes for the objects of the controller.
+	 *
+	 * @since 6.0.0
+	 */
+	public function register_routes() {
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base,
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_items' ),
+					'permission_callback' => array( $this, 'get_items_permissions_check' ),
+				),
+				'schema' => array( $this, 'get_public_item_schema' ),
+			),
+			true
+		);
+	}
+	/**
+	 * Retrieves all block patterns.
+	 *
+	 * @since 6.0.0
+	 * @since 6.2.0 Added migration for old core pattern categories to the new ones.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function get_items( $request ) {
+		if ( ! $this->remote_patterns_loaded ) {
+			// Load block patterns from w.org.
+			_load_remote_block_patterns(); // Patterns with the `core` keyword.
+			_load_remote_featured_patterns(); // Patterns in the `featured` category.
+			_register_remote_theme_patterns(); // Patterns requested by current theme.
+
+			$this->remote_patterns_loaded = true;
+		}
+
+		$response = array();
+		$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();
+		foreach ( $patterns as $pattern ) {
+			$migrated_pattern = $this->migrate_pattern_categories( $pattern );
+			$prepared_pattern = $this->prepare_item_for_response( $migrated_pattern, $request );
+			$response[]       = $this->prepare_response_for_collection( $prepared_pattern );
+		}
+		return rest_ensure_response( $response );
+	}
+
+	/**
+	 * Migrates old core pattern categories to new ones.
+	 *
+	 * Core pattern categories are being revamped and we need to handle the migration
+	 * to the new ones and ensure backwards compatibility.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param array $pattern Raw pattern as registered, before applying any changes.
+	 * @return array Migrated pattern.
+	 */
+	protected function migrate_pattern_categories( $pattern ) {
+		if ( isset( $pattern['categories'] ) && is_array( $pattern['categories'] ) ) {
+			foreach ( $pattern['categories'] as $i => $category ) {
+				if ( array_key_exists( $category, static::$categories_migration ) ) {
+					$pattern['categories'][ $i ] = static::$categories_migration[ $category ];
+				}
+			}
+		}
+		return $pattern;
+	}
+}
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 023a79e3db95fb..4541ce0ae158c6 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -23,6 +23,15 @@ function gutenberg_register_rest_pattern_directory() {
 }
 add_action( 'rest_api_init', 'gutenberg_register_rest_pattern_directory' );
 
+/**
+ * Registers the block patterns REST API routes.
+ */
+function gutenberg_register_rest_block_patterns() {
+	$block_patterns = new Gutenberg_REST_Block_Patterns_Controller_6_2();
+	$block_patterns->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_rest_block_patterns' );
+
 /**
  * Add extra collection params to pattern directory requests.
  *
diff --git a/lib/load.php b/lib/load.php
index 3c9f458fcd3881..d2ec3611e6cb42 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -36,11 +36,12 @@ function gutenberg_is_experiment_enabled( $name ) {
 	}
 
 	// WordPress 6.1 compat.
-	require_once __DIR__ . '/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller.php';
+	require_once __DIR__ . '/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller-6-1.php';
 	require_once __DIR__ . '/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php';
 	require_once __DIR__ . '/compat/wordpress-6.1/rest-api.php';
 
 	// WordPress 6.2 compat.
+	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php';
 	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php';
 	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-pattern-directory-controller-6-2.php';
 	require_once __DIR__ . '/compat/wordpress-6.2/rest-api.php';
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index a1e9c839894650..93b4ca40978e19 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -53,10 +53,17 @@ function usePatternsCategories() {
 				)
 			)
 			.sort( ( { name: currentName }, { name: nextName } ) => {
-				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+				if (
+					! [ currentName, nextName ].some( ( categoryName ) =>
+						[ 'featured', 'text' ].includes( categoryName )
+					)
+				) {
 					return 0;
 				}
-				return currentName === 'featured' ? -1 : 1;
+				// Move `featured` category to the top and `text` to the bottom.
+				return currentName === 'featured' || nextName === 'text'
+					? -1
+					: 1;
 			} );
 
 		if (
diff --git a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
index ad6f42b033e84b..9f9cf60f0572a6 100644
--- a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
+++ b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
@@ -10,27 +10,54 @@
  * Unit tests for REST API for Block Patterns.
  *
  * @group restapi
- * @covers Gutenberg_REST_Block_Patterns_Controller
+ * @covers Gutenberg_REST_Block_Patterns_Controller_6_2
  */
-class Gutenberg_REST_Block_Patterns_Controller_Test extends WP_Test_REST_Controller_Testcase {
+class Gutenberg_REST_Block_Patterns_Controller_6_2_Test extends WP_Test_REST_Controller_Testcase {
+	/**
+	 * Admin user ID.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @var int
+	 */
 	protected static $admin_id;
+
+	/**
+	 * Original instance of WP_Block_Patterns_Registry.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @var WP_Block_Patterns_Registry
+	 */
 	protected static $orig_registry;
 
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
+	/**
+	 * Instance of the reflected `instance` property.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @var ReflectionProperty
+	 */
+	private static $registry_instance_property;
+
+	/**
+	 * The REST API route.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @var string
+	 */
+	const REQUEST_ROUTE = '/wp/v2/block-patterns/patterns';
 
 	public static function wpSetUpBeforeClass( $factory ) {
-		// Create a test user.
 		self::$admin_id = $factory->user->create( array( 'role' => 'administrator' ) );
 
 		// Setup an empty testing instance of `WP_Block_Patterns_Registry` and save the original.
-		$reflection = new ReflectionClass( 'WP_Block_Patterns_Registry' );
-		$reflection->getProperty( 'instance' )->setAccessible( true );
-		self::$orig_registry = $reflection->getStaticPropertyValue( 'instance' );
-		$test_registry       = new WP_Block_Patterns_Registry();
-		$reflection->setStaticPropertyValue( 'instance', $test_registry );
+		self::$orig_registry              = WP_Block_Patterns_Registry::get_instance();
+		self::$registry_instance_property = new ReflectionProperty( 'WP_Block_Patterns_Registry', 'instance' );
+		self::$registry_instance_property->setAccessible( true );
+		$test_registry = new WP_Block_Pattern_Categories_Registry();
+		self::$registry_instance_property->setValue( $test_registry );
 
 		// Register some patterns in the test registry.
 		$test_registry->register(
@@ -51,47 +78,77 @@ public static function wpSetUpBeforeClass( $factory ) {
 				'content'    => '<!-- wp:paragraph --><p>Two</p><!-- /wp:paragraph -->',
 			)
 		);
+
+		$test_registry->register(
+			'test/three',
+			array(
+				'title'      => 'Pattern Three',
+				'categories' => array( 'test', 'buttons', 'query' ),
+				'content'    => '<!-- wp:paragraph --><p>Three</p><!-- /wp:paragraph -->',
+			)
+		);
 	}
 
 	public static function wpTearDownAfterClass() {
-		// Delete the test user.
 		self::delete_user( self::$admin_id );
 
 		// Restore the original registry instance.
-		$reflection = new ReflectionClass( 'WP_Block_Patterns_Registry' );
-		$reflection->setStaticPropertyValue( 'instance', self::$orig_registry );
+		self::$registry_instance_property->setValue( self::$orig_registry );
+		self::$registry_instance_property->setAccessible( false );
+		self::$registry_instance_property = null;
+		self::$orig_registry              = null;
 	}
 
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-		$this->assertArrayHasKey(
-			'/wp/v2/block-patterns/patterns',
-			$routes,
-			'The patterns route does not exist'
-		);
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'emptytheme' );
 	}
 
-	public function test_get_items() {
+	public function test_get_items_migrate_pattern_categories() {
 		wp_set_current_user( self::$admin_id );
 
-		$expected_names  = array( 'test/one', 'test/two' );
-		$expected_fields = array( 'name', 'content' );
-
-		$request            = new WP_REST_Request( 'GET', '/wp/v2/block-patterns/patterns' );
-		$request['_fields'] = 'name,content';
+		$request            = new WP_REST_Request( 'GET', static::REQUEST_ROUTE );
+		$request['_fields'] = 'name,categories';
 		$response           = rest_get_server()->dispatch( $request );
 		$data               = $response->get_data();
 
-		$this->assertCount( count( $expected_names ), $data );
-		foreach ( $data as $idx => $item ) {
-			$this->assertEquals( $expected_names[ $idx ], $item['name'] );
-			$this->assertEquals( $expected_fields, array_keys( $item ) );
-		}
+		$this->assertIsArray( $data, 'WP_REST_Block_Patterns_Controller::get_items() should return an array' );
+		$this->assertGreaterThanOrEqual( 3, count( $data ), 'WP_REST_Block_Patterns_Controller::get_items() should return at least 3 items' );
+		$this->assertSame(
+			array(
+				'name'       => 'test/one',
+				'categories' => array( 'test' ),
+			),
+			$data[0],
+			'WP_REST_Block_Patterns_Controller::get_items() should return test/one'
+		);
+		$this->assertSame(
+			array(
+				'name'       => 'test/two',
+				'categories' => array( 'test' ),
+			),
+			$data[1],
+			'WP_REST_Block_Patterns_Controller::get_items() should return test/two'
+		);
+		$this->assertSame(
+			array(
+				'name'       => 'test/three',
+				'categories' => array( 'test', 'call-to-action', 'posts' ),
+			),
+			$data[2],
+			'WP_REST_Block_Patterns_Controller::get_items() should return test/three'
+		);
 	}
 
 	/**
 	 * Abstract methods that we must implement.
 	 */
+	public function test_register_routes() {
+		$this->markTestIncomplete();
+	}
+	public function test_get_items() {
+		$this->markTestIncomplete();
+	}
 	public function test_context_param() {
 		$this->markTestIncomplete();
 	}

From b1202138f4e44fa6312e93f2e7d5132cf73586cd Mon Sep 17 00:00:00 2001
From: Corentin Gautier <4660731+corentin-gautier@users.noreply.github.com>
Date: Mon, 12 Dec 2022 12:51:00 +0100
Subject: [PATCH 039/209] Avoid paint on popovers when scrolling (#46187)

* Avoid paint on popovers

* fix e2e test

Co-authored-by: Corentin Gautier <corentin.gautier@consertotech.pro>
---
 .../test/__snapshots__/index.js.snap          |   6 +-
 packages/components/CHANGELOG.md              |   2 +
 packages/components/src/popover/index.tsx     |  11 +-
 packages/components/src/popover/style.scss    |   1 +
 .../dot-tip/test/__snapshots__/index.js.snap  |   2 +-
 .../e2e/specs/editor/blocks/paragraph.spec.js | 122 ++++++++++++++----
 6 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
index 12c09f2c7c98ab..c7ecbc209a2417 100644
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; left: 0px; top: 0px;"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; left: 0px; top: 0px;"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; left: 0px; top: 0px;"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index bcb1b610267188..21d968568374b4 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -28,6 +28,8 @@
 -   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
 -   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
 -   Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
+-   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positionning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
+-   `CircularOptionPicker`: Prevent unecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
 
 ### Experimental
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index c56d1f8475315a..14f1ddd8bab967 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -489,8 +489,15 @@ const UnforwardedPopover = (
 					? undefined
 					: {
 							position: strategy,
-							left: Number.isNaN( x ) ? 0 : x ?? undefined,
-							top: Number.isNaN( y ) ? 0 : y ?? undefined,
+							top: 0,
+							left: 0,
+							// `x` and `y` are framer-motion specific props and are shorthands
+							// for `translateX` and `translateY`. Currently it is not possible
+							// to use `translateX` and `translateY` because those values would
+							// be overridden by the return value of the
+							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
+							x: Math.round( x ?? 0 ) || undefined,
+							y: Math.round( y ?? 0 ) || undefined,
 					  }
 			}
 		>
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index d595c23ae274a9..790b840e6a648b 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -7,6 +7,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover {
 	z-index: z-index(".components-popover");
+	will-change: transform;
 
 	&.is-expanded {
 		position: fixed;
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index 876bae4b690887..a453da0254b487 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -5,7 +5,7 @@ exports[`DotTip should render correctly 1`] = `
   aria-label="Editor tips"
   class="components-popover nux-dot-tip is-positioned"
   role="dialog"
-  style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0; left: 0px; top: 0px;"
+  style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
   tabindex="-1"
 >
   <div
diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index c713379569b90c..19c386cce457d9 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -195,8 +195,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -207,8 +211,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -219,8 +227,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -231,8 +243,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -309,8 +325,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -321,8 +341,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -333,8 +357,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -345,8 +373,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 			} );
 
@@ -387,8 +419,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -399,8 +435,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -411,8 +451,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -423,8 +467,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -435,8 +483,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -447,8 +499,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 			} );
 		} );
@@ -508,4 +564,14 @@ class DraggingUtils {
 		await this.page.mouse.move( 0, 0 );
 		await this.page.mouse.down();
 	}
+
+	async confirmValidDropZonePosition( element ) {
+		// Check that both x and y axis of the dropzone
+		// have a less than 1 difference with a given target element
+		const box = await this.dropZone.boundingBox();
+		return (
+			Math.abs( element.x - box.x ) < 1 &&
+			Math.abs( element.y - box.y ) < 1
+		);
+	}
 }

From 78deee07cef231fd0ea3ce08ff464b6fd08b438e Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Mon, 12 Dec 2022 13:05:24 +0100
Subject: [PATCH 040/209] removed the edit button cell when it's not editable
 (#46439)

---
 .../src/components/off-canvas-editor/block.js | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index c88f5ed0f7bbff..af74873e1b41af 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -325,27 +325,28 @@ function ListViewBlock( {
 
 			{ showBlockActions && (
 				<>
-					<TreeGridCell
-						className={ listViewBlockEditClassName }
-						aria-selected={
-							!! isSelected || forceSelectionContentLock
-						}
-					>
-						{ ( props ) =>
-							isEditable && (
+					{ isEditable && (
+						<TreeGridCell
+							className={ listViewBlockEditClassName }
+							aria-selected={
+								!! isSelected || forceSelectionContentLock
+							}
+						>
+							{ ( props ) => (
 								<BlockEditButton
 									{ ...props }
 									label={ editAriaLabel }
 									clientId={ clientId }
 								/>
-							)
-						}
-					</TreeGridCell>
+							) }
+						</TreeGridCell>
+					) }
 					<TreeGridCell
 						className={ listViewBlockSettingsClassName }
 						aria-selected={
 							!! isSelected || forceSelectionContentLock
 						}
+						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
 					>
 						{ ( { ref, tabIndex, onFocus } ) => (
 							<BlockSettingsDropdown

From 7dda7859adfa06adbe0da026f8f1253c2b001847 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 12 Dec 2022 13:41:52 +0100
Subject: [PATCH 041/209] Allow adding new templates and template parts
 directly from the sidebar (#46458)

---
 .../src/components/add-new-template/index.js  |  9 +++--
 .../add-new-template/new-template-part.js     | 13 +++++--
 .../add-new-template/new-template.js          | 15 +++++---
 .../components/add-new-template/style.scss    |  4 --
 .../src/components/layout/style.scss          |  3 +-
 .../edit-site/src/components/list/header.js   |  6 ++-
 .../sidebar-navigation-screen-main/index.js   |  2 +-
 .../index.js                                  | 38 +++++++++++++------
 .../style.scss                                |  5 +++
 .../sidebar-navigation-screen/style.scss      |  6 ++-
 10 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
index 89abbc0aa4614c..c3ba06f065bb99 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import NewTemplate from './new-template';
 import NewTemplatePart from './new-template-part';
 
-export default function AddNewTemplate( { templateType = 'wp_template' } ) {
+export default function AddNewTemplate( {
+	templateType = 'wp_template',
+	...props
+} ) {
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
@@ -21,9 +24,9 @@ export default function AddNewTemplate( { templateType = 'wp_template' } ) {
 	}
 
 	if ( templateType === 'wp_template' ) {
-		return <NewTemplate postType={ postType } />;
+		return <NewTemplate { ...props } postType={ postType } />;
 	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart postType={ postType } />;
+		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
index 783545bac826b7..578cfa515bd2c2 100644
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -12,6 +12,7 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +21,11 @@ import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
-export default function NewTemplatePart( { postType } ) {
+export default function NewTemplatePart( {
+	postType,
+	showIcon = true,
+	toggleProps,
+} ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -83,12 +88,14 @@ export default function NewTemplatePart( { postType } ) {
 	return (
 		<>
 			<Button
-				variant="primary"
+				{ ...toggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
+				icon={ showIcon ? plus : null }
+				label={ postType.labels.add_new }
 			>
-				{ postType.labels.add_new }
+				{ showIcon ? null : postType.labels.add_new }
 			</Button>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index d8458246a8609b..ccd5448e4d81db 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -21,6 +21,7 @@ import {
 	media,
 	notFound,
 	page,
+	plus,
 	post,
 	postAuthor,
 	postDate,
@@ -79,7 +80,11 @@ const TEMPLATE_ICONS = {
 	attachment: media,
 };
 
-export default function NewTemplate( { postType } ) {
+export default function NewTemplate( {
+	postType,
+	toggleProps,
+	showIcon = true,
+} ) {
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
 	const [
@@ -177,15 +182,13 @@ export default function NewTemplate( { postType } ) {
 		<>
 			<DropdownMenu
 				className="edit-site-new-template-dropdown"
-				icon={ null }
-				text={ postType.labels.add_new }
+				icon={ showIcon ? plus : null }
+				text={ showIcon ? null : postType.labels.add_new }
 				label={ postType.labels.add_new_item }
 				popoverProps={ {
 					noArrow: false,
 				} }
-				toggleProps={ {
-					variant: 'primary',
-				} }
+				toggleProps={ toggleProps }
 			>
 				{ () => (
 					<>
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 51fb9af347c2ce..f247bfa214cfb6 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,8 +1,4 @@
 .edit-site-new-template-dropdown {
-	.components-dropdown-menu__toggle {
-		padding: 6px 12px;
-	}
-
 	.edit-site-new-template-dropdown__popover {
 		@include break-small() {
 			min-width: 300px;
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index de34bc008f739b..4e92e6c0a57fb8 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -39,7 +39,8 @@
 
 .edit-site-layout__edit-button {
 	background: $gray-800;
-	color: $white;
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
 }
 
 .edit-site-layout__sidebar {
diff --git a/packages/edit-site/src/components/list/header.js b/packages/edit-site/src/components/list/header.js
index 91b9a13aeeb9c7..5468c271fe628d 100644
--- a/packages/edit-site/src/components/list/header.js
+++ b/packages/edit-site/src/components/list/header.js
@@ -36,7 +36,11 @@ export default function Header( { templateType } ) {
 
 			{ canCreate && (
 				<div className="edit-site-list-header__right">
-					<AddNewTemplate templateType={ templateType } />
+					<AddNewTemplate
+						templateType={ templateType }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
 				</div>
 			) }
 		</header>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 9a7b4479c972bc..622eb70a951aa0 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -32,7 +32,7 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			path="/"
 			title={
-				<HStack style={ { minHeight: 36 } }>
+				<HStack justify="space-between" style={ { minHeight: 36 } }>
 					<div>{ __( 'Design' ) }</div>
 					{ ! isMobileViewport && isEditorPage && (
 						<Button
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index f807c2bacd62a6..5360b3c7447ac7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -21,6 +21,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
+import AddNewTemplate from '../add-new-template';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -124,18 +125,31 @@ export default function SidebarNavigationScreenTemplates( {
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
 			title={
-				<HStack style={ { minHeight: 36 } }>
-					<div>{ config[ postType ].labels.title }</div>
-					{ ! isMobileViewport && isEditorPage && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-						>
-							{ __( 'Edit' ) }
-						</Button>
+				<HStack style={ { minHeight: 36 } } justify="space-between">
+					<div style={ { flexShrink: 0 } }>
+						{ config[ postType ].labels.title }
+					</div>
+					{ ! isMobileViewport && (
+						<HStack spacing={ 2 } justify="right">
+							<AddNewTemplate
+								templateType={ postType }
+								toggleProps={ {
+									className:
+										'edit-site-sidebar-navigation-screen-templates__add-button',
+								} }
+							/>
+							{ isEditorPage && (
+								<Button
+									className="edit-site-layout__edit-button"
+									label={ __( 'Open the editor' ) }
+									onClick={ () => {
+										__unstableSetCanvasMode( 'edit' );
+									} }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							) }
+						</HStack>
 					) }
 				</HStack>
 			}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
index 432774f903e465..174c7210e8403d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
@@ -2,3 +2,8 @@
 	/* Overrides the margin that comes from the Item component */
 	margin-top: $grid-unit-20 !important;
 }
+
+.edit-site-sidebar-navigation-screen-templates__add-button {
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index e3044e95bbdd05..91c64bbd4c3ad2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -6,7 +6,7 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $button-size;
+	margin: 0 $grid-unit-20 0 $button-size;
 	flex-grow: 1;
 	overflow-y: auto;
 }
@@ -19,11 +19,13 @@
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
+	padding-right: $grid-unit-20;
 }
 
 .edit-site-sidebar-navigation-screen__title {
 	font-size: calc(1.56 * 13px);
-	font-weight: 600;
+	font-weight: 500;
+	flex-grow: 1;
 }
 
 .edit-site-sidebar-navigation-screen__back {

From 2fc3da7ffdf8f990d2c685bd22cf53adb60ff5d4 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 12 Dec 2022 23:58:18 +0900
Subject: [PATCH 042/209] Shortcuts: Add Ctrl+Y for redo to all editor
 instances on Windows (#43392)

---
 .../src/components/keyboard-shortcuts/index.js      | 13 +++++++++++++
 .../src/components/layout/shortcuts.js              | 13 +++++++++++++
 .../src/components/keyboard-shortcuts/index.js      | 13 +++++++++++++
 .../src/components/keyboard-shortcuts/index.js      | 13 +++++++++++++
 4 files changed, 52 insertions(+)

diff --git a/packages/customize-widgets/src/components/keyboard-shortcuts/index.js b/packages/customize-widgets/src/components/keyboard-shortcuts/index.js
index 56888f1cfe3ae5..5c5f3ea2bca832 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcuts/index.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcuts/index.js
@@ -6,6 +6,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -52,6 +53,18 @@ function KeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 
 		registerShortcut( {
diff --git a/packages/edit-navigation/src/components/layout/shortcuts.js b/packages/edit-navigation/src/components/layout/shortcuts.js
index 1ced3ba2183fee..8036d0534261e9 100644
--- a/packages/edit-navigation/src/components/layout/shortcuts.js
+++ b/packages/edit-navigation/src/components/layout/shortcuts.js
@@ -7,6 +7,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -59,6 +60,18 @@ function RegisterNavigationEditorShortcuts() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 	}, [ registerShortcut ] );
 
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js
index 96255dd928c600..8d4337dd097c51 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js
@@ -6,6 +6,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -119,6 +120,18 @@ function KeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 
 		registerShortcut( {
diff --git a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
index dd039295c3661e..65ecceeb4aa8c1 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
@@ -6,6 +6,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -59,6 +60,18 @@ function KeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 
 		registerShortcut( {

From 403b40fb51d1ec2abe2e92cd571ea9e3f6c6bf7b Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 12 Dec 2022 16:27:25 +0000
Subject: [PATCH 043/209] Fix bug on multi-block-selection.test.js.

---
 .../specs/editor/various/multi-block-selection.test.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index 3d0db13db8ad02..6afe91c6e9257e 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -70,7 +70,7 @@ async function testNativeSelection() {
 			return;
 		}
 
-		if ( ! selection.rangeCount === 1 ) {
+		if ( selection.rangeCount !== 1 ) {
 			throw 'expected one range';
 		}
 

From 8ddafa1582518723277adc14b97d06859f63d1b5 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 13 Dec 2022 10:08:27 +1100
Subject: [PATCH 044/209] Global styles: Allow indirect properties when
 unfiltered_html is not allowed (#46388)

* Global styles: Allow inferred properties outside of compute_style_properties when unfiltered_html is not allowed

* Ensure set_current_user callback is covered

* Add a simple test

* Renamed to indirect, move hooks to separate kses file

* Add block-level styles to the test
---
 .../wordpress-6.2/class-wp-theme-json-6-2.php | 61 +++++++++++++++++
 lib/experimental/kses.php                     | 66 +++++++++++++++++++
 lib/load.php                                  |  1 +
 phpunit/class-wp-theme-json-test.php          | 44 +++++++++++++
 4 files changed, 172 insertions(+)
 create mode 100644 lib/experimental/kses.php

diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
index 4c6a1f50612a84..3b368a10b7f303 100644
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
+++ b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
@@ -97,6 +97,25 @@ class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
 		'box-shadow'                        => array( 'shadow' ),
 	);
 
+	/**
+	 * Indirect metadata for style properties that are not directly output.
+	 *
+	 * Each element is a direct mapping from a CSS property name to the
+	 * path to the value in theme.json & block attributes.
+	 *
+	 * Indirect properties are not output directly by `compute_style_properties`,
+	 * but are used elsewhere in the processing of global styles. The indirect
+	 * property is used to validate whether or not a style value is allowed.
+	 *
+	 * @since 6.2.0
+	 * @var array
+	 */
+	const INDIRECT_PROPERTIES_METADATA = array(
+		'gap'        => array( 'spacing', 'blockGap' ),
+		'column-gap' => array( 'spacing', 'blockGap', 'left' ),
+		'row-gap'    => array( 'spacing', 'blockGap', 'top' ),
+	);
+
 	/**
 	 * The valid properties under the settings key.
 	 *
@@ -216,4 +235,46 @@ class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
 			'textTransform'  => null,
 		),
 	);
+
+	/**
+	 * Processes a style node and returns the same node
+	 * without the insecure styles.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Allow indirect properties used outside of `compute_style_properties`.
+	 *
+	 * @param array $input Node to process.
+	 * @return array
+	 */
+	protected static function remove_insecure_styles( $input ) {
+		$output       = array();
+		$declarations = static::compute_style_properties( $input );
+
+		foreach ( $declarations as $declaration ) {
+			if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
+				$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
+
+				// Check the value isn't an array before adding so as to not
+				// double up shorthand and longhand styles.
+				$value = _wp_array_get( $input, $path, array() );
+				if ( ! is_array( $value ) ) {
+					_wp_array_set( $output, $path, $value );
+				}
+			}
+		}
+
+		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $path ) {
+			$value = _wp_array_get( $input, $path, array() );
+			if (
+				isset( $value ) &&
+				! is_array( $value ) &&
+				static::is_safe_css_declaration( $property, $value )
+			) {
+				_wp_array_set( $output, $path, $value );
+			}
+		}
+
+		return $output;
+	}
 }
diff --git a/lib/experimental/kses.php b/lib/experimental/kses.php
new file mode 100644
index 00000000000000..fd7531617939fc
--- /dev/null
+++ b/lib/experimental/kses.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * Temporary compatibility shims for kses rules present in Gutenberg.
+ *
+ * The functions in this file should not be backported to core.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Sanitizes global styles user content removing unsafe rules.
+ *
+ * This function is identical to the core version, but called the
+ * Gutenberg version of the theme JSON class (`WP_Theme_JSON_Gutenberg`).
+ *
+ * This function should not be backported to core.
+ *
+ * @since 5.9.0
+ *
+ * @param string $data Post content to filter.
+ * @return string Filtered post content with unsafe rules removed.
+ */
+function gutenberg_filter_global_styles_post( $data ) {
+	$decoded_data        = json_decode( wp_unslash( $data ), true );
+	$json_decoding_error = json_last_error();
+	if (
+		JSON_ERROR_NONE === $json_decoding_error &&
+		is_array( $decoded_data ) &&
+		isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
+		$decoded_data['isGlobalStylesUserThemeJSON']
+	) {
+		unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
+
+		$data_to_encode = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $decoded_data );
+
+		$data_to_encode['isGlobalStylesUserThemeJSON'] = true;
+		return wp_slash( wp_json_encode( $data_to_encode ) );
+	}
+	return $data;
+}
+
+/**
+ * Override core's kses_init_filters hooks for global styles,
+ * and use Gutenberg's version instead. This ensures that
+ * Gutenberg's `remove_insecure_properties` function can be called.
+ *
+ * The hooks are only set if they are already added, which ensures
+ * that global styles is only filtered for users without the `unfiltered_html`
+ * capability.
+ *
+ * This function should not be backported to core.
+ */
+function gutenberg_override_core_kses_init_filters() {
+	if ( has_filter( 'content_save_pre', 'wp_filter_global_styles_post' ) ) {
+		remove_filter( 'content_save_pre', 'wp_filter_global_styles_post', 9 );
+		add_filter( 'content_save_pre', 'gutenberg_filter_global_styles_post', 9 );
+	}
+
+	if ( has_filter( 'content_filtered_save_pre', 'wp_filter_global_styles_post' ) ) {
+		remove_filter( 'content_filtered_save_pre', 'wp_filter_global_styles_post', 9 );
+		add_filter( 'content_filtered_save_pre', 'gutenberg_filter_global_styles_post', 9 );
+	}
+
+}
+add_action( 'init', 'gutenberg_override_core_kses_init_filters' );
+add_action( 'set_current_user', 'gutenberg_override_core_kses_init_filters' );
diff --git a/lib/load.php b/lib/load.php
index d2ec3611e6cb42..3d871e607d7fa5 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -99,6 +99,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/webfonts.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/navigation-page.php';
+require __DIR__ . '/experimental/kses.php';
 
 // Plugin specific code.
 require __DIR__ . '/blocks.php';
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 15932f7398bfa9..74306fa5d8ae32 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -751,6 +751,50 @@ public function test_get_stylesheet_with_block_support_feature_level_selectors()
 		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
 	}
 
+	public function test_allow_indirect_properties() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks'  => array(
+						'core/social-links' => array(
+							'spacing' => array(
+								'blockGap' => array(
+									'top'  => '1em',
+									'left' => '2em',
+								),
+							),
+						),
+					),
+					'spacing' => array(
+						'blockGap' => '3em',
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks'  => array(
+					'core/social-links' => array(
+						'spacing' => array(
+							'blockGap' => array(
+								'top'  => '1em',
+								'left' => '2em',
+							),
+						),
+					),
+				),
+				'spacing' => array(
+					'blockGap' => '3em',
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
 	public function test_remove_invalid_element_pseudo_selectors() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(

From a7dcc68b3b0831b115faadf177f1d8eba5412a6c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 13 Dec 2022 11:53:23 +1100
Subject: [PATCH 045/209] Global Styles: Fix Reset to defaults action by moving
 fills to be within context provider (#46486)

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

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 2bb06063bc75aa..b9ce354f58159b 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -172,7 +172,6 @@ export default function Editor() {
 		<>
 			{ isEditMode && <WelcomeGuide /> }
 			<KeyboardShortcuts.Register />
-			<SidebarComplementaryAreaFills />
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
 					kind="postType"
@@ -181,6 +180,7 @@ export default function Editor() {
 				>
 					<GlobalStylesProvider>
 						<BlockContextProvider value={ blockContext }>
+							<SidebarComplementaryAreaFills />
 							<InterfaceSkeleton
 								className={
 									showIconLabels && 'show-icon-labels'

From 72cb08b6b7386ebf3761541afabe85a1b5d1f592 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 13 Dec 2022 13:17:21 +0900
Subject: [PATCH 046/209] Modal: Fix unexpected modal closing in IME
 Composition (#46453)

* Modal: Fix unexpected modal Closing in IME Compositions

* Add a unit test
---
 packages/components/CHANGELOG.md                |  1 +
 packages/components/src/modal/index.tsx         | 11 +++++++++++
 packages/components/src/modal/stories/index.tsx |  3 +++
 packages/components/src/modal/test/index.tsx    | 15 +++++++++++++++
 4 files changed, 30 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 21d968568374b4..7ed9fc6779bbae 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -16,6 +16,7 @@
 -   `ColorPalette`: show "Clear" button even when colors array is empty ([#46001](https://github.com/WordPress/gutenberg/pull/46001)).
 -   `InputControl`: Fix internal `Flex` wrapper usage that could add an unintended `height: 100%` ([#46213](https://github.com/WordPress/gutenberg/pull/46213)).
 -   `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
+-   `Modal`: Fix unexpected modal closing in IME Composition ([#46453](https://github.com/WordPress/gutenberg/pull/46453)).
 
 ### Enhancements
 
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 8c4f3a8535704d..10316b56993c40 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -98,6 +98,17 @@ function UnforwardedModal(
 	}, [ bodyOpenClassName ] );
 
 	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+		if (
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
+			return;
+		}
+
 		if (
 			shouldCloseOnEsc &&
 			event.code === 'Escape' &&
diff --git a/packages/components/src/modal/stories/index.tsx b/packages/components/src/modal/stories/index.tsx
index 42b7874b1eeaab..7f414d47c2d11c 100644
--- a/packages/components/src/modal/stories/index.tsx
+++ b/packages/components/src/modal/stories/index.tsx
@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
+import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
 
@@ -75,6 +76,8 @@ const Template: ComponentStory< typeof Modal > = ( {
 						anim id est laborum.
 					</p>
 
+					<InputControl style={ { marginBottom: '20px' } } />
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index a0778bfb8aab8b..310dc3d6e63a9f 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -69,4 +70,18 @@ describe( 'Modal', () => {
 		const title = within( dialog ).queryByText( 'Test Title' );
 		expect( title ).not.toBeInTheDocument();
 	} );
+
+	it( 'should call onRequestClose when the escape key is pressed', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const onRequestClose = jest.fn();
+		render(
+			<Modal onRequestClose={ onRequestClose }>
+				<p>Modal content</p>
+			</Modal>
+		);
+		await user.keyboard( '[Escape]' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
 } );

From 436666dc353d3b373a1a587080af94a5f047233e Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Tue, 13 Dec 2022 17:50:26 +1300
Subject: [PATCH 047/209] Global styles: add custom CSS panel to site editor
 (#46141)

---
 .../wordpress-6.2/block-editor-settings.php   |  28 +++
 ...berg-rest-global-styles-controller-6-2.php | 202 ++++++++++++++++++
 .../wordpress-6.2/class-wp-theme-json-6-2.php | 111 ++++++++++
 .../class-wp-theme-json-resolver-6-2.php      |  59 +++++
 .../get-global-styles-and-settings.php        |   2 +-
 lib/compat/wordpress-6.2/rest-api.php         |   9 +
 lib/load.php                                  |   4 +-
 .../components/global-styles/custom-css.js    |  73 +++++++
 .../src/components/global-styles/hooks.js     |   6 +-
 .../components/global-styles/screen-css.js    |  33 +++
 .../components/global-styles/screen-root.js   |  31 ++-
 .../src/components/global-styles/style.scss   |  15 +-
 .../src/components/global-styles/ui.js        |   4 +
 .../global-styles/use-global-styles-output.js |   5 +
 phpunit/class-wp-theme-json-test.php          |  14 ++
 15 files changed, 591 insertions(+), 5 deletions(-)
 create mode 100644 lib/compat/wordpress-6.2/block-editor-settings.php
 create mode 100644 lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
 create mode 100644 packages/edit-site/src/components/global-styles/custom-css.js
 create mode 100644 packages/edit-site/src/components/global-styles/screen-css.js

diff --git a/lib/compat/wordpress-6.2/block-editor-settings.php b/lib/compat/wordpress-6.2/block-editor-settings.php
new file mode 100644
index 00000000000000..7323d34eb667ce
--- /dev/null
+++ b/lib/compat/wordpress-6.2/block-editor-settings.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Adds settings to the block editor.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds styles and __experimentalFeatures to the block editor settings.
+ *
+ * @param array $settings Existing block editor settings.
+ *
+ * @return array New block editor settings.
+ */
+function gutenberg_get_block_editor_settings_6_2( $settings ) {
+	if ( wp_theme_has_theme_json() ) {
+		// Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles.
+		$settings['styles'][] = array(
+			'css'            => gutenberg_get_global_stylesheet( array( 'custom-css' ) ),
+			'__unstableType' => 'user',
+			'isGlobalStyles' => true,
+		);
+	}
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_6_2', PHP_INT_MAX );
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
new file mode 100644
index 00000000000000..9f762dd961d058
--- /dev/null
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
@@ -0,0 +1,202 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Global_Styles_Controller class
+ *
+ * @package    Gutenberg
+ * @subpackage REST_API
+ */
+
+/**
+ * Base Global Styles REST API Controller.
+ */
+class Gutenberg_REST_Global_Styles_Controller_6_2 extends WP_REST_Global_Styles_Controller {
+	/**
+	 * Registers the controllers routes.
+	 *
+	 * @return void
+	 */
+	public function register_routes() {
+		parent::register_routes();
+	}
+
+	/**
+	 * Prepare a global styles config output for response.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2 Handling of style.css was added to WP_Theme_JSON.
+	 *
+	 * @param WP_Post         $post Global Styles post object.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	public function prepare_item_for_response( $post, $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		$raw_config                       = json_decode( $post->post_content, true );
+		$is_global_styles_user_theme_json = isset( $raw_config['isGlobalStylesUserThemeJSON'] ) && true === $raw_config['isGlobalStylesUserThemeJSON'];
+		$config                           = array();
+		if ( $is_global_styles_user_theme_json ) {
+			$config = ( new WP_Theme_JSON_Gutenberg( $raw_config, 'custom' ) )->get_raw_data();
+		}
+
+		// Base fields for every post.
+		$data   = array();
+		$fields = $this->get_fields_for_response( $request );
+
+		if ( rest_is_field_included( 'id', $fields ) ) {
+			$data['id'] = $post->ID;
+		}
+
+		if ( rest_is_field_included( 'title', $fields ) ) {
+			$data['title'] = array();
+		}
+		if ( rest_is_field_included( 'title.raw', $fields ) ) {
+			$data['title']['raw'] = $post->post_title;
+		}
+		if ( rest_is_field_included( 'title.rendered', $fields ) ) {
+			add_filter( 'protected_title_format', array( $this, 'protected_title_format' ) );
+
+			$data['title']['rendered'] = get_the_title( $post->ID );
+
+			remove_filter( 'protected_title_format', array( $this, 'protected_title_format' ) );
+		}
+
+		if ( rest_is_field_included( 'settings', $fields ) ) {
+			$data['settings'] = ! empty( $config['settings'] ) && $is_global_styles_user_theme_json ? $config['settings'] : new stdClass();
+		}
+
+		if ( rest_is_field_included( 'styles', $fields ) ) {
+			$data['styles'] = ! empty( $config['styles'] ) && $is_global_styles_user_theme_json ? $config['styles'] : new stdClass();
+		}
+
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+
+		// Wrap the data in a response object.
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links = $this->prepare_links( $post->ID );
+			$response->add_links( $links );
+			if ( ! empty( $links['self']['href'] ) ) {
+				$actions = $this->get_available_actions();
+				$self    = $links['self']['href'];
+				foreach ( $actions as $rel ) {
+					$response->add_link( $rel, $self );
+				}
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Updates a single global style config.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Added validation of styles.css property.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function update_item( $request ) {
+		$post_before = $this->get_post( $request['id'] );
+		if ( is_wp_error( $post_before ) ) {
+			return $post_before;
+		}
+
+		$changes = $this->prepare_item_for_database( $request );
+		if ( is_wp_error( $changes ) ) {
+			return $changes;
+		}
+
+		$result = wp_update_post( wp_slash( (array) $changes ), true, false );
+		if ( is_wp_error( $result ) ) {
+			return $result;
+		}
+
+		$post          = get_post( $request['id'] );
+		$fields_update = $this->update_additional_fields_for_object( $post, $request );
+		if ( is_wp_error( $fields_update ) ) {
+			return $fields_update;
+		}
+
+		wp_after_insert_post( $post, true, $post_before );
+
+		$response = $this->prepare_item_for_response( $post, $request );
+
+		return rest_ensure_response( $response );
+	}
+	/**
+	 * Prepares a single global styles config for update.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Added validation of styles.css property.
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return stdClass Changes to pass to wp_update_post.
+	 */
+	protected function prepare_item_for_database( $request ) {
+		$changes         = new stdClass();
+		$changes->ID     = $request['id'];
+		$post            = get_post( $request['id'] );
+		$existing_config = array();
+		if ( $post ) {
+			$existing_config     = json_decode( $post->post_content, true );
+			$json_decoding_error = json_last_error();
+			if ( JSON_ERROR_NONE !== $json_decoding_error || ! isset( $existing_config['isGlobalStylesUserThemeJSON'] ) ||
+				! $existing_config['isGlobalStylesUserThemeJSON'] ) {
+				$existing_config = array();
+			}
+		}
+		if ( isset( $request['styles'] ) || isset( $request['settings'] ) ) {
+			$config = array();
+			if ( isset( $request['styles'] ) ) {
+				$config['styles']    = $request['styles'];
+				$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
+				if ( is_wp_error( $validate_custom_css ) ) {
+					return $validate_custom_css;
+				}
+			} elseif ( isset( $existing_config['styles'] ) ) {
+				$config['styles'] = $existing_config['styles'];
+			}
+			if ( isset( $request['settings'] ) ) {
+				$config['settings'] = $request['settings'];
+			} elseif ( isset( $existing_config['settings'] ) ) {
+				$config['settings'] = $existing_config['settings'];
+			}
+			$config['isGlobalStylesUserThemeJSON'] = true;
+			$config['version']                     = WP_Theme_JSON_Gutenberg::LATEST_SCHEMA;
+			$changes->post_content                 = wp_json_encode( $config );
+		}
+		// Post title.
+		if ( isset( $request['title'] ) ) {
+			if ( is_string( $request['title'] ) ) {
+				$changes->post_title = $request['title'];
+			} elseif ( ! empty( $request['title']['raw'] ) ) {
+				$changes->post_title = $request['title']['raw'];
+			}
+		}
+		return $changes;
+	}
+
+	/**
+	 * Validate style.css as valid CSS.
+	 *
+	 * Currently just checks for invalid markup.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $css CSS to validate.
+	 * @return true|WP_Error True if the input was validated, otherwise WP_Error.
+	 */
+	private function validate_custom_css( $css ) {
+		if ( preg_match( '#</?\w+#', $css ) ) {
+			return new WP_Error(
+				'rest_custom_css_illegal_markup',
+				__( 'Markup is not allowed in CSS.', 'gutenberg' ),
+				array( 'status' => 400 )
+			);
+		}
+		return true;
+	}
+}
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
index 3b368a10b7f303..fe01eb273066e2 100644
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
+++ b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
@@ -194,6 +194,7 @@ class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
 	 * @since 6.1.0 Added new side properties for `border`,
 	 *              added new property `shadow`,
 	 *              updated `blockGap` to be allowed at any level.
+	 * @since 6.2.0 Added new property `css`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -234,6 +235,7 @@ class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
 			'textDecoration' => null,
 			'textTransform'  => null,
 		),
+		'css'        => null,
 	);
 
 	/**
@@ -277,4 +279,113 @@ protected static function remove_insecure_styles( $input ) {
 
 		return $output;
 	}
+
+	/**
+	 * Returns the stylesheet that results of processing
+	 * the theme.json structure this object represents.
+	 *
+	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
+	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
+	 *                         'styles': only the styles section in theme.json.
+	 *                         'presets': only the classes for the presets.
+	 *                         'custom-css': only the css from global styles.css.
+	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
+	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
+	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
+	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
+	 * @return string Stylesheet.
+	 */
+	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
+		if ( null === $origins ) {
+			$origins = static::VALID_ORIGINS;
+		}
+
+		if ( is_string( $types ) ) {
+			// Dispatch error and map old arguments to new ones.
+			_deprecated_argument( __FUNCTION__, '5.9' );
+			if ( 'block_styles' === $types ) {
+				$types = array( 'styles', 'presets' );
+			} elseif ( 'css_variables' === $types ) {
+				$types = array( 'variables' );
+			} else {
+				$types = array( 'variables', 'styles', 'presets' );
+			}
+		}
+
+		$blocks_metadata = static::get_blocks_metadata();
+		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
+		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
+
+		$root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
+		$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
+
+		if ( ! empty( $options['scope'] ) ) {
+			foreach ( $setting_nodes as &$node ) {
+				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
+			}
+			foreach ( $style_nodes as &$node ) {
+				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
+			}
+		}
+
+		if ( ! empty( $options['root_selector'] ) ) {
+			if ( false !== $root_settings_key ) {
+				$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
+			}
+			if ( false !== $root_style_key ) {
+				$setting_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
+			}
+		}
+
+		$stylesheet = '';
+
+		if ( in_array( 'variables', $types, true ) ) {
+			$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
+		}
+
+		if ( in_array( 'styles', $types, true ) ) {
+			if ( false !== $root_style_key ) {
+				$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
+			}
+			$stylesheet .= $this->get_block_classes( $style_nodes );
+		} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
+			$root_selector    = static::ROOT_BLOCK_SELECTOR;
+			$columns_selector = '.wp-block-columns';
+			if ( ! empty( $options['scope'] ) ) {
+				$root_selector    = static::scope_selector( $options['scope'], $root_selector );
+				$columns_selector = static::scope_selector( $options['scope'], $columns_selector );
+			}
+			if ( ! empty( $options['root_selector'] ) ) {
+				$root_selector = $options['root_selector'];
+			}
+			// Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
+			// For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
+			$base_styles_nodes = array(
+				array(
+					'path'     => array( 'styles' ),
+					'selector' => $root_selector,
+				),
+				array(
+					'path'     => array( 'styles', 'blocks', 'core/columns' ),
+					'selector' => $columns_selector,
+					'name'     => 'core/columns',
+				),
+			);
+
+			foreach ( $base_styles_nodes as $base_style_node ) {
+				$stylesheet .= $this->get_layout_styles( $base_style_node );
+			}
+		}
+
+		if ( in_array( 'presets', $types, true ) ) {
+			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
+		}
+
+		// Load the custom CSS last so it has the highest specificity.
+		if ( in_array( 'custom-css', $types, true ) ) {
+			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
+		}
+
+		return $stylesheet;
+	}
 }
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
index 2cce8cec7e46e1..110c8bac7b147c 100644
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
+++ b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
@@ -168,4 +168,63 @@ public static function get_merged_data( $origin = 'custom' ) {
 		$result->set_spacing_sizes();
 		return $result;
 	}
+
+	/**
+	 * Returns the user's origin config.
+	 *
+	 * @since 6.2 Added check for the WP_Theme_JSON_Gutenberg class to prevent $user
+	 * values set in core fron overriding the new custom css values added to VALID_STYLES.
+	 * This does not need to be backported to core as the new VALID_STYLES[css] value will
+	 * be added to core with 6.2.
+	 *
+	 * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
+	 */
+	public static function get_user_data() {
+		if ( null !== static::$user && static::$user instanceof WP_Theme_JSON_Gutenberg ) {
+			return static::$user;
+		}
+
+		$config   = array();
+		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
+
+		if ( array_key_exists( 'post_content', $user_cpt ) ) {
+			$decoded_data = json_decode( $user_cpt['post_content'], true );
+
+			$json_decoding_error = json_last_error();
+			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
+				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
+				/**
+				 * Filters the data provided by the user for global styles & settings.
+				 *
+				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
+				 */
+				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+				$config     = $theme_json->get_data();
+				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+			}
+
+			// Very important to verify if the flag isGlobalStylesUserThemeJSON is true.
+			// If is not true the content was not escaped and is not safe.
+			if (
+				is_array( $decoded_data ) &&
+				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
+				$decoded_data['isGlobalStylesUserThemeJSON']
+			) {
+				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
+				$config = $decoded_data;
+			}
+		}
+
+		/**
+		 * Filters the data provided by the user for global styles & settings.
+		 *
+		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
+		 */
+		$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+		$config     = $theme_json->get_data();
+
+		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+
+		return static::$user;
+	}
 }
diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
index 1bf1ea23b6417f..b2188a92474f63 100644
--- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
@@ -85,7 +85,7 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 	if ( empty( $types ) && ! $supports_theme_json ) {
 		$types = array( 'variables', 'presets', 'base-layout-styles' );
 	} elseif ( empty( $types ) ) {
-		$types = array( 'variables', 'styles', 'presets' );
+		$types = array( 'variables', 'styles', 'presets', 'custom-css' );
 	}
 
 	/*
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 4541ce0ae158c6..4900a622b6c01b 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -92,3 +92,12 @@ function gutenberg_pattern_directory_collection_params_6_2( $query_params ) {
 	return $query_params;
 }
 add_filter( 'rest_pattern_directory_collection_params', 'gutenberg_pattern_directory_collection_params_6_2' );
+
+/**
+ * Registers the Global Styles REST API routes.
+ */
+function gutenberg_register_global_styles_endpoints() {
+	$editor_settings = new Gutenberg_REST_Global_Styles_Controller_6_2();
+	$editor_settings->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
diff --git a/lib/load.php b/lib/load.php
index 3d871e607d7fa5..b634b85b977e38 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -46,6 +46,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-pattern-directory-controller-6-2.php';
 	require_once __DIR__ . '/compat/wordpress-6.2/rest-api.php';
 	require_once __DIR__ . '/compat/wordpress-6.2/block-patterns.php';
+	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php';
 
 	// Experimental.
 	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
@@ -60,8 +61,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';
 
 // WordPress 6.1 compat.
-require __DIR__ . '/compat/wordpress-6.1/blocks.php';
 require __DIR__ . '/compat/wordpress-6.1/block-editor-settings.php';
+require __DIR__ . '/compat/wordpress-6.1/blocks.php';
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php';
@@ -83,6 +84,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
+require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
new file mode 100644
index 00000000000000..6c7d3de1cf06e5
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl, Panel, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+function CustomCSSControl() {
+	const [ customCSS, setCustomCSS ] = useStyle( 'css' );
+	const [ themeCSS ] = useStyle( 'css', null, 'base' );
+	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
+
+	// If there is custom css from theme.json show it in the edit box
+	// so the user can selectively overwrite it, rather than have the user CSS
+	// completely overwrite the theme CSS by default.
+	const themeCustomCSS =
+		! customCSS && themeCSS
+			? `/* ${ __(
+					'Theme Custom CSS start'
+			  ) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
+			: undefined;
+
+	function handleOnChange( value ) {
+		// If there is theme custom CSS, but the user clears the input box then save the
+		// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
+		if ( themeCSS && value === '' ) {
+			setCustomCSS( ignoreThemeCustomCSS );
+			return;
+		}
+		setCustomCSS( value );
+	}
+
+	const originalThemeCustomCSS =
+		themeCSS && customCSS && themeCustomCSS !== customCSS
+			? themeCSS
+			: undefined;
+
+	return (
+		<>
+			<TextareaControl
+				value={
+					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
+					themeCustomCSS
+				}
+				onChange={ ( value ) => handleOnChange( value ) }
+				rows={ 15 }
+				className="edit-site-global-styles__custom-css-input"
+				spellCheck={ false }
+				help={ __(
+					"Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template."
+				) }
+			/>
+			{ originalThemeCustomCSS && (
+				<Panel>
+					<PanelBody
+						title={ __( 'Original Theme Custom CSS' ) }
+						initialOpen={ false }
+					>
+						<pre className="edit-site-global-styles__custom-css-theme-css">
+							{ originalThemeCustomCSS }
+						</pre>
+					</PanelBody>
+				</Panel>
+			) }
+		</>
+	);
+}
+
+export default CustomCSSControl;
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 86e8aa2d2a6413..c767f1a488cbfd 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -138,7 +138,11 @@ export function useStyle( path, blockName, source = 'all' ) {
 			result = getValueFromVariable(
 				mergedConfig,
 				blockName,
-				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
+				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				finalPath === 'styles.css'
+					? get( userConfig, finalPath )
+					: get( userConfig, finalPath ) ??
+							get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
new file mode 100644
index 00000000000000..74480a0677bd16
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import CustomCSSControl from './custom-css';
+
+function ScreenCSS() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'CSS' ) }
+				description={ __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-css">
+				<VStack spacing={ 3 }>
+					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+					<CustomCSSControl />
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCSS;
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 0674b56319c70b..ecb68d27b7f4d7 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -75,7 +75,8 @@ function ScreenRoot() {
 					paddingTop={ 2 }
 					/*
 					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
+					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
 					marginBottom={ 4 }
@@ -98,6 +99,34 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
+
+			<CardDivider />
+
+			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Add your own CSS to customize the appearance and layout of your site.'
+					) }
+				</Spacer>
+				<ItemGroup>
+					<NavigationButtonAsItem
+						path="/css"
+						aria-label={ __( 'Additional CSS' ) }
+					>
+						<HStack justify="space-between">
+							<FlexItem>{ __( 'Custom' ) }</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</NavigationButtonAsItem>
+				</ItemGroup>
+			</CardBody>
 		</Card>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 16c9b9c418dcad..5616a068b594c8 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -31,7 +31,8 @@ $block-preview-height: 150px;
 }
 
 .edit-site-global-styles-screen-heading-color,
-.edit-site-global-styles-screen-typography {
+.edit-site-global-styles-screen-typography,
+.edit-site-global-styles-screen-css {
 	margin: $grid-unit-20;
 }
 
@@ -133,3 +134,15 @@ $block-preview-height: 150px;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 }
+
+.edit-site-global-styles__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.edit-site-global-styles__custom-css-theme-css {
+	width: 100%;
+	line-break: anywhere;
+	white-space: break-spaces;
+	max-height: 200px;
+	overflow-y: scroll;
+}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 532a211597a81f..d7c9eed7d8474b 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -27,6 +27,7 @@ import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
+import ScreenCSS from './screen-css';
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -191,6 +192,9 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
 		</NavigatorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index b32201fe2d2c22..d83693757b035c 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -919,6 +919,11 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
+			// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
+			{
+				css: mergedConfig.styles.css ?? '',
+				isGlobalStyles: true,
+			},
 		];
 
 		return [ stylesheets, mergedConfig.settings, filters ];
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 74306fa5d8ae32..a5413766ca7ddd 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -1497,4 +1497,18 @@ public function test_update_separator_declarations() {
 		$this->assertEquals( $expected, $stylesheet );
 
 	}
+
+	public function test_get_stylesheet_handles_custom_css() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'css' => 'body { color:purple; }',
+				),
+			)
+		);
+
+		$custom_css = 'body { color:purple; }';
+		$this->assertEquals( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) );
+	}
 }

From 0dd1da54fa122fb06192ba29333b2ddfcb39e5e9 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 13 Dec 2022 13:11:41 +0800
Subject: [PATCH 048/209] Query: Remove color block supports (#46147)

---
 docs/reference-guides/core-blocks.md          |   4 +-
 .../src/post-template/block.json              |   8 +
 packages/block-library/src/query/block.json   |   8 -
 .../block-library/src/query/deprecated.js     | 345 +++++++++++++-----
 .../blocks/core__query__deprecated-3.html     |  23 ++
 .../blocks/core__query__deprecated-3.json     | 133 +++++++
 .../core__query__deprecated-3.parsed.json     | 128 +++++++
 .../core__query__deprecated-3.serialized.html |  25 ++
 8 files changed, 577 insertions(+), 97 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.html
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e3601a1f0a5093..d2d66fc0d12de3 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -572,7 +572,7 @@ Contains the block elements used to render a post, like the title, date, feature
 
 -	**Name:** core/post-template
 -	**Category:** theme
--	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Post Terms
@@ -617,7 +617,7 @@ An advanced block that allows displaying post types based on different query par
 
 -	**Name:** core/query
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
+-	**Supports:** align (full, wide), ~~html~~
 -	**Attributes:** displayLayout, namespace, query, queryId, tagName
 
 ## No results
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index 380b6d55f71fad..bc9910b47d1dc5 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -22,6 +22,14 @@
 		"__experimentalLayout": {
 			"allowEditing": false
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index cd09e22ee57f75..1974761962ec91 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -50,14 +50,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
 		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"
diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
index 42ac3dc4f1c49d..d38ab3328559be 100644
--- a/packages/block-library/src/query/deprecated.js
+++ b/packages/block-library/src/query/deprecated.js
@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import cleanEmptyObject from '../utils/clean-empty-object';
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +31,271 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
-const deprecated = [
-	// Version with `categoryIds and tagIds`.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
+const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
+	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
+
+// Version with NO wrapper `div` element.
+const v1 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			tagName: {
-				type: 'string',
-				default: 'div',
+		},
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		},
+	},
+	supports: {
+		html: false,
+	},
+	migrate( attributes ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		return {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};
+
+// Version with `categoryIds and tagIds`.
+const v2 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
 		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			__experimentalLayout: true,
 		},
-		isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
-			categoryIds || tagIds,
-		migrate: migrateToTaxQuery,
-		save( { attributes: { tagName: Tag = 'div' } } ) {
-			const blockProps = useBlockProps.save();
-			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-			return <Tag { ...innerBlocksProps } />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
 		},
+		__experimentalLayout: true,
 	},
-	// Version with NO wrapper `div` element.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
-			},
-			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate: migrateToTaxQuery,
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+// Version with color support prior to moving it to the PostTemplate block.
+const v3 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
 			},
 		},
-		supports: {
-			html: false,
+		tagName: {
+			type: 'string',
+			default: 'div',
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		save() {
-			return <InnerBlocks.Content />;
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		__experimentalLayout: true,
 	},
-];
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link
+		);
+	},
+	migrate: ( attributes, innerBlocks ) => {
+		// Remove color style attributes from the Query block.
+		const {
+			style,
+			backgroundColor,
+			gradient,
+			textColor,
+			...newAttributes
+		} = attributes;
+
+		const hasColorStyles =
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link;
+
+		// If the query block doesn't currently have any color styles,
+		// nothing needs migrating.
+		if ( ! hasColorStyles ) {
+			return [ attributes, innerBlocks ];
+		}
+
+		// Clean color values from style attribute object.
+		if ( style ) {
+			newAttributes.style = cleanEmptyObject( {
+				...style,
+				color: undefined,
+				elements: {
+					...style.elements,
+					link: undefined,
+				},
+			} );
+		}
+
+		// If the inner blocks are already wrapped in a single group
+		// block, add the color support styles to that group block.
+		if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+			const groupBlock = innerBlocks[ 0 ];
+
+			// Create new styles for the group block.
+			const hasStyles =
+				style?.color ||
+				style?.elements?.link ||
+				groupBlock.attributes.style;
+
+			const newStyles = hasStyles
+				? cleanEmptyObject( {
+						...groupBlock.attributes.style,
+						color: style?.color,
+						elements: style?.elements?.link
+							? { link: style?.elements?.link }
+							: undefined,
+				  } )
+				: undefined;
+
+			// Create a new Group block from the original.
+			const updatedGroupBlock = createBlock(
+				'core/group',
+				{
+					...groupBlock.attributes,
+					backgroundColor,
+					gradient,
+					textColor,
+					style: newStyles,
+				},
+				groupBlock.innerBlocks
+			);
+
+			return [ newAttributes, [ updatedGroupBlock ] ];
+		}
+
+		// When we don't have a single wrapping group block for the inner
+		// blocks, wrap the current inner blocks in a group applying the
+		// color styles to that.
+		const newGroupBlock = createBlock(
+			'core/group',
+			{
+				backgroundColor,
+				gradient,
+				textColor,
+				style: cleanEmptyObject( {
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+				} ),
+			},
+			innerBlocks
+		);
+
+		return [ newAttributes, [ newGroupBlock ] ];
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.html b/test/integration/fixtures/blocks/core__query__deprecated-3.html
new file mode 100644
index 00000000000000..9da20c78184e2a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.html
@@ -0,0 +1,23 @@
+<!-- wp:query {"queryId":3,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide","style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}},"textColor":"pale-cyan-blue"} -->
+<div class="wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template {"fontSize":"large"} -->
+<!-- wp:post-title /-->
+
+<!-- wp:post-date /-->
+
+<!-- wp:post-excerpt /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p>No results found.</p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json
new file mode 100644
index 00000000000000..bb1478cd676f22
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -0,0 +1,133 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 3,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"tagName": "div",
+			"displayLayout": {
+				"type": "flex",
+				"columns": 3
+			},
+			"align": "wide"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/group",
+				"isValid": true,
+				"attributes": {
+					"tagName": "div",
+					"textColor": "pale-cyan-blue",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"innerBlocks": [
+					{
+						"name": "core/post-template",
+						"isValid": true,
+						"attributes": {
+							"fontSize": "large"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/post-title",
+								"isValid": true,
+								"attributes": {
+									"level": 2,
+									"isLink": false,
+									"rel": "",
+									"linkTarget": "_self"
+								},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/post-date",
+								"isValid": true,
+								"attributes": {
+									"isLink": false,
+									"displayType": "date"
+								},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/post-excerpt",
+								"isValid": true,
+								"attributes": {
+									"showMoreOnNewLine": true
+								},
+								"innerBlocks": []
+							}
+						]
+					},
+					{
+						"name": "core/query-pagination",
+						"isValid": true,
+						"attributes": {
+							"paginationArrow": "none"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/query-pagination-previous",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/query-pagination-numbers",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/query-pagination-next",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							}
+						]
+					},
+					{
+						"name": "core/query-no-results",
+						"isValid": true,
+						"attributes": {},
+						"innerBlocks": [
+							{
+								"name": "core/paragraph",
+								"isValid": true,
+								"attributes": {
+									"content": "No results found.",
+									"dropCap": false,
+									"placeholder": "Add text or blocks that will display when a query returns no results."
+								},
+								"innerBlocks": []
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
new file mode 100644
index 00000000000000..a26e573bac314b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.parsed.json
@@ -0,0 +1,128 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 3,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"displayLayout": {
+				"type": "flex",
+				"columns": 3
+			},
+			"align": "wide",
+			"style": {
+				"color": {
+					"background": "#284d5f"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|luminous-vivid-amber"
+						}
+					}
+				}
+			},
+			"textColor": "pale-cyan-blue"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/post-template",
+				"attrs": {
+					"fontSize": "large"
+				},
+				"innerBlocks": [
+					{
+						"blockName": "core/post-title",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/post-date",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/post-excerpt",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n\n\n\n\n",
+				"innerContent": [ "\n", null, "\n\n", null, "\n\n", null, "\n" ]
+			},
+			{
+				"blockName": "core/query-pagination",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/query-pagination-previous",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/query-pagination-numbers",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					},
+					{
+						"blockName": "core/query-pagination-next",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n\n\n\n\n",
+				"innerContent": [ "\n", null, "\n\n", null, "\n\n", null, "\n" ]
+			},
+			{
+				"blockName": "core/query-no-results",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {
+							"placeholder": "Add text or blocks that will display when a query returns no results."
+						},
+						"innerBlocks": [],
+						"innerHTML": "\n<p>No results found.</p>\n",
+						"innerContent": [ "\n<p>No results found.</p>\n" ]
+					}
+				],
+				"innerHTML": "\n\n",
+				"innerContent": [ "\n", null, "\n" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">\n\n\n\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query alignwide has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">",
+			null,
+			"\n\n",
+			null,
+			"\n\n",
+			null,
+			"</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
new file mode 100644
index 00000000000000..edbf5b1a0557b3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:query {"queryId":3,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
+<div class="wp-block-query alignwide"><!-- wp:group {"textColor":"pale-cyan-blue","style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}}} -->
+<div class="wp-block-group has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template {"fontSize":"large"} -->
+<!-- wp:post-title /-->
+
+<!-- wp:post-date /-->
+
+<!-- wp:post-excerpt /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p>No results found.</p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query -->

From fcc158b966555c92552ab5cabb015d03ea74da08 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Tue, 13 Dec 2022 08:46:15 +0100
Subject: [PATCH 049/209] Mobile - Inserter - Use .then instead of .done since
 the polyfill is now deprecated. (#46460)

---
 packages/block-editor/src/components/inserter/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index 7dcc0fdbef0e13..a3e6981e6ecfc7 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -216,7 +216,7 @@ export class Inserter extends Component {
 	}
 
 	onInserterToggledAnnouncement( isOpen ) {
-		AccessibilityInfo.isScreenReaderEnabled().done( ( isEnabled ) => {
+		AccessibilityInfo.isScreenReaderEnabled().then( ( isEnabled ) => {
 			if ( isEnabled ) {
 				const isIOS = Platform.OS === 'ios';
 				const announcement = isOpen

From 98409e95b2d90579c6545bc60e7268da21a14df4 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Tue, 13 Dec 2022 10:32:48 +0200
Subject: [PATCH 050/209] "custom-css" is now an acceptable value. (#46493)

---
 lib/compat/wordpress-6.2/get-global-styles-and-settings.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
index b2188a92474f63..8556a0be1663f4 100644
--- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
@@ -63,7 +63,7 @@ function wp_theme_has_theme_json_clean_cache() {
  * Returns the stylesheet resulting of merging core, theme, and user data.
  *
  * @param array $types Types of styles to load. Optional.
- *                     It accepts 'variables', 'styles', 'presets' as values.
+ *                     It accepts 'variables', 'styles', 'presets', 'custom-css' as values.
  *                     If empty, it'll load all for themes with theme.json support
  *                     and only [ 'variables', 'presets' ] for themes without theme.json support.
  *

From 570e7d99c5e4e80f654be2f65aecb45d978469dd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Dec 2022 10:55:26 +0100
Subject: [PATCH 051/209] Fix content locked patterns (#46494)

---
 packages/block-editor/src/store/selectors.js  |  4 +--
 ...ocks-with-content-only-lock-1-chromium.txt |  5 +++
 .../editor/various/content-only-lock.spec.js  | 31 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 test/e2e/specs/editor/various/__snapshots__/Content-only-lock-should-be-able-to-edit-the-content-of-blocks-with-content-only-lock-1-chromium.txt
 create mode 100644 test/e2e/specs/editor/various/content-only-lock.spec.js

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 36d3f42ae58bc7..694f54bacdee01 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2690,8 +2690,8 @@ export const __unstableGetContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
 		let result;
-		while ( !! state.blocks.parents[ current ] ) {
-			current = state.blocks.parents[ current ];
+		while ( state.blocks.parents.has( current ) ) {
+			current = state.blocks.parents.get( current );
 			if ( getTemplateLock( state, current ) === 'contentOnly' ) {
 				result = current;
 			}
diff --git a/test/e2e/specs/editor/various/__snapshots__/Content-only-lock-should-be-able-to-edit-the-content-of-blocks-with-content-only-lock-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Content-only-lock-should-be-able-to-edit-the-content-of-blocks-with-content-only-lock-1-chromium.txt
new file mode 100644
index 00000000000000..18f0839c8dc89f
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Content-only-lock-should-be-able-to-edit-the-content-of-blocks-with-content-only-lock-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Hello World</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
new file mode 100644
index 00000000000000..41626ed986b8f2
--- /dev/null
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Content-only lock', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should be able to edit the content of blocks with content-only lock', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add content only locked block in the code editor
+		await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+		await page.click( '.editor-post-text-editor' );
+		await page.keyboard
+			.type( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+        <div class="wp-block-group"><!-- wp:paragraph -->
+        <p>Hello</p>
+        <!-- /wp:paragraph --></div>
+        <!-- /wp:group -->` );
+		await pageUtils.pressKeyWithModifier( 'secondary', 'M' );
+
+		await page.click( 'role=document[name="Paragraph block"i]' );
+		await page.keyboard.type( ' World' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

From 0819ea01b7afe476df524b017b1919cc962802ea Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Dec 2022 12:16:54 +0200
Subject: [PATCH 052/209] Lodash: Refactor editor away from _.find() (#46464)

---
 packages/editor/src/components/page-attributes/parent.js  | 5 ++---
 packages/editor/src/components/post-format/index.js       | 8 +-------
 .../post-publish-panel/maybe-post-format-panel.js         | 4 ++--
 .../src/components/post-taxonomies/flat-term-selector.js  | 6 +++---
 .../post-taxonomies/hierarchical-term-selector.js         | 4 ++--
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
index 4ee2491e17209b..2e402f59415c78 100644
--- a/packages/editor/src/components/page-attributes/parent.js
+++ b/packages/editor/src/components/page-attributes/parent.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString, find } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -122,8 +122,7 @@ export function PageAttributesParent() {
 		const opts = getOptionsFromTree( tree );
 
 		// Ensure the current parent is in the options list.
-		const optsHasParent = find(
-			opts,
+		const optsHasParent = opts.find(
 			( item ) => item.value === parentPostId
 		);
 		if ( parentPost && ! optsHasParent ) {
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index 4f3ec2c6966937..518ec2c0d26bca 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -69,8 +64,7 @@ export default function PostFormat() {
 			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
-	const suggestion = find(
-		formats,
+	const suggestion = formats.find(
 		( format ) => format.id === suggestedFormat
 	);
 
diff --git a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
index e2aff854a7a9eb..106665c9ea69e6 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
 	const formats = POST_FORMATS.filter( ( format ) =>
 		supportedFormats?.includes( format.id )
 	);
-	return find( formats, ( format ) => format.id === suggestedPostFormat );
+	return formats.find( ( format ) => format.id === suggestedPostFormat );
 };
 
 const PostFormatSuggestion = ( {
diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
index 2195628cdd1681..b47e7bd3c9dda3 100644
--- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import escapeHtml from 'escape-html';
 
 /**
@@ -50,7 +50,7 @@ const isSameTermName = ( termA, termB ) =>
 const termNamesToIds = ( names, terms ) => {
 	return names.map(
 		( termName ) =>
-			find( terms, ( term ) => isSameTermName( term.name, termName ) ).id
+			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
 	);
 };
 
@@ -203,7 +203,7 @@ export function FlatTermSelector( { slug } ) {
 
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
-				! find( availableTerms, ( term ) =>
+				! availableTerms.find( ( term ) =>
 					isSameTermName( term.name, termName )
 				)
 		);
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 7663113dc03207..58734bea267895 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, unescape as unescapeString } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export function sortBySelected( termsTree, terms ) {
  * @return {Object} Term object.
  */
 export function findTerm( terms, parent, name ) {
-	return find( terms, ( term ) => {
+	return terms.find( ( term ) => {
 		return (
 			( ( ! term.parent && ! parent ) ||
 				parseInt( term.parent ) === parseInt( parent ) ) &&

From f5582817aa2c45ddc7d52dac50025fcfc2a438e3 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Dec 2022 12:17:10 +0200
Subject: [PATCH 053/209] Lodash: Refactor core-data away from _.find()
 (#46468)

---
 packages/core-data/src/actions.js   | 13 +++++++++----
 packages/core-data/src/entities.js  | 10 +++++++---
 packages/core-data/src/selectors.ts | 11 ++++++++---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 550264d6232ae3..307e5cef0e2296 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { find } from 'lodash';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -256,7 +255,9 @@ export const deleteEntityRecord =
 	) =>
 	async ( { dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
 		let error;
 		let deletedRecord = false;
 		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
@@ -451,7 +452,9 @@ export const saveEntityRecord =
 	) =>
 	async ( { select, resolveSelect, dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
 		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
 			return;
 		}
@@ -723,7 +726,9 @@ export const saveEditedEntityRecord =
 			return;
 		}
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
 		if ( ! entityConfig ) {
 			return;
 		}
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index 0b64c3362e8955..2fc6f4d41d7684 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { capitalCase, pascalCase } from 'change-case';
-import { map, find, get } from 'lodash';
+import { map, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -288,7 +288,9 @@ export const getMethodName = (
 	prefix = 'get',
 	usePlural = false
 ) => {
-	const entityConfig = find( rootEntitiesConfig, { kind, name } );
+	const entityConfig = rootEntitiesConfig.find(
+		( config ) => config.kind === kind && config.name === name
+	);
 	const kindPrefix = kind === 'root' ? '' : pascalCase( kind );
 	const nameSuffix = pascalCase( name ) + ( usePlural ? 's' : '' );
 	const suffix =
@@ -313,7 +315,9 @@ export const getOrLoadEntitiesConfig =
 			return configs;
 		}
 
-		const loader = find( additionalEntityConfigLoaders, { kind } );
+		const loader = additionalEntityConfigLoaders.find(
+			( l ) => l.kind === kind
+		);
 		if ( ! loader ) {
 			return [];
 		}
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index 93306d2226e7a2..9998d67728e745 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { set, map, find, get } from 'lodash';
+import { set, map, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -218,7 +218,9 @@ export function getEntityConfig(
 	kind: string,
 	name: string
 ): any {
-	return find( state.entities.config, { kind, name } );
+	return state.entities.config?.find(
+		( config ) => config.kind === kind && config.name === name
+	);
 }
 
 /**
@@ -1129,7 +1131,10 @@ export function getAutosave< EntityRecord extends ET.EntityRecord< any > >(
 	}
 
 	const autosaves = state.autosaves[ postId ];
-	return find( autosaves, { author: authorId } ) as EntityRecord | undefined;
+
+	return autosaves?.find(
+		( autosave: any ) => autosave.author === authorId
+	) as EntityRecord | undefined;
 }
 
 /**

From dd0504bd34c29b5b2824d82c8d2bb3a8d0f071ec Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:01:53 +0200
Subject: [PATCH 054/209] ESLint: Fix warning in getBlockAttribute
 documentation (#46500)

---
 packages/blocks/src/api/parser/get-block-attributes.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
index c8d7aa88204cca..ffa67c11250c2f 100644
--- a/packages/blocks/src/api/parser/get-block-attributes.js
+++ b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -102,11 +102,11 @@ export function isOfTypes( value, types ) {
  * commentAttributes returns the attribute value depending on its source
  * definition of the given attribute key.
  *
- * @param {string}      attributeKey      Attribute key.
- * @param {Object}      attributeSchema   Attribute's schema.
- * @param {Node}        innerDOM          Parsed DOM of block's inner HTML.
- * @param {Object}      commentAttributes Block's comment attributes.
- * @param {string}      innerHTML         Raw HTML from block node's innerHTML property.
+ * @param {string} attributeKey      Attribute key.
+ * @param {Object} attributeSchema   Attribute's schema.
+ * @param {Node}   innerDOM          Parsed DOM of block's inner HTML.
+ * @param {Object} commentAttributes Block's comment attributes.
+ * @param {string} innerHTML         Raw HTML from block node's innerHTML property.
  *
  * @return {*} Attribute value.
  */

From 6a54882a9b0814e424897dc2e334986c3bcc887e Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:57:03 +0200
Subject: [PATCH 055/209] Components: Also ignore no-node-access for some
 components (#46501)

---
 packages/components/src/range-control/test/index.tsx | 4 ++--
 packages/components/src/tooltip/test/index.js        | 4 ++--
 packages/components/src/unit-control/test/index.tsx  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index 0343b084daaa41..bbb97dbfaa0859 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -43,11 +43,11 @@ describe( 'RangeControl', () => {
 				/>
 			);
 
-			// eslint-disable-next-line testing-library/no-container
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const beforeIcon = container.querySelector(
 				'.dashicons-format-image'
 			);
-			// eslint-disable-next-line testing-library/no-container
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const afterIcon = container.querySelector(
 				'.dashicons-format-video'
 			);
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index 9e827c6172b15d..21892dea6a0da5 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -212,7 +212,7 @@ describe( 'Tooltip', () => {
 			// Note: this is testing for implementation details,
 			// but couldn't find a better way.
 			const buttonRect = button.getBoundingClientRect();
-			// eslint-disable-next-line testing-library/no-container
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const eventCatcher = container.querySelector( '.event-catcher' );
 			const eventCatcherRect = eventCatcher.getBoundingClientRect();
 			expect( buttonRect ).toEqual( eventCatcherRect );
@@ -252,7 +252,7 @@ describe( 'Tooltip', () => {
 				</Tooltip>
 			);
 
-			// eslint-disable-next-line testing-library/no-container
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const eventCatcher = container.querySelector( '.event-catcher' );
 			await user.click( eventCatcher );
 			expect( onClickMock ).not.toHaveBeenCalled();
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 32e565fec23866..1703b3ad34db4e 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -115,7 +115,7 @@ describe( 'UnitControl', () => {
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
-				// eslint-disable-next-line testing-library/no-container
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 				withClassName.querySelector( '.components-unit-control' )
 			).toHaveClass( 'hello' );
 		} );

From bfb7ed28e6ed1eecb71af029288fbbb62e13994c Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Mon, 12 Dec 2022 18:40:23 -0800
Subject: [PATCH 056/209] Check for NULL value in block_type asset handles

---
 lib/compat/wordpress-6.2/script-loader.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 84681b31512386..edeccf9c761ee7 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -92,13 +92,13 @@ function gutenberg_resolve_assets_override() {
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		$style_handles = array_merge(
 			$style_handles,
-			$block_type->style_handles,
-			$block_type->editor_style_handles
+			is_null( $block_type->style_handles ) ? array() : $block_type->style_handles,
+			is_null( $block_type->editor_style_handles ) ? array() : $block_type->editor_style_handles
 		);
 
 		$script_handles = array_merge(
 			$script_handles,
-			$block_type->script_handles
+			is_null( $block_type->script_handles ) ? array() : $block_type->script_handles
 		);
 	}
 

From 737325919dec3e244b9bfcfbb5601a07fa696933 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 12:47:41 -0800
Subject: [PATCH 057/209] Use isset instead of is_null

---
 lib/compat/wordpress-6.2/script-loader.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index edeccf9c761ee7..564757dffc42ca 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -92,13 +92,13 @@ function gutenberg_resolve_assets_override() {
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		$style_handles = array_merge(
 			$style_handles,
-			is_null( $block_type->style_handles ) ? array() : $block_type->style_handles,
-			is_null( $block_type->editor_style_handles ) ? array() : $block_type->editor_style_handles
+			isset( $block_type->style_handles ) ? $block_type->style_handles : array(),
+			isset( $block_type->editor_style_handles ) ? $block_type->editor_style_handles : array()
 		);
 
 		$script_handles = array_merge(
 			$script_handles,
-			is_null( $block_type->script_handles ) ? array() : $block_type->script_handles
+			isset( $block_type->script_handles ) ? $block_type->script_handles : array()
 		);
 	}
 

From 4c6cfc5753bb06a9c2eceb7be2b3e2efb85a8953 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 12:51:59 -0800
Subject: [PATCH 058/209] Use isset in if-statement instead of ternary

---
 lib/compat/wordpress-6.2/script-loader.php | 24 +++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 564757dffc42ca..76b07970b1e3ae 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -90,16 +90,20 @@ function gutenberg_resolve_assets_override() {
 	$block_registry = WP_Block_Type_Registry::get_instance();
 
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
-		$style_handles = array_merge(
-			$style_handles,
-			isset( $block_type->style_handles ) ? $block_type->style_handles : array(),
-			isset( $block_type->editor_style_handles ) ? $block_type->editor_style_handles : array()
-		);
-
-		$script_handles = array_merge(
-			$script_handles,
-			isset( $block_type->script_handles ) ? $block_type->script_handles : array()
-		);
+		if ( isset( $block_type->style_handles ) && isset( $block_type->editor_style_handles ) ) {
+			$style_handles = array_merge(
+				$style_handles,
+				$block_type->style_handles,
+				$block_type->editor_style_handles
+			);
+		}
+
+		if ( isset( $block_type->script_handles ) ) {
+			array_merge(
+				$script_handles,
+				$block_type->script_handles
+			);
+		}
 	}
 
 	$style_handles = array_unique( $style_handles );

From 4b4a3a049e6c7351f39b3350ca851ac08040cbb7 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 12:52:26 -0800
Subject: [PATCH 059/209] Add comment

---
 lib/compat/wordpress-6.2/script-loader.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 76b07970b1e3ae..99699b29069299 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -90,6 +90,7 @@ function gutenberg_resolve_assets_override() {
 	$block_registry = WP_Block_Type_Registry::get_instance();
 
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
+		// In older WordPress versions, like 6.0, these properties are not defined.
 		if ( isset( $block_type->style_handles ) && isset( $block_type->editor_style_handles ) ) {
 			$style_handles = array_merge(
 				$style_handles,

From b0fbafcac9724767a401a96e241159cf96dad5fc Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 16:28:33 -0800
Subject: [PATCH 060/209] Add is_array check

---
 lib/compat/wordpress-6.2/script-loader.php | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 99699b29069299..5180b9074ea57b 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -91,7 +91,12 @@ function gutenberg_resolve_assets_override() {
 
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		// In older WordPress versions, like 6.0, these properties are not defined.
-		if ( isset( $block_type->style_handles ) && isset( $block_type->editor_style_handles ) ) {
+		if (
+			isset( $block_type->style_handles ) &&
+			is_array($block_type->style_handles) &&
+			isset( $block_type->editor_style_handles ) &&
+			is_array( $block_type->editor_style_handles )
+		) {
 			$style_handles = array_merge(
 				$style_handles,
 				$block_type->style_handles,
@@ -99,7 +104,7 @@ function gutenberg_resolve_assets_override() {
 			);
 		}
 
-		if ( isset( $block_type->script_handles ) ) {
+		if ( isset( $block_type->script_handles ) && is_array( $block_type->script_handles ) ) {
 			array_merge(
 				$script_handles,
 				$block_type->script_handles

From 6b57588b6c47f093a2b406e70bd0b5cbe9d9f3e4 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 17:12:58 -0800
Subject: [PATCH 061/209] Don't block merging both if only one is unavailable

---
 lib/compat/wordpress-6.2/script-loader.php | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 5180b9074ea57b..d8f66c72a8dacb 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -91,24 +91,16 @@ function gutenberg_resolve_assets_override() {
 
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		// In older WordPress versions, like 6.0, these properties are not defined.
-		if (
-			isset( $block_type->style_handles ) &&
-			is_array($block_type->style_handles) &&
-			isset( $block_type->editor_style_handles ) &&
-			is_array( $block_type->editor_style_handles )
-		) {
-			$style_handles = array_merge(
-				$style_handles,
-				$block_type->style_handles,
-				$block_type->editor_style_handles
-			);
+		if ( isset( $block_type->style_handles ) && is_array( $block_type->style_handles ) ) {
+			array_merge( $style_handles, $block_type->style_handles );
+		}
+
+		if ( isset( $block_type->editor_style_handles ) && is_array( $block_type->editor_style_handles ) ) {
+			array_merge( $style_handles, $block_type->editor_style_handles );
 		}
 
 		if ( isset( $block_type->script_handles ) && is_array( $block_type->script_handles ) ) {
-			array_merge(
-				$script_handles,
-				$block_type->script_handles
-			);
+			array_merge( $script_handles, $block_type->script_handles );
 		}
 	}
 

From e60ecece4245d357f50c5437f28f1b47ec583ec7 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 13 Dec 2022 17:34:59 -0800
Subject: [PATCH 062/209] Add variable assignment back

---
 lib/compat/wordpress-6.2/script-loader.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index d8f66c72a8dacb..e08bfa6e46ca8e 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -92,15 +92,15 @@ function gutenberg_resolve_assets_override() {
 	foreach ( $block_registry->get_all_registered() as $block_type ) {
 		// In older WordPress versions, like 6.0, these properties are not defined.
 		if ( isset( $block_type->style_handles ) && is_array( $block_type->style_handles ) ) {
-			array_merge( $style_handles, $block_type->style_handles );
+			$style_handles = array_merge( $style_handles, $block_type->style_handles );
 		}
 
 		if ( isset( $block_type->editor_style_handles ) && is_array( $block_type->editor_style_handles ) ) {
-			array_merge( $style_handles, $block_type->editor_style_handles );
+			$style_handles = array_merge( $style_handles, $block_type->editor_style_handles );
 		}
 
 		if ( isset( $block_type->script_handles ) && is_array( $block_type->script_handles ) ) {
-			array_merge( $script_handles, $block_type->script_handles );
+			$script_handles = array_merge( $script_handles, $block_type->script_handles );
 		}
 	}
 

From da7e4c25789498b0cf3c9a4d0467af46c05bd81e Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 02:15:23 +0000
Subject: [PATCH 063/209] Bump plugin version to 14.7.2

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

diff --git a/gutenberg.php b/gutenberg.php
index c5f94c50522dbd..e5991644a8bc27 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.7.1
+ * Version: 14.7.2
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index bb28f83b398d20..cd8f7e75faa8c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.1",
+	"version": "14.7.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 386b7b6314b0fd..5da177ab8d6611 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.1",
+	"version": "14.7.2",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From d7199fc5b75d5d2895c0981b0046ce0aeb723bc3 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 02:24:43 +0000
Subject: [PATCH 064/209] Update Changelog for 14.7.2

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

diff --git a/changelog.txt b/changelog.txt
index 5427245e8d4688..d6c423dae8f803 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,29 @@
 == Changelog ==
 
+= 14.7.2 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+- Fix fatal error when using the plugin with PHP 8 and WordPress 6.0 by checking if block_type asset properties are set. ([46488](https://github.com/WordPress/gutenberg/pull/46488))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@noahtallen
+
+
 = 14.7.1 =
 
 

From 87b21a557661ff53fd93ea112ae7e70e65da3382 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 14 Dec 2022 10:34:09 +0800
Subject: [PATCH 065/209] Ensure drag handle matches cursor position when
 resizing a center aligned image (#46497)

---
 packages/block-library/src/image/image.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 37a8d25d1f9fa2..5eb511b455864d 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -611,6 +611,7 @@ export default function Image( {
 						height: parseInt( currentHeight + delta.height, 10 ),
 					} );
 				} }
+				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
 				{ img }
 			</ResizableBox>

From 826034588bca5a127fc56e49f5cb734d21dc1d1d Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 14 Dec 2022 10:04:25 +0200
Subject: [PATCH 066/209] ESLint: Fix warnings in the data package (#46499)

---
 packages/data/src/plugins/persistence/test/index.js | 7 ++++---
 packages/data/src/test/registry.js                  | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/data/src/plugins/persistence/test/index.js b/packages/data/src/plugins/persistence/test/index.js
index 818f075640ae56..e73af963bbeca9 100644
--- a/packages/data/src/plugins/persistence/test/index.js
+++ b/packages/data/src/plugins/persistence/test/index.js
@@ -26,9 +26,10 @@ describe( 'persistence', () => {
 	} );
 
 	it( 'should not mutate options', () => {
-		const options = Object.freeze( { persist: true, reducer() {} } );
-
-		registry.registerStore( 'test', options );
+		expect( () => {
+			const options = Object.freeze( { persist: true, reducer() {} } );
+			registry.registerStore( 'test', options );
+		} ).not.toThrowError( /object is not extensible/ );
 	} );
 
 	it( 'should load a persisted value as initialState', () => {
diff --git a/packages/data/src/test/registry.js b/packages/data/src/test/registry.js
index 8f73b3e442900c..a40d7628d5dc2b 100644
--- a/packages/data/src/test/registry.js
+++ b/packages/data/src/test/registry.js
@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "subscribeUntil"] }] */
+
 /**
  * Internal dependencies
  */

From a3db4171488fe7a89ec5ed4828f62413e3eb18f2 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 14 Dec 2022 13:05:27 +0400
Subject: [PATCH 067/209] Site Editor: Keep edited entity in sync when Editor
 canvas isn't mounted (#46524)

---
 packages/edit-site/src/components/editor/index.js | 4 ----
 packages/edit-site/src/components/layout/index.js | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b9ce354f58159b..2f2f6264f2e8d8 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -31,7 +31,6 @@ import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
@@ -52,9 +51,6 @@ const interfaceLabels = {
 };
 
 export default function Editor() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
-
 	const {
 		editedPostId,
 		editedPostType,
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index ab3d90eabb83a1..75040bbb9c466a 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -36,10 +36,14 @@ import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import SiteIcon from '../site-icon';
 import SiteTitle from '../site-title';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 
 const ANIMATION_DURATION = 0.5;
 
 export default function Layout( { onError } ) {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;

From 1d62d0ddfb1403b71ca28cabdf9d818f6c4b990f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 14 Dec 2022 20:21:44 +0800
Subject: [PATCH 068/209] Query: Add migration of colors to v2 deprecation
 (#46522)

---
 .../block-library/src/query/deprecated.js     | 188 +++++++++---------
 ...core__query__deprecated-2-with-colors.html |   6 +
 ...core__query__deprecated-2-with-colors.json |  72 +++++++
 ...uery__deprecated-2-with-colors.parsed.json |  59 ++++++
 ...__deprecated-2-with-colors.serialized.html |   7 +
 5 files changed, 238 insertions(+), 94 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html

diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
index d38ab3328559be..b23455d50489b5 100644
--- a/packages/block-library/src/query/deprecated.js
+++ b/packages/block-library/src/query/deprecated.js
@@ -31,6 +31,95 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
+const migrateColors = ( attributes, innerBlocks ) => {
+	// Remove color style attributes from the Query block.
+	const { style, backgroundColor, gradient, textColor, ...newAttributes } =
+		attributes;
+
+	const hasColorStyles =
+		backgroundColor ||
+		gradient ||
+		textColor ||
+		style?.color ||
+		style?.elements?.link;
+
+	// If the query block doesn't currently have any color styles,
+	// nothing needs migrating.
+	if ( ! hasColorStyles ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	// Clean color values from style attribute object.
+	if ( style ) {
+		newAttributes.style = cleanEmptyObject( {
+			...style,
+			color: undefined,
+			elements: {
+				...style.elements,
+				link: undefined,
+			},
+		} );
+	}
+
+	// If the inner blocks are already wrapped in a single group
+	// block, add the color support styles to that group block.
+	if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+		const groupBlock = innerBlocks[ 0 ];
+
+		// Create new styles for the group block.
+		const hasStyles =
+			style?.color ||
+			style?.elements?.link ||
+			groupBlock.attributes.style;
+
+		const newStyles = hasStyles
+			? cleanEmptyObject( {
+					...groupBlock.attributes.style,
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+			  } )
+			: undefined;
+
+		// Create a new Group block from the original.
+		const updatedGroupBlock = createBlock(
+			'core/group',
+			{
+				...groupBlock.attributes,
+				backgroundColor,
+				gradient,
+				textColor,
+				style: newStyles,
+			},
+			groupBlock.innerBlocks
+		);
+
+		return [ newAttributes, [ updatedGroupBlock ] ];
+	}
+
+	// When we don't have a single wrapping group block for the inner
+	// blocks, wrap the current inner blocks in a group applying the
+	// color styles to that.
+	const newGroupBlock = createBlock(
+		'core/group',
+		{
+			backgroundColor,
+			gradient,
+			textColor,
+			style: cleanEmptyObject( {
+				color: style?.color,
+				elements: style?.elements?.link
+					? { link: style?.elements?.link }
+					: undefined,
+			} ),
+		},
+		innerBlocks
+	);
+
+	return [ newAttributes, [ newGroupBlock ] ];
+};
+
 const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
 	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
 
@@ -127,7 +216,10 @@ const v2 = {
 	},
 	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
 		categoryIds || tagIds,
-	migrate: migrateToTaxQuery,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		return migrateColors( withTaxQuery, innerBlocks );
+	},
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
 		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
@@ -196,99 +288,7 @@ const v3 = {
 			style?.elements?.link
 		);
 	},
-	migrate: ( attributes, innerBlocks ) => {
-		// Remove color style attributes from the Query block.
-		const {
-			style,
-			backgroundColor,
-			gradient,
-			textColor,
-			...newAttributes
-		} = attributes;
-
-		const hasColorStyles =
-			backgroundColor ||
-			gradient ||
-			textColor ||
-			style?.color ||
-			style?.elements?.link;
-
-		// If the query block doesn't currently have any color styles,
-		// nothing needs migrating.
-		if ( ! hasColorStyles ) {
-			return [ attributes, innerBlocks ];
-		}
-
-		// Clean color values from style attribute object.
-		if ( style ) {
-			newAttributes.style = cleanEmptyObject( {
-				...style,
-				color: undefined,
-				elements: {
-					...style.elements,
-					link: undefined,
-				},
-			} );
-		}
-
-		// If the inner blocks are already wrapped in a single group
-		// block, add the color support styles to that group block.
-		if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
-			const groupBlock = innerBlocks[ 0 ];
-
-			// Create new styles for the group block.
-			const hasStyles =
-				style?.color ||
-				style?.elements?.link ||
-				groupBlock.attributes.style;
-
-			const newStyles = hasStyles
-				? cleanEmptyObject( {
-						...groupBlock.attributes.style,
-						color: style?.color,
-						elements: style?.elements?.link
-							? { link: style?.elements?.link }
-							: undefined,
-				  } )
-				: undefined;
-
-			// Create a new Group block from the original.
-			const updatedGroupBlock = createBlock(
-				'core/group',
-				{
-					...groupBlock.attributes,
-					backgroundColor,
-					gradient,
-					textColor,
-					style: newStyles,
-				},
-				groupBlock.innerBlocks
-			);
-
-			return [ newAttributes, [ updatedGroupBlock ] ];
-		}
-
-		// When we don't have a single wrapping group block for the inner
-		// blocks, wrap the current inner blocks in a group applying the
-		// color styles to that.
-		const newGroupBlock = createBlock(
-			'core/group',
-			{
-				backgroundColor,
-				gradient,
-				textColor,
-				style: cleanEmptyObject( {
-					color: style?.color,
-					elements: style?.elements?.link
-						? { link: style?.elements?.link }
-						: undefined,
-				} ),
-			},
-			innerBlocks
-		);
-
-		return [ newAttributes, [ newGroupBlock ] ];
-	},
+	migrate: migrateColors,
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
 		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
new file mode 100644
index 00000000000000..e85e61b5d7b144
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.html
@@ -0,0 +1,6 @@
+<!-- wp:query {"queryId":19,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[3,5],"tagIds":[6],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}},"textColor":"pale-cyan-blue"} -->
+<div class="wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
new file mode 100644
index 00000000000000..82bc41a40fb1b5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
@@ -0,0 +1,72 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 19,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false,
+				"taxQuery": {
+					"category": [ 3, 5 ],
+					"post_tag": [ 6 ]
+				}
+			},
+			"tagName": "div",
+			"displayLayout": {
+				"type": "list"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/group",
+				"isValid": true,
+				"attributes": {
+					"tagName": "div",
+					"textColor": "pale-cyan-blue",
+					"style": {
+						"color": {
+							"background": "#284d5f"
+						},
+						"elements": {
+							"link": {
+								"color": {
+									"text": "var:preset|color|luminous-vivid-amber"
+								}
+							}
+						}
+					}
+				},
+				"innerBlocks": [
+					{
+						"name": "core/post-template",
+						"isValid": true,
+						"attributes": {},
+						"innerBlocks": [
+							{
+								"name": "core/post-title",
+								"isValid": true,
+								"attributes": {
+									"level": 2,
+									"isLink": false,
+									"rel": "",
+									"linkTarget": "_self"
+								},
+								"innerBlocks": []
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json
new file mode 100644
index 00000000000000..73e4f9b6c18f4b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.parsed.json
@@ -0,0 +1,59 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 19,
+			"query": {
+				"perPage": 3,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"categoryIds": [ 3, 5 ],
+				"tagIds": [ 6 ],
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": false
+			},
+			"style": {
+				"color": {
+					"background": "#284d5f"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|luminous-vivid-amber"
+						}
+					}
+				}
+			},
+			"textColor": "pale-cyan-blue"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/post-template",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/post-title",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "",
+						"innerContent": []
+					}
+				],
+				"innerHTML": "\n\n",
+				"innerContent": [ "\n", null, "\n" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query has-pale-cyan-blue-color has-text-color has-background has-link-color\" style=\"background-color:#284d5f\">",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
new file mode 100644
index 00000000000000..f86b4f26ecc1d1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html
@@ -0,0 +1,7 @@
+<!-- wp:query {"queryId":19,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"category":[3,5],"post_tag":[6]}},"displayLayout":{"type":"list"}} -->
+<div class="wp-block-query"><!-- wp:group {"textColor":"pale-cyan-blue","style":{"color":{"background":"#284d5f"},"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-amber"}}}}} -->
+<div class="wp-block-group has-pale-cyan-blue-color has-text-color has-background has-link-color" style="background-color:#284d5f"><!-- wp:post-template -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query -->

From 69872189f108abc7665b0bdaec37087c8a28c57f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 14 Dec 2022 12:25:51 +0000
Subject: [PATCH 069/209] Add selector and test (#46531)

---
 .../data/data-core-block-editor.md            | 12 +++++++++++
 packages/block-editor/src/store/selectors.js  | 10 +++++++++
 .../block-editor/src/store/test/selectors.js  | 21 +++++++++++++++++++
 3 files changed, 43 insertions(+)

diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 5123dc6adc1318..0580aa0141b2be 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -556,6 +556,18 @@ _Properties_
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
 -   _frecency_ `number`: Heuristic that combines frequency and recency.
 
+### getLastInsertedBlockClientId
+
+Gets the client id of the last inserted block.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string|undefined`: Client Id of the last inserted block.
+
 ### getLastMultiSelectedBlockClientId
 
 Returns the client ID of the last block in the multi-selection set, or null
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 694f54bacdee01..3c048a7d58a29c 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2653,6 +2653,16 @@ export function wasBlockJustInserted( state, clientId, source ) {
 	);
 }
 
+/**
+ * Gets the client id of the last inserted block.
+ *
+ * @param {Object} state Global application state.
+ * @return {string|undefined} Client Id of the last inserted block.
+ */
+export function getLastInsertedBlockClientId( state ) {
+	return state?.lastBlockInserted?.clientId;
+}
+
 /**
  * Tells if the block is visible on the canvas or not.
  *
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 0086714d128044..ee4e9ee4c167ab 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -73,6 +73,7 @@ const {
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
 	__experimentalGetGlobalBlocksByName,
+	getLastInsertedBlockClientId,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -4665,3 +4666,23 @@ describe( '__unstableGetClientIdsTree', () => {
 		] );
 	} );
 } );
+
+describe( 'getLastInsertedBlockClientId', () => {
+	it( 'should return undefined if no blocks have been inserted', () => {
+		const state = {
+			lastBlockInserted: {},
+		};
+
+		expect( getLastInsertedBlockClientId( state ) ).toEqual( undefined );
+	} );
+
+	it( 'should return clientId if blocks have been inserted', () => {
+		const state = {
+			lastBlockInserted: {
+				clientId: '123456',
+			},
+		};
+
+		expect( getLastInsertedBlockClientId( state ) ).toEqual( '123456' );
+	} );
+} );

From a8fcabdcd177a1571d9627aee1669b2aecca0b49 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 14 Dec 2022 16:39:03 +0400
Subject: [PATCH 070/209] Site Editor: Fix the top bar 'exist' animation
 (#46533)

---
 packages/edit-site/src/components/layout/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 75040bbb9c466a..150f2d9cce882d 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -177,7 +177,7 @@ export default function Layout( { onError } ) {
 								as={ motion.div }
 								initial={ { y: -60 } }
 								animate={ { y: 0 } }
-								edit={ { y: -60 } }
+								exit={ { y: -60 } }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion

From 40d638b09362d7fcb45d36aa6756160e74343830 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 14 Dec 2022 14:25:19 +0100
Subject: [PATCH 071/209] Fix typing performance issue for container blocks
 (#46527)

---
 .../src/components/inner-blocks/index.js      | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 4542afc797462a..9d0b3f34bc7729 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	getBlockSupport,
@@ -102,6 +102,16 @@ function UncontrolledInnerBlocks( props ) {
 	const { allowSizingOnChildren = false } =
 		getBlockSupport( name, '__experimentalLayout' ) || {};
 
+	const layout = useMemo(
+		() => ( {
+			...__experimentalLayout,
+			...( allowSizingOnChildren && {
+				allowSizingOnChildren: true,
+			} ),
+		} ),
+		[ __experimentalLayout, allowSizingOnChildren ]
+	);
+
 	// This component needs to always be synchronous as it's the one changing
 	// the async mode depending on the block selection.
 	return (
@@ -110,12 +120,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ {
-					...__experimentalLayout,
-					...( allowSizingOnChildren && {
-						allowSizingOnChildren: true,
-					} ),
-				} }
+				__experimentalLayout={ layout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>

From ce4fa5dbe6c9a8486cde0efda486e78522ff4388 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 14 Dec 2022 13:51:17 +0000
Subject: [PATCH 072/209] Add page list to Link UI transforms in Nav block
 (#46426)

* Initial work

* Remove debugging

* Allow Page List in Nav Link and Submenu

* Fix introduction of bug

* Remove console log
---
 .../src/components/off-canvas-editor/link-ui.js    |  1 +
 packages/block-library/src/navigation-link/edit.js |  1 +
 .../block-library/src/navigation-link/link-ui.js   |  2 ++
 .../src/navigation-link/transforms.js              | 14 ++++++++++++++
 .../block-library/src/navigation-submenu/edit.js   |  6 +++++-
 5 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/link-ui.js b/packages/block-editor/src/components/off-canvas-editor/link-ui.js
index 000ffc54f0ec29..f122d9a1e698fe 100644
--- a/packages/block-editor/src/components/off-canvas-editor/link-ui.js
+++ b/packages/block-editor/src/components/off-canvas-editor/link-ui.js
@@ -75,6 +75,7 @@ function LinkControlTransforms( { clientId } ) {
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	const featuredBlocks = [
+		'core/page-list',
 		'core/site-logo',
 		'core/social-links',
 		'core/search',
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 02c96d2e5f61ef..7e58527d947f5c 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -424,6 +424,7 @@ export default function NavigationLinkEdit( {
 	const ALLOWED_BLOCKS = [
 		'core/navigation-link',
 		'core/navigation-submenu',
+		'core/page-list',
 	];
 	const DEFAULT_BLOCK = {
 		name: 'core/navigation-link',
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
index 3c7387740e3790..a2df4f2a294055 100644
--- a/packages/block-library/src/navigation-link/link-ui.js
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -74,10 +74,12 @@ function LinkControlTransforms( { clientId } ) {
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	const featuredBlocks = [
+		'core/page-list',
 		'core/site-logo',
 		'core/social-links',
 		'core/search',
 	];
+
 	const transforms = blockTransforms.filter( ( item ) => {
 		return featuredBlocks.includes( item.name );
 	} );
diff --git a/packages/block-library/src/navigation-link/transforms.js b/packages/block-library/src/navigation-link/transforms.js
index 7b213a48051065..fb450a13a02dc4 100644
--- a/packages/block-library/src/navigation-link/transforms.js
+++ b/packages/block-library/src/navigation-link/transforms.js
@@ -40,6 +40,13 @@ const transforms = {
 				return createBlock( 'core/navigation-link' );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
 	],
 	to: [
 		{
@@ -91,6 +98,13 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/page-list' );
+			},
+		},
 	],
 };
 
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index e4568c8d48e2df..47a222bd57bb66 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -43,7 +43,11 @@ import { name } from './block.json';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/navigation-submenu' ];
+const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+	'core/page-list',
+];
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',

From 42aa42090b6b86da5edfde55563ce536995a3aed Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 14 Dec 2022 16:51:53 +0200
Subject: [PATCH 073/209] Lodash: Refactor edit-site away from _.find()
 (#46539)

---
 .../edit-site/src/components/global-styles/utils.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 4c9d7bae19f7a1..06940becaf7ec1 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, find } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -120,8 +120,7 @@ function findInPresetsBy(
 			for ( const origin of origins ) {
 				const presets = presetByOrigin[ origin ];
 				if ( presets ) {
-					const presetObject = find(
-						presets,
+					const presetObject = presets.find(
 						( preset ) =>
 							preset[ presetProperty ] === presetValueValue
 					);
@@ -164,7 +163,9 @@ export function getPresetVariableFromValue(
 
 	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
 
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', cssVarInfix ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === cssVarInfix
+	);
 
 	if ( ! metadata ) {
 		// The property doesn't have preset data
@@ -196,7 +197,9 @@ function getValueFromPresetVariable(
 	variable,
 	[ presetType, slug ]
 ) {
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', presetType ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === presetType
+	);
 	if ( ! metadata ) {
 		return variable;
 	}

From 804d6e55a901c9034051af72925a528d2fd02ef8 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 14 Dec 2022 17:02:30 +0200
Subject: [PATCH 074/209] Lodash: Refactor block library away from _.find()
 (#46430)

---
 packages/block-library/src/gallery/edit.js             |  9 ++++-----
 packages/block-library/src/gallery/v1/edit.js          | 10 +++++-----
 packages/block-library/src/social-link/social-list.js  |  9 ++-------
 .../src/template-part/edit/utils/hooks.js              | 10 +++++++---
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 036f0c2133a5d3..c8d6731198c7c6 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -174,7 +173,7 @@ function GalleryEdit( props ) {
 	 */
 	function buildImageAttributes( imageAttributes ) {
 		const image = imageAttributes.id
-			? find( imageData, { id: imageAttributes.id } )
+			? imageData.find( ( { id } ) => id === imageAttributes.id )
 			: null;
 
 		let newClassName;
@@ -220,7 +219,7 @@ function GalleryEdit( props ) {
 		// It's necessary to retrieve the media type from the raw image data for already-uploaded images on native.
 		const nativeFileData =
 			Platform.isNative && file.id
-				? find( imageData, { id: file.id } )
+				? imageData.find( ( { id } ) => id === file.id )
 				: null;
 
 		const mediaTypeSelector = nativeFileData
@@ -333,7 +332,7 @@ function GalleryEdit( props ) {
 		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
 			blocks.push( block.clientId );
 			const image = block.attributes.id
-				? find( imageData, { id: block.attributes.id } )
+				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
 			changedAttributes[ block.clientId ] = getHrefAndDestination(
 				image,
@@ -401,7 +400,7 @@ function GalleryEdit( props ) {
 		getBlock( clientId ).innerBlocks.forEach( ( block ) => {
 			blocks.push( block.clientId );
 			const image = block.attributes.id
-				? find( imageData, { id: block.attributes.id } )
+				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
 			changedAttributes[ block.clientId ] = getImageSizeAttributes(
 				image,
diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
index e79760a544cd2c..9c36f02ec028ad 100644
--- a/packages/block-library/src/gallery/v1/edit.js
+++ b/packages/block-library/src/gallery/v1/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, isEmpty, map } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -211,7 +211,7 @@ function GalleryEdit( props ) {
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
 		const newImageId = newImage.id.toString();
-		const currentImage = find( images, { id: newImageId } );
+		const currentImage = images.find( ( { id } ) => id === newImageId );
 		const currentImageCaption = currentImage
 			? currentImage.caption
 			: newImage.caption;
@@ -220,9 +220,9 @@ function GalleryEdit( props ) {
 			return currentImageCaption;
 		}
 
-		const attachment = find( attachmentCaptions, {
-			id: newImageId,
-		} );
+		const attachment = attachmentCaptions.find(
+			( { id } ) => id === newImageId
+		);
 
 		// If the attachment caption is updated.
 		if ( attachment && attachment.caption !== newImage.caption ) {
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 9ac527dccd0d39..38c1ef91f99384 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -22,7 +17,7 @@ import { ChainIcon } from './icons';
  * @return {WPComponent} Icon component for social service.
  */
 export const getIconBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.icon : ChainIcon;
 };
 
@@ -34,6 +29,6 @@ export const getIconBySite = ( name ) => {
  * @return {string} Display name for social service
  */
 export const getNameBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.title : __( 'Social Icon' );
 };
diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js
index e5b60131d84ee2..37eb762a24144a 100644
--- a/packages/block-library/src/template-part/edit/utils/hooks.js
+++ b/packages/block-library/src/template-part/edit/utils/hooks.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -150,8 +150,12 @@ export function useTemplatePartArea( area ) {
 				).__experimentalGetDefaultTemplatePartAreas();
 			/* eslint-enable @wordpress/data-no-store-string-literals */
 
-			const selectedArea = find( definedAreas, { area } );
-			const defaultArea = find( definedAreas, { area: 'uncategorized' } );
+			const selectedArea = definedAreas.find(
+				( definedArea ) => definedArea.area === area
+			);
+			const defaultArea = definedAreas.find(
+				( definedArea ) => definedArea.area === 'uncategorized'
+			);
 
 			return {
 				icon: selectedArea?.icon || defaultArea?.icon,

From 3c5197cb87e1afc4fd6b24ad175724411b8ee269 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 15:49:30 +0000
Subject: [PATCH 075/209] Bump plugin version to 14.7.3

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

diff --git a/gutenberg.php b/gutenberg.php
index e5991644a8bc27..5807424888331d 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.7.2
+ * Version: 14.7.3
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index cd8f7e75faa8c2..37611b69363436 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.2",
+	"version": "14.7.3",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 5da177ab8d6611..28d648a1174b9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.2",
+	"version": "14.7.3",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 3245d1e0518d6a2fa565266981fe0fab8a984a8e Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 14 Dec 2022 17:02:24 +0100
Subject: [PATCH 076/209] [Mobile] - Disable Unsupported Block Editor Tests
 (Android) (#46542)

* Mobile - Disable Unsupported Block Editor Tests

* Mobile - Enable Gutenberg Editor Unsupported Block Editor Tests for iOS only
---
 .../gutenberg-editor-unsupported-blocks.test.js             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js
index d75b7ba4efd1e5..a5520ac92a468a 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js
@@ -2,8 +2,12 @@
  * Internal dependencies
  */
 import testData from './helpers/test-data';
+import { isAndroid } from './helpers/utils';
 
-describe( 'Gutenberg Editor Unsupported Block Editor Tests', () => {
+// Disabled for now on Android see https://github.com/wordpress-mobile/gutenberg-mobile/issues/5321
+const onlyOniOS = ! isAndroid() ? describe : describe.skip;
+
+onlyOniOS( 'Gutenberg Editor Unsupported Block Editor Tests', () => {
 	it( 'should be able to open the unsupported block web view editor', async () => {
 		await editorPage.setHtmlContent( testData.unsupportedBlockHtml );
 

From ee7d5ec02f185cf4bc26a8c5d09d0cd283173955 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 16:19:13 +0000
Subject: [PATCH 077/209] Update Changelog for 14.7.3

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

diff --git a/changelog.txt b/changelog.txt
index d6c423dae8f803..2d52f25c1bf8a6 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,20 @@
 == Changelog ==
 
+= 14.7.3 =
+
+## Changelog
+
+### Bug fixes
+
+- Fix typing performance issue for container blocks. ([46527](https://github.com/WordPress/gutenberg/pull/46527))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@youknowriad 
+
+
 = 14.7.2 =
 
 

From 0e087ff7f8ab21d8cf4a8dbfd8459d24a19edd03 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 16:39:02 +0000
Subject: [PATCH 078/209] Bump plugin version to 14.8.0-rc.1

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

diff --git a/gutenberg.php b/gutenberg.php
index 5807424888331d..4d4489ef4c0615 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.7.3
+ * Version: 14.8.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 37611b69363436..66631f6f478042 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.3",
+	"version": "14.8.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 28d648a1174b9d..b1ebbf430f35fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.7.3",
+	"version": "14.8.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From a1c6a8d151a68169f9012a1be9a528e764cd5601 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 14 Dec 2022 16:41:03 +0000
Subject: [PATCH 079/209] Update Nav OffCanvas Editor to use clientids tree
 (#46541)

* Navigation: Pass a tree of client ids instead of an array of blocks.

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>

* Explain passing custom clientIDs

Co-authored-by: Ben Dwyer <ben@bens-laptop.home>
Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
---
 .../src/components/off-canvas-editor/block.js    |  2 +-
 .../block-library/src/navigation/edit/index.js   |  6 +++---
 .../navigation/edit/menu-inspector-controls.js   | 16 ++++++++++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index af74873e1b41af..49ce5788dfafe0 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -145,7 +145,7 @@ function ListViewBlock( {
 
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
-	const isEditable = block.name !== 'core/page-list-item';
+	const isEditable = blockName !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index b414409791cbfb..d94e0022d15ea3 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -717,13 +717,13 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -759,12 +759,12 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -832,13 +832,13 @@ function Navigation( {
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index cefc94a3dcce0a..5d70d1b1654317 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -4,8 +4,10 @@
 import {
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PanelBody, VisuallyHidden } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,10 +17,10 @@ import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
 
 const MenuInspectorControls = ( {
+	clientId,
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	currentMenuId = null,
-	innerBlocks,
 	isManageMenusButtonDisabled,
 	onCreateNew,
 	onSelectClassicMenu,
@@ -32,6 +34,16 @@ const MenuInspectorControls = ( {
 	/* translators: %s: The name of a menu. */
 	const actionLabel = __( "Switch to '%s'" );
 
+	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
+	// This is required else the list view will display the entire block tree.
+	const clientIdsTree = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree } = select( blockEditorStore );
+			return __unstableGetClientIdsTree( clientId );
+		},
+		[ clientId ]
+	);
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -60,7 +72,7 @@ const MenuInspectorControls = ( {
 					/>
 					{ isOffCanvasNavigationEditorEnabled ? (
 						<OffCanvasEditor
-							blocks={ innerBlocks }
+							blocks={ clientIdsTree }
 							isExpanded={ true }
 							selectBlockInCanvas={ false }
 						/>

From 0944f75ee33fe77e58c82e31d85c2759c715081e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 14 Dec 2022 17:23:43 +0000
Subject: [PATCH 080/209] Nav offcanvas - handle non-direct insert block
 inserter (#46503)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Pass blocks from block inserter to custom appender callback

* Allow only blocks which support Link UI to trigger it’s rendering on insertion

* Allow Link UI for all supporting blocks

* Extract clearly named function to improve comprehension

* Allow for programmatic disabling of selecting block on insertion via Quick Inserter

* Fix stray false

* Provide correct default to ensure behaviour is backwards compatible

* Always pass selectBlockOnInsert
---
 .../inserter/hooks/use-insertion-point.js     |  5 +-
 .../src/components/inserter/index.js          | 17 ++++++-
 .../src/components/inserter/quick-inserter.js |  3 ++
 .../src/components/inserter/search-results.js |  2 +
 .../components/off-canvas-editor/appender.js  | 50 +++++++++++++------
 5 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index d2bbaa909d0a29..52c7f9ba23f83e 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -39,6 +39,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
@@ -108,7 +109,7 @@ function useInsertionPoint( {
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					true,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +123,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 59c04e24d2bbb4..258faff2b826ab 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -143,18 +143,31 @@ class Inserter extends Component {
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
 			prioritizePatterns,
+			onSelectOrClose,
+			selectBlockOnInsert,
 		} = this.props;
 
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ () => {
+					onSelect={ ( blocks ) => {
+						const firstBlock =
+							Array.isArray( blocks ) && blocks?.length
+								? blocks[ 0 ]
+								: blocks;
+						if (
+							onSelectOrClose &&
+							typeof onSelectOrClose === 'function'
+						) {
+							onSelectOrClose( firstBlock );
+						}
 						onClose();
 					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -380,7 +393,7 @@ export default compose( [
 
 				if ( onSelectOrClose ) {
 					onSelectOrClose( {
-						insertedBlockId: blockToInsert?.clientId,
+						clientId: blockToInsert?.clientId,
 					} );
 				}
 
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 39a5ac5c75b849..540b51a4757e0d 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -31,6 +31,7 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -38,6 +39,7 @@ export default function QuickInserter( {
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -121,6 +123,7 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			</div>
 
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
index dfd7a3d73312d5..f55e49bd1cc80f 100644
--- a/packages/block-editor/src/components/inserter/search-results.js
+++ b/packages/block-editor/src/components/inserter/search-results.js
@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -60,6 +61,7 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,
diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
index 646700143cf511..0fb19df664f016 100644
--- a/packages/block-editor/src/components/off-canvas-editor/appender.js
+++ b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -11,8 +11,13 @@ import Inserter from '../inserter';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
 export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlock, setInsertedBlock ] = useState();
+	const [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
 
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
@@ -31,40 +36,55 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const { insertedBlockAttributes } = useSelect(
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
 		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 
 			return {
-				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
 			};
 		},
-		[ insertedBlock ]
+		[ insertedBlockClientId ]
 	);
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const setAttributes =
-		( insertedBlockClientId ) => ( _updatedAttributes ) => {
-			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 
+	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
+		if ( ! _insertedBlock?.clientId ) {
+			return;
+		}
+
+		setInsertedBlockClientId( _insertedBlock?.clientId );
+	};
+
 	let maybeLinkUI;
 
-	if ( insertedBlock ) {
+	if (
+		insertedBlockClientId &&
+		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
+	) {
 		maybeLinkUI = (
 			<LinkUI
-				clientId={ insertedBlock }
+				clientId={ insertedBlockClientId }
 				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlock( null ) }
+				onClose={ () => setInsertedBlockClientId( null ) }
 				hasCreateSuggestion={ false }
 				onChange={ ( updatedValue ) => {
 					updateAttributes(
 						updatedValue,
-						setAttributes( insertedBlock ),
+						setAttributes( insertedBlockClientId ),
 						insertedBlockAttributes
 					);
-					setInsertedBlock( null );
+					setInsertedBlockClientId( null );
 				} }
 			/>
 		);
@@ -77,15 +97,15 @@ export const Appender = forwardRef( ( props, ref ) => {
 	return (
 		<div className="offcanvas-editor__appender">
 			{ maybeLinkUI }
+
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ ( { insertedBlockId } ) => {
-					setInsertedBlock( insertedBlockId );
-				} }
+				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
+				__experimentalIsQuick
 				{ ...props }
 			/>
 		</div>

From 04d69dde75a6c6a305b5b89c4adf2621f7b9c600 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 14 Dec 2022 17:30:42 +0000
Subject: [PATCH 081/209] Page List: Update the icon to demonstrate that the
 pages are automatically updated (#46438)

* Page List: Update the icon to demonstrate that the pages are automatically updated

* Allow a context to be passed to the block icon
---
 .../block-editor/src/components/block-icon/index.js    |  6 ++++--
 .../off-canvas-editor/block-select-button.js           |  6 +++++-
 packages/block-library/src/page-list/index.js          | 10 ++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index ad3484c9e4a049..58d7b3a04adb9e 100644
--- a/packages/block-editor/src/components/block-icon/index.js
+++ b/packages/block-editor/src/components/block-icon/index.js
@@ -10,14 +10,16 @@ import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { memo } from '@wordpress/element';
 
-function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className, context } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
index 9477eb2cda40c0..a3cb64e9298dd4 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
@@ -79,7 +79,11 @@ function ListViewBlockSelectButton(
 				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"
diff --git a/packages/block-library/src/page-list/index.js b/packages/block-library/src/page-list/index.js
index 7e13c23f229f2e..995e3a1c7f97ab 100644
--- a/packages/block-library/src/page-list/index.js
+++ b/packages/block-library/src/page-list/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages as icon } from '@wordpress/icons';
+import { pages, update } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return update;
+		}
+
+		return pages;
+	},
 	example: {},
 	edit,
 };

From 2437a110c99c6e6e08794600300064c282004d67 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 14 Dec 2022 17:46:08 +0000
Subject: [PATCH 082/209] Update Changelog for 14.8.0-rc.1

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

diff --git a/changelog.txt b/changelog.txt
index 2d52f25c1bf8a6..8774c72580adff 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,288 @@
 == Changelog ==
 
+= 14.8.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Add a current-menu-ancestor class to navigation items. ([40778](https://github.com/WordPress/gutenberg/pull/40778))
+- Page List Block: Adds a longdash tree to the parent selector. ([46336](https://github.com/WordPress/gutenberg/pull/46336))
+- Page List Block: Hide page list edit button if no pages are available. ([46331](https://github.com/WordPress/gutenberg/pull/46331))
+- Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+- Add page list to Link UI transforms in Nav block. ([46426](https://github.com/WordPress/gutenberg/pull/46426))
+- Heading Block: Don't rely on the experimental selector anymore. ([46284](https://github.com/WordPress/gutenberg/pull/46284))
+- Media & Text Block: Create undo history when media width is changed. ([46084](https://github.com/WordPress/gutenberg/pull/46084))
+- Navigation block: Add location->primary to fallback nav creation for classic menus. ([45976](https://github.com/WordPress/gutenberg/pull/45976))
+- Navigation block: Update fallback nav creation to the most recently created menu. ([46286](https://github.com/WordPress/gutenberg/pull/46286))
+- Navigation: Add a 'open list view' button. ([46335](https://github.com/WordPress/gutenberg/pull/46335))
+- Navigation: Removes the header from the navigation list view in the experiment. ([46070](https://github.com/WordPress/gutenberg/pull/46070))
+- Page List: Add convert panel to Inspector Controls when within Nav block. ([46352](https://github.com/WordPress/gutenberg/pull/46352))
+- Page List: Prevent users from adding inner blocks to Page List. ([46269](https://github.com/WordPress/gutenberg/pull/46269))
+- Query: Remove color block supports. ([46147](https://github.com/WordPress/gutenberg/pull/46147))
+- Table block: Make `figcaption` styles consistent between editor and front end. ([46172](https://github.com/WordPress/gutenberg/pull/46172))
+- List/quote: Unwrap inner block when pressing Backspace at start. ([45075](https://github.com/WordPress/gutenberg/pull/45075))
+
+#### Inspector Controls
+- Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. ([46346](https://github.com/WordPress/gutenberg/pull/46346))
+- Sidebar Tabs: Use editor settings to override display. ([46321](https://github.com/WordPress/gutenberg/pull/46321))
+- Summary panel: Try improving spacing and grid. ([46267](https://github.com/WordPress/gutenberg/pull/46267))
+
+#### Global Styles
+- Add Style Book to Global Styles. ([45960](https://github.com/WordPress/gutenberg/pull/45960))
+- Add block preview component in global styles. ([45719](https://github.com/WordPress/gutenberg/pull/45719))
+- Move border from layout to own menu. ([45995](https://github.com/WordPress/gutenberg/pull/45995))
+- Add a css style to theme.json to allow setting of custom css strings. ([46255](https://github.com/WordPress/gutenberg/pull/46255))
+- Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- Global styles: Add custom CSS panel to site editor. ([46141](https://github.com/WordPress/gutenberg/pull/46141))
+
+#### Site Editor
+- Allow adding new templates and template parts directly from the sidebar. ([46458](https://github.com/WordPress/gutenberg/pull/46458))
+- Synchronize the sidebar state in the URL. ([46433](https://github.com/WordPress/gutenberg/pull/46433))
+- Try template drill down on the shell sidebar (browse mode). ([45100](https://github.com/WordPress/gutenberg/pull/45100))
+
+#### Block Editor
+- Update the synced block hover styles in Inserter. ([46442](https://github.com/WordPress/gutenberg/pull/46442))
+- Add new selector getLastInsertedBlockClientId. ([46531](https://github.com/WordPress/gutenberg/pull/46531))
+- Block editor: Hide fixed contextual toolbar. ([46298](https://github.com/WordPress/gutenberg/pull/46298))
+- Inserter: Pattern title tooltip. ([46419](https://github.com/WordPress/gutenberg/pull/46419))
+- useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. ([46357](https://github.com/WordPress/gutenberg/pull/46357))
+- Design: Augmented shadows for modals and popovers. ([46228](https://github.com/WordPress/gutenberg/pull/46228))
+
+#### Components
+- Tabs: Try a simpler tab focus style, alt. ([46276](https://github.com/WordPress/gutenberg/pull/46276))
+- BaseControl: Add convenience hook to generate id-related props. ([46170](https://github.com/WordPress/gutenberg/pull/46170))
+- Dashicon: Refactor to TypeScript. ([45924](https://github.com/WordPress/gutenberg/pull/45924))
+- Lighten borders to gray-600. ([46252](https://github.com/WordPress/gutenberg/pull/46252))
+- Popover: Check positioning by adding and testing is-positioned class. ([46429](https://github.com/WordPress/gutenberg/pull/46429))
+
+### Icons
+- Icons: Update the border icon. ([46264](https://github.com/WordPress/gutenberg/pull/46264))
+
+#### Testing
+- Tests: Fix `toBePositionedPopover` matcher message function. ([46239](https://github.com/WordPress/gutenberg/pull/46239))
+
+#### Accessibility
+- Reorganize the site editor to introduce Browse Mode. ([44770](https://github.com/WordPress/gutenberg/pull/44770))
+
+#### Plugin
+- Update the Gutenberg plugin to require at least the WP 6.0 version. ([46102](https://github.com/WordPress/gutenberg/pull/46102))
+- PHP: Backport changes from core theme resolver. ([46250](https://github.com/WordPress/gutenberg/pull/46250))
+- Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. ([46249](https://github.com/WordPress/gutenberg/pull/46249))
+- Upgrade React packages to v18. ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+#### Themes
+- Empty Theme: Add the `$schema` property in `theme.json` and rename template directories. ([46300](https://github.com/WordPress/gutenberg/pull/46300))
+
+#### Mobile
+- Mobile: Disable Unsupported Block Editor Tests (Android). ([46542](https://github.com/WordPress/gutenberg/pull/46542))
+- Mobile: Inserter - Remove `.done()` usage. ([46460](https://github.com/WordPress/gutenberg/pull/46460))
+- Mobile: Update Heading block end-to-end test. ([46220](https://github.com/WordPress/gutenberg/pull/46220))
+- Mobile: Updates packages to not use Git HTTPS URLs. ([46422](https://github.com/WordPress/gutenberg/pull/46422))
+
+### Bug Fixes
+
+#### Block Library
+- Fix Nav Submenu block Link UI text control. ([46243](https://github.com/WordPress/gutenberg/pull/46243))
+- Fix auto Nav menu creation due to page list inner blocks. ([46223](https://github.com/WordPress/gutenberg/pull/46223))
+- Handle innerContent too when removing innerBlocks. ([46377](https://github.com/WordPress/gutenberg/pull/46377))
+- Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. ([46497](https://github.com/WordPress/gutenberg/pull/46497))
+- Navigation Block: Add social link singular to list of blocks to be allowed. ([46374](https://github.com/WordPress/gutenberg/pull/46374))
+- Navigation Block: Fixes adding a submenu. ([46364](https://github.com/WordPress/gutenberg/pull/46364))
+- Navigation Block: Prevent circular references in navigation block rendering. ([46387](https://github.com/WordPress/gutenberg/pull/46387))
+- Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. ([46279](https://github.com/WordPress/gutenberg/pull/46279))
+- Navigation link: Use stripHTML. ([46317](https://github.com/WordPress/gutenberg/pull/46317))
+- Page List Block: Fix error loading page list parent options. ([46327](https://github.com/WordPress/gutenberg/pull/46327))
+- Query Loop Block: Add migration of colors to v2 deprecation. ([46522](https://github.com/WordPress/gutenberg/pull/46522))
+- Site Logo: Correctly set the image's natural height and width. ([46214](https://github.com/WordPress/gutenberg/pull/46214))
+- Strip markup from link label data in inspector. ([46171](https://github.com/WordPress/gutenberg/pull/46171))
+- Template Parts: Fix modal search stacking context. ([46421](https://github.com/WordPress/gutenberg/pull/46421))
+- Video: Avoid an error when removal is locked. ([46324](https://github.com/WordPress/gutenberg/pull/46324))
+- Layout child fixed size should not be fixed by default and should always have a value set. ([46139](https://github.com/WordPress/gutenberg/pull/46139))
+
+#### Blocks
+- Paste handler: Remove styles on inline paste. ([46402](https://github.com/WordPress/gutenberg/pull/46402))
+- Improve performance of gutenberg_render_layout_support_flag. ([46074](https://github.com/WordPress/gutenberg/pull/46074))
+
+#### Global Styles
+- Allow indirect properties when unfiltered_html is not allowed. ([46388](https://github.com/WordPress/gutenberg/pull/46388))
+- Fix Reset to defaults action by moving fills to be within context provider. ([46486](https://github.com/WordPress/gutenberg/pull/46486))
+- Fix duplication of synced block colors in CSS output. ([46297](https://github.com/WordPress/gutenberg/pull/46297))
+- Make style book label font size 11px. ([46341](https://github.com/WordPress/gutenberg/pull/46341))
+- Style Book: Clear Global Styles navigation history when selecting a block. ([46391](https://github.com/WordPress/gutenberg/pull/46391))
+
+#### Block Editor
+- Block Editor: Fix content locked patterns. ([46494](https://github.com/WordPress/gutenberg/pull/46494))
+- Block Editor: Fix memoized pattern selector dependant arguments. ([46238](https://github.com/WordPress/gutenberg/pull/46238))
+- Block Editor: Restore draggable chip styles. ([46396](https://github.com/WordPress/gutenberg/pull/46396))
+- Block Editor: Revert deoptimization useNestedSettingsUpdate. ([46350](https://github.com/WordPress/gutenberg/pull/46350))
+- Block Editor: Fix some usages of useSelect that return unstable results. ([46226](https://github.com/WordPress/gutenberg/pull/46226))
+- useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. ([46307](https://github.com/WordPress/gutenberg/pull/46307))
+
+#### Patterns
+- Add new pattern categories. ([46144](https://github.com/WordPress/gutenberg/pull/46144))
+- Block Editor: Add initial view mode in `BlockPatternSetup`. ([46399](https://github.com/WordPress/gutenberg/pull/46399))
+
+#### Site Editor
+- Do not remount iframe. ([46431](https://github.com/WordPress/gutenberg/pull/46431))
+- Fix the top bar 'exit' animation. ([46533](https://github.com/WordPress/gutenberg/pull/46533))
+- Keep edited entity in sync when Editor canvas isn't mounted. ([46524](https://github.com/WordPress/gutenberg/pull/46524))
+- [Site Editor]: Add default white background for themes with no `background color` set. ([46314](https://github.com/WordPress/gutenberg/pull/46314))
+
+#### Components
+- InputControl: Fix `Flex` wrapper usage. ([46213](https://github.com/WordPress/gutenberg/pull/46213))
+- Modal: Fix unexpected modal closing in IME Composition. ([46453](https://github.com/WordPress/gutenberg/pull/46453))
+- MaybeCategoryPanel: Avoid 403 requests for users with low permissions. ([46349](https://github.com/WordPress/gutenberg/pull/46349))
+- Rich text: Add button to clear unknown format. ([44086](https://github.com/WordPress/gutenberg/pull/44086))
+
+#### Document Settings
+- Fix template title in `summary` panel and requests for low privileged users. ([46304](https://github.com/WordPress/gutenberg/pull/46304))
+- Permalink: Hide edit field for users without publishing capabilities. ([46361](https://github.com/WordPress/gutenberg/pull/46361))
+
+#### Patterns
+- Content lock: Make filter hook namespace unique. ([46344](https://github.com/WordPress/gutenberg/pull/46344))
+
+#### Layout
+- Child Layout controls: Fix help text for height. ([46319](https://github.com/WordPress/gutenberg/pull/46319))
+
+#### Widgets Editor
+- Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. ([43392](https://github.com/WordPress/gutenberg/pull/43392))
+
+#### Block API
+- HTML block: Fix parsing. ([27268](https://github.com/WordPress/gutenberg/pull/27268))
+
+#### Mobile
+- Social Links mobile test: Wait for URL bottom sheet to appear. ([46308](https://github.com/WordPress/gutenberg/pull/46308))
+
+### Performance
+
+#### Components
+- Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- CircularOption: Avoid paint on circular option hover. ([46197](https://github.com/WordPress/gutenberg/pull/46197))
+- Lodash: Replace `_.isEqual()` with `fastDeepEqual`. ([46200](https://github.com/WordPress/gutenberg/pull/46200))
+- Popover: Avoid paint on popovers when scrolling. ([46187](https://github.com/WordPress/gutenberg/pull/46187))
+- Resizable Box: Avoid paint on resizable-box handles. ([46196](https://github.com/WordPress/gutenberg/pull/46196))
+- ListView: Avoid paint on list view item hover. ([46188](https://github.com/WordPress/gutenberg/pull/46188))
+
+#### Code Quality
+- Lodash: Refactor `blocks` away from `_.find()`. ([46428](https://github.com/WordPress/gutenberg/pull/46428))
+- Lodash: Refactor `core-data` away from `_.find()`. ([46468](https://github.com/WordPress/gutenberg/pull/46468))
+- Lodash: Refactor `edit-site` away from `_.find()`. ([46539](https://github.com/WordPress/gutenberg/pull/46539))
+- Lodash: Refactor away from `_.orderBy()`. ([45146](https://github.com/WordPress/gutenberg/pull/45146))
+- Lodash: Refactor block library away from `_.find()`. ([46430](https://github.com/WordPress/gutenberg/pull/46430))
+- Remove usage of get_default_block_editor_settings. ([46112](https://github.com/WordPress/gutenberg/pull/46112))
+
+#### Post Editor
+- Lodash: Refactor editor away from `_.find()`. ([46464](https://github.com/WordPress/gutenberg/pull/46464))
+- Lodash: Refactor post editor away from `_.find()`. ([46432](https://github.com/WordPress/gutenberg/pull/46432))
+
+#### Block Editor
+- Avoid paint on inserter animation. ([46185](https://github.com/WordPress/gutenberg/pull/46185))
+- Improve inserter search performance. ([46153](https://github.com/WordPress/gutenberg/pull/46153))
+- Block Editor: Refactor the "order" state in the block editor reducer to use a map instead of a plain object. ([46221](https://github.com/WordPress/gutenberg/pull/46221))
+- Block Editor: Refactor the block-editor parents state to use maps instead of objects. ([46225](https://github.com/WordPress/gutenberg/pull/46225))
+- Refactor the block-editor "tree" state to use maps instead of objects. ([46229](https://github.com/WordPress/gutenberg/pull/46229))
+- Refactor the block-editor byClientId redux state to use maps instead of plain objects. ([46204](https://github.com/WordPress/gutenberg/pull/46204))
+- Fix typing performance issue for container blocks. ([46527](https://github.com/WordPress/gutenberg/pull/46527))
+
+#### Testing
+- E2E: Fix performance tests by making inserter search container waiting optional. ([46268](https://github.com/WordPress/gutenberg/pull/46268))
+
+#### Mobile
+- Columns mobile block: Avoid returning unstable innerWidths from useSelect. ([46403](https://github.com/WordPress/gutenberg/pull/46403))
+
+### Experiments
+
+#### Block Library
+- Navigation List View: Remove empty cell when there is no edit button. ([46439](https://github.com/WordPress/gutenberg/pull/46439))
+
+#### Web Fonts
+- WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. ([46378](https://github.com/WordPress/gutenberg/pull/46378))
+
+### Documentation
+- Adds clarifications and clears up inaccuracies. ([46283](https://github.com/WordPress/gutenberg/pull/46283))
+- Adds details of how to find the .zip file. ([46305](https://github.com/WordPress/gutenberg/pull/46305))
+- Doc: Fix description and documentation for link color support. ([46405](https://github.com/WordPress/gutenberg/pull/46405))
+- Docs: Add missing useState import in BorderBoxControl documentation. ([42067](https://github.com/WordPress/gutenberg/pull/42067))
+- Docs: Add missing useState import in color picker docs. ([42069](https://github.com/WordPress/gutenberg/pull/42069))
+- Docs: Add missing useState import in confirm dialog docs. ([42071](https://github.com/WordPress/gutenberg/pull/42071))
+- Docs: Adds reminder to use Node.js v14 in Quick Start. ([46216](https://github.com/WordPress/gutenberg/pull/46216))
+- Docs: Fix missing link to `primitives` package. ([46290](https://github.com/WordPress/gutenberg/pull/46290))
+- Docs: Update reference to IE 11. ([46296](https://github.com/WordPress/gutenberg/pull/46296))
+
+### Code Quality
+- Block Editor: Fix `no-node-access` violations in `BlockPreview`. ([46409](https://github.com/WordPress/gutenberg/pull/46409))
+- Block Editor: Fix `no-node-access` violations in `BlockSelectionClearer`. ([46408](https://github.com/WordPress/gutenberg/pull/46408))
+- Columns mobile edit: Remove unused updateBlockSettings action bind. ([46455](https://github.com/WordPress/gutenberg/pull/46455))
+- ESLint: Fix warning in `getBlockAttribute` documentation. ([46500](https://github.com/WordPress/gutenberg/pull/46500))
+- List View: Use default parameters instead of defaultProps. ([46266](https://github.com/WordPress/gutenberg/pull/46266))
+- Removed: Remove small APIs marked to be removed in WP 6.2. ([46106](https://github.com/WordPress/gutenberg/pull/46106))
+- Site Editor: Remove invalid CSS. ([46288](https://github.com/WordPress/gutenberg/pull/46288))
+
+#### Block Library
+- Group Block: Remove placeholder leftovers. ([46423](https://github.com/WordPress/gutenberg/pull/46423))
+- Group: Remove unnecessary 'useCallback'. ([46418](https://github.com/WordPress/gutenberg/pull/46418))
+- Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. ([46329](https://github.com/WordPress/gutenberg/pull/46329))
+- Navigation Block: Update attribute test for `are-blocks-dirty.js`. ([46355](https://github.com/WordPress/gutenberg/pull/46355))
+- Page List Block: Move shared "convert" description to constant. ([46368](https://github.com/WordPress/gutenberg/pull/46368))
+- Page List Block: Simplify Page List convert to links function API. ([46365](https://github.com/WordPress/gutenberg/pull/46365))
+- Query: Cleanup variation picker component. ([46424](https://github.com/WordPress/gutenberg/pull/46424))
+- RNMobile: Add an inline comment to clarify usage of 'hard' limit vs. unbounded query. ([46245](https://github.com/WordPress/gutenberg/pull/46245))
+- Shared standard Link UI component between Nav Link and Submenu blocks. ([46370](https://github.com/WordPress/gutenberg/pull/46370))
+- Template Parts: Remove unnecessary 'useCallback'. ([46420](https://github.com/WordPress/gutenberg/pull/46420))
+
+#### Components
+- AlignmentMatrixControl: Refactor to TypeScript. ([46162](https://github.com/WordPress/gutenberg/pull/46162))
+- Also ignore `no-node-access` for some components. ([46501](https://github.com/WordPress/gutenberg/pull/46501))
+- Fix `no-node-access` violations in `FocalPointPicker` tests. ([46312](https://github.com/WordPress/gutenberg/pull/46312))
+- Fix `no-node-access` violations in `Popover`. ([46311](https://github.com/WordPress/gutenberg/pull/46311))
+- Fix `no-node-access` violations in `Theme`. ([46310](https://github.com/WordPress/gutenberg/pull/46310))
+- Fix `no-node-access` violations in `ToolsPanel` tests. ([46313](https://github.com/WordPress/gutenberg/pull/46313))
+- withFilters: Use 'act' from React Testing Library. ([46237](https://github.com/WordPress/gutenberg/pull/46237))
+
+#### Data Layer
+- Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. ([45513](https://github.com/WordPress/gutenberg/pull/45513))
+- ESLint: Fix warnings in the data package. ([46499](https://github.com/WordPress/gutenberg/pull/46499))
+
+#### Global Styles
+- Add "custom-css" as an acceptable value in the documentation for gutenberg_get_global_stylesheet. ([46493](https://github.com/WordPress/gutenberg/pull/46493))
+- PaletteEdit: Add changelog. ([46095](https://github.com/WordPress/gutenberg/pull/46095))
+
+#### Block Editor
+- Inserter: Update mobile tab navigation styles. ([46186](https://github.com/WordPress/gutenberg/pull/46186))
+
+#### Layout
+- Clarify inline comment about switching to `safecss_filter_attr`. ([46061](https://github.com/WordPress/gutenberg/pull/46061))
+
+### Tools
+
+#### Build Tooling
+- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247))
+- Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302))
+- Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282))
+
+#### Testing
+- E2E: Fix flaky Block Switcher tests. ([46406](https://github.com/WordPress/gutenberg/pull/46406))
+- end-to-end tests: Add width and color test to button block. ([46452](https://github.com/WordPress/gutenberg/pull/46452))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @corentin-gautier: Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- @ingeniumed: Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- @janusqa: Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @andrewserong @aristath @chad1008 @chintu51 @corentin-gautier @derekblank @draganescu @ellatrix @geriux @getdave @glendaviesnz @hideokamoto @ingeniumed @jameskoster @janusqa @jasmussen @jffng @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mburridge @mikachan @mirka @noisysocks @ntsekouras @oandregal @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad
+
+
 = 14.7.3 =
 
 ## Changelog

From eadd4b5af5abc800db3f6e8ba6959b38221ecd6d Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Wed, 14 Dec 2022 13:58:14 -0500
Subject: [PATCH 083/209] Clarifying the npm package release process for the RC
 release. (#46555)

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

diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index f463cb319f6657..492813376b2c9d 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -34,6 +34,10 @@ To release a release candidate (RC) version of the plugin, enter `rc`. To releas
 
 This will trigger a GitHub Actions (GHA) workflow that bumps the plugin version, builds the Gutenberg plugin .zip file, creates a release draft, and attaches the plugin .zip file to it. This part of the process typically takes a little under six minutes. You'll see that workflow appear at the top of the list, right under the blue banner. Once it's finished, it'll change its status icon from a yellow dot to a green checkmark. You can follow along in a more detailed view by clicking on the workflow.
 
+#### Publishing the @wordpress packages to NPM
+
+As part of the release candidate (RC) process, all of the `@wordpress` packages are published to NPM. You may see messaging after the ["Build Gutenberg Plugin Zip" action](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) action has created the draft release that the ["Publish npm packages"](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) action requires someone with appropriate permissions to trigger the action. This is not the case as this process is automated and it will automatically run after the release notes are published.
+
 #### View the release draft
 
 As soon as the workflow has finished, you'll find the release draft under [https://github.com/WordPress/gutenberg/releases](https://github.com/WordPress/gutenberg/releases). The draft is pre-populated with changelog entries based on previous release candidates for this version, and any changes that have since been cherry-picked to the release branch. Thus, when releasing the first stable version of a series, make sure to delete any RC version headers (that are only there for your information) and to move the more recent changes to the correct section (see below).

From 271f650c05795ab81cc73b2617ba53485ac57de9 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <81248+fullofcaffeine@users.noreply.github.com>
Date: Wed, 14 Dec 2022 16:23:05 -0600
Subject: [PATCH 084/209] [`customize-widgets/utils/widgetToBlock`] Initialize
 a widget's `raw_content.content` to an empty string if it's `undefined`
 (#46487)

* Initialize a widget's raw_content.content to an empty string if it's undefined

* Do not mutate the instance object's raw_instance property

* Add comment
---
 packages/customize-widgets/src/utils.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js
index f2f254b5ae6af6..8cf2d5990423ca 100644
--- a/packages/customize-widgets/src/utils.js
+++ b/packages/customize-widgets/src/utils.js
@@ -98,10 +98,14 @@ export function widgetToBlock( { id, idBase, number, instance } ) {
 	const {
 		encoded_serialized_instance: encoded,
 		instance_hash_key: hash,
-		raw_instance: raw,
+		raw_instance: rawInstance,
 		...rest
 	} = instance;
 
+	// It's unclear why `content` is sometimes `undefined`, but it shouldn't be.
+	const rawContent = rawInstance.content || '';
+	const raw = { ...rawInstance, content: rawContent };
+
 	if ( idBase === 'block' ) {
 		const parsedBlocks = parse( raw.content, {
 			__unstableSkipAutop: true,

From b856a3fc6b72b3c48f35608c68b83d0953959f47 Mon Sep 17 00:00:00 2001
From: Artemio Morales <ric.morales22@gmail.com>
Date: Wed, 14 Dec 2022 18:29:02 -0500
Subject: [PATCH 085/209] Add rough animation to navigation and links (#46342)

* Add rough animation to navigation and links

* Add support for configuring animation in block settings; revise animation implementation

* Fix animation direction; do code cleanup

* Add framer dependency and disable import restriction

* Fix linter errors

* Limit scope to fix tests

* Add wrapper for animation logic, update useSelect  dependencies

* Fix dependency declaration that was causing tests to break
---
 ...-rest-block-editor-settings-controller.php |  6 ++
 .../src/components/block-inspector/index.js   | 83 +++++++++++++++++--
 .../src/navigation-link/index.php             | 32 +++++++
 .../src/navigation-submenu/index.php          | 32 +++++++
 .../block-library/src/navigation/index.php    | 32 +++++++
 5 files changed, 180 insertions(+), 5 deletions(-)

diff --git a/lib/experimental/class-wp-rest-block-editor-settings-controller.php b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
index d95fb497d3a0a3..7031a14e89ccac 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -174,6 +174,12 @@ public function get_item_schema() {
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
 
+				'__experimentalBlockInspectorAnimation'  => array(
+					'description' => __( 'Whether to enable animation when showing and hiding the block inspector.', 'gutenberg' ),
+					'type'        => 'object',
+					'context'     => array( 'site-editor' ),
+				),
+
 				'alignWide'                              => array(
 					'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ),
 					'type'        => 'boolean',
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index d676bf5dac6a5b..2f3b69131a73e6 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -14,9 +14,10 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
+import { useMemo, useCallback, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -171,6 +172,22 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	const blockInspectorAnimationSettings = useSelect(
+		( select ) => {
+			if ( isOffCanvasNavigationEditorEnabled ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.__experimentalBlockInspectorAnimation;
+				return globalBlockInspectorAnimationSettings[ blockType.name ];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+	);
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -231,11 +248,67 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			/>
 		);
 	}
+
 	return (
-		<BlockInspectorSingleBlock
-			clientId={ selectedBlockClientId }
-			blockName={ blockType.name }
-		/>
+		<BlockInspectorSingleBlockWrapper
+			animate={
+				isOffCanvasNavigationEditorEnabled &&
+				blockInspectorAnimationSettings
+			}
+			wrapper={ ( children ) => (
+				<AnimatedContainer
+					blockInspectorAnimationSettings={
+						blockInspectorAnimationSettings
+					}
+					selectedBlockClientId={ selectedBlockClientId }
+				>
+					{ children }
+				</AnimatedContainer>
+			) }
+		>
+			<Fragment>
+				<BlockInspectorSingleBlock
+					clientId={ selectedBlockClientId }
+					blockName={ blockType.name }
+				/>
+			</Fragment>
+		</BlockInspectorSingleBlockWrapper>
+	);
+};
+
+const BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {
+	return animate ? wrapper( children ) : children;
+};
+
+const AnimatedContainer = ( {
+	blockInspectorAnimationSettings,
+	selectedBlockClientId,
+	children,
+} ) => {
+	const animationOrigin =
+		blockInspectorAnimationSettings &&
+		blockInspectorAnimationSettings.enterDirection === 'leftToRight'
+			? -50
+			: 50;
+
+	return (
+		<motion.div
+			animate={ {
+				x: 0,
+				opacity: 1,
+				transition: {
+					ease: 'easeInOut',
+					duration: 0.14,
+				},
+			} }
+			initial={ {
+				x: animationOrigin,
+				opacity: 0,
+			} }
+			key={ selectedBlockClientId }
+		>
+			{ children }
+		</motion.div>
 	);
 };
 
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 8853d49f6e2cf0..36bfbf5d1fc0ae 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -376,3 +376,35 @@ function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Link block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_link_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-link' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_link_inspector' );
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index 99c86493d5b31a..c1c8006039f555 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -321,3 +321,35 @@ function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Submenu block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_submenu_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-submenu' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_submenu_inspector' );
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 030cab4501eed4..971a5f500e7741 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -856,3 +856,35 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 }
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
+/**
+ * Enables animation of the block inspector for the Navigation block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation' =>
+				array(
+					'enterDirection' => 'leftToRight',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_inspector' );

From 489d48a119477e44022e9a3939332bdcc6cc94aa Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 15 Dec 2022 15:02:03 +1100
Subject: [PATCH 086/209] Global Styles REST API endpoint: check custom CSS is
 included before attempting to validate (#46561)

* Global Styles REST API endpoint: check custom CSS is included before attempting to validate

* Fix linting issue
---
 ...ass-gutenberg-rest-global-styles-controller-6-2.php | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
index 9f762dd961d058..684786ef22d762 100644
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
@@ -151,10 +151,12 @@ protected function prepare_item_for_database( $request ) {
 		if ( isset( $request['styles'] ) || isset( $request['settings'] ) ) {
 			$config = array();
 			if ( isset( $request['styles'] ) ) {
-				$config['styles']    = $request['styles'];
-				$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
-				if ( is_wp_error( $validate_custom_css ) ) {
-					return $validate_custom_css;
+				$config['styles'] = $request['styles'];
+				if ( isset( $request['styles']['css'] ) ) {
+					$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
+					if ( is_wp_error( $validate_custom_css ) ) {
+						return $validate_custom_css;
+					}
 				}
 			} elseif ( isset( $existing_config['styles'] ) ) {
 				$config['styles'] = $existing_config['styles'];

From 1e6538ba9d6f07a4c7a2fc0ef63ac0ebe932df80 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 15 Dec 2022 09:11:05 +0400
Subject: [PATCH 087/209] Template Parts: Add an option to import widgets from
 the sidebars (#45509)

* Template Part: Introduce an option to import widgets
* Only display active sidebars with widgets as options
* Use the sidebar name as the new template part title
* Support legacy widgets
* Prefix imported template parts to avoid name collision
* Add missing docblock
* Update labels
* Move settings into the advanced inspector controls panel
* Update API response for sidebars and mark them as 'inactive'
* A minor design adjustments
* Fix the rendering order bug
* Transform legacy widgets before importing
* Avoid hardcoding names of the blocks with wildcard transformations
* Skip 'wp_inactive_widgets' widget area
* Use 'HStack'
* Allow overriding Legacy Widget block settings during registration
* Override only supports settings
* Improve spacing
* Add the legacy widget to the post editor

Co-authored-by: Robert Anderson <robert@noisysocks.com>
---
 lib/compat/wordpress-6.2/rest-api.php         |  15 ++
 lib/compat/wordpress-6.2/theme.php            |  23 +++
 lib/compat/wordpress-6.2/widgets.php          |  32 ++++
 lib/load.php                                  |   2 +
 package-lock.json                             |   2 +
 .../template-part/edit/advanced-controls.js   |  12 ++
 .../src/template-part/edit/import-controls.js | 180 ++++++++++++++++++
 .../src/template-part/edit/index.js           |   1 +
 .../template-part/edit/utils/transformers.js  |  37 ++++
 packages/edit-post/package.json               |   1 +
 packages/edit-post/src/index.js               |   2 +
 packages/edit-site/package.json               |   1 +
 packages/edit-site/src/index.js               |   2 +
 packages/widgets/src/index.js                 |  14 +-
 14 files changed, 322 insertions(+), 2 deletions(-)
 create mode 100644 lib/compat/wordpress-6.2/theme.php
 create mode 100644 lib/compat/wordpress-6.2/widgets.php
 create mode 100644 packages/block-library/src/template-part/edit/import-controls.js
 create mode 100644 packages/block-library/src/template-part/edit/utils/transformers.js

diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 4900a622b6c01b..12f7afda3b4d5d 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -101,3 +101,18 @@ function gutenberg_register_global_styles_endpoints() {
 	$editor_settings->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
+
+/**
+ * Updates REST API response for the sidebars and marks them as 'inactive'.
+ *
+ * Note: This can be a part of the `prepare_item_for_response` in `class-wp-rest-sidebars-controller.php`.
+ *
+ * @param WP_REST_Response $response The sidebar response object.
+ * @return WP_REST_Response $response Updated response object.
+ */
+function gutenberg_modify_rest_sidebars_response( $response ) {
+	$response->data['status'] = wp_is_block_theme() ? 'inactive' : 'active';
+
+	return $response;
+}
+add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
diff --git a/lib/compat/wordpress-6.2/theme.php b/lib/compat/wordpress-6.2/theme.php
new file mode 100644
index 00000000000000..79d55206449472
--- /dev/null
+++ b/lib/compat/wordpress-6.2/theme.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * Theme overrides for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Store legacy sidebars for later use by block themes.
+ *
+ * Note: This can be a part of the `switch_theme` method in `wp-includes/theme.php`.
+ *
+ * @param string   $new_name  Name of the new theme.
+ * @param WP_Theme $new_theme WP_Theme instance of the new theme.
+ */
+function gutenberg_set_legacy_sidebars( $new_name, $new_theme ) {
+	global $wp_registered_sidebars;
+
+	if ( $new_theme->is_block_theme() ) {
+		set_theme_mod( 'wp_legacy_sidebars', $wp_registered_sidebars );
+	}
+}
+add_action( 'switch_theme', 'gutenberg_set_legacy_sidebars', 10, 2 );
diff --git a/lib/compat/wordpress-6.2/widgets.php b/lib/compat/wordpress-6.2/widgets.php
new file mode 100644
index 00000000000000..19591ae64607e3
--- /dev/null
+++ b/lib/compat/wordpress-6.2/widgets.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Core Widget APIs for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( '_wp_block_theme_stub_sidebars' ) ) {
+	/**
+	 * Register the previous theme's sidebars for the block themes.
+	 *
+	 * @return void
+	 */
+	function _wp_block_theme_stub_sidebars() {
+		global $wp_registered_sidebars;
+
+		if ( ! wp_is_block_theme() ) {
+			return;
+		}
+
+		$legacy_sidebars = get_theme_mod( 'wp_legacy_sidebars' );
+		if ( empty( $legacy_sidebars ) ) {
+			return;
+		}
+
+		// Don't use `register_sidebar` since it will enable the `widgets` support for a theme.
+		foreach ( $legacy_sidebars as $sidebar ) {
+			$wp_registered_sidebars[ $sidebar['id'] ] = $sidebar;
+		}
+	}
+	add_action( 'widgets_init', '_wp_block_theme_stub_sidebars' );
+}
diff --git a/lib/load.php b/lib/load.php
index b634b85b977e38..935e373b88b2f6 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -85,6 +85,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
+require __DIR__ . '/compat/wordpress-6.2/theme.php';
+require __DIR__ . '/compat/wordpress-6.2/widgets.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
diff --git a/package-lock.json b/package-lock.json
index 66631f6f478042..9edebed07e4c36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18506,6 +18506,7 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
 				"@wordpress/warning": "file:packages/warning",
+				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
@@ -18543,6 +18544,7 @@
 				"@wordpress/style-engine": "file:packages/style-engine",
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
+				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
 				"colord": "^2.9.2",
 				"downloadjs": "^1.4.7",
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index d57d6b2f631807..ca42726b5655fa 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -7,12 +7,18 @@ import { sprintf, __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { TemplatePartImportControls } from './import-controls';
+
 export function TemplatePartAdvancedControls( {
 	tagName,
 	setAttributes,
 	isEntityAvailable,
 	templatePartId,
 	defaultWrapper,
+	hasInnerBlocks,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -87,6 +93,12 @@ export function TemplatePartAdvancedControls( {
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
 			/>
+			{ ! hasInnerBlocks && (
+				<TemplatePartImportControls
+					area={ area }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</InspectorControls>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/import-controls.js b/packages/block-library/src/template-part/edit/import-controls.js
new file mode 100644
index 00000000000000..1512cd936f02cb
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/import-controls.js
@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import {
+	Button,
+	FlexBlock,
+	FlexItem,
+	SelectControl,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import {
+	switchToBlockType,
+	getPossibleBlockTransformations,
+} from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { useCreateTemplatePartFromBlocks } from './utils/hooks';
+import { transformWidgetToBlock } from './utils/transformers';
+
+export function TemplatePartImportControls( { area, setAttributes } ) {
+	const [ selectedSidebar, setSelectedSidebar ] = useState( '' );
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const registry = useRegistry();
+	const sidebars = useSelect( ( select ) => {
+		return select( coreStore ).getSidebars( {
+			per_page: -1,
+			_fields: 'id,name,description,status,widgets',
+		} );
+	}, [] );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const createFromBlocks = useCreateTemplatePartFromBlocks(
+		area,
+		setAttributes
+	);
+
+	const options = useMemo( () => {
+		const sidebarOptions = ( sidebars ?? [] )
+			.filter(
+				( widgetArea ) =>
+					widgetArea.id !== 'wp_inactive_widgets' &&
+					widgetArea.widgets.length > 0
+			)
+			.map( ( widgetArea ) => {
+				return {
+					value: widgetArea.id,
+					label: widgetArea.name,
+				};
+			} );
+
+		if ( ! sidebarOptions.length ) {
+			return [];
+		}
+
+		return [
+			{ value: '', label: __( 'Select widget area' ) },
+			...sidebarOptions,
+		];
+	}, [ sidebars ] );
+
+	async function createFromWidgets( event ) {
+		event.preventDefault();
+
+		if ( isBusy || ! selectedSidebar ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const sidebar = options.find(
+			( { value } ) => value === selectedSidebar
+		);
+		const { getWidgets } = registry.resolveSelect( coreStore );
+
+		// The widgets API always returns a successful response.
+		const widgets = await getWidgets( {
+			sidebar: sidebar.value,
+			_embed: 'about',
+		} );
+
+		const skippedWidgets = new Set();
+		const blocks = widgets.flatMap( ( widget ) => {
+			const block = transformWidgetToBlock( widget );
+
+			if ( block.name !== 'core/legacy-widget' ) {
+				return block;
+			}
+
+			const transforms = getPossibleBlockTransformations( [
+				block,
+			] ).filter( ( item ) => {
+				// The block without any transformations can't be a wildcard.
+				if ( ! item.transforms ) {
+					return true;
+				}
+
+				const hasWildCardFrom = item.transforms?.from?.find(
+					( from ) => from.blocks && from.blocks.includes( '*' )
+				);
+				const hasWildCardTo = item.transforms?.to?.find(
+					( to ) => to.blocks && to.blocks.includes( '*' )
+				);
+
+				return ! hasWildCardFrom && ! hasWildCardTo;
+			} );
+
+			// Skip the block if we have no matching transformations.
+			if ( ! transforms.length ) {
+				skippedWidgets.add( widget.id_base );
+				return [];
+			}
+
+			// Try transforming the Legacy Widget into a first matching block.
+			return switchToBlockType( block, transforms[ 0 ].name );
+		} );
+
+		await createFromBlocks(
+			blocks,
+			/* translators: %s: name of the widget area */
+			sprintf( __( 'Widget area: %s' ), sidebar.label )
+		);
+
+		if ( skippedWidgets.size ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: the list of widgets */
+					__( 'Unable to import the following widgets: %s.' ),
+					Array.from( skippedWidgets ).join( ', ' )
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+
+		setIsBusy( false );
+	}
+
+	return (
+		<Spacer marginBottom="4">
+			<HStack as="form" onSubmit={ createFromWidgets }>
+				<FlexBlock>
+					<SelectControl
+						label={ __( 'Import widget area' ) }
+						value={ selectedSidebar }
+						options={ options }
+						onChange={ ( value ) => setSelectedSidebar( value ) }
+						disabled={ ! options.length }
+						__next36pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+				<FlexItem
+					style={ {
+						marginBottom: '8px',
+						marginTop: 'auto',
+					} }
+				>
+					<Button
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy || ! selectedSidebar }
+					>
+						{ __( 'Import' ) }
+					</Button>
+				</FlexItem>
+			</HStack>
+		</Spacer>
+	);
+}
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 83b1a8d450b6ca..502bd3d00feef6 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -141,6 +141,7 @@ export default function TemplatePartEdit( {
 					isEntityAvailable={ isEntityAvailable }
 					templatePartId={ templatePartId }
 					defaultWrapper={ areaObject.tagName }
+					hasInnerBlocks={ innerBlocks.length > 0 }
 				/>
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
diff --git a/packages/block-library/src/template-part/edit/utils/transformers.js b/packages/block-library/src/template-part/edit/utils/transformers.js
new file mode 100644
index 00000000000000..fdef84d785b909
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/utils/transformers.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parse } from '@wordpress/blocks';
+
+/**
+ * Converts a widget entity record into a block.
+ *
+ * @param {Object} widget The widget entity record.
+ * @return {Object} a block (converted from the entity record).
+ */
+export function transformWidgetToBlock( widget ) {
+	if ( widget.id_base === 'block' ) {
+		const parsedBlocks = parse( widget.instance.raw.content, {
+			__unstableSkipAutop: true,
+		} );
+		if ( ! parsedBlocks.length ) {
+			return createBlock( 'core/paragraph', {}, [] );
+		}
+
+		return parsedBlocks[ 0 ];
+	}
+
+	let attributes;
+	if ( widget._embedded.about[ 0 ].is_multi ) {
+		attributes = {
+			idBase: widget.id_base,
+			instance: widget.instance,
+		};
+	} else {
+		attributes = {
+			id: widget.id,
+		};
+	}
+
+	return createBlock( 'core/legacy-widget', attributes, [] );
+}
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 3414e958344d23..7967b0d63b1d62 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -52,6 +52,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 5b7c4e01ead7b1..2ee4dcdab17049 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -10,6 +10,7 @@ import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -115,6 +116,7 @@ export function initializeEditor(
 	}
 
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 6f42f00b2c625e..a89f52e5dddda5 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -54,6 +54,7 @@
 		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 4b619f7aac9a97..d2cbb2f4aa04d2 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -16,6 +16,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { addFilter } from '@wordpress/hooks';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -109,6 +110,7 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
diff --git a/packages/widgets/src/index.js b/packages/widgets/src/index.js
index 6c88d65556d8b0..e55b16ff12b35d 100644
--- a/packages/widgets/src/index.js
+++ b/packages/widgets/src/index.js
@@ -18,11 +18,21 @@ export * from './utils';
  * Note that for the block to be useful, any scripts required by a widget must
  * be loaded into the page.
  *
+ * @param {Object} supports Block support settings.
  * @see https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/
  */
-export function registerLegacyWidgetBlock() {
+export function registerLegacyWidgetBlock( supports = {} ) {
 	const { metadata, settings, name } = legacyWidget;
-	registerBlockType( { name, ...metadata }, settings );
+	registerBlockType(
+		{ name, ...metadata },
+		{
+			...settings,
+			supports: {
+				...settings.supports,
+				...supports,
+			},
+		}
+	);
 }
 
 /**

From d8d2d5d03132b67a65b7e78da37a949cada93cee Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 15 Dec 2022 10:35:48 +0400
Subject: [PATCH 088/209] Change SpacingSizesControl ARIA from region to group
 (#46530)

* Change SpacingSizesControl ARIA from region to group
* Add changelog entry
* Use the correct changelog file
---
 packages/block-editor/CHANGELOG.md                          | 6 +++++-
 .../src/components/spacing-sizes-control/index.js           | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 6abc73d7073b60..21666d999c1d15 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -8,7 +8,11 @@
 
 ### Enhancements
 
-- `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
+-   `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
+
+### Bug Fix
+
+-   `SpacingSizesControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#46530](https://github.com/WordPress/gutenberg/pull/46530)).
 
 ## 10.5.0 (2022-11-16)
 
diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
index fb4ce2176b759d..4ec1285db52bb9 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -78,7 +78,6 @@ export default function SpacingSizesControl( {
 
 	return (
 		<fieldset
-			role="region"
 			className={ classnames( 'component-spacing-sizes-control', {
 				'is-unlinked': ! isLinked,
 			} ) }

From 3f14cbb618c247f674866857d9214121faf88729 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 15 Dec 2022 14:59:03 +0800
Subject: [PATCH 089/209] Update copy of add submenu item option (#46564)

---
 packages/block-editor/src/components/off-canvas-editor/block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index 49ce5788dfafe0..f07d22bcea3fe0 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -386,7 +386,7 @@ function ListViewBlock( {
 											onClose();
 										} }
 									>
-										{ __( 'Add a submenu item' ) }
+										{ __( 'Add submenu item' ) }
 									</MenuItem>
 								) }
 							</BlockSettingsDropdown>

From 547542478d3e1d8ca4bc3599c1a437ca27094d2a Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 15 Dec 2022 15:08:22 +0800
Subject: [PATCH 090/209] Fix Off Canvas Editor add submenu item option
 (#46562)

* Fix Off Canvas Editor add submenu item option

* Fix comment
---
 .../src/components/off-canvas-editor/block.js | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index f07d22bcea3fe0..4ad64587796bd7 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -42,7 +42,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -60,7 +60,6 @@ function ListViewBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId, attributes } = block;
 
 	const { isLocked, isContentLocked } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -87,12 +86,12 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { replaceBlock, toggleBlockHighlight } =
+	const { insertBlock, replaceBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
 	);
 
@@ -100,7 +99,7 @@ function ListViewBlock( {
 	// since that menu is part of the toolbar in the editor canvas.
 	// List View respects this by also hiding the block settings menu.
 	const showBlockActions = hasBlockSupport(
-		blockName,
+		block.name,
 		'__experimentalToolbar',
 		true
 	);
@@ -145,7 +144,7 @@ function ListViewBlock( {
 
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
-	const isEditable = blockName !== 'core/page-list-item';
+	const isEditable = block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -369,20 +368,34 @@ function ListViewBlock( {
 											const newLink = createBlock(
 												'core/navigation-link'
 											);
-											const newSubmenu = createBlock(
-												'core/navigation-submenu',
-												attributes,
-												block.innerBlocks
-													? [
-															...block.innerBlocks,
-															newLink,
-													  ]
-													: [ newLink ]
-											);
-											replaceBlock(
-												clientId,
-												newSubmenu
-											);
+											if (
+												block.name ===
+												'core/navigation-submenu'
+											) {
+												const updateSelectionOnInsert = false;
+												insertBlock(
+													newLink,
+													block.innerBlocks.length,
+													clientId,
+													updateSelectionOnInsert
+												);
+											} else {
+												// Convert to a submenu if the block currently isn't one.
+												const newSubmenu = createBlock(
+													'core/navigation-submenu',
+													block.attributes,
+													block.innerBlocks
+														? [
+																...block.innerBlocks,
+																newLink,
+														  ]
+														: [ newLink ]
+												);
+												replaceBlock(
+													clientId,
+													newSubmenu
+												);
+											}
 											onClose();
 										} }
 									>

From 3331ee1de8147d613ee45fdb1d20d303c9285b6b Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 15 Dec 2022 15:20:35 +0800
Subject: [PATCH 091/209] Try controlled page list block (#46416)

---
 packages/block-library/src/page-list/edit.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index b3d2db31d5e04a..7372191723f466 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -25,7 +25,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -39,6 +39,7 @@ import { convertDescription } from './constants';
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
+const NOOP = () => {};
 
 export default function PageListEdit( {
 	context,
@@ -49,8 +50,6 @@ export default function PageListEdit( {
 	const { parentPageID } = attributes;
 	const [ pages ] = useGetPages();
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
-	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -133,6 +132,9 @@ export default function PageListEdit( {
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 		templateLock: 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
 	} );
 
 	const getBlockContent = () => {
@@ -185,13 +187,6 @@ export default function PageListEdit( {
 		}
 	};
 
-	useEffect( () => {
-		__unstableMarkNextChangeAsNotPersistent();
-		if ( blockList ) {
-			replaceInnerBlocks( clientId, blockList );
-		}
-	}, [ clientId, blockList ] );
-
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
 	const { parentNavBlockClientId } = useSelect( ( select ) => {

From 9615ed0288e9d32c39f515396b7dd6df337d37a5 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Dec 2022 15:36:25 +0800
Subject: [PATCH 092/209] Style Engine: Add support for text columns
 (column-count) (#46566)

---
 packages/style-engine/class-wp-style-engine.php     |  6 ++++++
 .../style-engine/src/styles/typography/index.ts     | 13 +++++++++++++
 packages/style-engine/src/test/index.js             |  9 ++++++++-
 packages/style-engine/src/types.ts                  |  1 +
 phpunit/style-engine/style-engine-test.php          |  4 +++-
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f5636c150c3eeb..0fd0aeac60e7c4 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -206,6 +206,12 @@ final class WP_Style_Engine {
 				),
 				'path'          => array( 'typography', 'lineHeight' ),
 			),
+			'textColumns'    => array(
+				'property_keys' => array(
+					'default' => 'column-count',
+				),
+				'path'          => array( 'typography', 'textColumns' ),
+			),
 			'textDecoration' => array(
 				'property_keys' => array(
 					'default' => 'text-decoration',
diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts
index 48effa0b2b8a95..75e02c96430512 100644
--- a/packages/style-engine/src/styles/typography/index.ts
+++ b/packages/style-engine/src/styles/typography/index.ts
@@ -76,6 +76,18 @@ const lineHeight = {
 	},
 };
 
+const textColumns = {
+	name: 'textColumns',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textColumns' ],
+			'columnCount'
+		);
+	},
+};
+
 const textDecoration = {
 	name: 'textDecoration',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -107,6 +119,7 @@ export default [
 	fontWeight,
 	letterSpacing,
 	lineHeight,
+	textColumns,
 	textDecoration,
 	textTransform,
 ];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index a94bd8a4256810..fac55b4000e58f 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -72,6 +72,7 @@ describe( 'generate', () => {
 						fontWeight: '800',
 						fontFamily: "'Helvetica Neue',sans-serif",
 						lineHeight: '3.3',
+						textColumns: '2',
 						textDecoration: 'line-through',
 						letterSpacing: '12px',
 						textTransform: 'uppercase',
@@ -88,7 +89,7 @@ describe( 'generate', () => {
 				}
 			)
 		).toEqual(
-			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
+			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; column-count: 2; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 
@@ -242,6 +243,7 @@ describe( 'getCSSRules', () => {
 						fontWeight: '800',
 						fontFamily: "'Helvetica Neue',sans-serif",
 						lineHeight: '3.3',
+						textColumns: '2',
 						textDecoration: 'line-through',
 						letterSpacing: '12px',
 						textTransform: 'uppercase',
@@ -349,6 +351,11 @@ describe( 'getCSSRules', () => {
 				key: 'lineHeight',
 				value: '3.3',
 			},
+			{
+				selector: '.some-selector',
+				key: 'columnCount',
+				value: '2',
+			},
 			{
 				selector: '.some-selector',
 				key: 'textDecoration',
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 0063cd56621c6c..23d3e38cc43c22 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -52,6 +52,7 @@ export interface Style {
 		fontStyle?: CSSProperties[ 'fontStyle' ];
 		letterSpacing?: CSSProperties[ 'letterSpacing' ];
 		lineHeight?: CSSProperties[ 'lineHeight' ];
+		textColumns?: CSSProperties[ 'columnCount' ];
 		textDecoration?: CSSProperties[ 'textDecoration' ];
 		textTransform?: CSSProperties[ 'textTransform' ];
 	};
diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
index 66d8dd62865272..0588f10ef4fce7 100644
--- a/phpunit/style-engine/style-engine-test.php
+++ b/phpunit/style-engine/style-engine-test.php
@@ -188,6 +188,7 @@ public function data_wp_style_engine_get_styles() {
 						'fontStyle'      => 'italic',
 						'fontWeight'     => '800',
 						'lineHeight'     => '1.3',
+						'textColumns'    => '2',
 						'textDecoration' => 'underline',
 						'textTransform'  => 'uppercase',
 						'letterSpacing'  => '2',
@@ -195,13 +196,14 @@ public function data_wp_style_engine_get_styles() {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
 						'font-style'      => 'italic',
 						'font-weight'     => '800',
 						'line-height'     => '1.3',
+						'column-count'    => '2',
 						'text-decoration' => 'underline',
 						'text-transform'  => 'uppercase',
 						'letter-spacing'  => '2',

From a58c37077e5f24ab5c55f750517266c92dbd22f0 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 15 Dec 2022 09:55:35 +0200
Subject: [PATCH 093/209] Paste: reuse file transforms for file pasting
 (#45891)

* Paste: reuse file transforms for file pasting

* Make sure files is defined

* paste multiple file types

* fix for gallery block

* Make sure gallery block settings sync

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
---
 .../src/components/copy-handler/index.js      | 60 ++++++++++++++++---
 .../rich-text/file-paste-handler.js           | 13 ----
 .../components/rich-text/use-paste-handler.js | 47 ++++++++++-----
 packages/block-editor/src/utils/pasting.js    | 12 +---
 packages/block-library/src/gallery/edit.js    | 18 +++++-
 packages/block-library/src/gallery/gallery.js | 16 +----
 6 files changed, 108 insertions(+), 58 deletions(-)
 delete mode 100644 packages/block-editor/src/components/rich-text/file-paste-handler.js

diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
index 3e5a50a8fe49ea..3881ff06f2bf30 100644
--- a/packages/block-editor/src/components/copy-handler/index.js
+++ b/packages/block-editor/src/components/copy-handler/index.js
@@ -7,6 +7,8 @@ import {
 	pasteHandler,
 	store as blocksStore,
 	createBlock,
+	findTransform,
+	getBlockTransforms,
 } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -84,6 +86,7 @@ export function useClipboardHandler() {
 		__unstableIsSelectionCollapsed,
 		__unstableIsSelectionMergeable,
 		__unstableGetSelectedBlocksWithPartialSelection,
+		canInsertBlockType,
 	} = useSelect( blockEditorStore );
 	const {
 		flashBlock,
@@ -91,6 +94,7 @@ export function useClipboardHandler() {
 		replaceBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
+		insertBlocks,
 	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
@@ -201,13 +205,55 @@ export function useClipboardHandler() {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
 				} = getSettings();
-				const { plainText, html } = getPasteEventData( event );
-				const blocks = pasteHandler( {
-					HTML: html,
-					plainText,
-					mode: 'BLOCKS',
-					canUserUseUnfilteredHTML,
-				} );
+				const { plainText, html, files } = getPasteEventData( event );
+				let blocks = [];
+
+				if ( files.length ) {
+					const fromTransforms = getBlockTransforms( 'from' );
+					blocks = files
+						.reduce( ( accumulator, file ) => {
+							const transformation = findTransform(
+								fromTransforms,
+								( transform ) =>
+									transform.type === 'files' &&
+									transform.isMatch( [ file ] )
+							);
+							if ( transformation ) {
+								accumulator.push(
+									transformation.transform( [ file ] )
+								);
+							}
+							return accumulator;
+						}, [] )
+						.flat();
+				} else {
+					blocks = pasteHandler( {
+						HTML: html,
+						plainText,
+						mode: 'BLOCKS',
+						canUserUseUnfilteredHTML,
+					} );
+				}
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+					if (
+						blocks.every( ( block ) =>
+							canInsertBlockType(
+								block.name,
+								selectedBlockClientId
+							)
+						)
+					) {
+						insertBlocks(
+							blocks,
+							undefined,
+							selectedBlockClientId
+						);
+						return;
+					}
+				}
 
 				replaceBlocks(
 					selectedBlockClientIds,
diff --git a/packages/block-editor/src/components/rich-text/file-paste-handler.js b/packages/block-editor/src/components/rich-text/file-paste-handler.js
deleted file mode 100644
index 2aae5984389e68..00000000000000
--- a/packages/block-editor/src/components/rich-text/file-paste-handler.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlobURL } from '@wordpress/blob';
-
-export function filePasteHandler( files ) {
-	return files
-		.filter( ( { type } ) =>
-			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-		)
-		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
-		.join( '' );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
index 5e4f4260f5001f..67c932aceddcc1 100644
--- a/packages/block-editor/src/components/rich-text/use-paste-handler.js
+++ b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -4,7 +4,11 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { pasteHandler } from '@wordpress/blocks';
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+} from '@wordpress/blocks';
 import {
 	isEmpty,
 	insert,
@@ -17,7 +21,6 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 import { shouldDismissPastedFiles } from '../../utils/pasting';
@@ -155,6 +158,12 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
+			if ( files?.length ) {
+				// Allows us to ask for this information when we get a report.
+				// eslint-disable-next-line no-console
+				window.console.log( 'Received items:\n\n', files );
+			}
+
 			// Process any attached files, unless we infer that the files in
 			// question are redundant "screenshots" of the actual HTML payload,
 			// as created by certain office-type programs.
@@ -164,23 +173,33 @@ export function usePasteHandler( props ) {
 				files?.length &&
 				! shouldDismissPastedFiles( files, html, plainText )
 			) {
-				const content = pasteHandler( {
-					HTML: filePasteHandler( files ),
-					mode: 'BLOCKS',
-					tagName,
-					preserveWhiteSpace,
-				} );
-
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
-				window.console.log( 'Received items:\n\n', files );
+				const fromTransforms = getBlockTransforms( 'from' );
+				const blocks = files
+					.reduce( ( accumulator, file ) => {
+						const transformation = findTransform(
+							fromTransforms,
+							( transform ) =>
+								transform.type === 'files' &&
+								transform.isMatch( [ file ] )
+						);
+						if ( transformation ) {
+							accumulator.push(
+								transformation.transform( [ file ] )
+							);
+						}
+						return accumulator;
+					}, [] )
+					.flat();
+				if ( ! blocks.length ) {
+					return;
+				}
 
 				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content );
+					onReplace( blocks );
 				} else {
 					splitValue( {
 						value,
-						pastedBlocks: content,
+						pastedBlocks: blocks,
 						onReplace,
 						onSplit,
 						onSplitMiddle,
diff --git a/packages/block-editor/src/utils/pasting.js b/packages/block-editor/src/utils/pasting.js
index 366b79a3294229..e962e11050a1d9 100644
--- a/packages/block-editor/src/utils/pasting.js
+++ b/packages/block-editor/src/utils/pasting.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
 export function getPasteEventData( { clipboardData } ) {
@@ -25,21 +24,16 @@ export function getPasteEventData( { clipboardData } ) {
 		}
 	}
 
-	const files = getFilesFromDataTransfer( clipboardData ).filter(
-		( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-	);
+	const files = getFilesFromDataTransfer( clipboardData );
 
 	if (
 		files.length &&
 		! shouldDismissPastedFiles( files, html, plainText )
 	) {
-		html = files
-			.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
-			.join( '' );
-		plainText = '';
+		return { files };
 	}
 
-	return { html, plainText };
+	return { html, plainText, files: [] };
 }
 
 /**
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index c8d6731198c7c6..893167e6690f3c 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -20,6 +20,7 @@ import {
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
@@ -63,6 +64,7 @@ const linkOptions = [
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const allowedBlocks = [ 'core/image' ];
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -483,8 +485,20 @@ function GalleryEdit( props ) {
 		className: classnames( className, 'has-nested-images' ),
 	} );
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks,
+		orientation: 'horizontal',
+		renderAppender: false,
+		__experimentalLayout: { type: 'default', alignments: [] },
+	} );
+
 	if ( ! hasImages ) {
-		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
+		return (
+			<View { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ mediaPlaceholder }
+			</View>
+		);
 	}
 
 	const hasLinkTo = linkTo && linkTo !== 'none';
@@ -579,7 +593,7 @@ function GalleryEdit( props ) {
 						? mediaPlaceholder
 						: undefined
 				}
-				blockProps={ blockProps }
+				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</>
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index e6176cc8a7256c..957a141d51c6b7 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import {
 	RichText,
-	useInnerBlocksProps,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
@@ -16,8 +15,6 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
-const allowedBlocks = [ 'core/image' ];
-
 export const Gallery = ( props ) => {
 	const {
 		attributes,
@@ -31,16 +28,9 @@ export const Gallery = ( props ) => {
 
 	const { align, columns, caption, imageCrop } = attributes;
 
-	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
-		allowedBlocks,
-		orientation: 'horizontal',
-		renderAppender: false,
-		__experimentalLayout: { type: 'default', alignments: [] },
-	} );
-
 	return (
 		<figure
-			{ ...innerBlocksProps }
+			{ ...blockProps }
 			className={ classnames(
 				blockProps.className,
 				layoutClassNames,
@@ -53,8 +43,8 @@ export const Gallery = ( props ) => {
 				}
 			) }
 		>
-			{ children }
-			{ isSelected && ! children && (
+			{ blockProps.children }
+			{ isSelected && ! blockProps.children && (
 				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>

From 897d3b3ab9f9edb57bea57972ea830b483309448 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Dec 2022 10:04:32 +0100
Subject: [PATCH 094/209] Add a performance metric to measure typing within
 containers (#46529)

---
 bin/plugin/commands/performance.js            | 16 ++++
 .../assets/small-post-with-containers.html    | 77 ++++++++++++++++
 .../e2e-tests/config/performance-reporter.js  | 28 ++++--
 .../specs/performance/post-editor.test.js     | 91 +++++++++++++++----
 .../specs/performance/site-editor.test.js     |  1 +
 5 files changed, 189 insertions(+), 24 deletions(-)
 create mode 100644 packages/e2e-tests/assets/small-post-with-containers.html

diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 31a537f373731d..81aa39820c8b5a 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -37,6 +37,7 @@ const config = require( '../config' );
  * @property {number[]} firstContentfulPaint Represents the time when the browser first renders any text or media.
  * @property {number[]} firstBlock           Represents the time when Puppeteer first sees a block selector in the DOM.
  * @property {number[]} type                 Average type time.
+ * @property {number[]} typeContainer        Average type time within a container.
  * @property {number[]} focus                Average block selection time.
  * @property {number[]} inserterOpen         Average time to open global inserter.
  * @property {number[]} inserterSearch       Average time to search the inserter.
@@ -56,6 +57,9 @@ const config = require( '../config' );
  * @property {number=} type                 Average type time.
  * @property {number=} minType              Minimum type time.
  * @property {number=} maxType              Maximum type time.
+ * @property {number=} typeContainer        Average type time within a container.
+ * @property {number=} minTypeContainer     Minimum type time within a container.
+ * @property {number=} maxTypeContainer     Maximum type time within a container.
  * @property {number=} focus                Average block selection time.
  * @property {number=} minFocus             Min block selection time.
  * @property {number=} maxFocus             Max block selection time.
@@ -129,6 +133,9 @@ function curateResults( results ) {
 		type: average( results.type ),
 		minType: Math.min( ...results.type ),
 		maxType: Math.max( ...results.type ),
+		typeContainer: average( results.typeContainer ),
+		minTypeContainer: Math.min( ...results.typeContainer ),
+		maxTypeContainer: Math.max( ...results.typeContainer ),
 		focus: average( results.focus ),
 		minFocus: Math.min( ...results.focus ),
 		maxFocus: Math.max( ...results.focus ),
@@ -393,6 +400,15 @@ async function runPerformanceTests( branches, options ) {
 					type: rawResults.map( ( r ) => r[ branch ].type ),
 					minType: rawResults.map( ( r ) => r[ branch ].minType ),
 					maxType: rawResults.map( ( r ) => r[ branch ].maxType ),
+					typeContainer: rawResults.map(
+						( r ) => r[ branch ].typeContainer
+					),
+					minTypeContainer: rawResults.map(
+						( r ) => r[ branch ].minTypeContainer
+					),
+					maxTypeContainer: rawResults.map(
+						( r ) => r[ branch ].maxTypeContainer
+					),
 					focus: rawResults.map( ( r ) => r[ branch ].focus ),
 					minFocus: rawResults.map( ( r ) => r[ branch ].minFocus ),
 					maxFocus: rawResults.map( ( r ) => r[ branch ].maxFocus ),
diff --git a/packages/e2e-tests/assets/small-post-with-containers.html b/packages/e2e-tests/assets/small-post-with-containers.html
new file mode 100644
index 00000000000000..f5d32011602dcd
--- /dev/null
+++ b/packages/e2e-tests/assets/small-post-with-containers.html
@@ -0,0 +1,77 @@
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js
index 549855bf297135..e9928008dd6e3b 100644
--- a/packages/e2e-tests/config/performance-reporter.js
+++ b/packages/e2e-tests/config/performance-reporter.js
@@ -36,6 +36,7 @@ class PerformanceReporter {
 			firstContentfulPaint,
 			firstBlock,
 			type,
+			typeContainer,
 			focus,
 			listViewOpen,
 			inserterOpen,
@@ -68,7 +69,7 @@ Average time to first block: ${ success(
 		if ( type && type.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Typing Performance:' ) }
+${ title( 'Typing:' ) }
 Average time to type character: ${ success( round( average( type ) ) + 'ms' ) }
 Slowest time to type character: ${ success(
 				round( Math.max( ...type ) ) + 'ms'
@@ -78,10 +79,25 @@ Fastest time to type character: ${ success(
 			) }` );
 		}
 
+		if ( typeContainer && typeContainer.length ) {
+			// eslint-disable-next-line no-console
+			console.log( `
+${ title( 'Typing within a container:' ) }
+Average time to type within a container: ${ success(
+				round( average( typeContainer ) ) + 'ms'
+			) }
+Slowest time to type within a container: ${ success(
+				round( Math.max( ...typeContainer ) ) + 'ms'
+			) }
+Fastest time to type within a container: ${ success(
+				round( Math.min( ...typeContainer ) ) + 'ms'
+			) }` );
+		}
+
 		if ( focus && focus.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Block Selection Performance:' ) }
+${ title( 'Block Selection:' ) }
 Average time to select a block: ${ success( round( average( focus ) ) + 'ms' ) }
 Slowest time to select a block: ${ success(
 				round( Math.max( ...focus ) ) + 'ms'
@@ -94,7 +110,7 @@ Fastest time to select a block: ${ success(
 		if ( listViewOpen && listViewOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening List View Performance:' ) }
+${ title( 'Opening List View:' ) }
 Average time to open list view: ${ success(
 				round( average( listViewOpen ) ) + 'ms'
 			) }
@@ -109,7 +125,7 @@ Fastest time to open list view: ${ success(
 		if ( inserterOpen && inserterOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening Global Inserter Performance:' ) }
+${ title( 'Opening Global Inserter:' ) }
 Average time to open global inserter: ${ success(
 				round( average( inserterOpen ) ) + 'ms'
 			) }
@@ -124,7 +140,7 @@ Fastest time to open global inserter: ${ success(
 		if ( inserterSearch && inserterSearch.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Search Performance:' ) }
+${ title( 'Inserter Search:' ) }
 Average time to type the inserter search input: ${ success(
 				round( average( inserterSearch ) ) + 'ms'
 			) }
@@ -139,7 +155,7 @@ Fastest time to type the inserter search input: ${ success(
 		if ( inserterHover && inserterHover.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Block Item Hover Performance:' ) }
+${ title( 'Inserter Block Item Hover:' ) }
 Average time to move mouse between two block item in the inserter: ${ success(
 				round( average( inserterHover ) ) + 'ms'
 			) }
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 933b4973fb055e..63fa92514728ec 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -32,6 +32,23 @@ import {
 
 jest.setTimeout( 1000000 );
 
+async function loadHtmlIntoTheBlockEditor( html ) {
+	await page.evaluate( ( _html ) => {
+		const { parse } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = parse( _html );
+
+		blocks.forEach( ( block ) => {
+			if ( block.name === 'core/image' ) {
+				delete block.attributes.id;
+				delete block.attributes.url;
+			}
+		} );
+
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	}, html );
+}
+
 describe( 'Post Editor Performance', () => {
 	const results = {
 		serverResponse: [],
@@ -41,6 +58,7 @@ describe( 'Post Editor Performance', () => {
 		firstContentfulPaint: [],
 		firstBlock: [],
 		type: [],
+		typeContainer: [],
 		focus: [],
 		listViewOpen: [],
 		inserterOpen: [],
@@ -51,25 +69,10 @@ describe( 'Post Editor Performance', () => {
 	let traceResults;
 
 	beforeAll( async () => {
-		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
-		);
-
 		await createNewPost();
-		await page.evaluate( ( _html ) => {
-			const { parse } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = parse( _html );
-
-			blocks.forEach( ( block ) => {
-				if ( block.name === 'core/image' ) {
-					delete block.attributes.id;
-					delete block.attributes.url;
-				}
-			} );
-
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
-		}, html );
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
 		await saveDraft();
 	} );
 
@@ -151,6 +154,58 @@ describe( 'Post Editor Performance', () => {
 		}
 	} );
 
+	it( 'Typing within containers', async () => {
+		// Measuring block selection performance.
+		await createNewPost();
+		await loadHtmlIntoTheBlockEditor(
+			readFile(
+				join(
+					__dirname,
+					'../../assets/small-post-with-containers.html'
+				)
+			)
+		);
+		// Select the block where we type in
+		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await page.click( 'p[aria-label="Paragraph block"]' );
+		// Ignore firsted typed character because it's different
+		// It probably deserves a dedicated metric.
+		// (isTyping triggers so it's slower)
+		await page.keyboard.type( 'x' );
+
+		let i = 10;
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+		} );
+
+		while ( i-- ) {
+			// Wait for the browser to be idle before starting the monitoring.
+			// eslint-disable-next-line no-restricted-syntax
+			await page.waitForTimeout( 500 );
+			await page.keyboard.type( 'x' );
+		}
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitForTimeout( 500 );
+		await page.tracing.stop();
+		traceResults = JSON.parse( readFile( traceFile ) );
+		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+			getTypingEventDurations( traceResults );
+		if (
+			keyDownEvents.length === keyPressEvents.length &&
+			keyPressEvents.length === keyUpEvents.length
+		) {
+			// The first character typed triggers a longer time (isTyping change)
+			// It can impact the stability of the metric, so we exclude it.
+			for ( let j = 1; j < keyDownEvents.length; j++ ) {
+				results.typeContainer.push(
+					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				);
+			}
+		}
+	} );
+
 	it( 'Selecting blocks', async () => {
 		// Measuring block selection performance.
 		await createNewPost();
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
index eaa3323b7b16c8..e3a2ef86c69328 100644
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -51,6 +51,7 @@ describe( 'Site Editor Performance', () => {
 			firstContentfulPaint: [],
 			firstBlock: [],
 			type: [],
+			typeContainer: [],
 			focus: [],
 			inserterOpen: [],
 			inserterHover: [],

From abf426bd83a4ab1469587bd5dabfff6861414fb0 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 15 Dec 2022 11:20:10 +0200
Subject: [PATCH 095/209] Lodash: Refactor components away from `_.find()`
 (#46537)

* Lodash: Refactor components away from _.find()

* Add CHANGELOG entry
---
 packages/components/CHANGELOG.md              |  4 +++
 packages/components/src/autocomplete/index.js |  4 +--
 .../mobile/bottom-sheet/picker-cell.native.js |  7 +---
 .../global-styles-context/utils.native.js     | 33 ++++++++++---------
 packages/components/src/tab-panel/index.tsx   |  3 +-
 5 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7ed9fc6779bbae..f459061f109e19 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -45,6 +45,10 @@
 -   `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
 -   `PaletteEdit`: add follow up changelog for #45681 and tests [#46095](https://github.com/WordPress/gutenberg/pull/46095).
 -   `AlignmentMatrixControl`: Convert to TypeScript ([#46162](https://github.com/WordPress/gutenberg/pull/46162)).
+-   `Autocomplete`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `TabPanel`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `BottomSheetPickerCell`: Refactor away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   Refactor global styles context away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 
 ### Documentation
 
diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
index 45f5415e55de00..13c27d49b81b15 100644
--- a/packages/components/src/autocomplete/index.js
+++ b/packages/components/src/autocomplete/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -290,8 +289,7 @@ function useAutocomplete( {
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);
-		const completer = find(
-			completers,
+		const completer = completers?.find(
 			( { triggerPrefix, allowContext } ) => {
 				const index = text.lastIndexOf( triggerPrefix );
 
diff --git a/packages/components/src/mobile/bottom-sheet/picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
index 42c59cd025adf0..2dbbdd08d4609e 100644
--- a/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -23,7 +18,7 @@ export default function BottomSheetPickerCell( props ) {
 		onChangeValue( newValue );
 	};
 
-	const option = find( options, { value } );
+	const option = options.find( ( opt ) => opt.value === value );
 	const label = option ? option.label : value;
 
 	return (
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
index 7d985a9cccb6f6..38536ec3f107f9 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -113,9 +113,9 @@ export function getBlockColors(
 		}
 
 		if ( ! isCustomColor ) {
-			const mappedColor = find( defaultColors, {
-				slug: value,
-			} );
+			const mappedColor = Object.values( defaultColors ?? {} ).find(
+				( { slug } ) => slug === value
+			);
 
 			if ( mappedColor ) {
 				blockStyles[ styleKey ] = mappedColor.color;
@@ -143,6 +143,7 @@ export function getBlockTypography(
 	const typographyStyles = {};
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+	const parsedFontSizes = Object.values( fontSizes ?? {} );
 
 	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
@@ -153,9 +154,9 @@ export function getBlockTypography(
 			if ( parseInt( fontSize, 10 ) ) {
 				typographyStyles.fontSize = fontSize;
 			} else {
-				const mappedFontSize = find( fontSizes, {
-					slug: fontSize,
-				} );
+				const mappedFontSize = parsedFontSizes.find(
+					( { slug } ) => slug === fontSize
+				);
 
 				if ( mappedFontSize ) {
 					typographyStyles.fontSize = mappedFontSize?.size;
@@ -169,9 +170,9 @@ export function getBlockTypography(
 	}
 
 	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
-		const mappedFontSize = find( fontSizes, {
-			slug: blockStyleAttributes?.fontSize,
-		} );
+		const mappedFontSize = parsedFontSizes.find(
+			( { slug } ) => slug === blockStyleAttributes?.fontSize
+		);
 
 		if ( mappedFontSize ) {
 			typographyStyles.fontSize = mappedFontSize?.size;
@@ -212,9 +213,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				const path = $2.split( '--' );
 				const mappedPresetValue = mappedValues[ path[ 0 ] ];
 				if ( mappedPresetValue && mappedPresetValue.slug ) {
-					const matchedValue = find( mappedPresetValue.values, {
-						slug: path[ 1 ],
-					} );
+					const matchedValue = Object.values(
+						mappedPresetValue.values ?? {}
+					).find( ( { slug } ) => slug === path[ 1 ] );
 					return matchedValue?.[ mappedPresetValue.slug ];
 				}
 				return UNKNOWN_VALUE;
@@ -244,9 +245,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		if ( variable === 'var' ) {
 			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
 				if ( mappedValues?.color ) {
-					const matchedValue = find( mappedValues.color?.values, {
-						slug: $2,
-					} );
+					const matchedValue = mappedValues.color?.values?.find(
+						( { slug } ) => slug === $2
+					);
 					return `"${ matchedValue?.color }"`;
 				}
 				return UNKNOWN_VALUE;
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index fce688089a55c0..2504f7f214fa62 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -102,7 +101,7 @@ export function TabPanel( {
 	) => {
 		child.click();
 	};
-	const selectedTab = find( tabs, { name: selected } );
+	const selectedTab = tabs.find( ( { name } ) => name === selected );
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {

From 43f2ef4c542faa6be9f80c58cc0628ee4578a579 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 15 Dec 2022 09:31:25 +0000
Subject: [PATCH 096/209] Fix accessing potentially undefined block editor
 setting __experimentalBlockInspectorAnimation

---
 packages/block-editor/src/components/block-inspector/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 2f3b69131a73e6..48d5d982e75089 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -181,7 +181,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
 						.__experimentalBlockInspectorAnimation;
-				return globalBlockInspectorAnimationSettings[ blockType.name ];
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
 			}
 			return null;
 		},

From c89dd8bca282386401d458bcfe808d555e143617 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 15 Dec 2022 10:00:21 +0000
Subject: [PATCH 097/209] Update the update icon (#46575)

Co-authored-by: Ben Dwyer <ben@escruffian.com>
---
 packages/icons/src/library/update.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/icons/src/library/update.js b/packages/icons/src/library/update.js
index d751fb970ea551..09a291c7e97566 100644
--- a/packages/icons/src/library/update.js
+++ b/packages/icons/src/library/update.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const update = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M10.2 3.28c3.53 0 6.43 2.61 6.92 6h2.08l-3.5 4-3.5-4h2.32c-.45-1.97-2.21-3.45-4.32-3.45-1.45 0-2.73.71-3.54 1.78L4.95 5.66C6.23 4.2 8.11 3.28 10.2 3.28zm-.4 13.44c-3.52 0-6.43-2.61-6.92-6H.8l3.5-4c1.17 1.33 2.33 2.67 3.5 4H5.48c.45 1.97 2.21 3.45 4.32 3.45 1.45 0 2.73-.71 3.54-1.78l1.71 1.95c-1.28 1.46-3.15 2.38-5.25 2.38z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m11.3 17.2-5-5c-.1-.1-.1-.3 0-.4l2.3-2.3-1.1-1-2.3 2.3c-.7.7-.7 1.8 0 2.5l5 5H7.5v1.5h5.3v-5.2h-1.5v2.6zm7.5-6.4-5-5h2.7V4.2h-5.2v5.2h1.5V6.8l5 5c.1.1.1.3 0 .4l-2.3 2.3 1.1 1.1 2.3-2.3c.6-.7.6-1.9-.1-2.5z" />
 	</SVG>
 );
 

From ece606040387b85069419801cb1b99cf851058b2 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 15 Dec 2022 12:43:42 +0200
Subject: [PATCH 098/209] Block editor: iframe/writing flow: change tab index
 to 0 (#46323)

---
 packages/block-editor/src/components/writing-flow/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index b28f065c559c5f..e3100dc3464c65 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -44,7 +44,7 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
+					node.tabIndex = 0;
 					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {

From 9c122466100e6e06dd23cca9b6fd744bc97f048a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 15 Dec 2022 19:55:01 +0800
Subject: [PATCH 099/209] Page List: Add typography supports (#43316)

Co-authored-by: Glen Davies <glen.davies@automattic.com>
---
 docs/reference-guides/core-blocks.md            |  2 +-
 packages/block-library/src/page-list/block.json | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index d2d66fc0d12de3..14f800f140aee3 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -428,7 +428,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 -	**Name:** core/page-list
 -	**Category:** widgets
--	**Supports:** ~~html~~, ~~reusable~~
+-	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** parentPageID
 
 ## Page List Item
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index 2fc6993849d6f7..e8ff316a9fb4f6 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -30,7 +30,20 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

From aa9b1d665a10f32182797e0d7e7a559362d1ec1c Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 15 Dec 2022 08:25:56 -0500
Subject: [PATCH 100/209] Remove clearable from link ColorPanel item (#46507)

---
 packages/block-editor/src/hooks/color.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 593eea881e3107..fee6f39daa8b20 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -522,8 +522,6 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},

From 94b4253a0aad603fef897ffdd89df3e19ebba85b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Thu, 15 Dec 2022 22:42:01 +0900
Subject: [PATCH 101/209] Migrate quote e2e tests to playwright (#46549)

* Migrate qupte e2e tests to playwright

* Use inline snapshots

* Add `deleteAllPosts`

* Use accesible selector

* Add an inline comment for `pressKeyTimes`
---
 .../blocks/__snapshots__/quote.test.js.snap   | 123 -------
 .../specs/editor/blocks/quote.test.js         | 199 -----------
 test/e2e/specs/editor/blocks/quote.spec.js    | 312 +++++++++++++++++-
 3 files changed, 300 insertions(+), 334 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/quote.test.js

diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
deleted file mode 100644
index 9a3924de6d1dab..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
+++ /dev/null
@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Quote can be converted to a pullquote 1`] = `
-"<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>one<br>two</p><cite>cite</cite></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a paragraph for the cite, if it exists 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a void paragraph if both the cite and quote are void 1`] = `""`;
-
-exports[`Quote can be converted to paragraphs and renders one paragraph block per <p> within quote 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders only one paragraph for the cite, if the quote is void 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be created by converting a heading 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\">test</h2>
-<!-- /wp:heading --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting a paragraph 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting multiple paragraphs 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing "/quote" 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>I’m a quote</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing > in front of text of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by using > at the start of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>A quote</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Another paragraph</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be split at the end 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be split at the end 2`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/quote.test.js b/packages/e2e-tests/specs/editor/blocks/quote.test.js
deleted file mode 100644
index 9b0a4bac546dd3..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/quote.test.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyTimes,
-	transformBlockTo,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Quote', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by using > at the start of a paragraph block', async () => {
-		// Create a block with some text that will trigger a list creation.
-		await clickBlockAppender();
-		await page.keyboard.type( '> A quote' );
-
-		// Create a second list item.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Another paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by typing > in front of text of a paragraph block', async () => {
-		// Create a list with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await pressKeyTimes( 'ArrowLeft', 4 );
-		await page.keyboard.type( '> ' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by typing "/quote"', async () => {
-		// Create a list with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/quote' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Quote')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'I’m a quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by converting a paragraph', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by converting multiple paragraphs', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'one' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'two' );
-		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"]' );
-		await page.keyboard.up( 'Shift' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	describe( 'can be converted to paragraphs', () => {
-		it( 'and renders one paragraph block per <p> within quote', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.type( 'one' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'two' );
-			// Navigate to the citation to select the block.
-			await page.keyboard.press( 'ArrowRight' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders a paragraph for the cite, if it exists', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.type( 'one' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'two' );
-			await page.keyboard.press( 'ArrowRight' );
-			await page.keyboard.type( 'cite' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders only one paragraph for the cite, if the quote is void', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.press( 'ArrowRight' );
-			await page.keyboard.type( 'cite' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders a void paragraph if both the cite and quote are void', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.press( 'ArrowRight' ); // Select the quote
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	it( 'can be created by converting a heading', async () => {
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'test' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be converted to a pullquote', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( 'one' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'two' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( 'cite' );
-		await transformBlockTo( 'Pullquote' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be split at the end', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-
-		// Expect empty paragraph outside quote block.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-		// Allow time for selection to update.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		await page.keyboard.type( '2' );
-
-		// Expect the paragraph to be merged into the quote block.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be unwrapped on Backspace', async () => {
-		await insertBlock( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p></p>
-		<!-- /wp:paragraph --></blockquote>
-		<!-- /wp:quote -->"
-	` );
-
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `""` );
-	} );
-
-	it( 'can be unwrapped with content on Backspace', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( '2' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p>1</p>
-		<!-- /wp:paragraph --><cite>2</cite></blockquote>
-		<!-- /wp:quote -->"
-	` );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>1</p>
-		<!-- /wp:paragraph -->
-
-		<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><cite>2</cite></blockquote>
-		<!-- /wp:quote -->"
-	` );
-	} );
-} );
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 69d69f0003489f..299d56785d831b 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -3,29 +3,317 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'adding a quote', () => {
+test.describe( 'Quote', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
 	test( 'should allow the user to type right away', async ( {
-		admin,
 		editor,
 		page,
 	} ) => {
-		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/quote' } );
+		// Type content right after.
+		await page.keyboard.type( 'Quote content' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Quote content</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by using > at the start of a paragraph block', async ( {
+		editor,
+		page,
+	} ) => {
+		// Create a block with some text that will trigger a paragraph creation.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '> A quote' );
+		// Create a second paragraph.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Another paragraph' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>A quote</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Another paragraph</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by typing > in front of text of a paragraph block', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'test' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 'test'.length );
+		await page.keyboard.type( '> ' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>test</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by typing "/quote"', async ( { editor, page } ) => {
+		// Create a list with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/quote' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'I’m a quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>I’m a quote</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by converting a paragraph', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'test' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>test</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by converting multiple paragraphs', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await page.keyboard.down( 'Shift' );
+		await page.click(
+			'role=document[name="Paragraph block"i] >> text=one'
+		);
+		await page.keyboard.up( 'Shift' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
 
-		// Inserting a quote block
-		await editor.insertBlock( {
-			name: 'core/quote',
+	test.describe( 'can be converted to paragraphs', () => {
+		test( 'and renders one paragraph block per <p> within quote', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.type( 'one' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'two' );
+			// Navigate to the citation to select the block.
+			await page.keyboard.press( 'ArrowRight' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph -->`
+			);
 		} );
 
-		// Type content right after.
-		await page.keyboard.type( 'Quote content' );
+		test( 'and renders a paragraph for the cite, if it exists', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.type( 'one' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'two' );
+			await page.keyboard.press( 'ArrowRight' );
+			await page.keyboard.type( 'cite' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>cite</p>
+<!-- /wp:paragraph -->`
+			);
+		} );
+
+		test( 'and renders only one paragraph for the cite, if the quote is void', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.press( 'ArrowRight' );
+			await page.keyboard.type( 'cite' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
 
-		// Check the content
-		const content = await editor.getEditedPostContent();
-		expect( content ).toBe(
+<!-- wp:paragraph -->
+<p>cite</p>
+<!-- /wp:paragraph -->`
+			);
+		} );
+
+		test( 'and renders a void paragraph if both the cite and quote are void', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			// Select the quote
+			await page.keyboard.press( 'ArrowRight' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe( '' );
+		} );
+	} );
+
+	test( 'can be created by converting a heading', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'test' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:heading -->
+<h2 class="wp-block-heading">test</h2>
+<!-- /wp:heading --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be converted to a pullquote', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( 'cite' );
+		await editor.transformBlockTo( 'core/pullquote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>one<br>two</p><cite>cite</cite></blockquote></figure>
+<!-- /wp:pullquote -->`
+		);
+	} );
+
+	test( 'can be split at the end', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		// Expect empty paragraph outside quote block.
+		expect( await editor.getEditedPostContent() ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:paragraph -->
-<p>Quote content</p>
+<p>1</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '2' );
+		// Expect the paragraph to be merged into the quote block.
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be unwrapped on Backspace', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+		await page.keyboard.press( 'Backspace' );
+		expect( await editor.getEditedPostContent() ).toBe( '' );
+	} );
+
+	test( 'can be unwrapped with content on Backspace', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( '2' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph --><cite>2</cite></blockquote>
+<!-- /wp:quote -->`
+		);
+		// Move the cursor to the start of the first paragraph of the quoted block.
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 4 );
+		await page.keyboard.press( 'Backspace' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><cite>2</cite></blockquote>
 <!-- /wp:quote -->`
 		);
 	} );

From c963b315d714e7c962f3f00d9fe43dc96c3c455e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Dec 2022 15:15:14 +0100
Subject: [PATCH 102/209] Fix region navigation in the site editor (#46525)

---
 packages/base-styles/_z-index.scss            |  5 +-
 .../higher-order/navigate-regions/style.scss  | 52 ++++------------
 .../edit-site/src/components/editor/index.js  | 17 +-----
 .../edit-site/src/components/layout/index.js  | 59 +++++++++++++------
 .../edit-site/src/components/list/style.scss  |  9 +--
 .../components/interface-skeleton/index.js    |  8 ++-
 .../components/interface-skeleton/style.scss  | 14 -----
 .../src/components/navigable-region/index.js  |  4 +-
 8 files changed, 66 insertions(+), 102 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index ec3be48f1b9752..62a1ab3b19d8f0 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -142,6 +142,9 @@ $z-layers: (
 	".skip-to-selected-block": 100000,
 	".interface-interface-skeleton__actions": 100000,
 
+	// The focus styles of the region navigation containers should be above their content.
+	".is-focusing-regions {region} :focus::after": 1000000,
+
 	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
 	".nux-dot-tip": 1000001,
 
@@ -177,8 +180,6 @@ $z-layers: (
 
 	// Appear under the topbar.
 	".customize-widgets__block-toolbar": 7,
-
-	".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker": -1,
 );
 
 @function z-index( $key ) {
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 807dd0e5dcae5f..6e66c854dd70ee 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -4,14 +4,17 @@
 }
 
 .is-focusing-regions {
-	[role="region"]:focus {
+	[role="region"]:focus::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		pointer-events: none;
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
-
-		.interface-navigable-region__stacker {
-			position: relative;
-			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
-		}
+		z-index: z-index(".is-focusing-regions {region} :focus::after");
 	}
 
 	// Fixes for edge cases.
@@ -25,40 +28,11 @@
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
-	&.is-distraction-free .interface-interface-skeleton__header {
-		.interface-navigable-region__stacker,
-		.edit-post-header {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__sidebar {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-sidebar-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__actions {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-publish-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar.
-	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
 }
-
-.interface-navigable-region__stacker {
-	height: 100%;
-	width: 100%;
-}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 2f2f6264f2e8d8..fe733f49a19590 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -22,7 +22,6 @@ import {
 	EntitiesSavedStates,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -64,8 +63,6 @@ export default function Editor() {
 		isInserterOpen,
 		isListViewOpen,
 		isSaveViewOpen,
-		previousShortcut,
-		nextShortcut,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
@@ -80,9 +77,6 @@ export default function Editor() {
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getAllShortcutKeyCombinations } = select(
-			keyboardShortcutsStore
-		);
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
@@ -112,12 +106,6 @@ export default function Editor() {
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			previousShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/previous-region'
-			),
-			nextShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/next-region'
-			),
 			showIconLabels: select( preferencesStore ).get(
 				'core/edit-site',
 				'showIconLabels'
@@ -178,6 +166,7 @@ export default function Editor() {
 						<BlockContextProvider value={ blockContext }>
 							<SidebarComplementaryAreaFills />
 							<InterfaceSkeleton
+								enableRegionNavigation={ false }
 								className={
 									showIconLabels && 'show-icon-labels'
 								}
@@ -258,10 +247,6 @@ export default function Editor() {
 										/>
 									)
 								}
-								shortcuts={ {
-									previous: previousShortcut,
-									next: nextShortcut,
-								} }
 								labels={ {
 									...interfaceLabels,
 									secondarySidebar: secondarySidebarLabel,
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 150f2d9cce882d..e3d2edc217eefd 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -12,6 +12,7 @@ import {
 	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
+	__unstableUseNavigateRegions as useNavigateRegions,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -22,6 +23,7 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -47,15 +49,28 @@ export default function Layout( { onError } ) {
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink } = useSelect(
-		( select ) => ( {
-			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
-			dashboardLink:
-				select( editSiteStore ).getSettings()
-					.__experimentalDashboardLink,
-		} ),
-		[]
-	);
+	const { canvasMode, dashboardLink, previousShortcut, nextShortcut } =
+		useSelect( ( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { __unstableGetCanvasMode, getSettings } =
+				select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/next-region'
+				),
+			};
+		}, [] );
+	const navigateRegionsProps = useNavigateRegions( {
+		previous: previousShortcut,
+		next: nextShortcut,
+	} );
 	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const disableMotion = useReducedMotion();
@@ -108,13 +123,19 @@ export default function Layout( { onError } ) {
 		<>
 			{ fullResizer }
 			<div
-				className={ classnames( 'edit-site-layout', {
-					'is-full-canvas':
-						( isEditorPage &&
-							canvasMode === 'edit' &&
-							! isMobileViewport ) ||
-						isMobileCanvasVisible,
-				} ) }
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
+				className={ classnames(
+					'edit-site-layout',
+					navigateRegionsProps.className,
+					{
+						'is-full-canvas':
+							( isEditorPage &&
+								canvasMode === 'edit' &&
+								! isMobileViewport ) ||
+							isMobileCanvasVisible,
+					}
+				) }
 			>
 				<div className="edit-site-layout__header">
 					<div className="edit-site-layout__logo">
@@ -196,7 +217,8 @@ export default function Layout( { onError } ) {
 
 				<AnimatePresence initial={ false }>
 					{ showSidebar && (
-						<motion.div
+						<NavigableRegion
+							as={ motion.div }
 							initial={ {
 								opacity: 0,
 							} }
@@ -214,9 +236,10 @@ export default function Layout( { onError } ) {
 								ease: 'easeOut',
 							} }
 							className="edit-site-layout__sidebar"
+							ariaLabel={ __( 'Navigation sidebar' ) }
 						>
 							<Sidebar />
-						</motion.div>
+						</NavigableRegion>
 					) }
 				</AnimatePresence>
 
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index b8c8f2be27db1a..c3359b752fc053 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -44,18 +44,11 @@
 		.interface-interface-skeleton__content {
 			background: $white;
 			padding: $grid-unit-20;
-
-			.interface-navigable-region__stacker {
-				align-items: center;
-			}
+			align-items: center;
 
 			@include break-medium() {
 				padding: $grid-unit * 9;
 			}
-
-			& > .interface-navigable-region__stacker {
-				height: auto;
-			}
 		}
 	}
 }
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index e8a7a45ede3fa4..fe329a75d43e07 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -46,6 +46,7 @@ function InterfaceSkeleton(
 		actions,
 		labels,
 		className,
+		enableRegionNavigation = true,
 		// Todo: does this need to be a prop.
 		// Can we use a dependency to keyboard-shortcuts directly?
 		shortcuts,
@@ -83,8 +84,11 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			{ ...navigateRegionsProps }
-			ref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }
+			{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
+			ref={ useMergeRefs( [
+				ref,
+				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
+			] ) }
 			className={ classnames(
 				className,
 				'interface-interface-skeleton',
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 51374fd2b56870..05752e9ff32164 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -72,16 +72,6 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__content {
-	.interface-navigable-region__stacker {
-		// It's a flex item within a flex container with flex-direction column.
-		// Make sure it takes all the available height.
-		flex-grow: 1;
-		// Allow its flex items (the visual editor area) to take all the available
-		// height by making it also a flex container.
-		display: flex;
-		flex-direction: column;
-	}
-
 	flex-grow: 1;
 
 	// Treat as flex container to allow children to grow to occupy full
@@ -135,10 +125,6 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__secondary-sidebar {
-	.interface-navigable-region__stacker {
-		height: 100%;
-	}
-
 	@include break-medium() {
 		border-right: $border-width solid $gray-200;
 	}
diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js
index 31037ffd333546..23ff532f22fd35 100644
--- a/packages/interface/src/components/navigable-region/index.js
+++ b/packages/interface/src/components/navigable-region/index.js
@@ -18,9 +18,7 @@ export default function NavigableRegion( {
 			tabIndex="-1"
 			{ ...props }
 		>
-			<div className="interface-navigable-region__stacker">
-				{ children }
-			</div>
+			{ children }
 		</Tag>
 	);
 }

From da03081e5e5fec8345620070b356c0c8f4c0d682 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 15 Dec 2022 16:28:43 +0200
Subject: [PATCH 103/209] DOM: fix findNext/Previous tabbable if target is not
 in findFocusable list (#46580)

---
 packages/dom/src/tabbable.js | 37 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js
index 66ae1ee7d4fd46..25bc81f2154582 100644
--- a/packages/dom/src/tabbable.js
+++ b/packages/dom/src/tabbable.js
@@ -159,18 +159,15 @@ export function find( context ) {
  * @return {Element|undefined} Preceding tabbable element.
  */
 export function findPrevious( element ) {
-	const focusables = findFocusable( element.ownerDocument.body );
-	const index = focusables.indexOf( element );
-
-	if ( index === -1 ) {
-		return undefined;
-	}
-
-	// Remove all focusables after and including `element`.
-	focusables.length = index;
-
-	const tabbable = filterTabbable( focusables );
-	return tabbable[ tabbable.length - 1 ];
+	return filterTabbable( findFocusable( element.ownerDocument.body ) )
+		.reverse()
+		.find( ( focusable ) => {
+			return (
+				// eslint-disable-next-line no-bitwise
+				element.compareDocumentPosition( focusable ) &
+				element.DOCUMENT_POSITION_PRECEDING
+			);
+		} );
 }
 
 /**
@@ -182,11 +179,13 @@ export function findPrevious( element ) {
  * @return {Element|undefined} Next tabbable element.
  */
 export function findNext( element ) {
-	const focusables = findFocusable( element.ownerDocument.body );
-	const index = focusables.indexOf( element );
-
-	// Remove all focusables before and including `element`.
-	const remaining = focusables.slice( index + 1 );
-
-	return filterTabbable( remaining )[ 0 ];
+	return filterTabbable( findFocusable( element.ownerDocument.body ) ).find(
+		( focusable ) => {
+			return (
+				// eslint-disable-next-line no-bitwise
+				element.compareDocumentPosition( focusable ) &
+				element.DOCUMENT_POSITION_FOLLOWING
+			);
+		}
+	);
 }

From 7973d9cc5890b64c78e86cb86e1d52d8df55fc69 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 16 Dec 2022 10:26:16 +1100
Subject: [PATCH 104/209] Fluid typography: add configurable settings for
 minimum font size to theme.json (#42489)

* Reinstating the commit in edeaca7068196f8960453965fe7fa64632d573ef so we can test fluid configuration

Update docs

* Adding a filter pre-calculations

* $fluid_settings was missing

* Removing filter
Pulling across config changes to JS

* Add config slot for minFontSize

* Adding config to test theme

* Updating args to include `minimumFontSizeLimit`
Fixed `typographySettings` check

* Updating tests and fixing settings logic
Updating schema

Changelogs

* Ensure that a theme's fluid font size settings are used when calculating custom font sizes and search block font sizes.

* Validating incoming viewport widths and min font size against accepted units.

* Ensure we check for fluid settings validity in getTypographyClassesAndStyles

* Rolling back configurable values to the global minimum font size only.
Updating tests.

* Remove config assignment from getTypographyClassesAndStyles and updated tests.

* Adding frontend test for unsupported units in min font size config

* simplifying condition so that it's readable in screen widths < 100000px
---
 .../theme-json-reference/theme-json-living.md |  2 +-
 lib/block-supports/typography.php             | 11 ++-
 packages/block-editor/CHANGELOG.md            |  1 +
 packages/block-editor/README.md               |  3 +-
 .../src/components/font-sizes/fluid-utils.js  |  8 +-
 packages/block-editor/src/hooks/font-size.js  | 17 +++-
 .../src/hooks/test/use-typography-props.js    | 26 +++++
 .../src/hooks/use-typography-props.js         | 22 +++--
 packages/block-library/src/search/edit.js     |  4 +-
 packages/edit-site/CHANGELOG.md               |  6 +-
 .../global-styles/test/typography-utils.js    | 95 ++++++++++++++-----
 .../global-styles/typography-utils.js         | 28 +++++-
 phpunit/block-supports/typography-test.php    | 49 ++++++----
 .../style.css                                 |  8 ++
 .../theme.json                                | 11 +++
 schemas/json/theme.json                       | 19 +++-
 16 files changed, 243 insertions(+), 67 deletions(-)
 create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
 create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json

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 a694cf63e909fa..9b074edace6ae5 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -119,7 +119,7 @@ Settings related to typography.
 | customFontSize | boolean | true |  |
 | fontStyle | boolean | true |  |
 | fontWeight | boolean | true |  |
-| fluid | boolean |  |  |
+| fluid | undefined | false |  |
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
 | textDecoration | boolean | true |  |
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 01d223b84281eb..809fba1a6e7aca 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -451,18 +451,25 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 
 	// Checks if fluid font sizes are activated.
 	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
-	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
+	$should_use_fluid_typography
+		= isset( $typography_settings['fluid'] ) &&
+		( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ?
+		true :
+		$should_use_fluid_typography;
 
 	if ( ! $should_use_fluid_typography ) {
 		return $preset['size'];
 	}
 
+	$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
+
 	// Defaults.
 	$default_maximum_viewport_width   = '1600px';
 	$default_minimum_viewport_width   = '768px';
 	$default_minimum_font_size_factor = 0.75;
 	$default_scale_factor             = 1;
-	$default_minimum_font_size_limit  = '14px';
+	$has_min_font_size                = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
+	$default_minimum_font_size_limit  = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
 
 	// Font sizes.
 	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 21666d999c1d15..34cd726c55fdf5 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### Enhancements
 
 -   `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
+-   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
 
 ### Bug Fix
 
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 5760f1584c5db8..5a861eaa1acad7 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -428,6 +428,7 @@ _Parameters_
 -   _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional.
 -   _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional.
 -   _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+-   _args.minimumFontSizeLimit_ `?string`: The smallest a calculated font size may be. Optional.
 
 _Returns_
 
@@ -520,7 +521,7 @@ attributes.
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
--   _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values.
+-   _fluidTypographySettings_ `Object|boolean`: If boolean, whether the function should try to convert font sizes to fluid values, otherwise an object containing theme fluid typography settings.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js
index de8a27e3014e88..f5816e9823d7a3 100644
--- a/packages/block-editor/src/components/font-sizes/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -40,6 +40,7 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
  * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
  * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @param {?string}       args.minimumFontSizeLimit  The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -51,8 +52,13 @@ export function getComputedFluidTypographyValue( {
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
-	minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
+	minimumFontSizeLimit,
 } ) {
+	// Validate incoming settings and set defaults.
+	minimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit )
+		? minimumFontSizeLimit
+		: DEFAULT_MINIMUM_FONT_SIZE_LIMIT;
+
 	/*
 	 * Calculates missing minimumFontSize and maximumFontSize from
 	 * defaultFontSize if provided.
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 6cb950afc45641..0c7a71fd23d683 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const isFluidTypographyEnabled =
-			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+		const fluidTypographyConfig =
+			select( blockEditorStore ).getSettings().__experimentalFeatures
 				?.typography?.fluid;
 
+		const fluidTypographySettings =
+			typeof fluidTypographyConfig === 'object'
+				? fluidTypographyConfig
+				: {};
+
 		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
+			fontSize && !! fluidTypographyConfig
+				? getComputedFluidTypographyValue( {
+						fontSize,
+						minimumFontSizeLimit:
+							fluidTypographySettings?.minFontSize,
+				  } )
 				: null;
 
 		if ( newFontSize === null ) {
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 00557881467ca8..12336eb2c44afd 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				minFontSize: '1rem',
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index d70ae08aafc593..da5869ad9aec07 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -19,23 +19,31 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}  attributes            Block attributes.
- * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
+ * @param {Object}         attributes              Block attributes.
+ * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
+ *                                                 otherwise an object containing theme fluid typography settings.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(
 	attributes,
-	isFluidFontSizeActive
+	fluidTypographySettings
 ) {
 	let typographyStyles = attributes?.style?.typography || {};
 
-	if ( isFluidFontSizeActive ) {
+	if (
+		!! fluidTypographySettings &&
+		( true === fluidTypographySettings ||
+			Object.keys( fluidTypographySettings ).length !== 0 )
+	) {
+		const newFontSize =
+			getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
+			fontSize: newFontSize,
 		};
 	}
 
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index a3db69287f8f73..78ff685ff01fe1 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -114,10 +114,10 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const fluidTypographyEnabled = useSetting( 'typography.fluid' );
+	const fluidTypographySettings = useSetting( 'typography.fluid' );
 	const typographyProps = useTypographyProps(
 		attributes,
-		fluidTypographyEnabled
+		fluidTypographySettings
 	);
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 83dcb848d66b3e..357668d600d11e 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -4,7 +4,11 @@
 
 ### Breaking Changes
 
--   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235)).
+
+### Enhancements
+
+-   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
 
 ## 4.19.0 (2022-11-16)
 
diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js
index 647b02cb4be1fb..9d0213cb53e554 100644
--- a/packages/edit-site/src/components/global-styles/test/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js
@@ -7,7 +7,8 @@ describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
 		[
 			{
-				message: 'returns value when fluid typography is deactivated',
+				message:
+					'should return value when fluid typography is not active',
 				preset: {
 					size: '28px',
 				},
@@ -16,7 +17,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where font size is 0',
+				message: 'should return value where font size is 0',
 				preset: {
 					size: 0,
 				},
@@ -25,7 +26,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: "returns value where font size is '0'",
+				message: "should return value where font size is '0'",
 				preset: {
 					size: '0',
 				},
@@ -34,7 +35,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where `size` is `null`.',
+				message: 'should return value where `size` is `null`.',
 				preset: {
 					size: null,
 				},
@@ -43,7 +44,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value when fluid is `false`',
+				message: 'should return value when fluid is `false`',
 				preset: {
 					size: '28px',
 					fluid: false,
@@ -55,7 +56,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns already clamped value',
+				message: 'should return already clamped value',
 				preset: {
 					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 					fluid: false,
@@ -68,7 +69,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with unsupported unit',
+				message: 'should return value with unsupported unit',
 				preset: {
 					size: '1000%',
 					fluid: false,
@@ -80,7 +81,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with rem min and max units',
+				message: 'should return clamp value with rem min and max units',
 				preset: {
 					size: '1.75rem',
 				},
@@ -92,7 +93,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with eem min and max units',
+				message: 'should return clamp value with eem min and max units',
 				preset: {
 					size: '1.75em',
 				},
@@ -104,7 +105,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value for floats',
+				message: 'should return clamp value for floats',
 				preset: {
 					size: '100.175px',
 				},
@@ -116,7 +117,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces integer to `px` and returns clamp value',
+				message:
+					'should coerce integer to `px` and returns clamp value',
 				preset: {
 					size: 33,
 					fluid: true,
@@ -129,7 +131,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces float to `px` and returns clamp value',
+				message: 'should coerce float to `px` and returns clamp value',
 				preset: {
 					size: 100.23,
 					fluid: true,
@@ -142,7 +144,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is empty array',
+				message:
+					'should return clamp value when `fluid` is empty array',
 				preset: {
 					size: '28px',
 					fluid: [],
@@ -155,7 +158,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is `null`',
+				message: 'should return clamp value when `fluid` is `null`',
 				preset: {
 					size: '28px',
 					fluid: null,
@@ -169,7 +172,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value if min font size is greater than max',
+					'should return clamp value if min font size is greater than max',
 				preset: {
 					size: '3rem',
 					fluid: {
@@ -185,7 +188,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with invalid min/max fluid units',
+				message: 'should return value with invalid min/max fluid units',
 				preset: {
 					size: '10em',
 					fluid: {
@@ -201,7 +204,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is < lower bounds and no fluid min/max set',
+					'should return value when size is < lower bounds and no fluid min/max set',
 				preset: {
 					size: '3px',
 				},
@@ -213,7 +216,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is equal to lower bounds and no fluid min/max set',
+					'should return value when size is equal to lower bounds and no fluid min/max set',
 				preset: {
 					size: '14px',
 				},
@@ -224,7 +227,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with different min max units',
+				message:
+					'should return clamp value with different min max units',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -240,7 +244,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid max size is set',
+				message:
+					'should return clamp value where no fluid max size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -255,7 +260,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid min size is set',
+				message:
+					'should return clamp value where no fluid min size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -320,7 +326,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value when min and max font sizes are equal',
+					'should return clamp value when min and max font sizes are equal',
 				preset: {
 					size: '4rem',
 					fluid: {
@@ -333,8 +339,51 @@ describe( 'typography utils', () => {
 				},
 				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
 			},
+
+			{
+				message:
+					'should use default min font size value where min font size unit in fluid config is not supported',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16%',
+					},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+			},
+
+			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
+			{
+				message: 'should return clamp value using custom fluid config',
+				preset: {
+					size: '17px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)',
+			},
+
+			{
+				message:
+					'should return value when font size <= custom min font size bound',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: '15px',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
-			it( `should ${ message }`, () => {
+			it( `${ message }`, () => {
 				expect(
 					getTypographyFontSizeValue( preset, typographySettings )
 				).toBe( expected );
diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js
index a792d1875005c2..5720fdeb6ce91e 100644
--- a/packages/edit-site/src/components/global-styles/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/typography-utils.js
@@ -23,13 +23,23 @@ import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
  * @property {boolean|FluidPreset|undefined} fluid A font size slug
  */
 
+/**
+ * @typedef {Object} TypographySettings
+ * @property {?string|?number} size              A default font size.
+ * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ */
+
 /**
  * Returns a font-size value based on a given font-size preset.
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
- * @param {Preset}  preset
- * @param {Object}  typographySettings
- * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}                     preset
+ * @param {Object}                     typographySettings
+ * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
@@ -44,7 +54,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
-	if ( true !== typographySettings?.fluid ) {
+	if (
+		! typographySettings?.fluid ||
+		( typeof typographySettings?.fluid === 'object' &&
+			Object.keys( typographySettings.fluid ).length === 0 )
+	) {
 		return defaultSize;
 	}
 
@@ -53,10 +67,16 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
+	const fluidTypographySettings =
+		typeof typographySettings?.fluid === 'object'
+			? typographySettings?.fluid
+			: {};
+
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
 		minimumFontSize: preset?.fluid?.min,
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 63fd98d1e524ff..1b9b6f97c63f6e 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -557,22 +557,18 @@ public function data_generate_font_size_preset_fixtures() {
 	/**
 	 * Tests that custom font sizes are converted to fluid values
 	 * in inline block supports styles,
-	 * when "settings.typography.fluid" is set to `true`.
+	 * when "settings.typography.fluid" is set to `true` or contains configured values.
 	 *
 	 * @covers ::gutenberg_register_typography_support
 	 *
 	 * @dataProvider data_generate_block_supports_font_size_fixtures
 	 *
-	 * @param string $font_size_value             The block supports custom font size value.
-	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
-	 * @param string $expected_output             Expected value of style property from gutenberg_apply_typography_support().
+	 * @param string $font_size_value The block supports custom font size value.
+	 * @param string $theme_slug      A theme slug corresponding to an available test theme.
+	 * @param string $expected_output Expected value of style property from gutenberg_apply_typography_support().
 	 */
-	public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
-		if ( $should_use_fluid_typography ) {
-			switch_theme( 'block-theme-child-with-fluid-typography' );
-		} else {
-			switch_theme( 'default' );
-		}
+	public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $theme_slug, $expected_output ) {
+		switch_theme( $theme_slug );
 
 		$this->test_block_name = 'test/font-size-fluid-value';
 		register_block_type(
@@ -614,15 +610,30 @@ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value,
 	 */
 	public function data_generate_block_supports_font_size_fixtures() {
 		return array(
-			'default_return_value'               => array(
-				'font_size_value'             => '50px',
-				'should_use_fluid_typography' => false,
-				'expected_output'             => 'font-size:50px;',
-			),
-			'return_value_with_fluid_typography' => array(
-				'font_size_value'             => '50px',
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 1.502), 50px);',
+			'returns value when fluid typography is not active' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'default',
+				'expected_output' => 'font-size:15px;',
+			),
+			'returns clamp value using default config' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography',
+				'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',
+			),
+			'returns value when font size <= default min font size bound' => array(
+				'font_size_value' => '13px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography',
+				'expected_output' => 'font-size:13px;',
+			),
+			'returns clamp value using custom fluid config' => array(
+				'font_size_value' => '17px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
+				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px);',
+			),
+			'returns value when font size <= custom min font size bound' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
+				'expected_output' => 'font-size:15px;',
 			),
 		);
 	}
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
new file mode 100644
index 00000000000000..19abbecf86f4cc
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child Theme With Fluid Typography
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-fluid-typography
+*/
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
new file mode 100644
index 00000000000000..d0ec32d9caac0a
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
@@ -0,0 +1,11 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": true,
+		"typography": {
+			"fluid": {
+				"minFontSize": "16px"
+			}
+		}
+	}
+}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 1a8aa67b0967b1..d7349262193086 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -353,8 +353,23 @@
 							"default": true
 						},
 						"fluid": {
-							"description": "Opts into fluid typography.",
-							"type": "boolean"
+							"description": "Enables fluid typography and allows users to set global fluid typography parameters.",
+							"oneOf": [
+								{
+									"type": "object",
+									"properties": {
+										"minFontSize": {
+											"description": "Allow users to set a global minimum font size boundary in px, rem or em. Custom font sizes below this value will not be clamped, and all calculated minimum font sizes will be, a at minimum, this value.",
+											"type": "string"
+										}
+									},
+									"additionalProperties": false
+								},
+								{
+									"type": "boolean"
+								}
+							],
+							"default": false
 						},
 						"letterSpacing": {
 							"description": "Allow users to set custom letter spacing.",

From 010361fb106cc6805df7a3e81a3da4625fef7277 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 16 Dec 2022 00:01:57 +0000
Subject: [PATCH 105/209] Fix: Bug on withSafeTimeouts. (#46595)

---
 packages/compose/src/higher-order/with-safe-timeout/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/compose/src/higher-order/with-safe-timeout/index.tsx b/packages/compose/src/higher-order/with-safe-timeout/index.tsx
index 4056e64ba65e53..d15b8a72d41eab 100644
--- a/packages/compose/src/higher-order/with-safe-timeout/index.tsx
+++ b/packages/compose/src/higher-order/with-safe-timeout/index.tsx
@@ -59,7 +59,9 @@ const withSafeTimeout = createHigherOrderComponent(
 
 			clearTimeout( id: number ) {
 				clearTimeout( id );
-				this.timeouts.filter( ( timeoutId ) => timeoutId !== id );
+				this.timeouts = this.timeouts.filter(
+					( timeoutId ) => timeoutId !== id
+				);
 			}
 
 			render() {

From 5e00414d2e5157d1c964717c5e38424ba7adf6bb Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 16 Dec 2022 00:09:35 +0000
Subject: [PATCH 106/209] Update: Guard against null block in off canvas
 editor. (#46594)

* Update: Guard against null block in off canvas editor.

* Change code order to comply with lint rules.
---
 .../src/components/off-canvas-editor/block.js | 116 +++++++++---------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index 4ad64587796bd7..a3861ef847274f 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -95,15 +95,68 @@ function ListViewBlock( {
 		[ clientId ]
 	);
 
+	// If ListView has experimental features related to the Persistent List View,
+	// only focus the selected list item on mount; otherwise the list would always
+	// try to steal the focus from the editor canvas.
+	useEffect( () => {
+		if ( ! isTreeGridMounted && isSelected ) {
+			cellRef.current.focus();
+		}
+	}, [] );
+
+	const onMouseEnter = useCallback( () => {
+		setIsHovered( true );
+		toggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+	const onMouseLeave = useCallback( () => {
+		setIsHovered( false );
+		toggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+
+	const selectEditorBlock = useCallback(
+		( event ) => {
+			selectBlock( event, clientId );
+			event.preventDefault();
+		},
+		[ clientId, selectBlock ]
+	);
+
+	const updateSelection = useCallback(
+		( newClientId ) => {
+			selectBlock( undefined, newClientId );
+		},
+		[ selectBlock ]
+	);
+
+	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+
+	const toggleExpanded = useCallback(
+		( event ) => {
+			// Prevent shift+click from opening link in a new window when toggling.
+			event.preventDefault();
+			event.stopPropagation();
+			if ( isExpanded === true ) {
+				collapse( clientId );
+			} else if ( isExpanded === false ) {
+				expand( clientId );
+			}
+		},
+		[ clientId, expand, collapse, isExpanded ]
+	);
+
+	const instanceId = useInstanceId( ListViewBlock );
+
+	if ( ! block ) {
+		return null;
+	}
+
 	// When a block hides its toolbar it also hides the block settings menu,
 	// since that menu is part of the toolbar in the editor canvas.
 	// List View respects this by also hiding the block settings menu.
-	const showBlockActions = hasBlockSupport(
-		block.name,
-		'__experimentalToolbar',
-		true
-	);
-	const instanceId = useInstanceId( ListViewBlock );
+	const showBlockActions =
+		!! block &&
+		hasBlockSupport( block.name, '__experimentalToolbar', true );
+
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
@@ -142,9 +195,7 @@ function ListViewBlock( {
 		  )
 		: __( 'Edit' );
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
-
-	const isEditable = block.name !== 'core/page-list-item';
+	const isEditable = !! block && block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -162,53 +213,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
-	const onMouseEnter = useCallback( () => {
-		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-	const onMouseLeave = useCallback( () => {
-		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-
-	const selectEditorBlock = useCallback(
-		( event ) => {
-			selectBlock( event, clientId );
-			event.preventDefault();
-		},
-		[ clientId, selectBlock ]
-	);
-
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
-		},
-		[ selectBlock ]
-	);
-
-	const toggleExpanded = useCallback(
-		( event ) => {
-			// Prevent shift+click from opening link in a new window when toggling.
-			event.preventDefault();
-			event.stopPropagation();
-			if ( isExpanded === true ) {
-				collapse( clientId );
-			} else if ( isExpanded === false ) {
-				expand( clientId );
-			}
-		},
-		[ clientId, expand, collapse, isExpanded ]
-	);
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;

From 6d9b0b6313aab59bb3f071c5daf1c48fd7ce7bf1 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Fri, 16 Dec 2022 13:43:51 +1100
Subject: [PATCH 107/209] Site Editor: Add new 'Push changes to Global Styles'
 button (#46446)

* Rough attempt at 'Push changes to Global Styles' button

* Trying to get presets to be copied over to global styles

Copy update

* Styles needs default value for when only a preset is updated

* Show success toast with undo button for now

* Disable button when there are no changes to push

* Don't create undo levels

* Guard against blockGap which isn't supported

* Don't show style names to user. They can't be localised

* Styling tweaks

* Add basic E2E test for the happy path

* we need to handle an undefined argument, for example, when only a preset is selected. Getting a few Uncaught SyntaxError: "undefined" is not valid JSON for this function.

* Revert package-lock.json

* Adjust copy

Co-authored-by: Robert Anderson <robert@noisysocks.com>
---
 .../global-styles/global-styles-provider.js   |  16 +-
 .../src/components/global-styles/utils.js     |  11 +-
 packages/edit-site/src/hooks/index.js         |   1 +
 .../push-changes-to-global-styles/index.js    | 162 ++++++++++++++++++
 .../push-changes-to-global-styles/style.scss  |   4 +
 packages/edit-site/src/style.scss             |   1 +
 .../site-editor/push-to-global-styles.spec.js | 109 ++++++++++++
 7 files changed, 298 insertions(+), 6 deletions(-)
 create mode 100644 packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
 create mode 100644 packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
 create mode 100644 test/e2e/specs/site-editor/push-to-global-styles.spec.js

diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
index 0ae154c11b91af..0813dc63b2cb86 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -94,7 +94,7 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles ] );
 
 	const setConfig = useCallback(
-		( callback ) => {
+		( callback, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -105,10 +105,16 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
-			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
-				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings: cleanEmptyObject( updatedConfig.settings ) || {},
-			} );
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+				},
+				options
+			);
 		},
 		[ globalStylesId ]
 	);
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 06940becaf7ec1..14f3b868294172 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -86,7 +86,7 @@ export const PRESET_METADATA = [
 	},
 ];
 
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
@@ -100,6 +100,15 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'typography.fontFamily': 'font-family',
 };
 
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
 function findInPresetsBy(
 	features,
 	blockName,
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 1f7196dd2256c8..513634c55b8f01 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -2,4 +2,5 @@
  * Internal dependencies
  */
 import './components';
+import './push-changes-to-global-styles';
 import './template-part-edit';
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
new file mode 100644
index 00000000000000..70b9fa1b02f8ea
--- /dev/null
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { GlobalStylesContext } from '../../components/global-styles/context';
+import {
+	STYLE_PATH_TO_CSS_VAR_INFIX,
+	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+} from '../../components/global-styles/utils';
+
+function getChangesToPush( name, attributes ) {
+	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
+		if ( ! STYLE_PROPERTY[ key ] ) {
+			return [];
+		}
+		const { value: path } = STYLE_PROPERTY[ key ];
+		const presetAttributeKey = path.join( '.' );
+		const presetAttributeValue =
+			attributes[
+				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+			];
+		const value = presetAttributeValue
+			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+			: get( attributes.style, path );
+		return value ? [ { path, value } ] : [];
+	} );
+}
+
+function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const changes = useMemo(
+		() => getChangesToPush( name, attributes ),
+		[ name, attributes ]
+	);
+
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		const { style: blockStyles } = attributes;
+
+		const newBlockStyles = cloneDeep( blockStyles );
+		const newUserConfig = cloneDeep( userConfig );
+
+		for ( const { path, value } of changes ) {
+			set( newBlockStyles, path, undefined );
+			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+		}
+
+		// @wordpress/core-data doesn't support editing multiple entity types in
+		// a single undo level. So for now, we disable @wordpress/core-data undo
+		// tracking and implement our own Undo button in the snackbar
+		// notification.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { style: newBlockStyles } );
+		setUserConfig( () => newUserConfig, { undoIgnore: true } );
+
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( 'Pushed styles to all %s blocks.' ),
+				getBlockType( name ).title
+			),
+			{
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Undo' ),
+						onClick() {
+							__unstableMarkNextChangeAsNotPersistent();
+							setAttributes( { style: blockStyles } );
+							setUserConfig( () => userConfig, {
+								undoIgnore: true,
+							} );
+						},
+					},
+				],
+			}
+		);
+	}, [ changes, attributes, userConfig, name ] );
+
+	return (
+		<BaseControl
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				variant="primary"
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Push changes to Global Styles' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) =>
+		(
+			<>
+				<BlockEdit { ...props } />
+				<InspectorAdvancedControls>
+					<PushChangesToGlobalStylesControl { ...props } />
+				</InspectorAdvancedControls>
+			</>
+		)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss b/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
new file mode 100644
index 00000000000000..33767f4879a401
--- /dev/null
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
@@ -0,0 +1,4 @@
+.edit-site-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index be5b51e16ea084..8b37e2314e237f 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -24,6 +24,7 @@
 @import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {
 	display: none;
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
new file mode 100644
index 00000000000000..ce854f476e4f9d
--- /dev/null
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
+} );
+
+test.describe( 'Push to Global Styles button', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin, siteEditor } ) => {
+		await admin.visitSiteEditor();
+		await siteEditor.enterEditMode();
+	} );
+
+	test( 'should apply Heading block styles to all Heading blocks', async ( {
+		page,
+		editor,
+	} ) => {
+		// Add a Heading block.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'A heading' );
+
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should not have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'false' );
+
+		// Go to block settings and open the Advanced panel
+		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Push button should be disabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Make the Heading block uppercase
+		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
+
+		// Push button should now be enabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeEnabled();
+
+		// Press the Push button
+		await page
+			.getByRole( 'button', { name: 'Push changes to Global Styles' } )
+			.click();
+
+		// Snackbar notification should appear
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Dismiss this notice',
+				text: 'Pushed styles to all Heading blocks.',
+			} )
+		).toBeVisible();
+
+		// Push button should be disabled again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Navigate again to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should now have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'true' );
+	} );
+} );

From 0832dba18f055b8752780fdcfae3a4a9349cd5bb Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Fri, 16 Dec 2022 06:24:27 +0100
Subject: [PATCH 108/209] Remove unnecessary editorStyle prop in metadata
 (#46514)

---
 packages/block-library/src/comments/index.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 69044c081c74e0..a5e51cfbf4e793 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -202,7 +202,6 @@ function register_legacy_post_comments_block() {
 			'wp-block-buttons',
 			'wp-block-button',
 		),
-		'editorStyle'       => 'wp-block-post-comments-editor',
 		'render_callback'   => 'render_block_core_comments',
 		'skip_inner_blocks' => true,
 	);

From 9c1b4575772a9a1a37cffe0ce71594a5ee6946bb Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 16 Dec 2022 08:21:42 +0100
Subject: [PATCH 109/209] Mobile - Appium configutarion - Disable device
 animations on Android (#46535)

---
 packages/react-native-editor/__device-tests__/helpers/caps.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-native-editor/__device-tests__/helpers/caps.js b/packages/react-native-editor/__device-tests__/helpers/caps.js
index fd2e8adbcb4bfa..bc776eb8aba20e 100644
--- a/packages/react-native-editor/__device-tests__/helpers/caps.js
+++ b/packages/react-native-editor/__device-tests__/helpers/caps.js
@@ -36,4 +36,5 @@ exports.android = {
 	deviceOrientation: 'portrait',
 	appiumVersion: '1.22.1',
 	app: undefined,
+	disableWindowAnimation: true,
 };

From 6888113543212f5ceb29edd2cbfb184fece507e8 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 16 Dec 2022 15:33:47 +0800
Subject: [PATCH 110/209] Post a summary of the flaky tests to the commit
 (#45798)

* Post a summary of the flaky tests to the commit

* Add test for rendering commit comment

* Update name from admin to puppeteer
---
 .github/workflows/end2end-test-playwright.yml |  66 ------
 .github/workflows/end2end-test.yml            |  97 +++++++-
 .github/workflows/flaky-tests.yml             |  38 ---
 package-lock.json                             | 142 +----------
 package.json                                  |   2 -
 packages/report-flaky-tests/action.yml        |   6 +-
 packages/report-flaky-tests/package.json      |   3 +-
 .../__tests__/__snapshots__/run.test.ts.snap  | 191 ++++++++++++++-
 .../src/__tests__/markdown.test.ts            |  52 ++++
 .../src/__tests__/run.test.ts                 | 222 ++++++++++++++++--
 packages/report-flaky-tests/src/github-api.ts |  72 +++---
 packages/report-flaky-tests/src/markdown.ts   |  28 ++-
 packages/report-flaky-tests/src/run.ts        |  70 ++++--
 packages/report-flaky-tests/src/types.ts      |   7 +
 14 files changed, 656 insertions(+), 340 deletions(-)
 delete mode 100644 .github/workflows/end2end-test-playwright.yml
 delete mode 100644 .github/workflows/flaky-tests.yml

diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
deleted file mode 100644
index e0aabb17afa019..00000000000000
--- a/.github/workflows/end2end-test-playwright.yml
+++ /dev/null
@@ -1,66 +0,0 @@
-name: End-to-End Tests Playwright
-
-on:
-    pull_request:
-    push:
-        branches:
-            - trunk
-            - 'release/**'
-            - 'wp/**'
-
-# Cancels all previous workflow runs for pull requests that have not completed.
-concurrency:
-    # The concurrency group contains the workflow name and the branch name for pull requests
-    # or the commit hash for any other events.
-    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
-    cancel-in-progress: true
-
-jobs:
-    e2e:
-        name: E2E Tests
-        runs-on: ubuntu-latest
-        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
-        strategy:
-            fail-fast: false
-
-        steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Npm install and build
-              run: |
-                  npm ci
-                  npm run build
-
-            - name: Install Playwright dependencies
-              run: |
-                  npx playwright install chromium firefox webkit --with-deps
-
-            - name: Install WordPress and start the server
-              run: |
-                  npm run wp-env start
-
-            - name: Run the tests
-              run: |
-                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
-
-            - name: Archive debug artifacts (screenshots, traces)
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
-              with:
-                  name: failures-artifacts
-                  path: artifacts/test-results
-                  if-no-files-found: ignore
-
-            - name: Archive flaky tests report
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
-              with:
-                  name: flaky-tests-report-playwright
-                  path: flaky-tests
-                  if-no-files-found: ignore
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 172d3b090eaf0b..46278d6384a5b4 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -16,8 +16,8 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    admin:
-        name: Admin - ${{ matrix.part }}
+    e2e-puppeteer:
+        name: Puppeteer - ${{ matrix.part }}
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
@@ -60,6 +60,97 @@ jobs:
               uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
-                  name: flaky-tests-report-${{ matrix.part }}
+                  name: flaky-tests-report
                   path: flaky-tests
                   if-no-files-found: ignore
+
+    e2e-playwright:
+        name: Playwright
+        runs-on: ubuntu-latest
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        strategy:
+            fail-fast: false
+
+        steps:
+            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+
+            - name: Use desired version of NodeJS
+              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Npm install and build
+              run: |
+                  npm ci
+                  npm run build
+
+            - name: Install Playwright dependencies
+              run: |
+                  npx playwright install chromium firefox webkit --with-deps
+
+            - name: Install WordPress and start the server
+              run: |
+                  npm run wp-env start
+
+            - name: Run the tests
+              run: |
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
+
+            - name: Archive debug artifacts (screenshots, traces)
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              if: always()
+              with:
+                  name: failures-artifacts
+                  path: artifacts/test-results
+                  if-no-files-found: ignore
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              if: always()
+              with:
+                  name: flaky-tests-report
+                  path: flaky-tests
+                  if-no-files-found: ignore
+
+    report-to-issues:
+        name: Report to GitHub
+        needs: [e2e-puppeteer, e2e-playwright]
+        if: ${{ always() }}
+        runs-on: ubuntu-latest
+        steps:
+            # Checkout defaults to using the branch which triggered the event, which
+            # isn't necessarily `trunk` (e.g. in the case of a merge).
+            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              with:
+                  ref: trunk
+
+            - uses: actions/download-artifact@v3
+              id: download_artifact
+              # Don't fail the job if there isn't any flaky tests report.
+              continue-on-error: true
+              with:
+                  name: flaky-tests-report
+                  path: flaky-tests
+
+            - name: Use desired version of NodeJS
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Npm install and build
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              # TODO: We don't have to build the entire project, just the action itself.
+              run: |
+                  npm ci
+                  npm run build:packages
+
+            - name: Report flaky tests
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              uses: ./packages/report-flaky-tests
+              with:
+                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
+                  label: '[Type] Flaky Test'
+                  artifact-path: flaky-tests
diff --git a/.github/workflows/flaky-tests.yml b/.github/workflows/flaky-tests.yml
deleted file mode 100644
index 6f457f6b2292c5..00000000000000
--- a/.github/workflows/flaky-tests.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-name: Report Flaky Tests
-
-on:
-    workflow_run:
-        workflows: ['End-to-End Tests', 'End-to-End Tests Playwright']
-        types:
-            - completed
-
-jobs:
-    report-to-issues:
-        name: Report to GitHub issues
-        runs-on: ubuntu-latest
-        if: ${{ github.event.workflow_run.conclusion == 'success' }}
-        steps:
-            # Checkout defaults to using the branch which triggered the event, which
-            # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-              with:
-                  ref: trunk
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Npm install and build
-              # TODO: We don't have to build the entire project, just the action itself.
-              run: |
-                  npm ci
-                  npm run build:packages
-
-            - name: Report flaky tests
-              uses: ./packages/report-flaky-tests
-              with:
-                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
-                  label: '[Type] Flaky Test'
-                  artifact-name-prefix: flaky-tests-report
diff --git a/package-lock.json b/package-lock.json
index 9edebed07e4c36..7caa04085f536c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17148,15 +17148,6 @@
 			"integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
 			"dev": true
 		},
-		"@types/unzipper": {
-			"version": "0.10.5",
-			"resolved": "https://registry.npmjs.org/@types/unzipper/-/unzipper-0.10.5.tgz",
-			"integrity": "sha512-NrLJb29AdnBARpg9S/4ktfPEisbJ0AvaaAr3j7Q1tg8AgcEUsq2HqbNzvgLRoWyRtjzeLEv7vuL39u1mrNIyNA==",
-			"dev": true,
-			"requires": {
-				"@types/node": "*"
-			}
-		},
 		"@types/uuid": {
 			"version": "8.3.1",
 			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
@@ -19167,8 +19158,7 @@
 			"requires": {
 				"@actions/core": "^1.8.0",
 				"@actions/github": "^5.0.1",
-				"jest-message-util": "^28.0.2",
-				"unzipper": "^0.10.11"
+				"jest-message-util": "^28.0.2"
 			},
 			"dependencies": {
 				"@actions/core": {
@@ -28891,7 +28881,8 @@
 			"version": "1.6.48",
 			"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
 			"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==",
-			"dev": true
+			"dev": true,
+			"optional": true
 		},
 		"big.js": {
 			"version": "5.2.2",
@@ -28937,16 +28928,6 @@
 				}
 			}
 		},
-		"binary": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-			"integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",
-			"dev": true,
-			"requires": {
-				"buffers": "~0.1.1",
-				"chainsaw": "~0.1.0"
-			}
-		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -29437,24 +29418,12 @@
 			"integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
 			"dev": true
 		},
-		"buffer-indexof-polyfill": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
-			"integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
-			"dev": true
-		},
 		"buffer-xor": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
 			"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
 			"dev": true
 		},
-		"buffers": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-			"integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
-			"dev": true
-		},
 		"builtin-modules": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
@@ -29853,23 +29822,6 @@
 			"integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==",
 			"dev": true
 		},
-		"chainsaw": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-			"integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",
-			"dev": true,
-			"requires": {
-				"traverse": ">=0.3.0 <0.4"
-			},
-			"dependencies": {
-				"traverse": {
-					"version": "0.3.9",
-					"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-					"integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=",
-					"dev": true
-				}
-			}
-		},
 		"chalk": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
@@ -33195,15 +33147,6 @@
 			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
 			"dev": true
 		},
-		"duplexer2": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-			"integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
-			"dev": true,
-			"requires": {
-				"readable-stream": "^2.0.2"
-			}
-		},
 		"duplexify": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
@@ -35021,7 +34964,7 @@
 		"eventemitter2": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz",
-			"integrity": "sha512-EUFhWUYzqqBZlzBMI+dPU8rnKXfQZEUnitnccQuEIAnvWFHCpt3+4fts2+4dpxLtlsiseVXCMFg37KjYChSxpg=="
+			"integrity": "sha1-+YNhBRexc3wLncZDvsqTiTwE3xg="
 		},
 		"eventemitter3": {
 			"version": "4.0.7",
@@ -36767,43 +36710,6 @@
 			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 			"optional": true
 		},
-		"fstream": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-			"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"inherits": "~2.0.0",
-				"mkdirp": ">=0.5 0",
-				"rimraf": "2"
-			},
-			"dependencies": {
-				"glob": {
-					"version": "7.1.7",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-					"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.0.4",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
-				},
-				"rimraf": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-					"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-					"dev": true,
-					"requires": {
-						"glob": "^7.1.3"
-					}
-				}
-			}
-		},
 		"function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -38259,7 +38165,7 @@
 		"htmlparser2-without-node-native": {
 			"version": "3.9.2",
 			"resolved": "https://registry.npmjs.org/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz",
-			"integrity": "sha512-+FplQXqmY5fRx6vCIp2P5urWaoBCpTNJMXnKP/6mNCcyb+AZWWJzA8D03peXfozlxDL+vpgLK5dJblqEgu8j6A==",
+			"integrity": "sha1-s+0FDYd9D/NGWWnjOYd7f59mMfY=",
 			"requires": {
 				"domelementtype": "^1.3.0",
 				"domhandler": "^2.3.0",
@@ -44503,12 +44409,6 @@
 				}
 			}
 		},
-		"listenercount": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
-			"integrity": "sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=",
-			"dev": true
-		},
 		"listr": {
 			"version": "0.14.3",
 			"resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
@@ -60459,38 +60359,6 @@
 				"os-homedir": "^1.0.0"
 			}
 		},
-		"unzipper": {
-			"version": "0.10.11",
-			"resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.11.tgz",
-			"integrity": "sha512-+BrAq2oFqWod5IESRjL3S8baohbevGcVA+teAIOYWM3pDVdseogqbzhhvvmiyQrUNKFUnDMtELW3X8ykbyDCJw==",
-			"dev": true,
-			"requires": {
-				"big-integer": "^1.6.17",
-				"binary": "~0.3.0",
-				"bluebird": "~3.4.1",
-				"buffer-indexof-polyfill": "~1.0.0",
-				"duplexer2": "~0.1.4",
-				"fstream": "^1.0.12",
-				"graceful-fs": "^4.2.2",
-				"listenercount": "~1.0.1",
-				"readable-stream": "~2.3.6",
-				"setimmediate": "~1.0.4"
-			},
-			"dependencies": {
-				"bluebird": {
-					"version": "3.4.7",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-					"integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=",
-					"dev": true
-				},
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-					"dev": true
-				}
-			}
-		},
 		"upath": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
diff --git a/package.json b/package.json
index b1ebbf430f35fe..93c17bc1d92cdd 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,6 @@
 		"@types/requestidlecallback": "0.3.4",
 		"@types/semver": "7.3.8",
 		"@types/sprintf-js": "1.1.2",
-		"@types/unzipper": "0.10.5",
 		"@types/uuid": "8.3.1",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
@@ -240,7 +239,6 @@
 		"terser-webpack-plugin": "5.1.4",
 		"typescript": "4.4.2",
 		"uglify-js": "3.13.7",
-		"unzipper": "0.10.11",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
 		"webpack": "5.65.0",
diff --git a/packages/report-flaky-tests/action.yml b/packages/report-flaky-tests/action.yml
index 7cea6a50c23a3f..5dfcbeb0d9fc60 100644
--- a/packages/report-flaky-tests/action.yml
+++ b/packages/report-flaky-tests/action.yml
@@ -8,10 +8,10 @@ inputs:
         description: 'The flaky-test label name'
         required: true
         default: 'flaky-test'
-    artifact-name-prefix:
-        description: 'The prefix name of the uploaded artifact'
+    artifact-path:
+        description: 'The path of the downloaded artifact'
         required: true
-        default: 'flaky-tests-report'
+        default: 'flaky-tests'
 runs:
     using: 'node16'
     main: 'build/index.js'
diff --git a/packages/report-flaky-tests/package.json b/packages/report-flaky-tests/package.json
index 0bb58464d33238..76528ceb8a3dbb 100644
--- a/packages/report-flaky-tests/package.json
+++ b/packages/report-flaky-tests/package.json
@@ -28,8 +28,7 @@
 	"dependencies": {
 		"@actions/core": "^1.8.0",
 		"@actions/github": "^5.0.1",
-		"jest-message-util": "^28.0.2",
-		"unzipper": "^0.10.11"
+		"jest-message-util": "^28.0.2"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap b/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
index a0a6c8a67011b9..b0ea1a4c054aa4 100644
--- a/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
+++ b/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Report flaky tests should report flaky tests to issue: Created new flaky issue 1`] = `
+exports[`Report flaky tests should report flaky tests to issue on pull request: Created new flaky issue 1`] = `
 "<!-- __META_DATA__:{} -->
 **Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
@@ -14,7 +14,7 @@ Should insert new template part on creation
 <!-- __TEST_RESULTS_LIST__ -->
 <!-- __TEST_RESULT__ --><details>
 <summary>
-	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"runURL\\"><code>headBranch</code></a>.
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>headBranch</code></a>.
 </summary>
 
 \`\`\`
@@ -62,7 +62,7 @@ Should insert new template part on creation
 "
 `;
 
-exports[`Report flaky tests should report flaky tests to issue: Updated existing flaky issue 1`] = `
+exports[`Report flaky tests should report flaky tests to issue on pull request: Updated existing flaky issue 1`] = `
 "<!-- __META_DATA__:{\\"failedTimes\\":58,\\"totalCommits\\":134,\\"baseCommit\\":\\"32bb60d08b75486341d8a63b9e786152889aa02d\\"} -->
 **Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
@@ -148,7 +148,190 @@ should copy only partial selection of text blocks
 <br/>
 <!-- __TEST_RESULT__ --><details>
 <summary>
-	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"runURL\\"><code>headBranch</code></a>.
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>headBranch</code></a>.
+</summary>
+
+\`\`\`
+Error: Snapshot comparison failed:
+
+  <!-- wp:paragraph -->
+  <p>block</p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>B </p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>A block</p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p></p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>B block</p>
+  <!-- /wp:paragraph -->
+
+Expected: /home/runner/work/gutenberg/gutenberg/artifacts/test-results/editor-various-copy-cut-paste-Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-chromium/Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-2-expected.txt
+Received: /home/runner/work/gutenberg/gutenberg/artifacts/test-results/editor-various-copy-cut-paste-Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-chromium/Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-2-actual.txt
+    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:253:52
+\`\`\`
+</details><!-- /__TEST_RESULT__ -->
+<!-- /__TEST_RESULTS_LIST__ -->
+"
+`;
+
+exports[`Report flaky tests should report flaky tests to issue on push: Created new flaky issue 1`] = `
+"<!-- __META_DATA__:{} -->
+**Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
+
+## Test title
+Should insert new template part on creation
+
+## Test path
+\`specs/site-editor/template-part.test.js\`
+
+## Errors
+<!-- __TEST_RESULTS_LIST__ -->
+<!-- __TEST_RESULT__ --><details>
+<summary>
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>trunk</code></a>.
+</summary>
+
+\`\`\`
+  ● Template Part › Template part block › Template part placeholder › Should insert new template part on creation
+
+    expect(jest.fn()).not.toHaveErrored(expected)
+
+    Expected mock function not to be called but it was called with:
+    [\\"TypeError: Cannot read properties of null (reading 'frameElement')
+
+      at Vo (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=dfd3a79ce1dc54c31b6ed591bcb0d55a:3:21925)
+      at ft (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:43451)
+      at Wt (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:50270)
+      at ts (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:112276)
+      at Fr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77758)
+      at Dr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77686)
+      at Rr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77549)
+      at Nr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:74544)
+      at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:30170
+      at unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)\\"]
+          at runMicrotasks (<anonymous>)
+
+  ● Template Part › Template part block › Template part placeholder › Should insert new template part on creation
+
+    expect(jest.fn()).not.toHaveErrored(expected)
+
+    Expected mock function not to be called but it was called with:
+    [\\"TypeError: Cannot read properties of null (reading 'frameElement')
+
+      at Vo (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=dfd3a79ce1dc54c31b6ed591bcb0d55a:3:21925)
+      at ft (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:43451)
+      at Wt (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:50270)
+      at ts (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:112276)
+      at Fr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77758)
+      at Dr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77686)
+      at Rr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77549)
+      at Nr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:74544)
+      at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:30170
+      at unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)\\"]
+          at runMicrotasks (<anonymous>)
+
+\`\`\`
+</details><!-- /__TEST_RESULT__ -->
+<!-- /__TEST_RESULTS_LIST__ -->
+"
+`;
+
+exports[`Report flaky tests should report flaky tests to issue on push: Updated existing flaky issue 1`] = `
+"<!-- __META_DATA__:{\\"failedTimes\\":58,\\"totalCommits\\":134,\\"baseCommit\\":\\"32bb60d08b75486341d8a63b9e786152889aa02d\\"} -->
+**Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
+
+## Test title
+should copy only partial selection of text blocks
+
+## Test path
+\`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+
+## Errors
+<!-- __TEST_RESULTS_LIST__ -->
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-13T10:32:59.201Z\\"><code>[2022-04-13T10:32:59.201Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2160552635\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T09:51:38.785Z\\"><code>[2022-04-18T09:51:38.785Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183265588\\"><code>update/post-featured-image-component</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T10:53:30.411Z\\"><code>[2022-04-18T10:53:30.411Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183485173\\"><code>add/wp-env/wp-env-core-env</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T12:20:51.800Z\\"><code>[2022-04-18T12:20:51.800Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183790777\\"><code>fix/e2e-test</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T13:47:15.612Z\\"><code>[2022-04-18T13:47:15.612Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184126130\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T13:48:06.669Z\\"><code>[2022-04-18T13:48:06.669Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184130029\\"><code>fix/duotone-site-editor</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:01:10.151Z\\"><code>[2022-04-18T14:01:10.151Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184182012\\"><code>fix/playwright-snapshots</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:12:20.129Z\\"><code>[2022-04-18T14:12:20.129Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184226509\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:48:36.649Z\\"><code>[2022-04-18T14:48:36.649Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184377565\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:56:37.960Z\\"><code>[2022-04-18T14:56:37.960Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184418035\\"><code>rnmobile/feature/drag-and-drop</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:02:27.183Z\\"><code>[2022-04-18T15:02:27.183Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184449849\\"><code>rnmobile/feature/drag-and-drop-prevent-text-focus-on-long-press</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:34:59.990Z\\"><code>[2022-04-18T15:34:59.990Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184593633\\"><code>add/section-concept</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:38:30.538Z\\"><code>[2022-04-18T15:38:30.538Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184609574\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:48:40.494Z\\"><code>[2022-04-18T15:48:40.494Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184652286\\"><code>rnmobile/feature/drag-and-drop-refactor-draggable</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:50:50.420Z\\"><code>[2022-04-18T15:50:50.420Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184658598\\"><code>rnmobile/feature/drag-and-drop-update-chip-animation</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:52:48.948Z\\"><code>[2022-04-18T15:52:48.948Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184662247\\"><code>fix/comment-reply-link-alignment</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:55:31.386Z\\"><code>[2022-04-18T15:55:31.386Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184668485\\"><code>rnmobile/feature/drag-and-drop-haptic-feedback</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T16:09:33.323Z\\"><code>[2022-04-18T16:09:33.323Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184728812\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T16:17:20.282Z\\"><code>[2022-04-18T16:17:20.282Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184756693\\"><code>fix/embed-block-preview-cut-off</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T17:30:31.287Z\\"><code>[2022-04-18T17:30:31.287Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185065551\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T17:51:21.537Z\\"><code>[2022-04-18T17:51:21.537Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185158655\\"><code>fix/copy-from-non-text-inputs</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T19:54:17.115Z\\"><code>[2022-04-18T19:54:17.115Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185732975\\"><code>remove/block-styles-remove-role</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T21:02:44.582Z\\"><code>[2022-04-18T21:02:44.582Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2186019382\\"><code>docgen/replace-fixtures-with-code</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T22:38:25.644Z\\"><code>[2022-04-18T22:38:25.644Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2186398254\\"><code>try/use-css-var-for-user-presets</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-23T16:41:35.814Z\\"><code>[2022-04-23T16:41:35.814Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2212870284\\"><code>fix/flaky-test-reporter</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:20:09.628Z\\"><code>[2022-05-10T13:20:09.628Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300794825\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:33:14.282Z\\"><code>[2022-05-10T13:33:14.282Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300911722\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:40:06.465Z\\"><code>[2022-05-10T13:40:06.465Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300960655\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T15:45:55.917Z\\"><code>[2022-05-10T15:45:55.917Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2301711710\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T15:54:10.994Z\\"><code>[2022-05-10T15:54:10.994Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2301740850\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T18:58:47.148Z\\"><code>[2022-05-10T18:58:47.148Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2302689513\\"><code>fix/input-field-reset-behavior-moar</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T07:23:49.752Z\\"><code>[2022-05-16T07:23:49.752Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2330295878\\"><code>refactor/range-control-to-typescript</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T07:50:53.486Z\\"><code>[2022-05-16T07:50:53.486Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2330425165\\"><code>refactor/range-control-to-typescript</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T09:51:42.310Z\\"><code>[2022-05-16T09:51:42.310Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2331036710\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T10:08:17.403Z\\"><code>[2022-05-16T10:08:17.403Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2331126515\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-17T12:57:57.490Z\\"><code>[2022-05-17T12:57:57.490Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2338696807\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><details>
+<summary>
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>trunk</code></a>.
 </summary>
 
 \`\`\`
diff --git a/packages/report-flaky-tests/src/__tests__/markdown.test.ts b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
index 5d7b7dd62bc873..e8a5b4f25da5d3 100644
--- a/packages/report-flaky-tests/src/__tests__/markdown.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
@@ -12,7 +12,10 @@ import {
 	renderIssueBody,
 	parseFormattedTestResults,
 	parseIssueBody,
+	renderCommitComment,
+	isReportComment,
 } from '../markdown';
+import { ReportedIssue } from '../types';
 
 jest.useFakeTimers( 'modern' ).setSystemTime( new Date( '2020-05-10' ) );
 
@@ -226,6 +229,55 @@ describe( 'parseIssueBody', () => {
 	} );
 } );
 
+describe( 'renderCommitComment', () => {
+	it( 'render the commit comment', () => {
+		const runURL = 'runURL';
+		const reportedIssues: ReportedIssue[] = [
+			{
+				testTitle: 'title1',
+				testPath: 'path1',
+				issueNumber: 1,
+				issueUrl: 'url1',
+			},
+			{
+				testTitle: 'title2',
+				testPath: 'path2',
+				issueNumber: 2,
+				issueUrl: 'url2',
+			},
+		];
+
+		const commentBody = renderCommitComment( {
+			reportedIssues,
+			runURL,
+		} );
+
+		expect( commentBody ).toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: runURL
+		📝  Reported issues:
+		- #1 in \`path1\`
+		- #2 in \`path2\`"
+	` );
+	} );
+} );
+
+describe( 'isReportComment', () => {
+	it( 'matches the report comment', () => {
+		const commentBody = renderCommitComment( {
+			reportedIssues: [],
+			runURL: '',
+		} );
+
+		expect( isReportComment( commentBody ) ).toBe( true );
+
+		expect( isReportComment( 'random string' ) ).toBe( false );
+	} );
+} );
+
 function renderToDisplayText( html: string ) {
 	const container = document.createElement( 'div' );
 	container.innerHTML = html;
diff --git a/packages/report-flaky-tests/src/__tests__/run.test.ts b/packages/report-flaky-tests/src/__tests__/run.test.ts
index 93b8c4eddf46b0..b064fae579f3e3 100644
--- a/packages/report-flaky-tests/src/__tests__/run.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/run.test.ts
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as core from '@actions/core';
+import * as github from '@actions/github';
 
 /**
  * Internal dependencies
@@ -10,22 +11,42 @@ import { run } from '../run';
 
 jest.useFakeTimers( 'modern' ).setSystemTime( new Date( '2020-05-10' ) );
 
-jest.mock( '@actions/github', () => ( {
-	context: {
-		repo: {
-			owner: 'WordPress',
-			repo: 'gutenberg',
-		},
-		eventName: 'workflow_run',
-		payload: {
-			action: 'completed',
-			workflow_run: {
-				html_url: 'runURL',
-				head_branch: 'headBranch',
-				id: 100,
+const mockPushEventContext = {
+	runId: 100,
+	repo: {
+		owner: 'WordPress',
+		repo: 'gutenberg',
+	},
+	ref: 'refs/heads/trunk',
+	sha: 'commitSHA',
+	eventName: 'push',
+};
+const mockPullRequestEventContext = {
+	runId: 100,
+	repo: {
+		owner: 'WordPress',
+		repo: 'gutenberg',
+	},
+	ref: 'refs/pull/10/merge',
+	sha: 'mergeSHA',
+	eventName: 'pull_request',
+	payload: {
+		pull_request: {
+			head: {
+				ref: 'headBranch',
+				sha: 'headSHA',
 			},
 		},
 	},
+};
+const mockGetContext = jest.fn(
+	(): typeof mockPushEventContext | typeof mockPullRequestEventContext =>
+		mockPullRequestEventContext
+);
+jest.mock( '@actions/github', () => ( {
+	get context() {
+		return mockGetContext();
+	},
 } ) );
 
 jest.mock( '@actions/core', () => ( {
@@ -35,14 +56,19 @@ jest.mock( '@actions/core', () => ( {
 } ) );
 
 const mockAPI = {
-	downloadReportFromArtifact: jest.fn(),
 	fetchAllIssuesLabeledFlaky: jest.fn(),
 	findMergeBaseCommit: jest.fn(),
 	updateIssue: jest.fn(),
 	createIssue: jest.fn(),
+	createComment: jest.fn(),
 };
 jest.mock( '../github-api', () => ( {
-	GitHubAPI: jest.fn().mockImplementation( () => mockAPI ),
+	GitHubAPI: jest.fn( () => mockAPI ),
+} ) );
+
+jest.mock( 'fs/promises', () => ( {
+	readdir: jest.fn(),
+	readFile: jest.fn(),
 } ) );
 
 describe( 'Report flaky tests', () => {
@@ -50,7 +76,7 @@ describe( 'Report flaky tests', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'should report flaky tests to issue', async () => {
+	it( 'should report flaky tests to issue on pull request', async () => {
 		const existingFlakyTest = await import(
 			'../__fixtures__/should copy only partial selection of text blocks.json'
 		).then( ( json ) => json.default );
@@ -62,8 +88,11 @@ describe( 'Report flaky tests', () => {
 		).then( ( json ) => json.default );
 
 		( core.getInput as jest.Mock )
+			// token
 			.mockReturnValueOnce( 'repo-token' )
-			.mockReturnValueOnce( 'flaky-tests-report' )
+			// artifact-path
+			.mockReturnValueOnce( 'flaky-tests' )
+			// label
 			.mockReturnValueOnce( '[Type] Flaky Test' );
 
 		// Replacing the cwd for the test for consistent snapshot results.
@@ -71,29 +100,146 @@ describe( 'Report flaky tests', () => {
 			'/home/runner/work/gutenberg/gutenberg',
 			process.cwd()
 		);
-		mockAPI.downloadReportFromArtifact.mockImplementationOnce( () => [
-			existingFlakyTest,
-			newFlakyTest,
-		] );
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [
+				`${ existingFlakyTest.title }.json`,
+				`${ newFlakyTest.title }.json`,
+			] )
+		);
+		mockedFs.readFile
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( existingFlakyTest ) )
+			)
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( newFlakyTest ) )
+			);
 
 		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
 			() => flakyIssues
 		);
 
 		mockAPI.updateIssue.mockImplementationOnce( () => ( {
+			number: 1,
 			html_url: 'html_url',
 		} ) );
 
 		mockAPI.createIssue.mockImplementationOnce( () => ( {
+			number: 2,
 			html_url: 'html_url',
 		} ) );
 
+		mockAPI.createComment.mockImplementationOnce( () => ( {
+			html_url: 'comment_html_url',
+		} ) );
+
 		await run();
 
 		const existingFlakyIssue = flakyIssues.find(
 			( issue ) =>
 				issue.title === `[Flaky Test] ${ existingFlakyTest.title }`
+		)!;
+		expect( mockAPI.updateIssue ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				issue_number: existingFlakyIssue.number,
+				state: 'open',
+			} )
+		);
+		expect( mockAPI.updateIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
+			'Updated existing flaky issue'
 		);
+
+		expect( mockAPI.createIssue ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: `[Flaky Test] ${ newFlakyTest.title }`,
+			} )
+		);
+		expect( mockAPI.createIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
+			'Created new flaky issue'
+		);
+
+		expect( mockAPI.createComment ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 0 ] ).toBe( 'headSHA' );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/100
+		📝  Reported issues:
+		- #1 in \`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+		- #2 in \`specs/site-editor/template-part.test.js\`"
+	` );
+	} );
+
+	it( 'should report flaky tests to issue on push', async () => {
+		mockGetContext.mockImplementation( () => mockPushEventContext );
+
+		const existingFlakyTest = await import(
+			'../__fixtures__/should copy only partial selection of text blocks.json'
+		).then( ( json ) => json.default );
+		const newFlakyTest = await import(
+			'../__fixtures__/Should insert new template part on creation.json'
+		).then( ( json ) => json.default );
+		const flakyIssues = await import(
+			'../__fixtures__/flaky-issues.json'
+		).then( ( json ) => json.default );
+
+		( core.getInput as jest.Mock )
+			// token
+			.mockReturnValueOnce( 'repo-token' )
+			// artifact-path
+			.mockReturnValueOnce( 'flaky-tests' )
+			// label
+			.mockReturnValueOnce( '[Type] Flaky Test' );
+
+		// Replacing the cwd for the test for consistent snapshot results.
+		existingFlakyTest.path = existingFlakyTest.path.replace(
+			'/home/runner/work/gutenberg/gutenberg',
+			process.cwd()
+		);
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [
+				`${ existingFlakyTest.title }.json`,
+				`${ newFlakyTest.title }.json`,
+			] )
+		);
+		mockedFs.readFile
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( existingFlakyTest ) )
+			)
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( newFlakyTest ) )
+			);
+
+		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
+			() => flakyIssues
+		);
+
+		mockAPI.updateIssue.mockImplementationOnce( () => ( {
+			number: 1,
+			html_url: 'html_url',
+		} ) );
+
+		mockAPI.createIssue.mockImplementationOnce( () => ( {
+			number: 2,
+			html_url: 'html_url',
+		} ) );
+
+		mockAPI.createComment.mockImplementationOnce( () => ( {
+			html_url: 'comment_html_url',
+		} ) );
+
+		await run();
+
+		const existingFlakyIssue = flakyIssues.find(
+			( issue ) =>
+				issue.title === `[Flaky Test] ${ existingFlakyTest.title }`
+		)!;
 		expect( mockAPI.updateIssue ).toHaveBeenCalledWith(
 			expect.objectContaining( {
 				issue_number: existingFlakyIssue.number,
@@ -112,6 +258,24 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.createIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
 			'Created new flaky issue'
 		);
+
+		expect( mockAPI.createComment ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 0 ] ).toBe(
+			'commitSHA'
+		);
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/100
+		📝  Reported issues:
+		- #1 in \`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+		- #2 in \`specs/site-editor/template-part.test.js\`"
+	` );
+
+		mockGetContext.mockImplementation( () => mockPullRequestEventContext );
 	} );
 
 	it( 'should skip for outdated branches', async () => {
@@ -132,9 +296,14 @@ describe( 'Report flaky tests', () => {
 			'/home/runner/work/gutenberg/gutenberg',
 			process.cwd()
 		);
-		mockAPI.downloadReportFromArtifact.mockImplementationOnce( () => [
-			flakyTest,
-		] );
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [ `${ flakyTest.title }.json` ] )
+		);
+		mockedFs.readFile.mockImplementationOnce( () =>
+			Promise.resolve( JSON.stringify( flakyTest ) )
+		);
 
 		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
 			() => flakyIssues
@@ -151,8 +320,9 @@ describe( 'Report flaky tests', () => {
 		// indicating that the code base at this point is outdated.
 		const flakyIssue = flakyIssues.find(
 			( issue ) => issue.title === `[Flaky Test] ${ flakyTest.title }`
-		);
+		)!;
 		flakyIssue.state = 'closed';
+		// @ts-expect-error: "closed_at" hasn't been typed yet.
 		flakyIssue.closed_at = new Date( '2022-05-15' ).toISOString();
 
 		await run();
@@ -160,5 +330,7 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.findMergeBaseCommit ).toHaveBeenCalledTimes( 1 );
 
 		expect( mockAPI.updateIssue ).not.toHaveBeenCalled();
+
+		expect( mockAPI.createComment ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/report-flaky-tests/src/github-api.ts b/packages/report-flaky-tests/src/github-api.ts
index b7aa0990085683..8d5d49025f576c 100644
--- a/packages/report-flaky-tests/src/github-api.ts
+++ b/packages/report-flaky-tests/src/github-api.ts
@@ -2,14 +2,13 @@
  * External dependencies
  */
 import { getOctokit } from '@actions/github';
-import * as unzipper from 'unzipper';
 import type { GitHub } from '@actions/github/lib/utils';
 import type { Endpoints } from '@octokit/types';
 
 /**
  * Internal dependencies
  */
-import type { FlakyTestResult } from './types';
+import { isReportComment } from './markdown';
 
 type Octokit = InstanceType< typeof GitHub >;
 
@@ -27,44 +26,6 @@ class GitHubAPI {
 		this.#repo = repo;
 	}
 
-	async downloadReportFromArtifact(
-		runID: number,
-		artifactNamePrefix: string
-	): Promise< FlakyTestResult[] | undefined > {
-		const {
-			data: { artifacts },
-		} = await this.#octokit.rest.actions.listWorkflowRunArtifacts( {
-			...this.#repo,
-			run_id: runID,
-		} );
-
-		const matchArtifact = artifacts.find( ( artifact ) =>
-			artifact.name.startsWith( artifactNamePrefix )
-		);
-
-		if ( ! matchArtifact ) {
-			return undefined;
-		}
-
-		const download = await this.#octokit.rest.actions.downloadArtifact( {
-			...this.#repo,
-			artifact_id: matchArtifact.id,
-			archive_format: 'zip',
-		} );
-
-		const { files } = await unzipper.Open.buffer(
-			Buffer.from( download.data as Buffer )
-		);
-		const fileBuffers = await Promise.all(
-			files.map( ( file ) => file.buffer() )
-		);
-		const parsedFiles = fileBuffers.map(
-			( buffer ) => JSON.parse( buffer.toString() ) as FlakyTestResult
-		);
-
-		return parsedFiles;
-	}
-
 	async fetchAllIssuesLabeledFlaky( label: string ) {
 		const issues = await this.#octokit.paginate(
 			this.#octokit.rest.issues.listForRepo,
@@ -116,6 +77,37 @@ class GitHubAPI {
 
 		return data;
 	}
+
+	async createComment( sha: string, body: string ) {
+		const { data: comments } =
+			await this.#octokit.rest.repos.listCommentsForCommit( {
+				...this.#repo,
+				commit_sha: sha,
+			} );
+		const reportComment = comments.find( ( comment ) =>
+			isReportComment( comment.body )
+		);
+
+		if ( reportComment ) {
+			const { data } = await this.#octokit.rest.repos.updateCommitComment(
+				{
+					...this.#repo,
+					comment_id: reportComment.id,
+					body,
+				}
+			);
+
+			return data;
+		}
+
+		const { data } = await this.#octokit.rest.repos.createCommitComment( {
+			...this.#repo,
+			commit_sha: sha,
+			body,
+		} );
+
+		return data;
+	}
 }
 
 export { GitHubAPI };
diff --git a/packages/report-flaky-tests/src/markdown.ts b/packages/report-flaky-tests/src/markdown.ts
index 2852623115c674..15d850773ffe65 100644
--- a/packages/report-flaky-tests/src/markdown.ts
+++ b/packages/report-flaky-tests/src/markdown.ts
@@ -9,7 +9,7 @@ import * as core from '@actions/core';
  * Internal dependencies
  */
 import { stripAnsi } from './strip-ansi';
-import type { MetaData, FlakyTestResult } from './types';
+import type { MetaData, FlakyTestResult, ReportedIssue } from './types';
 
 type ParsedTestResult = {
 	date: Date;
@@ -203,10 +203,36 @@ function parseIssueBody( body: string ) {
 	};
 }
 
+const FLAKY_TESTS_REPORT_COMMENT_TOKEN = `flaky-tests-report-comment`;
+
+function renderCommitComment( {
+	reportedIssues,
+	runURL,
+}: {
+	reportedIssues: ReportedIssue[];
+	runURL: string;
+} ) {
+	return `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->
+**Flaky tests detected.**
+Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+🔍  Workflow run URL: ${ runURL }
+📝  Reported issues:
+${ reportedIssues
+	.map( ( issue ) => `- #${ issue.issueNumber } in \`${ issue.testPath }\`` )
+	.join( '\n' ) }`;
+}
+
+function isReportComment( body: string ) {
+	return body.startsWith( `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->` );
+}
+
 export {
 	renderIssueBody,
 	formatTestErrorMessage,
 	formatTestResults,
 	parseFormattedTestResults,
 	parseIssueBody,
+	renderCommitComment,
+	isReportComment,
 };
diff --git a/packages/report-flaky-tests/src/run.ts b/packages/report-flaky-tests/src/run.ts
index 307a41cb100787..65323c3d87fa80 100644
--- a/packages/report-flaky-tests/src/run.ts
+++ b/packages/report-flaky-tests/src/run.ts
@@ -3,7 +3,9 @@
  */
 import * as github from '@actions/github';
 import * as core from '@actions/core';
-import type { WorkflowRunCompletedEvent } from '@octokit/webhooks-types';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import type { PullRequestEvent } from '@octokit/webhooks-types';
 
 /**
  * Internal dependencies
@@ -14,39 +16,44 @@ import {
 	formatTestErrorMessage,
 	formatTestResults,
 	parseIssueBody,
+	renderCommitComment,
 } from './markdown';
+import type { ReportedIssue } from './types';
 
 async function run() {
-	if (
-		github.context.eventName !== 'workflow_run' ||
-		github.context.payload.action !== 'completed'
-	) {
-		return;
-	}
-
 	const token = core.getInput( 'repo-token', { required: true } );
-	const artifactNamePrefix = core.getInput( 'artifact-name-prefix', {
+	const artifactPath = core.getInput( 'artifact-path', {
 		required: true,
 	} );
 
-	const api = new GitHubAPI( token, github.context.repo );
-	// Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
-	const {
-		workflow_run: { head_branch: headBranch, html_url: runURL, id: runID },
-	} = github.context.payload as WorkflowRunCompletedEvent;
-
-	const flakyTests = await api.downloadReportFromArtifact(
-		runID,
-		artifactNamePrefix
+	const { runId: runID, repo, ref } = github.context;
+	const runURL = `https://github.com/${ repo.owner }/${ repo.repo }/actions/runs/${ runID }`;
+	const api = new GitHubAPI( token, repo );
+
+	const flakyTestsDir = await fs.readdir( artifactPath );
+	const flakyTests = await Promise.all(
+		flakyTestsDir.map( ( filename ) =>
+			fs
+				.readFile( path.join( artifactPath, filename ), 'utf-8' )
+				.then( ( text ) => JSON.parse( text ) )
+		)
 	);
 
-	if ( ! flakyTests ) {
+	if ( ! flakyTests || flakyTests.length === 0 ) {
 		// No flaky tests reported in this run.
 		return;
 	}
 
+	const headBranch =
+		github.context.eventName === 'pull_request'
+			? // Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+			  ( github.context.payload as PullRequestEvent ).pull_request.head
+					.ref
+			: ref.replace( /^refs\/(heads|tag)\//, '' );
+
 	const label = core.getInput( 'label', { required: true } );
 	const issues = await api.fetchAllIssuesLabeledFlaky( label );
+	const reportedIssues: ReportedIssue[] = [];
 
 	for ( const flakyTest of flakyTests ) {
 		const { title: testTitle } = flakyTest;
@@ -143,8 +150,33 @@ async function run() {
 			} );
 		}
 
+		reportedIssues.push( {
+			testTitle,
+			testPath,
+			issueNumber: issue.number,
+			issueUrl: issue.html_url,
+		} );
 		core.info( `Reported flaky test to ${ issue.html_url }` );
 	}
+
+	if ( reportedIssues.length === 0 ) {
+		return;
+	}
+
+	const commitSHA =
+		github.context.eventName === 'pull_request'
+			? // Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+			  ( github.context.payload as PullRequestEvent ).pull_request.head
+					.sha
+			: github.context.sha;
+	const { html_url: commentUrl } = await api.createComment(
+		commitSHA,
+		renderCommitComment( {
+			runURL,
+			reportedIssues,
+		} )
+	);
+	core.info( `Reported the summary of the flaky tests to ${ commentUrl }` );
 }
 
 function getIssueTitle( testTitle: string ) {
diff --git a/packages/report-flaky-tests/src/types.ts b/packages/report-flaky-tests/src/types.ts
index e52d6dba471018..5de8770ef75418 100644
--- a/packages/report-flaky-tests/src/types.ts
+++ b/packages/report-flaky-tests/src/types.ts
@@ -29,3 +29,10 @@ export type MetaData = {
 	totalCommits?: number;
 	baseCommit?: string;
 };
+
+export type ReportedIssue = {
+	testTitle: string;
+	testPath: string;
+	issueNumber: number;
+	issueUrl: string;
+};

From ff9ec58a17c596aa9e57f26736bca38d24bcf7e7 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 16 Dec 2022 13:33:06 +0400
Subject: [PATCH 111/209] Site Editor: Memoize sidebar component (#46604)

---
 packages/edit-site/src/components/layout/index.js  | 2 +-
 packages/edit-site/src/components/sidebar/index.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index e3d2edc217eefd..e451357ee97e5c 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -28,7 +28,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import { Sidebar } from '../sidebar';
+import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 06abec6f024cac..1a0f2bcfb6f2b8 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
 
 /**
@@ -22,7 +23,7 @@ function SidebarScreens() {
 	);
 }
 
-export function Sidebar() {
+function Sidebar() {
 	return (
 		<NavigatorProvider
 			className="edit-site-sidebar__content"
@@ -32,3 +33,5 @@ export function Sidebar() {
 		</NavigatorProvider>
 	);
 }
+
+export default memo( Sidebar );

From f8efb0d0604ad628227ff9bf725a6dcaf4e87b6a Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Fri, 16 Dec 2022 10:57:52 +0100
Subject: [PATCH 112/209] package-lock.json: dedupe the scheduler package
 (#46605)

---
 package-lock.json | 33 +++++++++++----------------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7caa04085f536c..9906e5f5bac5c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52602,16 +52602,6 @@
 			"requires": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.0"
-			},
-			"dependencies": {
-				"scheduler": {
-					"version": "0.23.0",
-					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-					"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-					"requires": {
-						"loose-envify": "^1.1.0"
-					}
-				}
 			}
 		},
 		"react-easy-crop": {
@@ -52998,6 +52988,14 @@
 					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
 					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
 				},
+				"scheduler": {
+					"version": "0.21.0",
+					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+					"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+					"requires": {
+						"loose-envify": "^1.1.0"
+					}
+				},
 				"semver": {
 					"version": "6.3.0",
 					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -53654,15 +53652,6 @@
 					"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
 					"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
 					"dev": true
-				},
-				"scheduler": {
-					"version": "0.23.0",
-					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-					"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-					"dev": true,
-					"requires": {
-						"loose-envify": "^1.1.0"
-					}
 				}
 			}
 		},
@@ -55511,9 +55500,9 @@
 			}
 		},
 		"scheduler": {
-			"version": "0.21.0",
-			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-			"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
 			"requires": {
 				"loose-envify": "^1.1.0"
 			}

From d343bd5dd95c55911dc66e06d130ae07cd219331 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri, 16 Dec 2022 12:46:24 +0200
Subject: [PATCH 113/209] Lodash: Refactor block editor away from _.find()
 (#46577)

---
 .eslintrc.js                                     |  1 +
 .../src/components/alignment-control/ui.js       |  8 +-------
 .../src/components/block-styles/index.native.js  |  3 +--
 .../src/components/block-styles/utils.js         | 12 +++++-------
 .../block-tools/selected-block-popover.js        |  4 +---
 .../block-editor/src/components/colors/utils.js  |  8 +++++---
 .../src/components/font-sizes/utils.js           |  8 +++++---
 .../src/components/font-sizes/with-font-sizes.js |  8 ++++----
 .../src/components/gradients/use-gradient.js     |  9 ++-------
 .../src/components/inserter/search-items.js      |  3 +--
 .../src/components/rich-text/format-edit.js      | 16 ++++++----------
 .../src/components/rich-text/index.js            |  1 +
 .../components/url-popover/image-url-input-ui.js |  9 +++++----
 packages/block-editor/src/hooks/font-family.js   |  8 +++-----
 packages/block-editor/src/store/selectors.js     |  5 ++---
 15 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 51bca0f3bc059b..3f2e466a78ff25 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -68,6 +68,7 @@ const restrictedImports = [
 			'every',
 			'extend',
 			'filter',
+			'find',
 			'findIndex',
 			'findKey',
 			'findLast',
diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index f50e69044f9e59..171a8d34c45f5c 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/packages/block-editor/src/components/alignment-control/ui.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 
diff --git a/packages/block-editor/src/components/block-styles/index.native.js b/packages/block-editor/src/components/block-styles/index.native.js
index 142deafacfa7f1..7967e79c2c1cd8 100644
--- a/packages/block-editor/src/components/block-styles/index.native.js
+++ b/packages/block-editor/src/components/block-styles/index.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { ScrollView } from 'react-native';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const renderedStyles = find( styles, 'isDefault' )
+	const renderedStyles = styles?.find( ( style ) => style.isDefault )
 		? styles
 		: [
 				{
diff --git a/packages/block-editor/src/components/block-styles/utils.js b/packages/block-editor/src/components/block-styles/utils.js
index f60a23a4287b21..511e78da83da60 100644
--- a/packages/block-editor/src/components/block-styles/utils.js
+++ b/packages/block-editor/src/components/block-styles/utils.js
@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -23,13 +19,15 @@ export function getActiveStyle( styles, className ) {
 		}
 
 		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
+		const activeStyle = styles?.find(
+			( { name } ) => name === potentialStyleName
+		);
 		if ( activeStyle ) {
 			return activeStyle;
 		}
 	}
 
-	return find( styles, 'isDefault' );
+	return getDefaultStyle( styles );
 }
 
 /**
@@ -88,5 +86,5 @@ export function getRenderedStyles( styles ) {
  * @return {Object?}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
+	return styles?.find( ( style ) => style.isDefault );
 }
diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
index 343cd50058655a..294813b1f34a15 100644
--- a/packages/block-editor/src/components/block-tools/selected-block-popover.js
+++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -240,8 +239,7 @@ function wrapperSelector( select ) {
 	);
 
 	// Get the clientId of the topmost parent with the capture toolbars setting.
-	const capturingClientId = find(
-		blockParentsClientIds,
+	const capturingClientId = blockParentsClientIds.find(
 		( parentClientId ) =>
 			parentBlockListSettings[ parentClientId ]
 				?.__experimentalCaptureToolbars
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index e22b5ed8661d36..e48b599faa6b96 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -26,7 +26,9 @@ export const getColorObjectByAttributeValues = (
 	customColor
 ) => {
 	if ( definedColor ) {
-		const colorObj = find( colors, { slug: definedColor } );
+		const colorObj = colors?.find(
+			( color ) => color.slug === definedColor
+		);
 
 		if ( colorObj ) {
 			return colorObj;
@@ -47,7 +49,7 @@ export const getColorObjectByAttributeValues = (
  *                   Returns undefined if no color object matches this requirement.
  */
 export const getColorObjectByColorValue = ( colors, colorValue ) => {
-	return find( colors, { color: colorValue } );
+	return colors?.find( ( color ) => color.color === colorValue );
 };
 
 /**
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index 1237a13efd7db6..0948ab918f156c 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -20,7 +20,9 @@ export const getFontSize = (
 	customFontSizeAttribute
 ) => {
 	if ( fontSizeAttribute ) {
-		const fontSizeObject = find( fontSizes, { slug: fontSizeAttribute } );
+		const fontSizeObject = fontSizes?.find(
+			( { slug } ) => slug === fontSizeAttribute
+		);
 		if ( fontSizeObject ) {
 			return fontSizeObject;
 		}
@@ -39,7 +41,7 @@ export const getFontSize = (
  * @return {Object} Font size object.
  */
 export function getFontSizeObjectByValue( fontSizes, value ) {
-	const fontSizeObject = find( fontSizes, { size: value } );
+	const fontSizeObject = fontSizes?.find( ( { size } ) => size === value );
 	if ( fontSizeObject ) {
 		return fontSizeObject;
 	}
diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
index e328a0b2740385..380ea5a3dc0c5c 100644
--- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js
+++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy } from 'lodash';
+import { pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -107,9 +107,9 @@ export default ( ...fontSizeNames ) => {
 						customFontSizeAttributeName
 					) {
 						return ( fontSizeValue ) => {
-							const fontSizeObject = find( this.props.fontSizes, {
-								size: Number( fontSizeValue ),
-							} );
+							const fontSizeObject = this.props.fontSizes?.find(
+								( { size } ) => size === Number( fontSizeValue )
+							);
 							this.props.setAttributes( {
 								[ fontSizeAttributeName ]:
 									fontSizeObject && fontSizeObject.slug
diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
index 4acf09fc03b522..e899f9c9197708 100644
--- a/packages/block-editor/src/components/gradients/use-gradient.js
+++ b/packages/block-editor/src/components/gradients/use-gradient.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -32,7 +27,7 @@ export function __experimentalGetGradientClass( gradientSlug ) {
  * @return {string} Gradient value.
  */
 export function getGradientValueBySlug( gradients, slug ) {
-	const gradient = find( gradients, [ 'slug', slug ] );
+	const gradient = gradients?.find( ( g ) => g.slug === slug );
 	return gradient && gradient.gradient;
 }
 
@@ -40,7 +35,7 @@ export function __experimentalGetGradientObjectByGradientValue(
 	gradients,
 	value
 ) {
-	const gradient = find( gradients, [ 'gradient', value ] );
+	const gradient = gradients?.find( ( g ) => g.gradient === value );
 	return gradient;
 }
 
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 5451f19937b01d..35346fca09f32d 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
 import { noCase } from 'change-case';
 
 // Default search helpers.
@@ -88,7 +87,7 @@ export const searchBlockItems = (
 
 	const config = {
 		getCategory: ( item ) =>
-			find( categories, { slug: item.category } )?.title,
+			categories.find( ( { slug } ) => slug === item.category )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
 	};
diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
index 3c6861c341cd4b..3ab3f47d226aec 100644
--- a/packages/block-editor/src/components/rich-text/format-edit.js
+++ b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -6,10 +6,6 @@ import {
 	getActiveObject,
 	isCollapsed,
 } from '@wordpress/rich-text';
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -40,13 +36,13 @@ export default function FormatEdit( {
 		if ( name === 'core/link' && ! isCollapsed( value ) ) {
 			const formats = value.formats;
 
-			const linkFormatAtStart = find( formats[ value.start ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtStart = formats[ value.start ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
-			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
 			if (
 				! linkFormatAtStart ||
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 726f8cddfff7b7..8219272ad3043a 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -368,6 +368,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index ea3b6fbbe0a199..471fbf2044d511 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -189,7 +189,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -236,8 +236,9 @@ const ImageURLInputUI = ( {
 	const linkEditorValue = urlInput !== null ? urlInput : url;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
 	return (
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index fe8693f64421bf..56335ced887074 100644
--- a/packages/block-editor/src/hooks/font-family.js
+++ b/packages/block-editor/src/hooks/font-family.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 3c048a7d58a29c..f096767bf6178c 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, find } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -2469,8 +2469,7 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
  */
 export const __experimentalGetReusableBlockTitle = createSelector(
 	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
+		const reusableBlock = getReusableBlocks( state ).find(
 			( block ) => block.id === ref
 		);
 		if ( ! reusableBlock ) {

From c465d705d969e5d556ac24960304e47d1148072f Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 16 Dec 2022 12:06:24 +0100
Subject: [PATCH 114/209] [Mobile] Update E2E tests by removing some in favor
 of integration tests (#46583)

* Mobile - Remove Columns E2E test since it's already covered in integration tests

* Mobile - Remove Latest Post E2E in favor of new integration test

* Mobile - Remove disabled List block E2E tests since it was added for the previous version of the block and new integration tests were added to support List Block V2

* Mobile - Remove More block E2E test in favor of new integration test

* Mobile - Remove Verse block E2E test in favor of new integration tests

* Mobile - Remove Spacer block E2E test since it's already covered in integration tests

* Mobile - Remove Separator block E2E test in favor of new integration test

* Mobile - Appium configutarion - Disable device animations on Android

* Mobile - E2E tests - Ignore Canary tests in Full tests suite, since it will be run in a different job (device-tests-canary)
---
 .../test/__snapshots__/edit.native.js.snap    |  3 +
 .../src/latest-posts/test/edit.native.js      | 49 +++++++++++++
 .../test/__snapshots__/edit.native.js.snap    |  7 ++
 .../src/more/test/edit.native.js              | 41 +++++++++++
 .../test/__snapshots__/edit.native.js.snap    |  7 ++
 .../src/separator/test/edit.native.js         | 41 +++++++++++
 .../test/__snapshots__/edit.native.js.snap    | 13 ++++
 .../src/verse/test/edit.native.js             | 73 ++++++++++---------
 .../gutenberg-editor-columns.test.js          | 19 -----
 .../gutenberg-editor-latest-posts.test.js     | 16 ----
 .../gutenberg-editor-lists-@canary.test.js    | 61 ----------------
 .../gutenberg-editor-lists-end.test.js        | 27 -------
 .../gutenberg-editor-lists.test.js            | 47 ------------
 .../gutenberg-editor-more.test.js             | 16 ----
 .../gutenberg-editor-separator.test.js        | 16 ----
 .../gutenberg-editor-spacer.test.js           | 16 ----
 .../gutenberg-editor-verse.test.js            | 16 ----
 packages/react-native-editor/package.json     |  2 +-
 18 files changed, 202 insertions(+), 268 deletions(-)
 create mode 100644 packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/latest-posts/test/edit.native.js
 create mode 100644 packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/more/test/edit.native.js
 create mode 100644 packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/separator/test/edit.native.js
 create mode 100644 packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js

diff --git a/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..dfdb88ce271d2c
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latest Posts block inserts block 1`] = `"<!-- wp:latest-posts /-->"`;
diff --git a/packages/block-library/src/latest-posts/test/edit.native.js b/packages/block-library/src/latest-posts/test/edit.native.js
new file mode 100644
index 00000000000000..aa7397cdcd404d
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/edit.native.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import apiFetch from '@wordpress/api-fetch';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Latest Posts block', () => {
+	afterEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Mock return value for categories
+		apiFetch.mockReturnValueOnce( Promise.resolve( [] ) );
+
+		// Add block
+		await addBlock( screen, 'Latest Posts' );
+
+		// Get block
+		const latestPostsBlock = await getBlock( screen, 'Latest Posts' );
+		expect( latestPostsBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..0bc3714894afb7
--- /dev/null
+++ b/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`More block inserts block 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
diff --git a/packages/block-library/src/more/test/edit.native.js b/packages/block-library/src/more/test/edit.native.js
new file mode 100644
index 00000000000000..cc84c7f3fc2b79
--- /dev/null
+++ b/packages/block-library/src/more/test/edit.native.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'More block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'More' );
+
+		// Get block
+		const moreBlock = await getBlock( screen, 'More' );
+		expect( moreBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..5ab1ac00a0481f
--- /dev/null
+++ b/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator block inserts block 1`] = `
+"<!-- wp:separator -->
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<!-- /wp:separator -->"
+`;
diff --git a/packages/block-library/src/separator/test/edit.native.js b/packages/block-library/src/separator/test/edit.native.js
new file mode 100644
index 00000000000000..0346cb3b2e6bfc
--- /dev/null
+++ b/packages/block-library/src/separator/test/edit.native.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Separator block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Separator' );
+
+		// Get block
+		const separatorBlock = await getBlock( screen, 'Separator' );
+		expect( separatorBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..b28fe2ddf67a53
--- /dev/null
+++ b/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verse block inserts block 1`] = `
+"<!-- wp:verse -->
+<pre class=\\"wp-block-verse\\"></pre>
+<!-- /wp:verse -->"
+`;
+
+exports[`Verse block renders block text set as initial content 1`] = `
+"<!-- wp:verse -->
+<pre class=\\"wp-block-verse\\">Sample text</pre>
+<!-- /wp:verse -->"
+`;
diff --git a/packages/block-library/src/verse/test/edit.native.js b/packages/block-library/src/verse/test/edit.native.js
index 99cc10bc44abec..96bc431be4bbd7 100644
--- a/packages/block-library/src/verse/test/edit.native.js
+++ b/packages/block-library/src/verse/test/edit.native.js
@@ -1,47 +1,54 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-const Verse = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
-
-describe( 'Verse Block', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
-	} );
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
 
-	afterAll( () => {
-		unregisterBlockType( name );
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
 	} );
+} );
+
+describe( 'Verse block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
 
-	it( 'renders without crashing', () => {
-		const component = render( <Verse attributes={ { content: '' } } /> );
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+		// Add block
+		await addBlock( screen, 'Verse' );
+
+		// Get block
+		const verseBlock = await getBlock( screen, 'Verse' );
+		expect( verseBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = render(
-			<Verse attributes={ { content: 'sample text' } } />
-		);
-		expect(
-			component.getByDisplayValue( '<pre>sample text</pre>' )
-		).toBeTruthy();
+	it( 'renders block text set as initial content', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:verse -->
+			<pre class="wp-block-verse">Sample text</pre>
+			<!-- /wp:verse -->`,
+		} );
+
+		// Get block
+		const verseBlock = await getBlock( screen, 'Verse' );
+		expect( verseBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
deleted file mode 100644
index b57ea2588d7ee6..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Columns Block test', () => {
-	it( 'should be able to handle a columns width unit from web', async () => {
-		await editorPage.setHtmlContent(
-			testData.columnsWithDifferentUnitsHtml
-		);
-
-		const columnsBlock = await editorPage.getFirstBlockVisible();
-		await columnsBlock.click();
-
-		expect( columnsBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.columns );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
deleted file mode 100644
index a5b8ec8d1a9eda..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Latest Post Block tests', () => {
-	it( 'should be able to add a Latests-Posts block', async () => {
-		await editorPage.addNewBlock( blockNames.latestPosts );
-		const latestPostsBlock = await editorPage.getBlockAtPosition(
-			blockNames.latestPosts
-		);
-
-		expect( latestPostsBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.latestPosts );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
deleted file mode 100644
index d65fa3e6227d22..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for List block', () => {
-	it.skip( 'should be able to add a new List block', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		let listBlockElement = await editorPage.getListBlockAtPosition( 1, {
-			isEmptyBlock: true,
-		} );
-
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem1,
-			false
-		);
-
-		listBlockElement = await editorPage.getListBlockAtPosition();
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
-
-		// Send the second list item text.
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem2,
-			false
-		);
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( testData.listHtml.toLowerCase() );
-	} );
-
-	// This test depends on being run immediately after 'should be able to add a new List block'
-	it.skip( 'should update format to ordered list, using toolbar button', async () => {
-		let listBlockElement = await editorPage.getListBlockAtPosition();
-
-		if ( isAndroid() ) {
-			await listBlockElement.click();
-		}
-
-		// Send a click on the order list format button.
-		await editorPage.clickOrderedListToolBarButton();
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe(
-			testData.listHtmlOrdered.toLowerCase()
-		);
-		// Remove list block to return editor to empty state.
-		listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
-		await listBlockElement.click();
-		await editorPage.removeBlockAtPosition( blockNames.list );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
deleted file mode 100644
index dcca24cf6badf1..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for List block (end)', () => {
-	it.skip( 'should be able to end a List block', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		const listBlockElement = await editorPage.getListBlockAtPosition();
-
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem1,
-			false
-		);
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n\n', false );
-
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			testData.listEndedHtml.toLowerCase()
-		);
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
deleted file mode 100644
index 7c666ae40596e3..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { waitIfAndroid, backspace } from './helpers/utils';
-
-describe( 'Gutenberg Editor tests for List block', () => {
-	// Prevent regression of https://github.com/wordpress-mobile/gutenberg-mobile/issues/871
-	it.skip( 'should handle spaces in a list', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		let listBlockElement = await editorPage.getListBlockAtPosition();
-
-		// Send the list item text.
-		await editorPage.typeTextToTextBlock( listBlockElement, '  a', false );
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
-
-		// Instead of introducing separate conditions for local and CI environment, add this wait for Android to accommodate both environments
-		await waitIfAndroid();
-
-		// Send a backspace.
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			backspace,
-			false
-		);
-
-		// There is a delay in Sauce Labs when a key is sent
-		// There isn't an element to check as it's being typed into an element that already exists, workaround is to add this wait until there's a better solution
-		await waitIfAndroid();
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			`<!-- wp:list -->
-<ul><li>  a</li></ul>
-<!-- /wp:list -->`
-		);
-
-		// Remove list block to reset editor to clean state.
-		listBlockElement = await editorPage.getListBlockAtPosition();
-		await listBlockElement.click();
-		await editorPage.removeBlockAtPosition( blockNames.list );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
deleted file mode 100644
index a98627aa5c801c..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor More Block test', () => {
-	it( 'should be able to add a more block', async () => {
-		await editorPage.addNewBlock( blockNames.more );
-		const moreBlock = await editorPage.getBlockAtPosition(
-			blockNames.more
-		);
-
-		expect( moreBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.more );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
deleted file mode 100644
index 08b2b5b4709d3e..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Separator Block test', () => {
-	it( 'should be able to add a separator block', async () => {
-		await editorPage.addNewBlock( blockNames.separator );
-		const separatorBlock = await editorPage.getBlockAtPosition(
-			blockNames.separator
-		);
-
-		expect( separatorBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.separator );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
deleted file mode 100644
index 721ae86ea7eee4..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Spacer Block test', () => {
-	it( 'should be able to add a spacer block', async () => {
-		await editorPage.addNewBlock( blockNames.spacer );
-		const spacerBlock = await editorPage.getBlockAtPosition(
-			blockNames.spacer
-		);
-
-		expect( spacerBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.spacer );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js
deleted file mode 100644
index 93068088f84896..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Verse Block Tests', () => {
-	it( 'should be able to add a verse block', async () => {
-		await editorPage.addNewBlock( blockNames.verse );
-		const verseBlock = await editorPage.getBlockAtPosition(
-			blockNames.verse
-		);
-
-		expect( verseBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.verse );
-	} );
-} );
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 0a4f901c8f1c49..1a8649b93f64d7 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -108,7 +108,7 @@
 		"test": "cross-env NODE_ENV=test jest --verbose --config ../../test/native/jest.config.js",
 		"test:debug": "cross-env NODE_ENV=test node --inspect-brk ../../node_modules/.bin/jest --runInBand --verbose --config ../../test/native/jest.config.js",
 		"test:update": "npm run test -- --updateSnapshot",
-		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --verbose --config ./jest_ui.config.js",
+		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --testPathIgnorePatterns=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --verbose --forceExit --config ./jest_ui.config.js",
 		"device-tests:debug": "cross-env NODE_ENV=test node $NODE_DEBUG_OPTION --inspect-brk node_modules/jest/bin/jest --runInBand --detectOpenHandles --verbose --config ./jest_ui.config.js",

From 2e878227d7d732288cce7bd428b43991cd9a769b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 16 Dec 2022 12:15:24 +0100
Subject: [PATCH 115/209] Bundle `WP_Theme_JSON` class instead of inheriting
 per WordPress version (#46579)

---
 ....php => class-wp-theme-json-gutenberg.php} | 3831 ++++++++++++-----
 .../wordpress-6.2/class-wp-theme-json-6-2.php |  391 --
 .../class-wp-theme-json-gutenberg.php         |   31 -
 lib/load.php                                  |    4 +-
 4 files changed, 2700 insertions(+), 1557 deletions(-)
 rename lib/{compat/wordpress-6.1/class-wp-theme-json-6-1.php => class-wp-theme-json-gutenberg.php} (53%)
 delete mode 100644 lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
 delete mode 100644 lib/experimental/class-wp-theme-json-gutenberg.php

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/class-wp-theme-json-gutenberg.php
similarity index 53%
rename from lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
rename to lib/class-wp-theme-json-gutenberg.php
index 0c0ec0451aec4e..001798e5a326ed 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1,8 +1,9 @@
 <?php
 /**
- * WP_Theme_JSON_6_1 class
+ * WP_Theme_JSON_Gutenberg class
  *
  * @package gutenberg
+ * @since 5.8.0
  */
 
 /**
@@ -14,27 +15,41 @@
  *
  * @access private
  */
-class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Gutenberg {
+
 	/**
-	 * Defines which pseudo selectors are enabled for which elements.
+	 * Container of data in theme.json format.
 	 *
-	 * The order of the selectors should be: visited, hover, focus, active.
-	 * This is to ensure that 'visited' has the lowest specificity
-	 * and the other selectors can always overwrite it.
+	 * @since 5.8.0
+	 * @var array
+	 */
+	protected $theme_json = null;
+
+	/**
+	 * Holds block metadata extracted from block.json
+	 * to be shared among all instances so we don't
+	 * process it twice.
 	 *
-	 * See https://core.trac.wordpress.org/ticket/56928.
-	 * Note: this will affect both top-level and block-level elements.
+	 * @since 5.8.0
+	 * @since 6.1.0 Initialize as an empty array.
+	 * @var array
+	 */
+	protected static $blocks_metadata = array();
+
+	/**
+	 * The CSS selector for the top-level styles.
 	 *
-	 * @since 6.1.0
+	 * @since 5.8.0
+	 * @var string
 	 */
-	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
-		'button' => array( ':visited', ':hover', ':focus', ':active' ),
-	);
+	const ROOT_BLOCK_SELECTOR = 'body';
 
 	/**
 	 * The sources of data this object can represent.
 	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added 'blocks'.
 	 * @var string[]
 	 */
 	const VALID_ORIGINS = array(
@@ -44,11 +59,140 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 		'custom',
 	);
 
+	/**
+	 * Presets are a set of values that serve
+	 * to bootstrap some styles: colors, font sizes, etc.
+	 *
+	 * They are a unkeyed array of values such as:
+	 *
+	 * ```php
+	 * array(
+	 *   array(
+	 *     'slug'      => 'unique-name-within-the-set',
+	 *     'name'      => 'Name for the UI',
+	 *     <value_key> => 'value'
+	 *   ),
+	 * )
+	 * ```
+	 *
+	 * This contains the necessary metadata to process them:
+	 *
+	 * - path             => Where to find the preset within the settings section.
+	 * - prevent_override => Disables override of default presets by theme presets.
+	 *                       The relationship between whether to override the defaults
+	 *                       and whether the defaults are enabled is inverse:
+	 *                         - If defaults are enabled  => theme presets should not be overriden
+	 *                         - If defaults are disabled => theme presets should be overriden
+	 *                       For example, a theme sets defaultPalette to false,
+	 *                       making the default palette hidden from the user.
+	 *                       In that case, we want all the theme presets to be present,
+	 *                       so they should override the defaults by setting this false.
+	 * - use_default_names => whether to use the default names
+	 * - value_key        => the key that represents the value
+	 * - value_func       => optionally, instead of value_key, a function to generate
+	 *                       the value that takes a preset as an argument
+	 *                       (either value_key or value_func should be present)
+	 * - css_vars         => template string to use in generating the CSS Custom Property.
+	 *                       Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
+	 *                       substituting the $slug for the slug's value for each preset value.
+	 * - classes          => array containing a structure with the classes to
+	 *                       generate for the presets, where for each array item
+	 *                       the key is the class name and the value the property name.
+	 *                       The "$slug" substring will be replaced by the slug of each preset.
+	 *                       For example:
+	 *                       'classes' => array(
+	 *                         '.has-$slug-color'            => 'color',
+	 *                         '.has-$slug-background-color' => 'background-color',
+	 *                         '.has-$slug-border-color'     => 'border-color',
+	 *                       )
+	 * - properties       => array of CSS properties to be used by kses to
+	 *                       validate the content of each preset
+	 *                       by means of the remove_insecure_properties method.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets,
+	 *              `use_default_names` preset key, and simplified the metadata structure.
+	 * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
+	 *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
+	 * @var array
+	 */
+	const PRESETS_METADATA = array(
+		array(
+			'path'              => array( 'color', 'palette' ),
+			'prevent_override'  => array( 'color', 'defaultPalette' ),
+			'use_default_names' => false,
+			'value_key'         => 'color',
+			'css_vars'          => '--wp--preset--color--$slug',
+			'classes'           => array(
+				'.has-$slug-color'            => 'color',
+				'.has-$slug-background-color' => 'background-color',
+				'.has-$slug-border-color'     => 'border-color',
+			),
+			'properties'        => array( 'color', 'background-color', 'border-color' ),
+		),
+		array(
+			'path'              => array( 'color', 'gradients' ),
+			'prevent_override'  => array( 'color', 'defaultGradients' ),
+			'use_default_names' => false,
+			'value_key'         => 'gradient',
+			'css_vars'          => '--wp--preset--gradient--$slug',
+			'classes'           => array( '.has-$slug-gradient-background' => 'background' ),
+			'properties'        => array( 'background' ),
+		),
+		array(
+			'path'              => array( 'color', 'duotone' ),
+			'prevent_override'  => array( 'color', 'defaultDuotone' ),
+			'use_default_names' => false,
+			'value_func'        => 'gutenberg_get_duotone_filter_property',
+			'css_vars'          => '--wp--preset--duotone--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'filter' ),
+		),
+		array(
+			'path'              => array( 'typography', 'fontSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_func'        => 'gutenberg_get_typography_font_size_value',
+			'css_vars'          => '--wp--preset--font-size--$slug',
+			'classes'           => array( '.has-$slug-font-size' => 'font-size' ),
+			'properties'        => array( 'font-size' ),
+		),
+		array(
+			'path'              => array( 'typography', 'fontFamilies' ),
+			'prevent_override'  => false,
+			'use_default_names' => false,
+			'value_key'         => 'fontFamily',
+			'css_vars'          => '--wp--preset--font-family--$slug',
+			'classes'           => array( '.has-$slug-font-family' => 'font-family' ),
+			'properties'        => array( 'font-family' ),
+		),
+		array(
+			'path'              => array( 'spacing', 'spacingSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--spacing--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'padding', 'margin' ),
+		),
+	);
+
 	/**
 	 * Metadata for style properties.
 	 *
 	 * Each element is a direct mapping from the CSS property name to the
 	 * path to the value in theme.json & block attributes.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
+	 *              `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
+	 *              `text-decoration`, `text-transform`, and `filter` properties,
+	 *              simplified the metadata structure.
+	 * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
+	 *              `--wp--style--root--padding-*`, and `box-shadow` properties,
+	 *              removed the `--wp--style--block-gap` property.
+	 * @since 6.2.0 Added `min-height`.
+	 * @var array
 	 */
 	const PROPERTIES_METADATA = array(
 		'background'                        => array( 'color', 'gradient' ),
@@ -85,6 +229,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 		'margin-right'                      => array( 'spacing', 'margin', 'right' ),
 		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
 		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
+		'min-height'                        => array( 'dimensions', 'minHeight' ),
 		'outline-color'                     => array( 'outline', 'color' ),
 		'outline-offset'                    => array( 'outline', 'offset' ),
 		'outline-style'                     => array( 'outline', 'style' ),
@@ -106,260 +251,136 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 	);
 
 	/**
-	 * The valid elements that can be found under styles.
+	 * Protected style properties.
 	 *
-	 * @var string[]
+	 * These style properties are only rendered if a setting enables it
+	 * via a value other than `null`.
+	 *
+	 * Each element maps the style property to the corresponding theme.json
+	 * setting key.
+	 *
+	 * @since 5.9.0
 	 */
-	const ELEMENTS = array(
-		'link'    => 'a:where(:not(.wp-element-button))', // The where is needed to lower the specificity.
-		'heading' => 'h1, h2, h3, h4, h5, h6',
-		'h1'      => 'h1',
-		'h2'      => 'h2',
-		'h3'      => 'h3',
-		'h4'      => 'h4',
-		'h5'      => 'h5',
-		'h6'      => 'h6',
-		'button'  => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
-		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption', // The block classes are necessary to target older content that won't use the new class names.
-		'cite'    => 'cite',
-	);
-
-	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
-		'button'  => 'wp-element-button',
-		'caption' => 'wp-element-caption',
-	);
-
-	// List of block support features that can have their related styles
-	// generated under their own feature level selector rather than the block's.
-	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
-		'__experimentalBorder' => 'border',
-		'color'                => 'color',
-		'spacing'              => 'spacing',
-		'typography'           => 'typography',
+	const PROTECTED_PROPERTIES = array(
+		'spacing.blockGap' => array( 'spacing', 'blockGap' ),
 	);
 
 	/**
-	 * Constructor.
+	 * Indirect metadata for style properties that are not directly output.
 	 *
-	 * @since 5.8.0
+	 * Each element is a direct mapping from a CSS property name to the
+	 * path to the value in theme.json & block attributes.
 	 *
-	 * @param array  $theme_json A structure that follows the theme.json schema.
-	 * @param string $origin     Optional. What source of data this object represents.
-	 *                           One of 'default', 'theme', or 'custom'. Default 'theme'.
+	 * Indirect properties are not output directly by `compute_style_properties`,
+	 * but are used elsewhere in the processing of global styles. The indirect
+	 * property is used to validate whether or not a style value is allowed.
+	 *
+	 * @since 6.2.0
+	 * @var array
 	 */
-	public function __construct( $theme_json = array(), $origin = 'theme' ) {
-		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
-			$origin = 'theme';
-		}
-
-		$this->theme_json    = WP_Theme_JSON_Schema::migrate( $theme_json );
-		$registry            = WP_Block_Type_Registry::get_instance();
-		$valid_block_names   = array_keys( $registry->get_all_registered() );
-		$valid_element_names = array_keys( static::ELEMENTS );
-		$theme_json          = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
-		$this->theme_json    = static::maybe_opt_in_into_settings( $theme_json );
-
-		// Internally, presets are keyed by origin.
-		$nodes = static::get_setting_nodes( $this->theme_json );
-		foreach ( $nodes as $node ) {
-			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
-				$path   = array_merge( $node['path'], $preset_metadata['path'] );
-				$preset = _wp_array_get( $this->theme_json, $path, null );
-				if ( null !== $preset ) {
-					// If the preset is not already keyed by origin.
-					if ( isset( $preset[0] ) || empty( $preset ) ) {
-						_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
-					}
-				}
-			}
-		}
-	}
+	const INDIRECT_PROPERTIES_METADATA = array(
+		'gap'        => array( 'spacing', 'blockGap' ),
+		'column-gap' => array( 'spacing', 'blockGap', 'left' ),
+		'row-gap'    => array( 'spacing', 'blockGap', 'top' ),
+	);
 
 	/**
-	 * Given an element name, returns a class name.
+	 * The top-level keys a theme.json can have.
 	 *
-	 * @param string $element The name of the element.
-	 *
-	 * @return string The name of the class.
-	 *
-	 * @since 6.1.0
+	 * @since 5.8.0 As `ALLOWED_TOP_LEVEL_KEYS`.
+	 * @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`,
+	 *              added the `customTemplates` and `templateParts` values.
+	 * @var string[]
 	 */
-	public static function get_element_class_name( $element ) {
-		return array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ? static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] : '';
-	}
+	const VALID_TOP_LEVEL_KEYS = array(
+		'customTemplates',
+		'patterns',
+		'settings',
+		'styles',
+		'templateParts',
+		'version',
+		'title',
+	);
 
 	/**
-	 * Sanitizes the input according to the schemas.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
+	 * The valid properties under the settings key.
 	 *
-	 * @param array $input               Structure to sanitize.
-	 * @param array $valid_block_names   List of valid block names.
-	 * @param array $valid_element_names List of valid element names.
-	 * @return array The sanitized output.
+	 * @since 5.8.0 As `ALLOWED_SETTINGS`.
+	 * @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
+	 *              added new properties for `border`, `color`, `spacing`,
+	 *              and `typography`, and renamed others according to the new schema.
+	 * @since 6.0.0 Added `color.defaultDuotone`.
+	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
+	 * @since 6.2.0 Added `dimensions.minHeight`.
+	 * @var array
 	 */
-	protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
-
-		$output = array();
-
-		if ( ! is_array( $input ) ) {
-			return $output;
-		}
-
-		// Preserve only the top most level keys.
-		$output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
-
-		// Remove any rules that are annotated as "top" in VALID_STYLES constant.
-		// Some styles are only meant to be available at the top-level (e.g.: blockGap),
-		// hence, the schema for blocks & elements should not have them.
-		$styles_non_top_level = static::VALID_STYLES;
-		foreach ( array_keys( $styles_non_top_level ) as $section ) {
-			if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
-				foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
-					if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
-						unset( $styles_non_top_level[ $section ][ $prop ] );
-					}
-				}
-			}
-		}
-
-		// Build the schema based on valid block & element names.
-		$schema                 = array();
-		$schema_styles_elements = array();
-
-		// Set allowed element pseudo selectors based on per element allow list.
-		// Target data structure in schema:
-		// e.g.
-		// - top level elements: `$schema['styles']['elements']['link'][':hover']`.
-		// - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
-		foreach ( $valid_element_names as $element ) {
-			$schema_styles_elements[ $element ] = $styles_non_top_level;
-
-			if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
-					$schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
-				}
-			}
-		}
-
-		$schema_styles_blocks   = array();
-		$schema_settings_blocks = array();
-		foreach ( $valid_block_names as $block ) {
-			$schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
-			$schema_styles_blocks[ $block ]             = $styles_non_top_level;
-			$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
-		}
-
-		$schema['styles']             = static::VALID_STYLES;
-		$schema['styles']['blocks']   = $schema_styles_blocks;
-		$schema['styles']['elements'] = $schema_styles_elements;
-		$schema['settings']           = static::VALID_SETTINGS;
-		$schema['settings']['blocks'] = $schema_settings_blocks;
-
-		// Remove anything that's not present in the schema.
-		foreach ( array( 'styles', 'settings' ) as $subtree ) {
-			if ( ! isset( $input[ $subtree ] ) ) {
-				continue;
-			}
-
-			if ( ! is_array( $input[ $subtree ] ) ) {
-				unset( $output[ $subtree ] );
-				continue;
-			}
-
-			$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
-
-			if ( empty( $result ) ) {
-				unset( $output[ $subtree ] );
-			} else {
-				$output[ $subtree ] = $result;
-			}
-		}
-
-		return $output;
-	}
-
-	/**
-	 * Removes insecure data from theme.json.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param array $theme_json Structure to sanitize.
-	 * @return array Sanitized structure.
-	 */
-	public static function remove_insecure_properties( $theme_json ) {
-		$sanitized = array();
-
-		$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
-
-		$valid_block_names   = array_keys( static::get_blocks_metadata() );
-		$valid_element_names = array_keys( static::ELEMENTS );
-
-		$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
-
-		$blocks_metadata = static::get_blocks_metadata();
-		$style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
-
-		foreach ( $style_nodes as $metadata ) {
-			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
-			if ( empty( $input ) ) {
-				continue;
-			}
-
-			$output = static::remove_insecure_styles( $input );
-
-			// Get a reference to element name from path.
-			// $metadata['path'] = array('styles','elements','link');.
-			$current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
-
-			// $output is stripped of pseudo selectors. Readd and process them
-			// for insecure styles here.
-			if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-
-				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
-					if ( isset( $input[ $pseudo_selector ] ) ) {
-						$output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
-					}
-				}
-			}
-
-			if ( ! empty( $output ) ) {
-				_wp_array_set( $sanitized, $metadata['path'], $output );
-			}
-		}
-
-		$setting_nodes = static::get_setting_nodes( $theme_json );
-		foreach ( $setting_nodes as $metadata ) {
-			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
-			if ( empty( $input ) ) {
-				continue;
-			}
-
-			$output = static::remove_insecure_settings( $input );
-			if ( ! empty( $output ) ) {
-				_wp_array_set( $sanitized, $metadata['path'], $output );
-			}
-		}
-
-		if ( empty( $sanitized['styles'] ) ) {
-			unset( $theme_json['styles'] );
-		} else {
-			$theme_json['styles'] = $sanitized['styles'];
-		}
-
-		if ( empty( $sanitized['settings'] ) ) {
-			unset( $theme_json['settings'] );
-		} else {
-			$theme_json['settings'] = $sanitized['settings'];
-		}
-
-		return $theme_json;
-	}
+	const VALID_SETTINGS = array(
+		'appearanceTools'               => null,
+		'useRootPaddingAwareAlignments' => null,
+		'border'                        => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'                         => array(
+			'background'       => null,
+			'custom'           => null,
+			'customDuotone'    => null,
+			'customGradient'   => null,
+			'defaultDuotone'   => null,
+			'defaultGradients' => null,
+			'defaultPalette'   => null,
+			'duotone'          => null,
+			'gradients'        => null,
+			'link'             => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'                        => null,
+		'dimensions'                    => array(
+			'minHeight' => null,
+		),
+		'layout'                        => array(
+			'contentSize' => null,
+			'definitions' => null,
+			'wideSize'    => null,
+		),
+		'spacing'                       => array(
+			'customSpacingSize' => null,
+			'spacingSizes'      => null,
+			'spacingScale'      => null,
+			'blockGap'          => null,
+			'margin'            => null,
+			'padding'           => null,
+			'units'             => null,
+		),
+		'typography'                    => array(
+			'fluid'          => null,
+			'customFontSize' => null,
+			'dropCap'        => null,
+			'fontFamilies'   => null,
+			'fontSizes'      => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+		),
+	);
 
 	/**
 	 * The valid properties under the styles key.
 	 *
+	 * @since 5.8.0 As `ALLOWED_STYLES`.
+	 * @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
+	 *              added new properties for `border`, `filter`, `spacing`,
+	 *              and `typography`.
+	 * @since 6.1.0 Added new side properties for `border`,
+	 *              added new property `shadow`,
+	 *              updated `blockGap` to be allowed at any level.
+	 * @since 6.2.0 Added `dimensions.minHeight`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -378,7 +399,10 @@ public static function remove_insecure_properties( $theme_json ) {
 			'gradient'   => null,
 			'text'       => null,
 		),
-		'shadow'     => null,
+		'css'        => null,
+		'dimensions' => array(
+			'minHeight' => null,
+		),
 		'filter'     => array(
 			'duotone' => null,
 		),
@@ -388,6 +412,7 @@ public static function remove_insecure_properties( $theme_json ) {
 			'style'  => null,
 			'width'  => null,
 		),
+		'shadow'     => null,
 		'spacing'    => array(
 			'margin'   => null,
 			'padding'  => null,
@@ -406,68 +431,367 @@ public static function remove_insecure_properties( $theme_json ) {
 	);
 
 	/**
-	 * Function that appends a sub-selector to a existing one.
+	 * Defines which pseudo selectors are enabled for which elements.
 	 *
-	 * Given the compounded $selector "h1, h2, h3"
-	 * and the $to_append selector ".some-class" the result will be
-	 * "h1.some-class, h2.some-class, h3.some-class".
+	 * The order of the selectors should be: visited, hover, focus, active.
+	 * This is to ensure that 'visited' has the lowest specificity
+	 * and the other selectors can always overwrite it.
 	 *
-	 * @since 5.8.0
-	 * @since 6.1.0 Added append position.
+	 * See https://core.trac.wordpress.org/ticket/56928.
+	 * Note: this will affect both top-level and block-level elements.
 	 *
-	 * @param string $selector  Original selector.
-	 * @param string $to_append Selector to append.
-	 * @param string $position  A position sub-selector should be appended. Default: 'right'.
-	 * @return string
+	 * @since 6.1.0
 	 */
-	protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
-		$new_selectors = array();
-		$selectors     = explode( ',', $selector );
-		foreach ( $selectors as $sel ) {
-			$new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
-		}
+	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
+		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
+		'button' => array( ':visited', ':hover', ':focus', ':active' ),
+	);
 
-		return implode( ',', $new_selectors );
-	}
+	/**
+	 * The valid elements that can be found under styles.
+	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added `heading`, `button`, and `caption` elements.
+	 * @var string[]
+	 */
+	const ELEMENTS = array(
+		'link'    => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
+		'heading' => 'h1, h2, h3, h4, h5, h6',
+		'h1'      => 'h1',
+		'h2'      => 'h2',
+		'h3'      => 'h3',
+		'h4'      => 'h4',
+		'h5'      => 'h5',
+		'h6'      => 'h6',
+		// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
+		'button'  => '.wp-element-button, .wp-block-button__link',
+		// The block classes are necessary to target older content that won't use the new class names.
+		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
+		'cite'    => 'cite',
+	);
+
+	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
+		'button'  => 'wp-element-button',
+		'caption' => 'wp-element-caption',
+	);
 
 	/**
-	 * Returns the metadata for each block.
+	 * List of block support features that can have their related styles
+	 * generated under their own feature level selector rather than the block's.
 	 *
-	 * Example:
+	 * @since 6.1.0
+	 * @var string[]
+	 */
+	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
+		'__experimentalBorder' => 'border',
+		'color'                => 'color',
+		'spacing'              => 'spacing',
+		'typography'           => 'typography',
+	);
+
+	/**
+	 * Returns a class name by an element name.
 	 *
-	 *     {
-	 *       'core/paragraph': {
-	 *         'selector': 'p',
-	 *         'elements': {
-	 *           'link' => 'link selector',
-	 *           'etc'  => 'element selector'
-	 *         }
-	 *       },
-	 *       'core/heading': {
-	 *         'selector': 'h1',
-	 *         'elements': {}
-	 *       },
-	 *       'core/image': {
-	 *         'selector': '.wp-block-image',
-	 *         'duotone': 'img',
-	 *         'elements': {}
-	 *       }
-	 *     }
+	 * @since 6.1.0
 	 *
-	 * @return array Block metadata.
+	 * @param string $element The name of the element.
+	 * @return string The name of the class.
 	 */
-	protected static function get_blocks_metadata() {
-		if ( null !== static::$blocks_metadata ) {
-			return static::$blocks_metadata;
+	public static function get_element_class_name( $element ) {
+		$class_name = '';
+
+		// TODO: Replace array_key_exists() with isset() check once WordPress drops
+		// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+		if ( array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ) {
+			$class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
 		}
 
-		static::$blocks_metadata = array();
+		return $class_name;
+	}
 
-		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = $registry->get_all_registered();
-		foreach ( $blocks as $block_name => $block_type ) {
-			if (
-				isset( $block_type->supports['__experimentalSelector'] ) &&
+	/**
+	 * Options that settings.appearanceTools enables.
+	 *
+	 * @since 6.0.0
+	 * @var array
+	 */
+	const APPEARANCE_TOOLS_OPT_INS = array(
+		array( 'border', 'color' ),
+		array( 'border', 'radius' ),
+		array( 'border', 'style' ),
+		array( 'border', 'width' ),
+		array( 'color', 'link' ),
+		array( 'dimensions', 'minHeight' ),
+		array( 'spacing', 'blockGap' ),
+		array( 'spacing', 'margin' ),
+		array( 'spacing', 'padding' ),
+		array( 'typography', 'lineHeight' ),
+	);
+
+	/**
+	 * The latest version of the schema in use.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Changed value from 1 to 2.
+	 * @var int
+	 */
+	const LATEST_SCHEMA = 2;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $theme_json A structure that follows the theme.json schema.
+	 * @param string $origin     Optional. What source of data this object represents.
+	 *                           One of 'default', 'theme', or 'custom'. Default 'theme'.
+	 */
+	public function __construct( $theme_json = array(), $origin = 'theme' ) {
+		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
+			$origin = 'theme';
+		}
+
+		$this->theme_json    = WP_Theme_JSON_Schema::migrate( $theme_json );
+		$registry            = WP_Block_Type_Registry::get_instance();
+		$valid_block_names   = array_keys( $registry->get_all_registered() );
+		$valid_element_names = array_keys( static::ELEMENTS );
+		$theme_json          = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
+		$this->theme_json    = static::maybe_opt_in_into_settings( $theme_json );
+
+		// Internally, presets are keyed by origin.
+		$nodes = static::get_setting_nodes( $this->theme_json );
+		foreach ( $nodes as $node ) {
+			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+				$path = $node['path'];
+				foreach ( $preset_metadata['path'] as $subpath ) {
+					$path[] = $subpath;
+				}
+				$preset = _wp_array_get( $this->theme_json, $path, null );
+				if ( null !== $preset ) {
+					// If the preset is not already keyed by origin.
+					if ( isset( $preset[0] ) || empty( $preset ) ) {
+						_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Enables some opt-in settings if theme declared support.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $theme_json A theme.json structure to modify.
+	 * @return array The modified theme.json structure.
+	 */
+	protected static function maybe_opt_in_into_settings( $theme_json ) {
+		$new_theme_json = $theme_json;
+
+		if (
+			isset( $new_theme_json['settings']['appearanceTools'] ) &&
+			true === $new_theme_json['settings']['appearanceTools']
+		) {
+			static::do_opt_in_into_settings( $new_theme_json['settings'] );
+		}
+
+		if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) {
+			foreach ( $new_theme_json['settings']['blocks'] as &$block ) {
+				if ( isset( $block['appearanceTools'] ) && ( true === $block['appearanceTools'] ) ) {
+					static::do_opt_in_into_settings( $block );
+				}
+			}
+		}
+
+		return $new_theme_json;
+	}
+
+	/**
+	 * Enables some settings.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $context The context to which the settings belong.
+	 */
+	protected static function do_opt_in_into_settings( &$context ) {
+		foreach ( static::APPEARANCE_TOOLS_OPT_INS as $path ) {
+			// Use "unset prop" as a marker instead of "null" because
+			// "null" can be a valid value for some props (e.g. blockGap).
+			if ( 'unset prop' === _wp_array_get( $context, $path, 'unset prop' ) ) {
+				_wp_array_set( $context, $path, true );
+			}
+		}
+
+		unset( $context['appearanceTools'] );
+	}
+
+	/**
+	 * Sanitizes the input according to the schemas.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
+	 *
+	 * @param array $input               Structure to sanitize.
+	 * @param array $valid_block_names   List of valid block names.
+	 * @param array $valid_element_names List of valid element names.
+	 * @return array The sanitized output.
+	 */
+	protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
+
+		$output = array();
+
+		if ( ! is_array( $input ) ) {
+			return $output;
+		}
+
+		// Preserve only the top most level keys.
+		$output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
+
+		/*
+		 * Remove any rules that are annotated as "top" in VALID_STYLES constant.
+		 * Some styles are only meant to be available at the top-level (e.g.: blockGap),
+		 * hence, the schema for blocks & elements should not have them.
+		 */
+		$styles_non_top_level = static::VALID_STYLES;
+		foreach ( array_keys( $styles_non_top_level ) as $section ) {
+			// array_key_exists() needs to be used instead of isset() because the value can be null.
+			if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
+				foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
+					if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
+						unset( $styles_non_top_level[ $section ][ $prop ] );
+					}
+				}
+			}
+		}
+
+		// Build the schema based on valid block & element names.
+		$schema                 = array();
+		$schema_styles_elements = array();
+
+		/*
+		 * Set allowed element pseudo selectors based on per element allow list.
+		 * Target data structure in schema:
+		 * e.g.
+		 * - top level elements: `$schema['styles']['elements']['link'][':hover']`.
+		 * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
+		 */
+		foreach ( $valid_element_names as $element ) {
+			$schema_styles_elements[ $element ] = $styles_non_top_level;
+
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+					$schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
+				}
+			}
+		}
+
+		$schema_styles_blocks   = array();
+		$schema_settings_blocks = array();
+		foreach ( $valid_block_names as $block ) {
+			$schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
+			$schema_styles_blocks[ $block ]             = $styles_non_top_level;
+			$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
+		}
+
+		$schema['styles']             = static::VALID_STYLES;
+		$schema['styles']['blocks']   = $schema_styles_blocks;
+		$schema['styles']['elements'] = $schema_styles_elements;
+		$schema['settings']           = static::VALID_SETTINGS;
+		$schema['settings']['blocks'] = $schema_settings_blocks;
+
+		// Remove anything that's not present in the schema.
+		foreach ( array( 'styles', 'settings' ) as $subtree ) {
+			if ( ! isset( $input[ $subtree ] ) ) {
+				continue;
+			}
+
+			if ( ! is_array( $input[ $subtree ] ) ) {
+				unset( $output[ $subtree ] );
+				continue;
+			}
+
+			$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
+
+			if ( empty( $result ) ) {
+				unset( $output[ $subtree ] );
+			} else {
+				$output[ $subtree ] = $result;
+			}
+		}
+
+		return $output;
+	}
+
+	/**
+	 * Appends a sub-selector to an existing one.
+	 *
+	 * Given the compounded $selector "h1, h2, h3"
+	 * and the $to_append selector ".some-class" the result will be
+	 * "h1.some-class, h2.some-class, h3.some-class".
+	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added append position.
+	 *
+	 * @param string $selector  Original selector.
+	 * @param string $to_append Selector to append.
+	 * @param string $position  A position sub-selector should be appended. Default 'right'.
+	 * @return string The new selector.
+	 */
+	protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
+		$new_selectors = array();
+		$selectors     = explode( ',', $selector );
+		foreach ( $selectors as $sel ) {
+			$new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
+		}
+		return implode( ',', $new_selectors );
+	}
+
+	/**
+	 * Returns the metadata for each block.
+	 *
+	 * Example:
+	 *
+	 *     {
+	 *       'core/paragraph': {
+	 *         'selector': 'p',
+	 *         'elements': {
+	 *           'link' => 'link selector',
+	 *           'etc'  => 'element selector'
+	 *         }
+	 *       },
+	 *       'core/heading': {
+	 *         'selector': 'h1',
+	 *         'elements': {}
+	 *       },
+	 *       'core/image': {
+	 *         'selector': '.wp-block-image',
+	 *         'duotone': 'img',
+	 *         'elements': {}
+	 *       }
+	 *     }
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added `duotone` key with CSS selector.
+	 * @since 6.1.0 Added `features` key with block support feature level selectors.
+	 *
+	 * @return array Block metadata.
+	 */
+	protected static function get_blocks_metadata() {
+		// NOTE: the compat/6.1 version of this method in Gutenberg did not have these changes.
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		// Is there metadata for all currently registered blocks?
+		$blocks = array_diff_key( $blocks, static::$blocks_metadata );
+		if ( empty( $blocks ) ) {
+			return static::$blocks_metadata;
+		}
+
+		foreach ( $blocks as $block_name => $block_type ) {
+			if (
+				isset( $block_type->supports['__experimentalSelector'] ) &&
 				is_string( $block_type->supports['__experimentalSelector'] )
 			) {
 				static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
@@ -501,7 +825,7 @@ protected static function get_blocks_metadata() {
 				static::$blocks_metadata[ $block_name ]['features'] = $features;
 			}
 
-			// Assign defaults, then override those that the block sets by itself.
+			// Assign defaults, then overwrite those that the block sets by itself.
 			// If the block selector is compounded, will append the element to each
 			// individual block selector.
 			$block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
@@ -517,174 +841,90 @@ protected static function get_blocks_metadata() {
 				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
 			}
 		}
+
 		return static::$blocks_metadata;
 	}
 
 	/**
-	 * Builds metadata for the style nodes, which returns in the form of:
+	 * Given a tree, removes the keys that are not present in the schema.
 	 *
-	 *     [
-	 *       [
-	 *         'path'     => [ 'path', 'to', 'some', 'node' ],
-	 *         'selector' => 'CSS selector for some node',
-	 *         'duotone'  => 'CSS selector for duotone for some node'
-	 *       ],
-	 *       [
-	 *         'path'     => ['path', 'to', 'other', 'node' ],
-	 *         'selector' => 'CSS selector for other node',
-	 *         'duotone'  => null
-	 *       ],
-	 *     ]
+	 * It is recursive and modifies the input in-place.
 	 *
 	 * @since 5.8.0
 	 *
-	 * @param array $theme_json The tree to extract style nodes from.
-	 * @param array $selectors  List of selectors per block.
-	 * @return array
+	 * @param array $tree   Input to process.
+	 * @param array $schema Schema to adhere to.
+	 * @return array The modified $tree.
 	 */
-	protected static function get_style_nodes( $theme_json, $selectors = array() ) {
-		$nodes = array();
-		if ( ! isset( $theme_json['styles'] ) ) {
-			return $nodes;
-		}
+	protected static function remove_keys_not_in_schema( $tree, $schema ) {
+		$tree = array_intersect_key( $tree, $schema );
 
-		// Top-level.
-		$nodes[] = array(
-			'path'     => array( 'styles' ),
-			'selector' => static::ROOT_BLOCK_SELECTOR,
-		);
+		foreach ( $schema as $key => $data ) {
+			if ( ! isset( $tree[ $key ] ) ) {
+				continue;
+			}
 
-		if ( isset( $theme_json['styles']['elements'] ) ) {
-			foreach ( self::ELEMENTS as $element => $selector ) {
-				if ( ! isset( $theme_json['styles']['elements'][ $element ] ) || ! array_key_exists( $element, static::ELEMENTS ) ) {
-					continue;
+			if ( is_array( $schema[ $key ] ) && is_array( $tree[ $key ] ) ) {
+				$tree[ $key ] = static::remove_keys_not_in_schema( $tree[ $key ], $schema[ $key ] );
+
+				if ( empty( $tree[ $key ] ) ) {
+					unset( $tree[ $key ] );
 				}
+			} elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
+				unset( $tree[ $key ] );
+			}
+		}
 
-				// Handle element defaults.
-				$nodes[] = array(
-					'path'     => array( 'styles', 'elements', $element ),
-					'selector' => static::ELEMENTS[ $element ],
-				);
-
-				// Handle any pseudo selectors for the element.
-				if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
-
-						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
-
-							$nodes[] = array(
-								'path'     => array( 'styles', 'elements', $element ),
-								'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
-							);
-						}
-					}
-				}
-			}
-		}
-
-		// Blocks.
-		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
-			return $nodes;
-		}
-
-		$nodes = array_merge( $nodes, static::get_block_nodes( $theme_json, $selectors ) );
-
-		// This filter allows us to modify the output of WP_Theme_JSON so that we can do things like loading block CSS independently.
-		return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
+		return $tree;
 	}
 
 	/**
-	 * A public helper to get the block nodes from a theme.json file.
+	 * Returns the existing settings for each block.
 	 *
-	 * @return array The block nodes in theme.json.
-	 */
-	public function get_styles_block_nodes() {
-		return static::get_block_nodes( $this->theme_json );
-	}
-
-	/**
-	 * An internal method to get the block nodes from a theme.json file.
+	 * Example:
 	 *
-	 * @param array $theme_json The theme.json converted to an array.
-	 * @param array $selectors  Optional list of selectors per block.
+	 *     {
+	 *       'root': {
+	 *         'color': {
+	 *           'custom': true
+	 *         }
+	 *       },
+	 *       'core/paragraph': {
+	 *         'spacing': {
+	 *           'customPadding': true
+	 *         }
+	 *       }
+	 *     }
 	 *
-	 * @return array The block nodes in theme.json.
+	 * @since 5.8.0
+	 *
+	 * @return array Settings per block.
 	 */
-	private static function get_block_nodes( $theme_json, $selectors = array() ) {
-		$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
-		$nodes     = array();
-		if ( ! isset( $theme_json['styles'] ) ) {
-			return $nodes;
-		}
-
-		// Blocks.
-		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
-			return $nodes;
-		}
-
-		foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
-			$selector = null;
-			if ( isset( $selectors[ $name ]['selector'] ) ) {
-				$selector = $selectors[ $name ]['selector'];
-			}
-
-			$duotone_selector = null;
-			if ( isset( $selectors[ $name ]['duotone'] ) ) {
-				$duotone_selector = $selectors[ $name ]['duotone'];
-			}
-
-			$feature_selectors = null;
-			if ( isset( $selectors[ $name ]['features'] ) ) {
-				$feature_selectors = $selectors[ $name ]['features'];
-			}
-
-			$nodes[] = array(
-				'name'     => $name,
-				'path'     => array( 'styles', 'blocks', $name ),
-				'selector' => $selector,
-				'duotone'  => $duotone_selector,
-				'features' => $feature_selectors,
-			);
-
-			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
-				foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
-					$nodes[] = array(
-						'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-						'selector' => $selectors[ $name ]['elements'][ $element ],
-					);
-
-					// Handle any pseudo selectors for the element.
-					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
-							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
-
-								$nodes[] = array(
-									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-									'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
-								);
-							}
-						}
-					}
-				}
-			}
+	public function get_settings() {
+		if ( ! isset( $this->theme_json['settings'] ) ) {
+			return array();
+		} else {
+			return $this->theme_json['settings'];
 		}
-
-		return $nodes;
 	}
 
 	/**
 	 * Returns the stylesheet that results of processing
 	 * the theme.json structure this object represents.
 	 *
-	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
-	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
-	 *                         'styles': only the styles section in theme.json.
-	 *                         'presets': only the classes for the presets.
+	 * @since 5.8.0
+	 * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
+	 *
+	 * @param array $types   Types of styles to load. Will load all by default. It accepts:
+	 *                       - `variables`: only the CSS Custom Properties for presets & custom ones.
+	 *                       - `styles`: only the styles section in theme.json.
+	 *                       - `presets`: only the classes for the presets.
+	 *                       - `custom-css`: only the css from global styles.css.
 	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
 	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
 	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
 	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
-	 * @return string Stylesheet.
+	 * @return string The resulting stylesheet.
 	 */
 	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
 		if ( null === $origins ) {
@@ -693,7 +933,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 
 		if ( is_string( $types ) ) {
 			// Dispatch error and map old arguments to new ones.
-			_deprecated_argument( __FUNCTION__, '5.9' );
+			_deprecated_argument( __FUNCTION__, '5.9.0' );
 			if ( 'block_styles' === $types ) {
 				$types = array( 'styles', 'presets' );
 			} elseif ( 'css_variables' === $types ) {
@@ -772,182 +1012,1306 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
 		}
 
+		// Load the custom CSS last so it has the highest specificity.
+		if ( in_array( 'custom-css', $types, true ) ) {
+			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
+		}
+
 		return $stylesheet;
 	}
-
 	/**
-	 * Returns a filtered declarations array if there is a separator block with only a background
-	 * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+	 * Returns the page templates of the active theme.
 	 *
-	 * @param array $declarations List of declarations.
+	 * @since 5.9.0
 	 *
-	 * @return array $declarations List of declarations filtered.
+	 * @return array
 	 */
-	private static function update_separator_declarations( $declarations ) {
-		$background_matches = array_values(
-			array_filter(
-				$declarations,
-				function( $declaration ) {
-					return 'background-color' === $declaration['name'];
-				}
-			)
-		);
-		if ( ! empty( $background_matches && isset( $background_matches[0]['value'] ) ) ) {
-			$border_color_matches = array_values(
-				array_filter(
-					$declarations,
-					function( $declaration ) {
-						return 'border-color' === $declaration['name'];
-					}
-				)
-			);
-			$text_color_matches   = array_values(
-				array_filter(
-					$declarations,
-					function( $declaration ) {
-						return 'color' === $declaration['name'];
-					}
-				)
-			);
-			if ( empty( $border_color_matches ) && empty( $text_color_matches ) ) {
-				$declarations[] = array(
-					'name'  => 'color',
-					'value' => $background_matches[0]['value'],
+	public function get_custom_templates() {
+		$custom_templates = array();
+		if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
+			return $custom_templates;
+		}
+
+		foreach ( $this->theme_json['customTemplates'] as $item ) {
+			if ( isset( $item['name'] ) ) {
+				$custom_templates[ $item['name'] ] = array(
+					'title'     => isset( $item['title'] ) ? $item['title'] : '',
+					'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
 				);
 			}
 		}
-
-		return $declarations;
+		return $custom_templates;
 	}
 
 	/**
-	 * Gets the CSS rules for a particular block from theme.json.
+	 * Returns the template part data of active theme.
 	 *
-	 * @param array $block_metadata Metadata about the block to get styles for.
+	 * @since 5.9.0
 	 *
-	 * @return string Styles for the block.
+	 * @return array
 	 */
-	public function get_styles_for_block( $block_metadata ) {
-		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
-		$selector         = $block_metadata['selector'];
-		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
-
-		// Process style declarations for block support features the current
-		// block contains selectors for. Values for a feature with a custom
-		// selector are filtered from the theme.json node before it is
-		// processed as normal.
-		$feature_declarations = array();
-
-		if ( ! empty( $block_metadata['features'] ) ) {
-			foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
-				if ( ! empty( $node[ $feature_name ] ) ) {
-					// Create temporary node containing only the feature data
-					// to leverage existing `compute_style_properties` function.
-					$feature = array( $feature_name => $node[ $feature_name ] );
-					// Generate the feature's declarations only.
-					$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
-
-					// Merge new declarations with any that already exist for
-					// the feature selector. This may occur when multiple block
-					// support features use the same custom selector.
-					if ( isset( $feature_declarations[ $feature_selector ] ) ) {
-						$feature_declarations[ $feature_selector ] = array_merge( $feature_declarations[ $feature_selector ], $new_feature_declarations );
-					} else {
-						$feature_declarations[ $feature_selector ] = $new_feature_declarations;
-					}
-
-					// Remove the feature from the block's node now the
-					// styles will be included under the feature level selector.
-					unset( $node[ $feature_name ] );
-				}
-			}
+	public function get_template_parts() {
+		$template_parts = array();
+		if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
+			return $template_parts;
 		}
 
-		// Get a reference to element name from path.
-		// $block_metadata['path'] = array('styles','elements','link');
-		// Make sure that $block_metadata['path'] describes an element node, like ['styles', 'element', 'link'].
-		// Skip non-element paths like just ['styles'].
-		$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
-
-		$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
-
-		$element_pseudo_allowed = array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ? static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] : array();
-
-		// Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
-		// This also resets the array keys.
-		$pseudo_matches = array_values(
-			array_filter(
-				$element_pseudo_allowed,
-				function( $pseudo_selector ) use ( $selector ) {
-					return str_contains( $selector, $pseudo_selector );
-				}
-			)
-		);
-
-		$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
-
-		// If the current selector is a pseudo selector that's defined in the allow list for the current
-		// element then compute the style properties for it.
-		// Otherwise just compute the styles for the default selector as normal.
-		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) && array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ) {
-			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
-		} else {
-			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
+		foreach ( $this->theme_json['templateParts'] as $item ) {
+			if ( isset( $item['name'] ) ) {
+				$template_parts[ $item['name'] ] = array(
+					'title' => isset( $item['title'] ) ? $item['title'] : '',
+					'area'  => isset( $item['area'] ) ? $item['area'] : '',
+				);
+			}
 		}
+		return $template_parts;
+	}
 
+	/**
+	 * Converts each style section into a list of rulesets
+	 * containing the block styles to be appended to the stylesheet.
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each section this creates a new ruleset such as:
+	 *
+	 *   block-selector {
+	 *     style-property-one: value;
+	 *   }
+	 *
+	 * @since 5.8.0 As `get_block_styles()`.
+	 * @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()`
+	 *              and no longer returns preset classes.
+	 *              Removed the `$setting_nodes` parameter.
+	 * @since 6.1.0 Moved most internal logic to `get_styles_for_block()`.
+	 *
+	 * @param array $style_nodes Nodes with styles.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_block_classes( $style_nodes ) {
 		$block_rules = '';
 
-		// 1. Separate the ones who use the general selector
-		// and the ones who use the duotone selector.
-		$declarations_duotone = array();
-		foreach ( $declarations as $index => $declaration ) {
-			if ( 'filter' === $declaration['name'] ) {
-				unset( $declarations[ $index ] );
-				$declarations_duotone[] = $declaration;
+		foreach ( $style_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
 			}
-		}
-
-		// Update declarations if there are separators with only background color defined.
-		if ( '.wp-block-separator' === $selector ) {
-			$declarations = static::update_separator_declarations( $declarations );
-		}
-
-		// 2. Generate and append the rules that use the general selector.
-		$block_rules .= static::to_ruleset( $selector, $declarations );
-
-		// 3. Generate and append the rules that use the duotone selector.
-		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
-			$selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
-			$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
-		}
-
-		// 4. Generate Layout block gap styles.
-		if (
-			static::ROOT_BLOCK_SELECTOR !== $selector &&
-			! empty( $block_metadata['name'] )
-		) {
-			$block_rules .= $this->get_layout_styles( $block_metadata );
-		}
-
-		// 5. Generate and append the feature level rulesets.
-		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
-			$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
+			$block_rules .= static::get_styles_for_block( $metadata );
 		}
 
 		return $block_rules;
 	}
 
 	/**
-	 * Outputs the CSS for layout rules on the root.
+	 * Gets the CSS layout rules for a particular block from theme.json layout definitions.
 	 *
-	 * @param string $selector The root node selector.
-	 * @param array  $block_metadata The metadata for the root block.
-	 * @return string The additional root rules CSS.
+	 * @since 6.1.0
+	 *
+	 * @param array $block_metadata Metadata about the block to get styles for.
+	 * @return string Layout styles for the block.
 	 */
-	public function get_root_layout_rules( $selector, $block_metadata ) {
-		$css              = '';
-		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
+	protected function get_layout_styles( $block_metadata ) {
+		$block_rules = '';
+		$block_type  = null;
+
+		// Skip outputting layout styles if explicitly disabled.
+		if ( current_theme_supports( 'disable-layout-styles' ) ) {
+			return $block_rules;
+		}
+
+		if ( isset( $block_metadata['name'] ) ) {
+			$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
+			if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
+				return $block_rules;
+			}
+		}
+
+		$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
+		$has_block_gap_support    = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+		$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
+		$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$layout_definitions       = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
+		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
+
+		// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
+		// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
+		if ( $has_block_gap_support || $has_fallback_gap_support ) {
+			$block_gap_value = null;
+			// Use a fallback gap value if block gap support is not available.
+			if ( ! $has_block_gap_support ) {
+				$block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
+				if ( ! empty( $block_type ) ) {
+					$block_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
+				}
+			} else {
+				$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
+			}
+
+			// Support split row / column values and concatenate to a shorthand value.
+			if ( is_array( $block_gap_value ) ) {
+				if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
+					$gap_row         = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
+					$gap_column      = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
+					$block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+				} else {
+					// Skip outputting gap value if not all sides are provided.
+					$block_gap_value = null;
+				}
+			}
+
+			// If the block should have custom gap, add the gap styles.
+			if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
+				foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
+					// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+					if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
+						continue;
+					}
+
+					$class_name    = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
+					$spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
+
+					if (
+						! empty( $class_name ) &&
+						! empty( $spacing_rules )
+					) {
+						foreach ( $spacing_rules as $spacing_rule ) {
+							$declarations = array();
+							if (
+								isset( $spacing_rule['selector'] ) &&
+								preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
+								! empty( $spacing_rule['rules'] )
+							) {
+								// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
+								foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
+									$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
+									if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
+										$declarations[] = array(
+											'name'  => $css_property,
+											'value' => $current_css_value,
+										);
+									}
+								}
+
+								if ( ! $has_block_gap_support ) {
+									// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
+									$layout_selector = sprintf(
+										$format,
+										$selector,
+										$class_name,
+										$spacing_rule['selector']
+									);
+								} else {
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
+									$layout_selector = sprintf(
+										$format,
+										$selector,
+										$class_name,
+										$spacing_rule['selector']
+									);
+								}
+								$block_rules .= static::to_ruleset( $layout_selector, $declarations );
+							}
+						}
+					}
+				}
+			}
+		}
+
+		// Output base styles.
+		if (
+			static::ROOT_BLOCK_SELECTOR === $selector
+		) {
+			$valid_display_modes = array( 'block', 'flex', 'grid' );
+			foreach ( $layout_definitions as $layout_definition ) {
+				$class_name       = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
+				$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
+
+				if (
+					! empty( $class_name ) &&
+					! empty( $base_style_rules )
+				) {
+					// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
+					if (
+						! empty( $layout_definition['displayMode'] ) &&
+						is_string( $layout_definition['displayMode'] ) &&
+						in_array( $layout_definition['displayMode'], $valid_display_modes, true )
+					) {
+						$layout_selector = sprintf(
+							'%s .%s',
+							$selector,
+							$class_name
+						);
+						$block_rules    .= static::to_ruleset(
+							$layout_selector,
+							array(
+								array(
+									'name'  => 'display',
+									'value' => $layout_definition['displayMode'],
+								),
+							)
+						);
+					}
+
+					foreach ( $base_style_rules as $base_style_rule ) {
+						$declarations = array();
+
+						if (
+							isset( $base_style_rule['selector'] ) &&
+							preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
+							! empty( $base_style_rule['rules'] )
+						) {
+							foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
+								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
+									$declarations[] = array(
+										'name'  => $css_property,
+										'value' => $css_value,
+									);
+								}
+							}
+
+							$layout_selector = sprintf(
+								'%s .%s%s',
+								$selector,
+								$class_name,
+								$base_style_rule['selector']
+							);
+							$block_rules    .= static::to_ruleset( $layout_selector, $declarations );
+						}
+					}
+				}
+			}
+		}
+		return $block_rules;
+	}
+
+	/**
+	 * Creates new rulesets as classes for each preset value such as:
+	 *
+	 *   .has-value-color {
+	 *     color: value;
+	 *   }
+	 *
+	 *   .has-value-background-color {
+	 *     background-color: value;
+	 *   }
+	 *
+	 *   .has-value-font-size {
+	 *     font-size: value;
+	 *   }
+	 *
+	 *   .has-value-gradient-background {
+	 *     background: value;
+	 *   }
+	 *
+	 *   p.has-value-gradient-background {
+	 *     background: value;
+	 *   }
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $setting_nodes Nodes with settings.
+	 * @param array $origins       List of origins to process presets from.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_preset_classes( $setting_nodes, $origins ) {
+		$preset_rules = '';
+
+		foreach ( $setting_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$selector      = $metadata['selector'];
+			$node          = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
+		}
+
+		return $preset_rules;
+	}
+
+	/**
+	 * Converts each styles section into a list of rulesets
+	 * to be appended to the stylesheet.
+	 * These rulesets contain all the css variables (custom variables and preset variables).
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each section this creates a new ruleset such as:
+	 *
+	 *     block-selector {
+	 *       --wp--preset--category--slug: value;
+	 *       --wp--custom--variable: value;
+	 *     }
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array $nodes   Nodes with settings.
+	 * @param array $origins List of origins to process.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_css_variables( $nodes, $origins ) {
+		$stylesheet = '';
+		foreach ( $nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$selector = $metadata['selector'];
+
+			$node                    = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$declarations            = static::compute_preset_vars( $node, $origins );
+			$theme_vars_declarations = static::compute_theme_vars( $node );
+			foreach ( $theme_vars_declarations as $theme_vars_declaration ) {
+				$declarations[] = $theme_vars_declaration;
+			}
+
+			$stylesheet .= static::to_ruleset( $selector, $declarations );
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Given a selector and a declaration list,
+	 * creates the corresponding ruleset.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param string $selector     CSS selector.
+	 * @param array  $declarations List of declarations.
+	 * @return string The resulting CSS ruleset.
+	 */
+	protected static function to_ruleset( $selector, $declarations ) {
+		if ( empty( $declarations ) ) {
+			return '';
+		}
+
+		$declaration_block = array_reduce(
+			$declarations,
+			static function ( $carry, $element ) {
+				return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
+			''
+		);
+
+		return $selector . '{' . $declaration_block . '}';
+	}
+
+	/**
+	 * Given a settings array, returns the generated rulesets
+	 * for the preset classes.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array  $settings Settings to process.
+	 * @param string $selector Selector wrapping the classes.
+	 * @param array  $origins  List of origins to process.
+	 * @return string The result of processing the presets.
+	 */
+	protected static function compute_preset_classes( $settings, $selector, $origins ) {
+		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+			// Classes at the global level do not need any CSS prefixed,
+			// and we don't want to increase its specificity.
+			$selector = '';
+		}
+
+		$stylesheet = '';
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			$slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins );
+			foreach ( $preset_metadata['classes'] as $class => $property ) {
+				foreach ( $slugs as $slug ) {
+					$css_var     = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug );
+					$class_name  = static::replace_slug_in_string( $class, $slug );
+					$stylesheet .= static::to_ruleset(
+						static::append_to_selector( $selector, $class_name ),
+						array(
+							array(
+								'name'  => $property,
+								'value' => 'var(' . $css_var . ') !important',
+							),
+						)
+					);
+				}
+			}
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Function that scopes a selector with another one. This works a bit like
+	 * SCSS nesting except the `&` operator isn't supported.
+	 *
+	 * <code>
+	 * $scope = '.a, .b .c';
+	 * $selector = '> .x, .y';
+	 * $merged = scope_selector( $scope, $selector );
+	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+	 * </code>
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $scope    Selector to scope to.
+	 * @param string $selector Original selector.
+	 * @return string Scoped selector.
+	 */
+	protected static function scope_selector( $scope, $selector ) {
+		$scopes    = explode( ',', $scope );
+		$selectors = explode( ',', $selector );
+
+		$selectors_scoped = array();
+		foreach ( $scopes as $outer ) {
+			foreach ( $selectors as $inner ) {
+				$outer = trim( $outer );
+				$inner = trim( $inner );
+				if ( ! empty( $outer ) && ! empty( $inner ) ) {
+					$selectors_scoped[] = $outer . ' ' . $inner;
+				} elseif ( empty( $outer ) ) {
+					$selectors_scoped[] = $inner;
+				} elseif ( empty( $inner ) ) {
+					$selectors_scoped[] = $outer;
+				}
+			}
+		}
+
+		$result = implode( ', ', $selectors_scoped );
+		return $result;
+	}
+
+	/**
+	 * Gets preset values keyed by slugs based on settings and metadata.
+	 *
+	 * <code>
+	 * $settings = array(
+	 *     'typography' => array(
+	 *         'fontFamilies' => array(
+	 *             array(
+	 *                 'slug'       => 'sansSerif',
+	 *                 'fontFamily' => '"Helvetica Neue", sans-serif',
+	 *             ),
+	 *             array(
+	 *                 'slug'   => 'serif',
+	 *                 'colors' => 'Georgia, serif',
+	 *             )
+	 *         ),
+	 *     ),
+	 * );
+	 * $meta = array(
+	 *    'path'      => array( 'typography', 'fontFamilies' ),
+	 *    'value_key' => 'fontFamily',
+	 * );
+	 * $values_by_slug = get_settings_values_by_slug();
+	 * // $values_by_slug === array(
+	 * //   'sans-serif' => '"Helvetica Neue", sans-serif',
+	 * //   'serif'      => 'Georgia, serif',
+	 * // );
+	 * </code>
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Settings to process.
+	 * @param array $preset_metadata One of the PRESETS_METADATA values.
+	 * @param array $origins         List of origins to process.
+	 * @return array Array of presets where each key is a slug and each value is the preset value.
+	 */
+	protected static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) {
+		$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
+
+		$result = array();
+		foreach ( $origins as $origin ) {
+			if ( ! isset( $preset_per_origin[ $origin ] ) ) {
+				continue;
+			}
+			foreach ( $preset_per_origin[ $origin ] as $preset ) {
+				$slug = _wp_to_kebab_case( $preset['slug'] );
+
+				$value = '';
+				if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
+					$value_key = $preset_metadata['value_key'];
+					$value     = $preset[ $value_key ];
+				} elseif (
+					isset( $preset_metadata['value_func'] ) &&
+					is_callable( $preset_metadata['value_func'] )
+				) {
+					$value_func = $preset_metadata['value_func'];
+					$value      = call_user_func( $value_func, $preset );
+				} else {
+					// If we don't have a value, then don't add it to the result.
+					continue;
+				}
+
+				$result[ $slug ] = $value;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Similar to get_settings_values_by_slug, but doesn't compute the value.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Settings to process.
+	 * @param array $preset_metadata One of the PRESETS_METADATA values.
+	 * @param array $origins         List of origins to process.
+	 * @return array Array of presets where the key and value are both the slug.
+	 */
+	protected static function get_settings_slugs( $settings, $preset_metadata, $origins = null ) {
+		if ( null === $origins ) {
+			$origins = static::VALID_ORIGINS;
+		}
+
+		$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
+
+		$result = array();
+		foreach ( $origins as $origin ) {
+			if ( ! isset( $preset_per_origin[ $origin ] ) ) {
+				continue;
+			}
+			foreach ( $preset_per_origin[ $origin ] as $preset ) {
+				$slug = _wp_to_kebab_case( $preset['slug'] );
+
+				// Use the array as a set so we don't get duplicates.
+				$result[ $slug ] = $slug;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Transforms a slug into a CSS Custom Property.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $input String to replace.
+	 * @param string $slug  The slug value to use to generate the custom property.
+	 * @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`.
+	 */
+	protected static function replace_slug_in_string( $input, $slug ) {
+		return strtr( $input, array( '$slug' => $slug ) );
+	}
+
+	/**
+	 * Given the block settings, extracts the CSS Custom Properties
+	 * for the presets and adds them to the $declarations array
+	 * following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array $settings Settings to process.
+	 * @param array $origins  List of origins to process.
+	 * @return array The modified $declarations.
+	 */
+	protected static function compute_preset_vars( $settings, $origins ) {
+		$declarations = array();
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			$values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
+			foreach ( $values_by_slug as $slug => $value ) {
+				$declarations[] = array(
+					'name'  => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
+					'value' => $value,
+				);
+			}
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Given an array of settings, extracts the CSS Custom Properties
+	 * for the custom values and adds them to the $declarations
+	 * array following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $settings Settings to process.
+	 * @return array The modified $declarations.
+	 */
+	protected static function compute_theme_vars( $settings ) {
+		$declarations  = array();
+		$custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
+		$css_vars      = static::flatten_tree( $custom_values );
+		foreach ( $css_vars as $key => $value ) {
+			$declarations[] = array(
+				'name'  => '--wp--custom--' . $key,
+				'value' => $value,
+			);
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Given a tree, it creates a flattened one
+	 * by merging the keys and binding the leaf values
+	 * to the new keys.
+	 *
+	 * It also transforms camelCase names into kebab-case
+	 * and substitutes '/' by '-'.
+	 *
+	 * This is thought to be useful to generate
+	 * CSS Custom Properties from a tree,
+	 * although there's nothing in the implementation
+	 * of this function that requires that format.
+	 *
+	 * For example, assuming the given prefix is '--wp'
+	 * and the token is '--', for this input tree:
+	 *
+	 *     {
+	 *       'some/property': 'value',
+	 *       'nestedProperty': {
+	 *         'sub-property': 'value'
+	 *       }
+	 *     }
+	 *
+	 * it'll return this output:
+	 *
+	 *     {
+	 *       '--wp--some-property': 'value',
+	 *       '--wp--nested-property--sub-property': 'value'
+	 *     }
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $tree   Input tree to process.
+	 * @param string $prefix Optional. Prefix to prepend to each variable. Default empty string.
+	 * @param string $token  Optional. Token to use between levels. Default '--'.
+	 * @return array The flattened tree.
+	 */
+	protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
+		$result = array();
+		foreach ( $tree as $property => $value ) {
+			$new_key = $prefix . str_replace(
+				'/',
+				'-',
+				strtolower( _wp_to_kebab_case( $property ) )
+			);
+
+			if ( is_array( $value ) ) {
+				$new_prefix        = $new_key . $token;
+				$flattened_subtree = static::flatten_tree( $value, $new_prefix, $token );
+				foreach ( $flattened_subtree as $subtree_key => $subtree_value ) {
+					$result[ $subtree_key ] = $subtree_value;
+				}
+			} else {
+				$result[ $new_key ] = $value;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Given a styles array, it extracts the style properties
+	 * and adds them to the $declarations array following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$settings` and `$properties` parameters.
+	 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
+	 *
+	 * @param array   $styles Styles to process.
+	 * @param array   $settings Theme settings.
+	 * @param array   $properties Properties metadata.
+	 * @param array   $theme_json Theme JSON array.
+	 * @param string  $selector The style block selector.
+	 * @param boolean $use_root_padding Whether to add custom properties at root level.
+	 * @return array  Returns the modified $declarations.
+	 */
+	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
+		if ( null === $properties ) {
+			$properties = static::PROPERTIES_METADATA;
+		}
+
+		$declarations = array();
+		if ( empty( $styles ) ) {
+			return $declarations;
+		}
+
+		$root_variable_duplicates = array();
+
+		foreach ( $properties as $css_property => $value_path ) {
+			$value = static::get_property_value( $styles, $value_path, $theme_json );
+
+			if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+				continue;
+			}
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
+				continue;
+			}
+
+			if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
+				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+			}
+
+			// Look up protected properties, keyed by value path.
+			// Skip protected properties that are explicitly set to `null`.
+			if ( is_array( $value_path ) ) {
+				$path_string = implode( '.', $value_path );
+				if (
+					// TODO: Replace array_key_exists() with isset() check once WordPress drops
+					// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+					array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
+					_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
+				) {
+					continue;
+				}
+			}
+
+			// Skip if empty and not "0" or value represents array of longhand values.
+			$has_missing_value = empty( $value ) && ! is_numeric( $value );
+			if ( $has_missing_value || is_array( $value ) ) {
+				continue;
+			}
+
+			// Calculates fluid typography rules where available.
+			if ( 'font-size' === $css_property ) {
+				/*
+				 * wp_get_typography_font_size_value() will check
+				 * if fluid typography has been activated and also
+				 * whether the incoming value can be converted to a fluid value.
+				 * Values that already have a clamp() function will not pass the test,
+				 * and therefore the original $value will be returned.
+				 */
+				$value = wp_get_typography_font_size_value( array( 'size' => $value ) );
+			}
+
+			$declarations[] = array(
+				'name'  => $css_property,
+				'value' => $value,
+			);
+		}
+
+		// If a variable value is added to the root, the corresponding property should be removed.
+		foreach ( $root_variable_duplicates as $duplicate ) {
+			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
+			if ( is_numeric( $discard ) ) {
+				array_splice( $declarations, $discard, 1 );
+			}
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Returns the style property for the given path.
+	 *
+	 * It also converts CSS Custom Property stored as
+	 * "var:preset|color|secondary" to the form
+	 * "--wp--preset--color--secondary".
+	 *
+	 * It also converts references to a path to the value
+	 * stored at that location, e.g.
+	 * { "ref": "style.color.background" } => "#fff".
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added support for values of array type, which are returned as is.
+	 * @since 6.1.0 Added the `$theme_json` parameter.
+	 *
+	 * @param array $styles Styles subtree.
+	 * @param array $path   Which property to process.
+	 * @param array $theme_json Theme JSON array.
+	 * @return string|array Style property value.
+	 */
+	protected static function get_property_value( $styles, $path, $theme_json = null ) {
+		$value = _wp_array_get( $styles, $path, '' );
+
+		// Gutenberg didn't have this check.
+		if ( '' === $value || null === $value ) {
+			// No need to process the value further.
+			return '';
+		}
+
+		/*
+		 * This converts references to a path to the value at that path
+		 * where the values is an array with a "ref" key, pointing to a path.
+		 * For example: { "ref": "style.color.background" } => "#fff".
+		 */
+		if ( is_array( $value ) && isset( $value['ref'] ) ) {
+			$value_path = explode( '.', $value['ref'] );
+			$ref_value  = _wp_array_get( $theme_json, $value_path );
+			// Only use the ref value if we find anything.
+			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+				$value = $ref_value;
+			}
+
+			if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) {
+				$path_string      = json_encode( $path );
+				$ref_value_string = json_encode( $ref_value );
+				_doing_it_wrong(
+					'get_property_value',
+					sprintf(
+						/* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
+						__( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.', 'gutenberg' ),
+						'theme.json',
+						$ref_value_string,
+						$path_string,
+						$ref_value['ref']
+					),
+					'6.1.0'
+				);
+			}
+		}
+
+		if ( is_array( $value ) ) {
+			return $value;
+		}
+
+		// Convert custom CSS properties.
+		$prefix     = 'var:';
+		$prefix_len = strlen( $prefix );
+		$token_in   = '|';
+		$token_out  = '--';
+		if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
+			$unwrapped_name = str_replace(
+				$token_in,
+				$token_out,
+				substr( $value, $prefix_len )
+			);
+			$value          = "var(--wp--$unwrapped_name)";
+		}
+
+		return $value;
+	}
+
+	/**
+	 * Builds metadata for the setting nodes, which returns in the form of:
+	 *
+	 *     [
+	 *       [
+	 *         'path'     => ['path', 'to', 'some', 'node' ],
+	 *         'selector' => 'CSS selector for some node'
+	 *       ],
+	 *       [
+	 *         'path'     => [ 'path', 'to', 'other', 'node' ],
+	 *         'selector' => 'CSS selector for other node'
+	 *       ],
+	 *     ]
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $theme_json The tree to extract setting nodes from.
+	 * @param array $selectors  List of selectors per block.
+	 * @return array An array of setting nodes metadata.
+	 */
+	protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
+		$nodes = array();
+		if ( ! isset( $theme_json['settings'] ) ) {
+			return $nodes;
+		}
+
+		// Top-level.
+		$nodes[] = array(
+			'path'     => array( 'settings' ),
+			'selector' => static::ROOT_BLOCK_SELECTOR,
+		);
+
+		// Calculate paths for blocks.
+		if ( ! isset( $theme_json['settings']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
+			$selector = null;
+			if ( isset( $selectors[ $name ]['selector'] ) ) {
+				$selector = $selectors[ $name ]['selector'];
+			}
+
+			$nodes[] = array(
+				'path'     => array( 'settings', 'blocks', $name ),
+				'selector' => $selector,
+			);
+		}
+
+		return $nodes;
+	}
+
+	/**
+	 * Builds metadata for the style nodes, which returns in the form of:
+	 *
+	 *     [
+	 *       [
+	 *         'path'     => [ 'path', 'to', 'some', 'node' ],
+	 *         'selector' => 'CSS selector for some node',
+	 *         'duotone'  => 'CSS selector for duotone for some node'
+	 *       ],
+	 *       [
+	 *         'path'     => ['path', 'to', 'other', 'node' ],
+	 *         'selector' => 'CSS selector for other node',
+	 *         'duotone'  => null
+	 *       ],
+	 *     ]
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $theme_json The tree to extract style nodes from.
+	 * @param array $selectors  List of selectors per block.
+	 * @return array An array of style nodes metadata.
+	 */
+	protected static function get_style_nodes( $theme_json, $selectors = array() ) {
+		$nodes = array();
+		if ( ! isset( $theme_json['styles'] ) ) {
+			return $nodes;
+		}
+
+		// Top-level.
+		$nodes[] = array(
+			'path'     => array( 'styles' ),
+			'selector' => static::ROOT_BLOCK_SELECTOR,
+		);
+
+		if ( isset( $theme_json['styles']['elements'] ) ) {
+			foreach ( self::ELEMENTS as $element => $selector ) {
+				if ( ! isset( $theme_json['styles']['elements'][ $element ] ) || ! array_key_exists( $element, static::ELEMENTS ) ) {
+					continue;
+				}
+
+				// Handle element defaults.
+				$nodes[] = array(
+					'path'     => array( 'styles', 'elements', $element ),
+					'selector' => static::ELEMENTS[ $element ],
+				);
+
+				// Handle any pseudo selectors for the element.
+				// TODO: Replace array_key_exists() with isset() check once WordPress drops
+				// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+				if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+
+						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+							$nodes[] = array(
+								'path'     => array( 'styles', 'elements', $element ),
+								'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
+							);
+						}
+					}
+				}
+			}
+		}
+
+		// Blocks.
+		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		$block_nodes = static::get_block_nodes( $theme_json, $selectors );
+		foreach ( $block_nodes as $block_node ) {
+			$nodes[] = $block_node;
+		}
+
+		/**
+		 * Filters the list of style nodes with metadata.
+		 *
+		 * This allows for things like loading block CSS independently.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param array $nodes Style nodes with metadata.
+		 */
+		return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
+	}
+
+	/**
+	 * A public helper to get the block nodes from a theme.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return array The block nodes in theme.json.
+	 */
+	public function get_styles_block_nodes() {
+		return static::get_block_nodes( $this->theme_json );
+	}
+
+	/**
+	 * Returns a filtered declarations array if there is a separator block with only a background
+	 * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+	 *
+	 * @since 6.1.1
+	 *
+	 * @param array $declarations List of declarations.
+	 * @return array $declarations List of declarations filtered.
+	 */
+	private static function update_separator_declarations( $declarations ) {
+		// Gutenberg and core implementation differed.
+		// https://github.com/WordPress/gutenberg/pull/44943.
+		$background_color     = '';
+		$border_color_matches = false;
+		$text_color_matches   = false;
+
+		foreach ( $declarations as $declaration ) {
+			if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
+				$background_color = $declaration['value'];
+			} elseif ( 'border-color' === $declaration['name'] ) {
+				$border_color_matches = true;
+			} elseif ( 'color' === $declaration['name'] ) {
+				$text_color_matches = true;
+			}
+
+			if ( $background_color && $border_color_matches && $text_color_matches ) {
+				break;
+			}
+		}
+
+		if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
+			$declarations[] = array(
+				'name'  => 'color',
+				'value' => $background_color,
+			);
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * An internal method to get the block nodes from a theme.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param array $theme_json The theme.json converted to an array.
+	 * @param array $selectors  Optional list of selectors per block.
+	 * @return array The block nodes in theme.json.
+	 */
+	private static function get_block_nodes( $theme_json, $selectors = array() ) {
+		$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
+		$nodes     = array();
+		if ( ! isset( $theme_json['styles'] ) ) {
+			return $nodes;
+		}
+
+		// Blocks.
+		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
+			$selector = null;
+			if ( isset( $selectors[ $name ]['selector'] ) ) {
+				$selector = $selectors[ $name ]['selector'];
+			}
+
+			$duotone_selector = null;
+			if ( isset( $selectors[ $name ]['duotone'] ) ) {
+				$duotone_selector = $selectors[ $name ]['duotone'];
+			}
+
+			$feature_selectors = null;
+			if ( isset( $selectors[ $name ]['features'] ) ) {
+				$feature_selectors = $selectors[ $name ]['features'];
+			}
+
+			$nodes[] = array(
+				'name'     => $name,
+				'path'     => array( 'styles', 'blocks', $name ),
+				'selector' => $selector,
+				'duotone'  => $duotone_selector,
+				'features' => $feature_selectors,
+			);
+
+			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
+				foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
+					$nodes[] = array(
+						'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+						'selector' => $selectors[ $name ]['elements'][ $element ],
+					);
+
+					// Handle any pseudo selectors for the element.
+					// TODO: Replace array_key_exists() with isset() check once WordPress drops
+					// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+								$nodes[] = array(
+									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+									'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
+								);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		return $nodes;
+	}
+
+	/**
+	 * Gets the CSS rules for a particular block from theme.json.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param array $block_metadata Metadata about the block to get styles for.
+	 *
+	 * @return string Styles for the block.
+	 */
+	public function get_styles_for_block( $block_metadata ) {
+		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
+		$selector         = $block_metadata['selector'];
+		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
+
+		/*
+		 * Process style declarations for block support features the current
+		 * block contains selectors for. Values for a feature with a custom
+		 * selector are filtered from the theme.json node before it is
+		 * processed as normal.
+		*/
+		$feature_declarations = array();
+
+		if ( ! empty( $block_metadata['features'] ) ) {
+			foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
+				if ( ! empty( $node[ $feature_name ] ) ) {
+					// Create temporary node containing only the feature data
+					// to leverage existing `compute_style_properties` function.
+					$feature = array( $feature_name => $node[ $feature_name ] );
+					// Generate the feature's declarations only.
+					$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
+
+					// Merge new declarations with any that already exist for
+					// the feature selector. This may occur when multiple block
+					// support features use the same custom selector.
+					if ( isset( $feature_declarations[ $feature_selector ] ) ) {
+						foreach ( $new_feature_declarations as $new_feature_declaration ) {
+							$feature_declarations[ $feature_selector ][] = $new_feature_declaration;
+						}
+					} else {
+						$feature_declarations[ $feature_selector ] = $new_feature_declarations;
+					}
+
+					// Remove the feature from the block's node now the
+					// styles will be included under the feature level selector.
+					unset( $node[ $feature_name ] );
+				}
+			}
+		}
+
+		/*
+		 * Get a reference to element name from path.
+		 * $block_metadata['path'] = array( 'styles','elements','link' );
+		 * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
+		 * Skip non-element paths like just ['styles'].
+		 */
+		$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
+
+		$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
+
+		$element_pseudo_allowed = array();
+
+		// TODO: Replace array_key_exists() with isset() check once WordPress drops
+		// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+		if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+			$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
+		}
+
+		/*
+		 * Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
+		 * This also resets the array keys.
+		 */
+		$pseudo_matches = array_values(
+			array_filter(
+				$element_pseudo_allowed,
+				function( $pseudo_selector ) use ( $selector ) {
+					return str_contains( $selector, $pseudo_selector );
+				}
+			)
+		);
+
+		$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
+
+		/*
+		 * If the current selector is a pseudo selector that's defined in the allow list for the current
+		 * element then compute the style properties for it.
+		 * Otherwise just compute the styles for the default selector as normal.
+		 */
+		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
+			&& in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
+		) {
+			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
+		} else {
+			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
+		}
+
+		$block_rules = '';
+
+		/*
+		 * 1. Separate the declarations that use the general selector
+		 * from the ones using the duotone selector.
+		 */
+		$declarations_duotone = array();
+		foreach ( $declarations as $index => $declaration ) {
+			if ( 'filter' === $declaration['name'] ) {
+				unset( $declarations[ $index ] );
+				$declarations_duotone[] = $declaration;
+			}
+		}
+
+		// Update declarations if there are separators with only background color defined.
+		if ( '.wp-block-separator' === $selector ) {
+			$declarations = static::update_separator_declarations( $declarations );
+		}
+
+		// 2. Generate and append the rules that use the general selector.
+		$block_rules .= static::to_ruleset( $selector, $declarations );
+
+		// 3. Generate and append the rules that use the duotone selector.
+		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
+			$selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
+			$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
+		}
+
+		// 4. Generate Layout block gap styles.
+		if (
+			static::ROOT_BLOCK_SELECTOR !== $selector &&
+			! empty( $block_metadata['name'] )
+		) {
+			$block_rules .= $this->get_layout_styles( $block_metadata );
+		}
+
+		// 5. Generate and append the feature level rulesets.
+		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
+			$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
+		}
+
+		return $block_rules;
+	}
+
+	/**
+	 * Outputs the CSS for layout rules on the root.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $selector The root node selector.
+	 * @param array  $block_metadata The metadata for the root block.
+	 * @return string The additional root rules CSS.
+	 */
+	public function get_root_layout_rules( $selector, $block_metadata ) {
+		$css              = '';
+		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
 		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
 
 		/*
@@ -960,413 +2324,836 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 		*/
 		$css .= 'body { margin: 0;';
 
-		/*
-		* If there are content and wide widths in theme.json, output them
-		* as custom properties on the body element so all blocks can use them.
-		*/
-		if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
-			$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
-			$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
-			$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
-			$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
-			$css         .= '--wp--style--global--content-size: ' . $content_size . ';';
-			$css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
+		/*
+		* If there are content and wide widths in theme.json, output them
+		* as custom properties on the body element so all blocks can use them.
+		*/
+		if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
+			$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
+			$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
+			$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
+			$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
+			$css         .= '--wp--style--global--content-size: ' . $content_size . ';';
+			$css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
+		}
+
+		$css .= '}';
+
+		if ( $use_root_padding ) {
+			// Top and bottom padding are applied to the outer block container.
+			$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
+			// Right and left padding are applied to the first container with `.has-global-padding` class.
+			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			// Nested containers with `.has-global-padding` class do not get padding.
+			$css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
+			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
+			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
+			// The above rule is negated for alignfull children of nested containers.
+			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
+			// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
+			$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
+			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+		}
+
+		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+		$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+		$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+		$block_gap_value       = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
+		$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+		if ( $has_block_gap_support ) {
+			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
+			$css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+			$css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
+
+			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+			$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+		}
+		$css .= $this->get_layout_styles( $block_metadata );
+
+		return $css;
+	}
+
+	/**
+	 * For metadata values that can either be booleans or paths to booleans, gets the value.
+	 *
+	 * ```php
+	 * $data = array(
+	 *   'color' => array(
+	 *     'defaultPalette' => true
+	 *   )
+	 * );
+	 *
+	 * static::get_metadata_boolean( $data, false );
+	 * // => false
+	 *
+	 * static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
+	 * // => true
+	 * ```
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param array      $data    The data to inspect.
+	 * @param bool|array $path    Boolean or path to a boolean.
+	 * @param bool       $default Default value if the referenced path is missing.
+	 *                            Default false.
+	 * @return bool Value of boolean metadata.
+	 */
+	protected static function get_metadata_boolean( $data, $path, $default = false ) {
+		if ( is_bool( $path ) ) {
+			return $path;
+		}
+
+		if ( is_array( $path ) ) {
+			$value = _wp_array_get( $data, $path );
+			if ( null !== $value ) {
+				return $value;
+			}
+		}
+
+		return $default;
+	}
+
+	/**
+	 * Merges new incoming data.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Duotone preset also has origins.
+	 *
+	 * @param WP_Theme_JSON $incoming Data to merge.
+	 */
+	public function merge( $incoming ) {
+		$incoming_data    = $incoming->get_raw_data();
+		$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
+
+		/*
+		 * The array_replace_recursive algorithm merges at the leaf level,
+		 * but we don't want leaf arrays to be merged, so we overwrite it.
+		 *
+		 * For leaf values that are sequential arrays it will use the numeric indexes for replacement.
+		 * We rather replace the existing with the incoming value, if it exists.
+		 * This is the case of spacing.units.
+		 *
+		 * For leaf values that are associative arrays it will merge them as expected.
+		 * This is also not the behavior we want for the current associative arrays (presets).
+		 * We rather replace the existing with the incoming value, if it exists.
+		 * This happens, for example, when we merge data from theme.json upon existing
+		 * theme supports or when we merge anything coming from the same source twice.
+		 * This is the case of color.palette, color.gradients, color.duotone,
+		 * typography.fontSizes, or typography.fontFamilies.
+		 *
+		 * Additionally, for some preset types, we also want to make sure the
+		 * values they introduce don't conflict with default values. We do so
+		 * by checking the incoming slugs for theme presets and compare them
+		 * with the equivalent default presets: if a slug is present as a default
+		 * we remove it from the theme presets.
+		 */
+		$nodes        = static::get_setting_nodes( $incoming_data );
+		$slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
+		foreach ( $nodes as $node ) {
+			// Replace the spacing.units.
+			$path   = $node['path'];
+			$path[] = 'spacing';
+			$path[] = 'units';
+
+			$content = _wp_array_get( $incoming_data, $path, null );
+			if ( isset( $content ) ) {
+				_wp_array_set( $this->theme_json, $path, $content );
+			}
+
+			// Replace the presets.
+			foreach ( static::PRESETS_METADATA as $preset ) {
+				$override_preset = ! static::get_metadata_boolean( $this->theme_json['settings'], $preset['prevent_override'], true );
+
+				foreach ( static::VALID_ORIGINS as $origin ) {
+					$base_path = $node['path'];
+					foreach ( $preset['path'] as $leaf ) {
+						$base_path[] = $leaf;
+					}
+
+					$path   = $base_path;
+					$path[] = $origin;
+
+					$content = _wp_array_get( $incoming_data, $path, null );
+					if ( ! isset( $content ) ) {
+						continue;
+					}
+
+					if ( 'theme' === $origin && $preset['use_default_names'] ) {
+						foreach ( $content as $key => $item ) {
+							if ( ! isset( $item['name'] ) ) {
+								$name = static::get_name_from_defaults( $item['slug'], $base_path );
+								if ( null !== $name ) {
+									$content[ $key ]['name'] = $name;
+								}
+							}
+						}
+					}
+
+					if (
+						( 'theme' !== $origin ) ||
+						( 'theme' === $origin && $override_preset )
+					) {
+						_wp_array_set( $this->theme_json, $path, $content );
+					} else {
+						$slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
+						$slugs      = array_merge_recursive( $slugs_global, $slugs_node );
+
+						$slugs_for_preset = _wp_array_get( $slugs, $preset['path'], array() );
+						$content          = static::filter_slugs( $content, $slugs_for_preset );
+						_wp_array_set( $this->theme_json, $path, $content );
+					}
+				}
+			}
 		}
+	}
 
-		$css .= '}';
+	/**
+	 * Converts all filter (duotone) presets into SVGs.
+	 *
+	 * @since 5.9.1
+	 *
+	 * @param array $origins List of origins to process.
+	 * @return string SVG filters.
+	 */
+	public function get_svg_filters( $origins ) {
+		$blocks_metadata = static::get_blocks_metadata();
+		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
 
-		if ( $use_root_padding ) {
-			// Top and bottom padding are applied to the outer block container.
-			$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
-			// Right and left padding are applied to the first container with `.has-global-padding` class.
-			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// Nested containers with `.has-global-padding` class do not get padding.
-			$css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
-			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
-			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-			// The above rule is negated for alignfull children of nested containers.
-			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
-			// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
-			$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
-			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+		$filters = '';
+		foreach ( $setting_nodes as $metadata ) {
+			$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			if ( empty( $node['color']['duotone'] ) ) {
+				continue;
+			}
+
+			$duotone_presets = $node['color']['duotone'];
+
+			foreach ( $origins as $origin ) {
+				if ( ! isset( $duotone_presets[ $origin ] ) ) {
+					continue;
+				}
+				foreach ( $duotone_presets[ $origin ] as $duotone_preset ) {
+					$filters .= wp_get_duotone_filter_svg( $duotone_preset );
+				}
+			}
 		}
 
-		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-		$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-		$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		return $filters;
+	}
 
-		$block_gap_value       = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
-		$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-		if ( $has_block_gap_support ) {
-			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
-			$css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-			$css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
+	/**
+	 * Determines whether a presets should be overridden or not.
+	 *
+	 * @since 5.9.0
+	 * @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
+	 *
+	 * @param array      $theme_json The theme.json like structure to inspect.
+	 * @param array      $path       Path to inspect.
+	 * @param bool|array $override   Data to compute whether to override the preset.
+	 * @return boolean
+	 */
+	protected static function should_override_preset( $theme_json, $path, $override ) {
+		_deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
 
-			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-			$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+		if ( is_bool( $override ) ) {
+			return $override;
 		}
-		$css .= $this->get_layout_styles( $block_metadata );
 
-		return $css;
+		/*
+		 * The relationship between whether to override the defaults
+		 * and whether the defaults are enabled is inverse:
+		 *
+		 * - If defaults are enabled  => theme presets should not be overridden
+		 * - If defaults are disabled => theme presets should be overridden
+		 *
+		 * For example, a theme sets defaultPalette to false,
+		 * making the default palette hidden from the user.
+		 * In that case, we want all the theme presets to be present,
+		 * so they should override the defaults.
+		 */
+		if ( is_array( $override ) ) {
+			$value = _wp_array_get( $theme_json, array_merge( $path, $override ) );
+			if ( isset( $value ) ) {
+				return ! $value;
+			}
+
+			// Search the top-level key if none was found for this node.
+			$value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) );
+			if ( isset( $value ) ) {
+				return ! $value;
+			}
+
+			return true;
+		}
 	}
 
 	/**
-	 * Converts each style section into a list of rulesets
-	 * containing the block styles to be appended to the stylesheet.
+	 * Returns the default slugs for all the presets in an associative array
+	 * whose keys are the preset paths and the leafs is the list of slugs.
 	 *
-	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 * For example:
 	 *
-	 * For each section this creates a new ruleset such as:
+	 *  array(
+	 *   'color' => array(
+	 *     'palette'   => array( 'slug-1', 'slug-2' ),
+	 *     'gradients' => array( 'slug-3', 'slug-4' ),
+	 *   ),
+	 * )
 	 *
-	 *   block-selector {
-	 *     style-property-one: value;
-	 *   }
+	 * @since 5.9.0
 	 *
-	 * @param array $style_nodes Nodes with styles.
-	 * @return string The new stylesheet.
+	 * @param array $data      A theme.json like structure.
+	 * @param array $node_path The path to inspect. It's 'settings' by default.
+	 * @return array
 	 */
-	protected function get_block_classes( $style_nodes ) {
-		$block_rules = '';
+	protected static function get_default_slugs( $data, $node_path ) {
+		$slugs = array();
 
-		foreach ( $style_nodes as $metadata ) {
-			if ( null === $metadata['selector'] ) {
+		foreach ( static::PRESETS_METADATA as $metadata ) {
+			$path = $node_path;
+			foreach ( $metadata['path'] as $leaf ) {
+				$path[] = $leaf;
+			}
+			$path[] = 'default';
+
+			$preset = _wp_array_get( $data, $path, null );
+			if ( ! isset( $preset ) ) {
 				continue;
 			}
-			$block_rules .= static::get_styles_for_block( $metadata );
+
+			$slugs_for_preset = array();
+			foreach ( $preset as $item ) {
+				if ( isset( $item['slug'] ) ) {
+					$slugs_for_preset[] = $item['slug'];
+				}
+			}
+
+			_wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
 		}
 
-		return $block_rules;
+		return $slugs;
 	}
 
 	/**
-	 * Given a styles array, it extracts the style properties
-	 * and adds them to the $declarations array following the format:
+	 * Gets a `default`'s preset name by a provided slug.
 	 *
-	 * ```php
-	 * array(
-	 *   'name'  => 'property_name',
-	 *   'value' => 'property_value,
-	 * )
-	 * ```
+	 * @since 5.9.0
 	 *
-	 * @param array   $styles Styles to process.
-	 * @param array   $settings Theme settings.
-	 * @param array   $properties Properties metadata.
-	 * @param array   $theme_json Theme JSON array.
-	 * @param string  $selector The style block selector.
-	 * @param boolean $use_root_padding Whether to add custom properties at root level.
-	 * @return array  Returns the modified $declarations.
+	 * @param string $slug The slug we want to find a match from default presets.
+	 * @param array  $base_path The path to inspect. It's 'settings' by default.
+	 * @return string|null
 	 */
-	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
-		if ( null === $properties ) {
-			$properties = static::PROPERTIES_METADATA;
+	protected function get_name_from_defaults( $slug, $base_path ) {
+		$path            = $base_path;
+		$path[]          = 'default';
+		$default_content = _wp_array_get( $this->theme_json, $path, null );
+		if ( ! $default_content ) {
+			return null;
+		}
+		foreach ( $default_content as $item ) {
+			if ( $slug === $item['slug'] ) {
+				return $item['name'];
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * Removes the preset values whose slug is equal to any of given slugs.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $node  The node with the presets to validate.
+	 * @param array $slugs The slugs that should not be overridden.
+	 * @return array The new node.
+	 */
+	protected static function filter_slugs( $node, $slugs ) {
+		if ( empty( $slugs ) ) {
+			return $node;
 		}
 
-		$declarations = array();
-		if ( empty( $styles ) ) {
-			return $declarations;
+		$new_node = array();
+		foreach ( $node as $value ) {
+			if ( isset( $value['slug'] ) && ! in_array( $value['slug'], $slugs, true ) ) {
+				$new_node[] = $value;
+			}
 		}
 
-		$root_variable_duplicates = array();
+		return $new_node;
+	}
 
-		foreach ( $properties as $css_property => $value_path ) {
-			$value = static::get_property_value( $styles, $value_path, $theme_json );
+	/**
+	 * Removes insecure data from theme.json.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $theme_json Structure to sanitize.
+	 * @return array Sanitized structure.
+	 */
+	public static function remove_insecure_properties( $theme_json ) {
+		$sanitized = array();
 
-			if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+		$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+
+		$valid_block_names   = array_keys( static::get_blocks_metadata() );
+		$valid_element_names = array_keys( static::ELEMENTS );
+
+		$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
+
+		$blocks_metadata = static::get_blocks_metadata();
+		$style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
+
+		foreach ( $style_nodes as $metadata ) {
+			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
+			if ( empty( $input ) ) {
 				continue;
 			}
-			// Root-level padding styles don't currently support strings with CSS shorthand values.
-			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
-			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
+
+			$output = static::remove_insecure_styles( $input );
+
+			/*
+			 * Get a reference to element name from path.
+			 * $metadata['path'] = array( 'styles', 'elements', 'link' );
+			 */
+			$current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
+
+			/*
+			 * $output is stripped of pseudo selectors. Re-add and process them
+			 * or insecure styles here.
+			 */
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
+					if ( isset( $input[ $pseudo_selector ] ) ) {
+						$output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
+					}
+				}
+			}
+
+			if ( ! empty( $output ) ) {
+				_wp_array_set( $sanitized, $metadata['path'], $output );
+			}
+		}
+
+		$setting_nodes = static::get_setting_nodes( $theme_json );
+		foreach ( $setting_nodes as $metadata ) {
+			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
+			if ( empty( $input ) ) {
 				continue;
 			}
 
-			if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
-				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+			$output = static::remove_insecure_settings( $input );
+			if ( ! empty( $output ) ) {
+				_wp_array_set( $sanitized, $metadata['path'], $output );
 			}
+		}
 
-			// Look up protected properties, keyed by value path.
-			// Skip protected properties that are explicitly set to `null`.
-			if ( is_array( $value_path ) ) {
-				$path_string = implode( '.', $value_path );
-				if (
-					array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
-					_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
-				) {
+		if ( empty( $sanitized['styles'] ) ) {
+			unset( $theme_json['styles'] );
+		} else {
+			$theme_json['styles'] = $sanitized['styles'];
+		}
+
+		if ( empty( $sanitized['settings'] ) ) {
+			unset( $theme_json['settings'] );
+		} else {
+			$theme_json['settings'] = $sanitized['settings'];
+		}
+
+		return $theme_json;
+	}
+
+	/**
+	 * Processes a setting node and returns the same node
+	 * without the insecure settings.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $input Node to process.
+	 * @return array
+	 */
+	protected static function remove_insecure_settings( $input ) {
+		$output = array();
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			foreach ( static::VALID_ORIGINS as $origin ) {
+				$path_with_origin   = $preset_metadata['path'];
+				$path_with_origin[] = $origin;
+				$presets            = _wp_array_get( $input, $path_with_origin, null );
+				if ( null === $presets ) {
 					continue;
 				}
-			}
 
-			// Skip if empty and not "0" or value represents array of longhand values.
-			$has_missing_value = empty( $value ) && ! is_numeric( $value );
-			if ( $has_missing_value || is_array( $value ) ) {
-				continue;
-			}
+				$escaped_preset = array();
+				foreach ( $presets as $preset ) {
+					if (
+						esc_attr( esc_html( $preset['name'] ) ) === $preset['name'] &&
+						sanitize_html_class( $preset['slug'] ) === $preset['slug']
+					) {
+						$value = null;
+						if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
+							$value = $preset[ $preset_metadata['value_key'] ];
+						} elseif (
+							isset( $preset_metadata['value_func'] ) &&
+							is_callable( $preset_metadata['value_func'] )
+						) {
+							$value = call_user_func( $preset_metadata['value_func'], $preset );
+						}
 
-			// Calculates fluid typography rules where available.
-			if ( 'font-size' === $css_property ) {
-				/*
-				 * gutenberg_get_typography_font_size_value() will check
-				 * if fluid typography has been activated and also
-				 * whether the incoming value can be converted to a fluid value.
-				 * Values that already have a "clamp()" function will not pass the test,
-				 * and therefore the original $value will be returned.
-				 */
-				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
+						$preset_is_valid = true;
+						foreach ( $preset_metadata['properties'] as $property ) {
+							if ( ! static::is_safe_css_declaration( $property, $value ) ) {
+								$preset_is_valid = false;
+								break;
+							}
+						}
+
+						if ( $preset_is_valid ) {
+							$escaped_preset[] = $preset;
+						}
+					}
+				}
+
+				if ( ! empty( $escaped_preset ) ) {
+					_wp_array_set( $output, $path_with_origin, $escaped_preset );
+				}
 			}
+		}
+		return $output;
+	}
 
-			$declarations[] = array(
-				'name'  => $css_property,
-				'value' => $value,
-			);
+	/**
+	 * Processes a style node and returns the same node
+	 * without the insecure styles.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Allow indirect properties used outside of `compute_style_properties`.
+	 *
+	 * @param array $input Node to process.
+	 * @return array
+	 */
+	protected static function remove_insecure_styles( $input ) {
+		$output       = array();
+		$declarations = static::compute_style_properties( $input );
+
+		foreach ( $declarations as $declaration ) {
+			if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
+				$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
+
+				// Check the value isn't an array before adding so as to not
+				// double up shorthand and longhand styles.
+				$value = _wp_array_get( $input, $path, array() );
+				if ( ! is_array( $value ) ) {
+					_wp_array_set( $output, $path, $value );
+				}
+			}
 		}
 
-		// If a variable value is added to the root, the corresponding property should be removed.
-		foreach ( $root_variable_duplicates as $duplicate ) {
-			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
-			if ( is_numeric( $discard ) ) {
-				array_splice( $declarations, $discard, 1 );
+		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $path ) {
+			$value = _wp_array_get( $input, $path, array() );
+			if (
+				isset( $value ) &&
+				! is_array( $value ) &&
+				static::is_safe_css_declaration( $property, $value )
+			) {
+				_wp_array_set( $output, $path, $value );
 			}
 		}
 
-		return $declarations;
+		return $output;
 	}
 
 	/**
-	 * Returns the style property for the given path.
+	 * Checks that a declaration provided by the user is safe.
 	 *
-	 * It also converts CSS Custom Property stored as
-	 * "var:preset|color|secondary" to the form
-	 * "--wp--preset--color--secondary".
+	 * @since 5.9.0
 	 *
-	 * It also converts references to a path to the value
-	 * stored at that location, e.g.
-	 * { "ref": "style.color.background" } => "#fff".
+	 * @param string $property_name  Property name in a CSS declaration, i.e. the `color` in `color: red`.
+	 * @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`.
+	 * @return bool
+	 */
+	protected static function is_safe_css_declaration( $property_name, $property_value ) {
+		$style_to_validate = $property_name . ': ' . $property_value;
+		$filtered          = esc_html( safecss_filter_attr( $style_to_validate ) );
+		return ! empty( trim( $filtered ) );
+	}
+
+	/**
+	 * Returns the raw data.
 	 *
-	 * @param array $styles Styles subtree.
-	 * @param array $path   Which property to process.
-	 * @param array $theme_json Theme JSON array.
-	 * @return string|array|null Style property value.
+	 * @since 5.8.0
+	 *
+	 * @return array Raw data.
 	 */
-	protected static function get_property_value( $styles, $path, $theme_json = null ) {
-		$value = _wp_array_get( $styles, $path );
+	public function get_raw_data() {
+		return $this->theme_json;
+	}
 
-		// This converts references to a path to the value at that path
-		// where the values is an array with a "ref" key, pointing to a path.
-		// For example: { "ref": "style.color.background" } => "#fff".
-		if ( is_array( $value ) && array_key_exists( 'ref', $value ) ) {
-			$value_path = explode( '.', $value['ref'] );
-			$ref_value  = _wp_array_get( $theme_json, $value_path );
-			// Only use the ref value if we find anything.
-			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
-				$value = $ref_value;
+	/**
+	 * Transforms the given editor settings according the
+	 * add_theme_support format to the theme.json format.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $settings Existing editor settings.
+	 * @return array Config that adheres to the theme.json schema.
+	 */
+	public static function get_from_editor_settings( $settings ) {
+		$theme_settings = array(
+			'version'  => static::LATEST_SCHEMA,
+			'settings' => array(),
+		);
+
+		// Deprecated theme supports.
+		if ( isset( $settings['disableCustomColors'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
 			}
+			$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
+		}
 
-			if ( is_array( $ref_value ) && array_key_exists( 'ref', $ref_value ) ) {
-				$path_string      = json_encode( $path );
-				$ref_value_string = json_encode( $ref_value );
-				_doing_it_wrong( 'get_property_value', "Your theme.json file uses a dynamic value ({$ref_value_string}) for the path at {$path_string}. However, the value at {$path_string} is also a dynamic value (pointing to {$ref_value['ref']}) and pointing to another dynamic value is not supported. Please update {$path_string} to point directly to {$ref_value['ref']}.", '6.1.0' );
+		if ( isset( $settings['disableCustomGradients'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
 			}
+			$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
 		}
 
-		if ( ! $value || is_array( $value ) ) {
-			return $value;
+		if ( isset( $settings['disableCustomFontSizes'] ) ) {
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
 		}
 
-		// Convert custom CSS properties.
-		$prefix     = 'var:';
-		$prefix_len = strlen( $prefix );
-		$token_in   = '|';
-		$token_out  = '--';
-		if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
-			$unwrapped_name = str_replace(
-				$token_in,
-				$token_out,
-				substr( $value, $prefix_len )
-			);
-			$value          = "var(--wp--$unwrapped_name)";
+		if ( isset( $settings['enableCustomLineHeight'] ) ) {
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
 		}
 
-		return $value;
+		if ( isset( $settings['enableCustomUnits'] ) ) {
+			if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
+				$theme_settings['settings']['spacing'] = array();
+			}
+			$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
+				array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
+				$settings['enableCustomUnits'];
+		}
+
+		if ( isset( $settings['colors'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
+			}
+			$theme_settings['settings']['color']['palette'] = $settings['colors'];
+		}
+
+		if ( isset( $settings['gradients'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
+			}
+			$theme_settings['settings']['color']['gradients'] = $settings['gradients'];
+		}
+
+		if ( isset( $settings['fontSizes'] ) ) {
+			$font_sizes = $settings['fontSizes'];
+			// Back-compatibility for presets without units.
+			foreach ( $font_sizes as $key => $font_size ) {
+				if ( is_numeric( $font_size['size'] ) ) {
+					$font_sizes[ $key ]['size'] = $font_size['size'] . 'px';
+				}
+			}
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
+		}
+
+		if ( isset( $settings['enableCustomSpacing'] ) ) {
+			if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
+				$theme_settings['settings']['spacing'] = array();
+			}
+			$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
+		}
+
+		return $theme_settings;
 	}
 
 	/**
-	 * Presets are a set of values that serve
-	 * to bootstrap some styles: colors, font sizes, etc.
-	 *
-	 * They are a unkeyed array of values such as:
-	 *
-	 * ```php
-	 * array(
-	 *   array(
-	 *     'slug'      => 'unique-name-within-the-set',
-	 *     'name'      => 'Name for the UI',
-	 *     <value_key> => 'value'
-	 *   ),
-	 * )
-	 * ```
+	 * Returns the current theme's wanted patterns(slugs) to be
+	 * registered from Pattern Directory.
 	 *
-	 * This contains the necessary metadata to process them:
+	 * @since 6.0.0
 	 *
-	 * - path             => Where to find the preset within the settings section.
-	 * - prevent_override => Disables override of default presets by theme presets.
-	 *                       The relationship between whether to override the defaults
-	 *                       and whether the defaults are enabled is inverse:
-	 *                         - If defaults are enabled  => theme presets should not be overridden
-	 *                         - If defaults are disabled => theme presets should be overridden
-	 *                       For example, a theme sets defaultPalette to false,
-	 *                       making the default palette hidden from the user.
-	 *                       In that case, we want all the theme presets to be present,
-	 *                       so they should override the defaults by setting this false.
-	 * - use_default_names => whether to use the default names
-	 * - value_key        => the key that represents the value
-	 * - value_func       => optionally, instead of value_key, a function to generate
-	 *                       the value that takes a preset as an argument
-	 *                       (either value_key or value_func should be present)
-	 * - css_vars         => template string to use in generating the CSS Custom Property.
-	 *                       Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
-	 *                       substituting the $slug for the slug's value for each preset value.
-	 * - classes          => array containing a structure with the classes to
-	 *                       generate for the presets, where for each array item
-	 *                       the key is the class name and the value the property name.
-	 *                       The "$slug" substring will be replaced by the slug of each preset.
-	 *                       For example:
-	 *                       'classes' => array(
-	 *                         '.has-$slug-color'            => 'color',
-	 *                         '.has-$slug-background-color' => 'background-color',
-	 *                         '.has-$slug-border-color'     => 'border-color',
-	 *                       )
-	 * - properties       => array of CSS properties to be used by kses to
-	 *                       validate the content of each preset
-	 *                       by means of the remove_insecure_properties method.
+	 * @return string[]
 	 */
-	const PRESETS_METADATA = array(
-		array(
-			'path'              => array( 'color', 'palette' ),
-			'prevent_override'  => array( 'color', 'defaultPalette' ),
-			'use_default_names' => false,
-			'value_key'         => 'color',
-			'css_vars'          => '--wp--preset--color--$slug',
-			'classes'           => array(
-				'.has-$slug-color'            => 'color',
-				'.has-$slug-background-color' => 'background-color',
-				'.has-$slug-border-color'     => 'border-color',
-			),
-			'properties'        => array( 'color', 'background-color', 'border-color' ),
-		),
-		array(
-			'path'              => array( 'color', 'gradients' ),
-			'prevent_override'  => array( 'color', 'defaultGradients' ),
-			'use_default_names' => false,
-			'value_key'         => 'gradient',
-			'css_vars'          => '--wp--preset--gradient--$slug',
-			'classes'           => array( '.has-$slug-gradient-background' => 'background' ),
-			'properties'        => array( 'background' ),
-		),
-		array(
-			'path'              => array( 'color', 'duotone' ),
-			'prevent_override'  => array( 'color', 'defaultDuotone' ),
-			'use_default_names' => false,
-			'value_func'        => 'gutenberg_get_duotone_filter_property',
-			'css_vars'          => '--wp--preset--duotone--$slug',
-			'classes'           => array(),
-			'properties'        => array( 'filter' ),
-		),
-		array(
-			'path'              => array( 'typography', 'fontSizes' ),
-			'prevent_override'  => false,
-			'use_default_names' => true,
-			'value_func'        => 'gutenberg_get_typography_font_size_value',
-			'css_vars'          => '--wp--preset--font-size--$slug',
-			'classes'           => array( '.has-$slug-font-size' => 'font-size' ),
-			'properties'        => array( 'font-size' ),
-		),
-		array(
-			'path'              => array( 'typography', 'fontFamilies' ),
-			'prevent_override'  => false,
-			'use_default_names' => false,
-			'value_key'         => 'fontFamily',
-			'css_vars'          => '--wp--preset--font-family--$slug',
-			'classes'           => array( '.has-$slug-font-family' => 'font-family' ),
-			'properties'        => array( 'font-family' ),
-		),
-		array(
-			'path'              => array( 'spacing', 'spacingSizes' ),
-			'prevent_override'  => false,
-			'use_default_names' => true,
-			'value_key'         => 'size',
-			'css_vars'          => '--wp--preset--spacing--$slug',
-			'classes'           => array(),
-			'properties'        => array( 'padding', 'margin' ),
-		),
-	);
+	public function get_patterns() {
+		if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
+			return $this->theme_json['patterns'];
+		}
+		return array();
+	}
 
 	/**
-	 * The valid properties under the settings key.
+	 * Returns a valid theme.json as provided by a theme.
 	 *
-	 * @var array
+	 * Unlike get_raw_data() this returns the presets flattened, as provided by a theme.
+	 * This also uses appearanceTools instead of their opt-ins if all of them are true.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return array
 	 */
-	const VALID_SETTINGS = array(
-		'appearanceTools'               => null,
-		'useRootPaddingAwareAlignments' => null,
-		'border'                        => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-		),
-		'color'                         => array(
-			'background'       => null,
-			'custom'           => null,
-			'customDuotone'    => null,
-			'customGradient'   => null,
-			'defaultDuotone'   => null,
-			'defaultGradients' => null,
-			'defaultPalette'   => null,
-			'duotone'          => null,
-			'gradients'        => null,
-			'link'             => null,
-			'palette'          => null,
-			'text'             => null,
-		),
-		'custom'                        => null,
-		'layout'                        => array(
-			'contentSize' => null,
-			'definitions' => null,
-			'wideSize'    => null,
-		),
-		'spacing'                       => array(
-			'customSpacingSize' => null,
-			'spacingSizes'      => null,
-			'spacingScale'      => null,
-			'blockGap'          => null,
-			'margin'            => null,
-			'padding'           => null,
-			'units'             => null,
-		),
-		'typography'                    => array(
-			'fluid'          => null,
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-	);
+	public function get_data() {
+		$output = $this->theme_json;
+		$nodes  = static::get_setting_nodes( $output );
+
+		/**
+		 * Flatten the theme & custom origins into a single one.
+		 *
+		 * For example, the following:
+		 *
+		 * {
+		 *   "settings": {
+		 *     "color": {
+		 *       "palette": {
+		 *         "theme": [ {} ],
+		 *         "custom": [ {} ]
+		 *       }
+		 *     }
+		 *   }
+		 * }
+		 *
+		 * will be converted to:
+		 *
+		 * {
+		 *   "settings": {
+		 *     "color": {
+		 *       "palette": [ {} ]
+		 *     }
+		 *   }
+		 * }
+		 */
+		foreach ( $nodes as $node ) {
+			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+				$path = $node['path'];
+				foreach ( $preset_metadata['path'] as $preset_metadata_path ) {
+					$path[] = $preset_metadata_path;
+				}
+				$preset = _wp_array_get( $output, $path, null );
+				if ( null === $preset ) {
+					continue;
+				}
+
+				$items = array();
+				if ( isset( $preset['theme'] ) ) {
+					foreach ( $preset['theme'] as $item ) {
+						$slug = $item['slug'];
+						unset( $item['slug'] );
+						$items[ $slug ] = $item;
+					}
+				}
+				if ( isset( $preset['custom'] ) ) {
+					foreach ( $preset['custom'] as $item ) {
+						$slug = $item['slug'];
+						unset( $item['slug'] );
+						$items[ $slug ] = $item;
+					}
+				}
+				$flattened_preset = array();
+				foreach ( $items as $slug => $value ) {
+					$flattened_preset[] = array_merge( array( 'slug' => (string) $slug ), $value );
+				}
+				_wp_array_set( $output, $path, $flattened_preset );
+			}
+		}
+
+		// If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
+		// this code unsets them and sets 'appearanceTools' instead.
+		foreach ( $nodes as $node ) {
+			$all_opt_ins_are_set = true;
+			foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
+				$full_path = $node['path'];
+				foreach ( $opt_in_path as $opt_in_path_item ) {
+					$full_path[] = $opt_in_path_item;
+				}
+				// Use "unset prop" as a marker instead of "null" because
+				// "null" can be a valid value for some props (e.g. blockGap).
+				$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
+				if ( 'unset prop' === $opt_in_value ) {
+					$all_opt_ins_are_set = false;
+					break;
+				}
+			}
+
+			if ( $all_opt_ins_are_set ) {
+				$node_path_with_appearance_tools   = $node['path'];
+				$node_path_with_appearance_tools[] = 'appearanceTools';
+				_wp_array_set( $output, $node_path_with_appearance_tools, true );
+				foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
+					$full_path = $node['path'];
+					foreach ( $opt_in_path as $opt_in_path_item ) {
+						$full_path[] = $opt_in_path_item;
+					}
+					// Use "unset prop" as a marker instead of "null" because
+					// "null" can be a valid value for some props (e.g. blockGap).
+					$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
+					if ( true !== $opt_in_value ) {
+						continue;
+					}
+
+					// The following could be improved to be path independent.
+					// At the moment it relies on a couple of assumptions:
+					//
+					// - all opt-ins having a path of size 2.
+					// - there's two sources of settings: the top-level and the block-level.
+					if (
+						( 1 === count( $node['path'] ) ) &&
+						( 'settings' === $node['path'][0] )
+					) {
+						// Top-level settings.
+						unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] );
+						if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) {
+							unset( $output['settings'][ $opt_in_path[0] ] );
+						}
+					} elseif (
+						( 3 === count( $node['path'] ) ) &&
+						( 'settings' === $node['path'][0] ) &&
+						( 'blocks' === $node['path'][1] )
+					) {
+						// Block-level settings.
+						$block_name = $node['path'][2];
+						unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] );
+						if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) {
+							unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] );
+						}
+					}
+				}
+			}
+		}
+
+		wp_recursive_ksort( $output );
+
+		return $output;
+	}
 
 	/**
-	 * Transform the spacing scale values into an array of spacing scale presets.
+	 * Sets the spacingSizes array based on the spacingScale values from theme.json.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return null|void
 	 */
 	public function set_spacing_sizes() {
 		$spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
 
-		if ( ! is_numeric( $spacing_scale['steps'] )
+		// Gutenberg didn't have the 1st isset check.
+		if ( ! isset( $spacing_scale['steps'] )
+			|| ! is_numeric( $spacing_scale['steps'] )
 			|| ! isset( $spacing_scale['mediumStep'] )
 			|| ! isset( $spacing_scale['unit'] )
 			|| ! isset( $spacing_scale['operator'] )
@@ -1410,7 +3197,7 @@ public function set_spacing_sizes() {
 
 			$below_sizes[] = array(
 				/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
-				'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ),
+				'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), (string) $x_small_count ),
 				'slug' => (string) $slug,
 				'size' => round( $current_step, 2 ) . $unit,
 			);
@@ -1420,7 +3207,7 @@ public function set_spacing_sizes() {
 			}
 
 			if ( $below_midpoint_count < $steps_mid_point - 2 ) {
-				++$x_small_count;
+				$x_small_count++;
 			}
 
 			$slug -= 10;
@@ -1447,7 +3234,7 @@ public function set_spacing_sizes() {
 
 			$above_sizes[] = array(
 				/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
-				'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ),
+				'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), (string) $x_large_count ),
 				'slug' => (string) $slug,
 				'size' => round( $current_step, 2 ) . $unit,
 			);
@@ -1457,244 +3244,24 @@ public function set_spacing_sizes() {
 			}
 
 			if ( $above_midpoint_count > 1 ) {
-				++$x_large_count;
+				$x_large_count++;
 			}
 
 			$slug += 10;
 		}
 
-		$spacing_sizes = array_merge( $below_sizes, $above_sizes );
+		$spacing_sizes = $below_sizes;
+		foreach ( $above_sizes as $above_sizes_item ) {
+			$spacing_sizes[] = $above_sizes_item;
+		}
 
 		// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
 		if ( $spacing_scale['steps'] <= 7 ) {
 			for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
-				$spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 );
+				$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
 			}
 		}
 
 		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
 	}
-
-	/**
-	 * Get the CSS layout rules for a particular block from theme.json layout definitions.
-	 *
-	 * @param array $block_metadata Metadata about the block to get styles for.
-	 *
-	 * @return string Layout styles for the block.
-	 */
-	protected function get_layout_styles( $block_metadata ) {
-		$block_rules = '';
-		$block_type  = null;
-
-		// Skip outputting layout styles if explicitly disabled.
-		if ( current_theme_supports( 'disable-layout-styles' ) ) {
-			return $block_rules;
-		}
-
-		if ( isset( $block_metadata['name'] ) ) {
-			$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
-			if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
-				return $block_rules;
-			}
-		}
-
-		$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
-		$has_block_gap_support    = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-		$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
-		$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$layout_definitions       = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
-		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
-
-		// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
-		// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
-		if ( $has_block_gap_support || $has_fallback_gap_support ) {
-			$block_gap_value = null;
-			// Use a fallback gap value if block gap support is not available.
-			if ( ! $has_block_gap_support ) {
-				$block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
-				if ( ! empty( $block_type ) ) {
-					$block_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
-				}
-			} else {
-				$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
-			}
-
-			// Support split row / column values and concatenate to a shorthand value.
-			if ( is_array( $block_gap_value ) ) {
-				if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
-					$gap_row         = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
-					$gap_column      = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
-					$block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
-				} else {
-					// Skip outputting gap value if not all sides are provided.
-					$block_gap_value = null;
-				}
-			}
-
-			// If the block should have custom gap, add the gap styles.
-			if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
-				foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
-					// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-					if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
-						continue;
-					}
-
-					$class_name    = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
-					$spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
-
-					if (
-						! empty( $class_name ) &&
-						! empty( $spacing_rules )
-					) {
-						foreach ( $spacing_rules as $spacing_rule ) {
-							$declarations = array();
-							if (
-								isset( $spacing_rule['selector'] ) &&
-								preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
-								! empty( $spacing_rule['rules'] )
-							) {
-								// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
-								foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
-									$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
-									if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
-										$declarations[] = array(
-											'name'  => $css_property,
-											'value' => $current_css_value,
-										);
-									}
-								}
-
-								if ( ! $has_block_gap_support ) {
-									// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
-									$layout_selector = sprintf(
-										$format,
-										$selector,
-										$class_name,
-										$spacing_rule['selector']
-									);
-								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
-									$layout_selector = sprintf(
-										$format,
-										$selector,
-										$class_name,
-										$spacing_rule['selector']
-									);
-								}
-								$block_rules .= static::to_ruleset( $layout_selector, $declarations );
-							}
-						}
-					}
-				}
-			}
-		}
-
-		// Output base styles.
-		if (
-			static::ROOT_BLOCK_SELECTOR === $selector
-		) {
-			$valid_display_modes = array( 'block', 'flex', 'grid' );
-			foreach ( $layout_definitions as $layout_definition ) {
-				$class_name       = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
-				$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
-
-				if (
-					! empty( $class_name ) &&
-					! empty( $base_style_rules )
-				) {
-					// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
-					if (
-						! empty( $layout_definition['displayMode'] ) &&
-						is_string( $layout_definition['displayMode'] ) &&
-						in_array( $layout_definition['displayMode'], $valid_display_modes, true )
-					) {
-						$layout_selector = sprintf(
-							'%s .%s',
-							$selector,
-							$class_name
-						);
-						$block_rules    .= static::to_ruleset(
-							$layout_selector,
-							array(
-								array(
-									'name'  => 'display',
-									'value' => $layout_definition['displayMode'],
-								),
-							)
-						);
-					}
-
-					foreach ( $base_style_rules as $base_style_rule ) {
-						$declarations = array();
-
-						if (
-							isset( $base_style_rule['selector'] ) &&
-							preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
-							! empty( $base_style_rule['rules'] )
-						) {
-							foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
-								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
-									$declarations[] = array(
-										'name'  => $css_property,
-										'value' => $css_value,
-									);
-								}
-							}
-
-							$layout_selector = sprintf(
-								'%s .%s%s',
-								$selector,
-								$class_name,
-								$base_style_rule['selector']
-							);
-							$block_rules    .= static::to_ruleset( $layout_selector, $declarations );
-						}
-					}
-				}
-			}
-		}
-		return $block_rules;
-	}
-
-	/**
-	 * Function that scopes a selector with another one. This works a bit like
-	 * SCSS nesting except the `&` operator isn't supported.
-	 *
-	 * <code>
-	 * $scope = '.a, .b .c';
-	 * $selector = '> .x, .y';
-	 * $merged = scope_selector( $scope, $selector );
-	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
-	 * </code>
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param string $scope    Selector to scope to.
-	 * @param string $selector Original selector.
-	 * @return string Scoped selector.
-	 */
-	public static function scope_selector( $scope, $selector ) {
-		$scopes    = explode( ',', $scope );
-		$selectors = explode( ',', $selector );
-
-		$selectors_scoped = array();
-		foreach ( $scopes as $outer ) {
-			foreach ( $selectors as $inner ) {
-				$outer = trim( $outer );
-				$inner = trim( $inner );
-				if ( ! empty( $outer ) && ! empty( $inner ) ) {
-					$selectors_scoped[] = $outer . ' ' . $inner;
-				} elseif ( empty( $outer ) ) {
-					$selectors_scoped[] = $inner;
-				} elseif ( empty( $inner ) ) {
-					$selectors_scoped[] = $outer;
-				}
-			}
-		}
-
-		$result = implode( ', ', $selectors_scoped );
-		return $result;
-	}
-
 }
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
deleted file mode 100644
index fe01eb273066e2..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
+++ /dev/null
@@ -1,391 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_6_2 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that encapsulates the processing of structures that adhere to the theme.json spec.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
-	const APPEARANCE_TOOLS_OPT_INS = array(
-		array( 'border', 'color' ),
-		array( 'border', 'radius' ),
-		array( 'border', 'style' ),
-		array( 'border', 'width' ),
-		array( 'color', 'link' ),
-		array( 'dimensions', 'minHeight' ),
-		array( 'spacing', 'blockGap' ),
-		array( 'spacing', 'margin' ),
-		array( 'spacing', 'padding' ),
-		array( 'typography', 'lineHeight' ),
-	);
-
-	/**
-	 * Metadata for style properties.
-	 *
-	 * Each element is a direct mapping from the CSS property name to the
-	 * path to the value in theme.json & block attributes.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
-	 *              `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
-	 *              `text-decoration`, `text-transform`, and `filter` properties,
-	 *              simplified the metadata structure.
-	 * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
-	 *              `--wp--style--root--padding-*`, and `box-shadow` properties,
-	 *              removed the `--wp--style--block-gap` property.
-	 * @since 6.2.0 Added `min-height`.
-	 * @var array
-	 */
-	const PROPERTIES_METADATA = array(
-		'background'                        => array( 'color', 'gradient' ),
-		'background-color'                  => array( 'color', 'background' ),
-		'border-radius'                     => array( 'border', 'radius' ),
-		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
-		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
-		'border-bottom-left-radius'         => array( 'border', 'radius', 'bottomLeft' ),
-		'border-bottom-right-radius'        => array( 'border', 'radius', 'bottomRight' ),
-		'border-color'                      => array( 'border', 'color' ),
-		'border-width'                      => array( 'border', 'width' ),
-		'border-style'                      => array( 'border', 'style' ),
-		'border-top-color'                  => array( 'border', 'top', 'color' ),
-		'border-top-width'                  => array( 'border', 'top', 'width' ),
-		'border-top-style'                  => array( 'border', 'top', 'style' ),
-		'border-right-color'                => array( 'border', 'right', 'color' ),
-		'border-right-width'                => array( 'border', 'right', 'width' ),
-		'border-right-style'                => array( 'border', 'right', 'style' ),
-		'border-bottom-color'               => array( 'border', 'bottom', 'color' ),
-		'border-bottom-width'               => array( 'border', 'bottom', 'width' ),
-		'border-bottom-style'               => array( 'border', 'bottom', 'style' ),
-		'border-left-color'                 => array( 'border', 'left', 'color' ),
-		'border-left-width'                 => array( 'border', 'left', 'width' ),
-		'border-left-style'                 => array( 'border', 'left', 'style' ),
-		'color'                             => array( 'color', 'text' ),
-		'font-family'                       => array( 'typography', 'fontFamily' ),
-		'font-size'                         => array( 'typography', 'fontSize' ),
-		'font-style'                        => array( 'typography', 'fontStyle' ),
-		'font-weight'                       => array( 'typography', 'fontWeight' ),
-		'letter-spacing'                    => array( 'typography', 'letterSpacing' ),
-		'line-height'                       => array( 'typography', 'lineHeight' ),
-		'margin'                            => array( 'spacing', 'margin' ),
-		'margin-top'                        => array( 'spacing', 'margin', 'top' ),
-		'margin-right'                      => array( 'spacing', 'margin', 'right' ),
-		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
-		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
-		'min-height'                        => array( 'dimensions', 'minHeight' ),
-		'padding'                           => array( 'spacing', 'padding' ),
-		'padding-top'                       => array( 'spacing', 'padding', 'top' ),
-		'padding-right'                     => array( 'spacing', 'padding', 'right' ),
-		'padding-bottom'                    => array( 'spacing', 'padding', 'bottom' ),
-		'padding-left'                      => array( 'spacing', 'padding', 'left' ),
-		'--wp--style--root--padding'        => array( 'spacing', 'padding' ),
-		'--wp--style--root--padding-top'    => array( 'spacing', 'padding', 'top' ),
-		'--wp--style--root--padding-right'  => array( 'spacing', 'padding', 'right' ),
-		'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
-		'--wp--style--root--padding-left'   => array( 'spacing', 'padding', 'left' ),
-		'text-decoration'                   => array( 'typography', 'textDecoration' ),
-		'text-transform'                    => array( 'typography', 'textTransform' ),
-		'filter'                            => array( 'filter', 'duotone' ),
-		'box-shadow'                        => array( 'shadow' ),
-	);
-
-	/**
-	 * Indirect metadata for style properties that are not directly output.
-	 *
-	 * Each element is a direct mapping from a CSS property name to the
-	 * path to the value in theme.json & block attributes.
-	 *
-	 * Indirect properties are not output directly by `compute_style_properties`,
-	 * but are used elsewhere in the processing of global styles. The indirect
-	 * property is used to validate whether or not a style value is allowed.
-	 *
-	 * @since 6.2.0
-	 * @var array
-	 */
-	const INDIRECT_PROPERTIES_METADATA = array(
-		'gap'        => array( 'spacing', 'blockGap' ),
-		'column-gap' => array( 'spacing', 'blockGap', 'left' ),
-		'row-gap'    => array( 'spacing', 'blockGap', 'top' ),
-	);
-
-	/**
-	 * The valid properties under the settings key.
-	 *
-	 * @since 5.8.0 As `ALLOWED_SETTINGS`.
-	 * @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
-	 *              added new properties for `border`, `color`, `spacing`,
-	 *              and `typography`, and renamed others according to the new schema.
-	 * @since 6.0.0 Added `color.defaultDuotone`.
-	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
-	 * @since 6.2.0 Added `dimensions.minHeight`.
-	 * @var array
-	 */
-	const VALID_SETTINGS = array(
-		'appearanceTools'               => null,
-		'useRootPaddingAwareAlignments' => null,
-		'border'                        => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-		),
-		'color'                         => array(
-			'background'       => null,
-			'custom'           => null,
-			'customDuotone'    => null,
-			'customGradient'   => null,
-			'defaultDuotone'   => null,
-			'defaultGradients' => null,
-			'defaultPalette'   => null,
-			'duotone'          => null,
-			'gradients'        => null,
-			'link'             => null,
-			'palette'          => null,
-			'text'             => null,
-		),
-		'custom'                        => null,
-		'dimensions'                    => array(
-			'minHeight' => null,
-		),
-		'layout'                        => array(
-			'contentSize' => null,
-			'definitions' => null,
-			'wideSize'    => null,
-		),
-		'spacing'                       => array(
-			'customSpacingSize' => null,
-			'spacingSizes'      => null,
-			'spacingScale'      => null,
-			'blockGap'          => null,
-			'margin'            => null,
-			'padding'           => null,
-			'units'             => null,
-		),
-		'typography'                    => array(
-			'fluid'          => null,
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-	);
-
-	/**
-	 * The valid properties under the styles key.
-	 *
-	 * @since 5.8.0 As `ALLOWED_STYLES`.
-	 * @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
-	 *              added new properties for `border`, `filter`, `spacing`,
-	 *              and `typography`.
-	 * @since 6.1.0 Added new side properties for `border`,
-	 *              added new property `shadow`,
-	 *              updated `blockGap` to be allowed at any level.
-	 * @since 6.2.0 Added new property `css`.
-	 * @var array
-	 */
-	const VALID_STYLES = array(
-		'border'     => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-			'top'    => null,
-			'right'  => null,
-			'bottom' => null,
-			'left'   => null,
-		),
-		'color'      => array(
-			'background' => null,
-			'gradient'   => null,
-			'text'       => null,
-		),
-		'dimensions' => array(
-			'minHeight' => null,
-		),
-		'filter'     => array(
-			'duotone' => null,
-		),
-		'shadow'     => null,
-		'spacing'    => array(
-			'margin'   => null,
-			'padding'  => null,
-			'blockGap' => null,
-		),
-		'typography' => array(
-			'fontFamily'     => null,
-			'fontSize'       => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-		'css'        => null,
-	);
-
-	/**
-	 * Processes a style node and returns the same node
-	 * without the insecure styles.
-	 *
-	 * @since 5.9.0
-	 * @since 6.2.0 Allow indirect properties used outside of `compute_style_properties`.
-	 *
-	 * @param array $input Node to process.
-	 * @return array
-	 */
-	protected static function remove_insecure_styles( $input ) {
-		$output       = array();
-		$declarations = static::compute_style_properties( $input );
-
-		foreach ( $declarations as $declaration ) {
-			if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
-				$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
-
-				// Check the value isn't an array before adding so as to not
-				// double up shorthand and longhand styles.
-				$value = _wp_array_get( $input, $path, array() );
-				if ( ! is_array( $value ) ) {
-					_wp_array_set( $output, $path, $value );
-				}
-			}
-		}
-
-		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
-		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $path ) {
-			$value = _wp_array_get( $input, $path, array() );
-			if (
-				isset( $value ) &&
-				! is_array( $value ) &&
-				static::is_safe_css_declaration( $property, $value )
-			) {
-				_wp_array_set( $output, $path, $value );
-			}
-		}
-
-		return $output;
-	}
-
-	/**
-	 * Returns the stylesheet that results of processing
-	 * the theme.json structure this object represents.
-	 *
-	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
-	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
-	 *                         'styles': only the styles section in theme.json.
-	 *                         'presets': only the classes for the presets.
-	 *                         'custom-css': only the css from global styles.css.
-	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
-	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
-	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
-	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
-	 * @return string Stylesheet.
-	 */
-	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
-		if ( null === $origins ) {
-			$origins = static::VALID_ORIGINS;
-		}
-
-		if ( is_string( $types ) ) {
-			// Dispatch error and map old arguments to new ones.
-			_deprecated_argument( __FUNCTION__, '5.9' );
-			if ( 'block_styles' === $types ) {
-				$types = array( 'styles', 'presets' );
-			} elseif ( 'css_variables' === $types ) {
-				$types = array( 'variables' );
-			} else {
-				$types = array( 'variables', 'styles', 'presets' );
-			}
-		}
-
-		$blocks_metadata = static::get_blocks_metadata();
-		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
-		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
-
-		$root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
-		$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
-
-		if ( ! empty( $options['scope'] ) ) {
-			foreach ( $setting_nodes as &$node ) {
-				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
-			}
-			foreach ( $style_nodes as &$node ) {
-				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
-			}
-		}
-
-		if ( ! empty( $options['root_selector'] ) ) {
-			if ( false !== $root_settings_key ) {
-				$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
-			}
-			if ( false !== $root_style_key ) {
-				$setting_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
-			}
-		}
-
-		$stylesheet = '';
-
-		if ( in_array( 'variables', $types, true ) ) {
-			$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
-		}
-
-		if ( in_array( 'styles', $types, true ) ) {
-			if ( false !== $root_style_key ) {
-				$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
-			}
-			$stylesheet .= $this->get_block_classes( $style_nodes );
-		} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
-			$root_selector    = static::ROOT_BLOCK_SELECTOR;
-			$columns_selector = '.wp-block-columns';
-			if ( ! empty( $options['scope'] ) ) {
-				$root_selector    = static::scope_selector( $options['scope'], $root_selector );
-				$columns_selector = static::scope_selector( $options['scope'], $columns_selector );
-			}
-			if ( ! empty( $options['root_selector'] ) ) {
-				$root_selector = $options['root_selector'];
-			}
-			// Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
-			// For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
-			$base_styles_nodes = array(
-				array(
-					'path'     => array( 'styles' ),
-					'selector' => $root_selector,
-				),
-				array(
-					'path'     => array( 'styles', 'blocks', 'core/columns' ),
-					'selector' => $columns_selector,
-					'name'     => 'core/columns',
-				),
-			);
-
-			foreach ( $base_styles_nodes as $base_style_node ) {
-				$stylesheet .= $this->get_layout_styles( $base_style_node );
-			}
-		}
-
-		if ( in_array( 'presets', $types, true ) ) {
-			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
-		}
-
-		// Load the custom CSS last so it has the highest specificity.
-		if ( in_array( 'custom-css', $types, true ) ) {
-			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
-		}
-
-		return $stylesheet;
-	}
-}
diff --git a/lib/experimental/class-wp-theme-json-gutenberg.php b/lib/experimental/class-wp-theme-json-gutenberg.php
deleted file mode 100644
index a16697dff07d07..00000000000000
--- a/lib/experimental/class-wp-theme-json-gutenberg.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Gutenberg class
- *
- * @package gutenberg
- */
-
-/**
- * Class that encapsulates the processing of structures that adhere to the theme.json spec.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_2 {
-	/**
-	 * Holds block metadata extracted from block.json
-	 * to be shared among all instances so we don't
-	 * process it twice.
-	 *
-	 * It is necessary to redefine $blocks_metadata here so that it
-	 * doesn't get inherited from an earlier instantiation of the
-	 * parent class.
-	 *
-	 * @since 5.8.0
-	 * @var array
-	 */
-	protected static $blocks_metadata = null;
-}
diff --git a/lib/load.php b/lib/load.php
index 935e373b88b2f6..b700ec3f2a11d1 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -66,7 +66,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php';
-require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
@@ -81,7 +80,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
-require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
@@ -95,7 +93,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/experimental/html/index.php';
 }
-require __DIR__ . '/experimental/class-wp-theme-json-gutenberg.php';
 require __DIR__ . '/experimental/class-wp-theme-json-resolver-gutenberg.php';
 require __DIR__ . '/experimental/class-wp-webfonts.php';
 require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
@@ -106,6 +103,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/kses.php';
 
 // Plugin specific code.
+require __DIR__ . '/class-wp-theme-json-gutenberg.php';
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';

From 47cb54620794a90a6fb6738eb65575881551af24 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 16 Dec 2022 15:47:22 +0400
Subject: [PATCH 116/209] Migrate Font Size Picker tests to Playwright (#46591)

* Migrate Font Size Picker tests to Playwright

* Remove legacy tests

* Open document settings before each test
---
 .../editor/various/font-size-picker.test.js   | 314 ------------------
 .../editor/various/font-size-picker.spec.js   | 305 +++++++++++++++++
 2 files changed, 305 insertions(+), 314 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/font-size-picker.test.js
 create mode 100644 test/e2e/specs/editor/various/font-size-picker.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
deleted file mode 100644
index f7351450dabd51..00000000000000
--- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-const openFontSizeSelectControl = async () => {
-	const selectControlSelector =
-		"//div[contains(@class, 'components-font-size-picker__controls')]//button[contains(@class, 'components-custom-select-control__button')]";
-	const selectControl = await page.waitForXPath( selectControlSelector );
-	return selectControl.click();
-};
-
-const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
-	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
-
-// Click a button by its label - applies when ToggleGroupControl is used.
-const clickFontSizeButtonByLabel = async ( label ) => {
-	const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`;
-	const button = await page.waitForXPath( buttonSelector );
-	return button.click();
-};
-
-// Clicks the button to toggle between custom size input and the control for the presets.
-const toggleCustomInput = async ( showCustomInput ) => {
-	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
-	const toggleButton = await page.waitForXPath(
-		`//button[@aria-label='${ label }']`
-	);
-	return toggleButton.click();
-};
-
-const clickCustomInput = async () => {
-	const customInput = await page.waitForXPath( "//input[@type='number']" );
-	return customInput.click();
-};
-
-describe( 'Font Size Picker', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-	describe( 'Common', () => {
-		it( 'should apply a named font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			// This should be the "small" font-size of the editor defaults.
-			await page.keyboard.type( '13' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should apply a custom font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a custom font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph reset - custom size' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await pressKeyTimes( 'Backspace', 2 );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-
-	// A different control is rendered based on the available font sizes number.
-	describe( 'More font sizes', () => {
-		beforeEach( async () => {
-			await page.evaluate( () => {
-				// set a deep `path[]` property in object `obj` to `value`, immutably
-				function setDeep( obj, path, value ) {
-					function doSet( o, i ) {
-						if ( i < path.length ) {
-							const key = path[ i ];
-							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
-						}
-						return value;
-					}
-					return doSet( obj, 0 );
-				}
-
-				wp.data.dispatch( 'core/block-editor' ).updateSettings(
-					setDeep(
-						wp.data.select( 'core/block-editor' ).getSettings(),
-						[
-							'__experimentalFeatures',
-							'typography',
-							'fontSizes',
-							'default',
-						],
-						[
-							{
-								name: 'Tiny',
-								slug: 'tiny',
-								size: '11px',
-							},
-							{
-								name: 'Small',
-								slug: 'small',
-								size: '13px',
-							},
-							{
-								name: 'Medium',
-								slug: 'medium',
-								size: '20px',
-							},
-							{
-								name: 'Large',
-								slug: 'large',
-								size: '36px',
-							},
-							{
-								name: 'Extra Large',
-								slug: 'x-large',
-								size: '42px',
-							},
-							{
-								name: 'Huge',
-								slug: 'huge',
-								size: '48px',
-							},
-						]
-					)
-				);
-			} );
-		} );
-
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 4 );
-			await page.keyboard.press( 'Enter' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 3 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
-			<p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 2 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-	describe( 'Few font sizes', () => {
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await clickFontSizeButtonByLabel( 'Large' );
-			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
-			const [ activeButton ] = await page.$x( buttonSelector );
-			const activeLabel = await page.evaluate(
-				( element ) => element?.getAttribute( 'aria-label' ),
-				activeButton
-			);
-			expect( activeLabel ).toEqual( 'Large' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js
new file mode 100644
index 00000000000000..38707c12b261bc
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-size-picker.spec.js
@@ -0,0 +1,305 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Size Picker', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Common', () => {
+		test( 'should apply a named font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			// This should be the "small" font-size of the editor defaults.
+			await page.keyboard.type( '13' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should apply a custom font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a custom font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph reset - custom size' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+
+			await pageUtils.pressKeyTimes( 'Backspace', 2 );
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'More font sizes', () => {
+		test.beforeEach( async ( { page } ) => {
+			await page.evaluate( () => {
+				// set a deep `path[]` property in object `obj` to `value`, immutably
+				function setDeep( obj, path, value ) {
+					function doSet( o, i ) {
+						if ( i < path.length ) {
+							const key = path[ i ];
+							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
+						}
+						return value;
+					}
+					return doSet( obj, 0 );
+				}
+
+				window.wp.data.dispatch( 'core/block-editor' ).updateSettings(
+					setDeep(
+						window.wp.data
+							.select( 'core/block-editor' )
+							.getSettings(),
+						[
+							'__experimentalFeatures',
+							'typography',
+							'fontSizes',
+							'default',
+						],
+						[
+							{
+								name: 'Tiny',
+								slug: 'tiny',
+								size: '11px',
+							},
+							{
+								name: 'Small',
+								slug: 'small',
+								size: '13px',
+							},
+							{
+								name: 'Medium',
+								slug: 'medium',
+								size: '20px',
+							},
+							{
+								name: 'Large',
+								slug: 'large',
+								size: '36px',
+							},
+							{
+								name: 'Extra Large',
+								slug: 'x-large',
+								size: '42px',
+							},
+							{
+								name: 'Huge',
+								slug: 'huge',
+								size: '48px',
+							},
+						]
+					)
+				);
+			} );
+		} );
+
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 4 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 3 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"medium"} -->
+<p class="has-medium-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 2 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'Few font sizes', () => {
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+} );

From 9ea80f6f363f847b31c5faa3bac6be1c05f5ef63 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 16 Dec 2022 12:52:08 +0100
Subject: [PATCH 117/209] Remove the nux package (#46110)

---
 .github/CODEOWNERS                            |   1 -
 docs/contributors/code/scripts.md             |   1 -
 docs/manifest.json                            |  12 --
 docs/reference-guides/README.md               |   1 -
 docs/reference-guides/data/README.md          |   1 -
 docs/reference-guides/data/data-core-nux.md   |  99 ------------
 docs/toc.json                                 |   1 -
 lib/client-assets.php                         |  13 +-
 package-lock.json                             |  18 +--
 package.json                                  |   1 -
 packages/base-styles/_z-index.scss            |   5 +-
 packages/nux/.npmrc                           |   1 -
 packages/nux/CHANGELOG.md                     | 124 ---------------
 packages/nux/README.md                        | 114 --------------
 packages/nux/package.json                     |  50 ------
 packages/nux/src/components/dot-tip/README.md |  38 -----
 packages/nux/src/components/dot-tip/index.js  |  93 -----------
 .../nux/src/components/dot-tip/style.scss     | 123 ---------------
 .../dot-tip/test/__snapshots__/index.js.snap  |  46 ------
 .../nux/src/components/dot-tip/test/index.js  |  78 ----------
 packages/nux/src/index.js                     |  13 --
 packages/nux/src/store/actions.js             |  52 -------
 packages/nux/src/store/index.js               |  36 -----
 packages/nux/src/store/reducer.js             |  70 ---------
 packages/nux/src/store/selectors.js           |  81 ----------
 packages/nux/src/store/test/actions.js        |  40 -----
 packages/nux/src/store/test/reducer.js        |  69 ---------
 packages/nux/src/store/test/selectors.js      | 146 ------------------
 packages/nux/src/style.scss                   |   1 -
 .../local-storage-overrides.json              |   6 -
 30 files changed, 5 insertions(+), 1329 deletions(-)
 delete mode 100644 docs/reference-guides/data/data-core-nux.md
 delete mode 100644 packages/nux/.npmrc
 delete mode 100644 packages/nux/CHANGELOG.md
 delete mode 100644 packages/nux/README.md
 delete mode 100644 packages/nux/package.json
 delete mode 100644 packages/nux/src/components/dot-tip/README.md
 delete mode 100644 packages/nux/src/components/dot-tip/index.js
 delete mode 100644 packages/nux/src/components/dot-tip/style.scss
 delete mode 100644 packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
 delete mode 100644 packages/nux/src/components/dot-tip/test/index.js
 delete mode 100644 packages/nux/src/index.js
 delete mode 100644 packages/nux/src/store/actions.js
 delete mode 100644 packages/nux/src/store/index.js
 delete mode 100644 packages/nux/src/store/reducer.js
 delete mode 100644 packages/nux/src/store/selectors.js
 delete mode 100644 packages/nux/src/store/test/actions.js
 delete mode 100644 packages/nux/src/store/test/reducer.js
 delete mode 100644 packages/nux/src/store/test/selectors.js
 delete mode 100644 packages/nux/src/style.scss

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2cc7b0ce34bd1e..6427516035a5ec 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -87,7 +87,6 @@
 /packages/compose                               @ajitbohra
 /packages/element                               @ajitbohra
 /packages/notices                               @ajitbohra
-/packages/nux                                   @ajitbohra
 /packages/viewport                              @ajitbohra
 /packages/base-styles
 /packages/icons
diff --git a/docs/contributors/code/scripts.md b/docs/contributors/code/scripts.md
index 3b36c8f4be4956..b7cabe0130d71c 100644
--- a/docs/contributors/code/scripts.md
+++ b/docs/contributors/code/scripts.md
@@ -31,7 +31,6 @@ The editor includes a number of packages to enable various pieces of functionali
 | [Is Shallow Equal](/packages/is-shallow-equal/README.md)                                     | wp-is-shallow-equal                   | A function for performing a shallow comparison between two objects or arrays                                                                                  |
 | [Keycodes](/packages/keycodes/README.md)                                                     | wp-keycodes                           | Keycodes utilities for WordPress, used to check the key pressed in events like `onKeyDown`                                                                    |
 | [List Reusable blocks](/packages/list-reusable-blocks/README.md)                             | wp-list-reusable-blocks               | Package used to add import/export links to the listing page of the reusable blocks                                                                            |
-| [NUX](/packages/nux/README.md)                                                               | wp-nux                                | Components, and wp.data methods useful for onboarding a new user to the WordPress admin interface                                                             |
 | [Plugins](/packages/plugins/README.md)                                                       | wp-plugins                            | Plugins module for WordPress                                                                                                                                  |
 | [Redux Routine](/packages/redux-routine/README.md)                                           | wp-redux-routine                      | Redux middleware for generator coroutines                                                                                                                     |
 | [Rich Text](/packages/rich-text/README.md)                                                   | wp-rich-text                          | Helper functions to convert HTML or a DOM tree into a rich text value and back                                                                                |
diff --git a/docs/manifest.json b/docs/manifest.json
index 8cc39af57531e4..a06df18c6c44b9 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1733,12 +1733,6 @@
 		"markdown_source": "../packages/npm-package-json-lint-config/README.md",
 		"parent": "packages"
 	},
-	{
-		"title": "@wordpress/nux",
-		"slug": "packages-nux",
-		"markdown_source": "../packages/nux/README.md",
-		"parent": "packages"
-	},
 	{
 		"title": "@wordpress/plugins",
 		"slug": "packages-plugins",
@@ -1973,12 +1967,6 @@
 		"markdown_source": "../docs/reference-guides/data/data-core-notices.md",
 		"parent": "data"
 	},
-	{
-		"title": "The NUX (New User Experience) Data",
-		"slug": "data-core-nux",
-		"markdown_source": "../docs/reference-guides/data/data-core-nux.md",
-		"parent": "data"
-	},
 	{
 		"title": "Preferences",
 		"slug": "data-core-preferences",
diff --git a/docs/reference-guides/README.md b/docs/reference-guides/README.md
index 33fdd9aa602414..f13c838697f2de 100644
--- a/docs/reference-guides/README.md
+++ b/docs/reference-guides/README.md
@@ -63,7 +63,6 @@
     -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
     -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
     -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
-    -   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
     -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
     -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
     -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)
diff --git a/docs/reference-guides/data/README.md b/docs/reference-guides/data/README.md
index 1134c1d5ddd307..5f4d8d92d4bd49 100644
--- a/docs/reference-guides/data/README.md
+++ b/docs/reference-guides/data/README.md
@@ -12,7 +12,6 @@
 -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
 -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
 -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
--   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
 -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
 -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
 -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)
diff --git a/docs/reference-guides/data/data-core-nux.md b/docs/reference-guides/data/data-core-nux.md
deleted file mode 100644
index 4d2e8a0d98d546..00000000000000
--- a/docs/reference-guides/data/data-core-nux.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# The NUX (New User Experience) Data
-
-Namespace: `core/nux`.
-
-## Selectors
-
-<!-- START TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
-
-### areTipsEnabled
-
-Returns whether or not tips are globally enabled.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `boolean`: Whether tips are globally enabled.
-
-### getAssociatedGuide
-
-Returns an object describing the guide, if any, that the given tip is a part
-of.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
--   _tipId_ `string`: The tip to query.
-
-_Returns_
-
--   `?NUXGuideInfo`: Information about the associated guide.
-
-### isTipVisible
-
-Determines whether or not the given tip is showing. Tips are hidden if they
-are disabled, have been dismissed, or are not the current tip in any
-guide that they have been added to.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
--   _tipId_ `string`: The tip to query.
-
-_Returns_
-
--   `boolean`: Whether or not the given tip is showing.
-
-<!-- END TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
-
-## Actions
-
-<!-- START TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->
-
-### disableTips
-
-Returns an action object that, when dispatched, prevents all tips from
-showing again.
-
-_Returns_
-
--   `Object`: Action object.
-
-### dismissTip
-
-Returns an action object that, when dispatched, dismisses the given tip. A
-dismissed tip will not show again.
-
-_Parameters_
-
--   _id_ `string`: The tip to dismiss.
-
-_Returns_
-
--   `Object`: Action object.
-
-### enableTips
-
-Returns an action object that, when dispatched, makes all tips show again.
-
-_Returns_
-
--   `Object`: Action object.
-
-### triggerGuide
-
-Returns an action object that, when dispatched, presents a guide that takes
-the user through a series of tips step by step.
-
-_Parameters_
-
--   _tipIds_ `string[]`: Which tips to show in the guide.
-
-_Returns_
-
--   `Object`: Action object.
-
-<!-- END TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->
diff --git a/docs/toc.json b/docs/toc.json
index 532e6ef2d20e1d..4203f40c16cbc4 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -278,7 +278,6 @@
 						"docs/reference-guides/data/data-core-keyboard-shortcuts.md": []
 					},
 					{ "docs/reference-guides/data/data-core-notices.md": [] },
-					{ "docs/reference-guides/data/data-core-nux.md": [] },
 					{
 						"docs/reference-guides/data/data-core-preferences.md": []
 					},
diff --git a/lib/client-assets.php b/lib/client-assets.php
index b7a11724a5e096..b7537057b89ab7 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -274,7 +274,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-reusable-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-reusable-blocks' ),
 		$version
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -283,7 +283,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -367,15 +367,6 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
 
-	gutenberg_override_style(
-		$styles,
-		'wp-nux',
-		gutenberg_url( 'build/nux/style.css' ),
-		array( 'wp-components' ),
-		$version
-	);
-	$styles->add_data( 'wp-nux', 'rtl', 'replace' );
-
 	gutenberg_override_style(
 		$styles,
 		'wp-block-library-theme',
diff --git a/package-lock.json b/package-lock.json
index 9906e5f5bac5c5..4cdf49e9da3232 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18980,20 +18980,6 @@
 			"version": "file:packages/npm-package-json-lint-config",
 			"dev": true
 		},
-		"@wordpress/nux": {
-			"version": "file:packages/nux",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"rememo": "^4.0.0"
-			}
-		},
 		"@wordpress/plugins": {
 			"version": "file:packages/plugins",
 			"requires": {
@@ -32020,7 +32006,7 @@
 		"css.escape": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
 			"dev": true
 		},
 		"cssesc": {
@@ -44902,7 +44888,7 @@
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+			"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
 			"dev": true
 		},
 		"macos-release": {
diff --git a/package.json b/package.json
index 93c17bc1d92cdd..8c87dcaae93a7d 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,6 @@
 		"@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
 		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",
-		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/preferences": "file:packages/preferences",
 		"@wordpress/preferences-persistence": "file:packages/preferences-persistence",
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 62a1ab3b19d8f0..5c9af46fec6e6f 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -145,10 +145,7 @@ $z-layers: (
 	// The focus styles of the region navigation containers should be above their content.
 	".is-focusing-regions {region} :focus::after": 1000000,
 
-	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
-	".nux-dot-tip": 1000001,
-
-	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
+	// Show tooltips above wp-admin menus, submenus, and sidebar:
 	".components-tooltip": 1000002,
 
 	// Keep template popover underneath 'Create custom template' modal overlay.
diff --git a/packages/nux/.npmrc b/packages/nux/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/nux/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
deleted file mode 100644
index edbf4c88a21f0f..00000000000000
--- a/packages/nux/CHANGELOG.md
+++ /dev/null
@@ -1,124 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-### Breaking Changes
-
--   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
-
-## 5.20.0 (2022-11-16)
-
-## 5.19.0 (2022-11-02)
-
-## 5.18.0 (2022-10-19)
-
-## 5.17.0 (2022-10-05)
-
-## 5.16.0 (2022-09-21)
-
-## 5.15.0 (2022-09-13)
-
-## 5.14.0 (2022-08-24)
-
-## 5.13.0 (2022-08-10)
-
-## 5.12.0 (2022-07-27)
-
-## 5.11.0 (2022-07-13)
-
-## 5.10.0 (2022-06-29)
-
-## 5.9.0 (2022-06-15)
-
-## 5.8.0 (2022-06-01)
-
-## 5.7.0 (2022-05-18)
-
-## 5.6.0 (2022-05-04)
-
-## 5.5.0 (2022-04-21)
-
-## 5.4.0 (2022-04-08)
-
-## 5.3.0 (2022-03-23)
-
-## 5.2.0 (2022-03-11)
-
-## 5.1.0 (2022-01-27)
-
-## 5.0.0 (2021-07-29)
-
-### Breaking Change
-
--   Upgraded React components to work with v17.0 ([#29118](https://github.com/WordPress/gutenberg/pull/29118)). There are no new features in React v17.0 as explained in the [blog post](https://reactjs.org/blog/2020/10/20/react-v17.html).
-
-## 4.2.0 (2021-07-21)
-
-## 4.1.0 (2021-05-20)
-
-## 4.0.0 (2021-05-14)
-
-### Breaking Changes
-
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
-
-## 3.25.0 (2021-03-17)
-
-## 3.24.0 (2020-12-17)
-
-### New Feature
-
--   Added a store definition `store` for the core data namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
-
-# 3.1.0 (2019-06-03)
-
--   The `@wordpress/nux` package has been deprecated. Please use the `Guide` component in `@wordpress/components` to show a user guide.
-
-## 3.0.6 (2019-01-03)
-
-## 3.0.5 (2018-12-12)
-
-## 3.0.4 (2018-11-30)
-
-## 3.0.3 (2018-11-22)
-
-## 3.0.2 (2018-11-21)
-
-## 3.0.1 (2018-11-20)
-
-## 3.0.0 (2018-11-15)
-
-### Breaking Changes
-
--   The id prop of DotTip has been removed. Please use the tipId prop instead.
-
-## 2.0.13 (2018-11-12)
-
-## 2.0.12 (2018-11-12)
-
-## 2.0.11 (2018-11-09)
-
-## 2.0.10 (2018-11-09)
-
-## 2.0.9 (2018-11-03)
-
-## 2.0.8 (2018-10-30)
-
-## 2.0.7 (2018-10-29)
-
-### Deprecations
-
--   The id prop of DotTip has been deprecated. Please use the tipId prop instead.
-
-## 2.0.6 (2018-10-22)
-
-## 2.0.5 (2018-10-19)
-
-## 2.0.4 (2018-10-18)
-
-## 2.0.0 (2018-09-05)
-
-### Breaking Change
-
--   Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
diff --git a/packages/nux/README.md b/packages/nux/README.md
deleted file mode 100644
index c0941ddd0c5f2a..00000000000000
--- a/packages/nux/README.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# New User eXperience (NUX)
-
-The NUX module exposes components, and `wp.data` methods useful for onboarding a new user to the WordPress admin interface. Specifically, it exposes _tips_ and _guides_.
-
-A _tip_ is a component that points to an element in the UI and contains text that explains the element's functionality. The user can dismiss a tip, in which case it never shows again. The user can also disable tips entirely. Information about tips is persisted between sessions using `localStorage`.
-
-A _guide_ allows a series of tips to be presented to the user one by one. When a user dismisses a tip that is in a guide, the next tip in the guide is shown.
-
-## Installation
-
-Install the module
-
-```bash
-npm install @wordpress/nux --save
-```
-
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
-
-## DotTip
-
-`DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `tipId`.
-
-See [the component's README][dot-tip-readme] for more information.
-
-[dot-tip-readme]: https://github.com/WordPress/gutenberg/tree/HEAD/packages/nux/src/components/dot-tip/README.md
-
-```jsx
-<button onClick={ ... }>
-	Add to Cart
-	<DotTip tipId="acme/add-to-cart">
-		Click here to add the product to your shopping cart.
-	</DotTip>
-</button>
-}
-```
-
-## Determining if a tip is visible
-
-You can programmatically determine if a tip is visible using the `isTipVisible` select method.
-
-```jsx
-const isVisible = select( 'core/nux' ).isTipVisible( 'acme/add-to-cart' );
-console.log( isVisible ); // true or false
-```
-
-## Manually dismissing a tip
-
-`dismissTip` is a dispatch method that allows you to programmatically dismiss a tip.
-
-```jsx
-<button
-	onClick={ () => {
-		dispatch( 'core/nux' ).dismissTip( 'acme/add-to-cart' );
-	} }
->
-	Dismiss tip
-</button>
-```
-
-## Disabling and enabling tips
-
-Tips can be programatically disabled or enabled using the `disableTips` and `enableTips` dispatch methods. You can query the current setting by using the `areTipsEnabled` select method.
-
-Calling `enableTips` will also un-dismiss all previously dismissed tips.
-
-```jsx
-const areTipsEnabled = select( 'core/nux' ).areTipsEnabled();
-return (
-	<button
-		onClick={ () => {
-			if ( areTipsEnabled ) {
-				dispatch( 'core/nux' ).disableTips();
-			} else {
-				dispatch( 'core/nux' ).enableTips();
-			}
-		} }
-	>
-		{ areTipsEnabled ? 'Disable tips' : 'Enable tips' }
-	</button>
-);
-```
-
-## Triggering a guide
-
-You can group a series of tips into a guide by calling the `triggerGuide` dispatch method. The given tips will then appear one by one.
-
-A tip cannot be added to more than one guide.
-
-```jsx
-dispatch( 'core/nux' ).triggerGuide( [
-	'acme/product-info',
-	'acme/add-to-cart',
-	'acme/checkout',
-] );
-```
-
-## Getting information about a guide
-
-`getAssociatedGuide` is a select method that returns useful information about the state of the guide that a tip is associated with.
-
-```jsx
-const guide = select( 'core/nux' ).getAssociatedGuide( 'acme/add-to-cart' );
-console.log( 'Tips in this guide:', guide.tipIds );
-console.log( 'Currently showing:', guide.currentTipId );
-console.log( 'Next to show:', guide.nextTipId );
-```
-
-## Contributing to this package
-
-This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
-
-To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
-
-<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/nux/package.json b/packages/nux/package.json
deleted file mode 100644
index 9089f865e729de..00000000000000
--- a/packages/nux/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-	"name": "@wordpress/nux",
-	"version": "5.20.0",
-	"description": "NUX (New User eXperience) module for WordPress.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"nux"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/nux/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/nux"
-	},
-	"bugs": {
-		"url": "https://github.com/WordPress/gutenberg/issues"
-	},
-	"engines": {
-		"node": ">=12"
-	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
-	"react-native": "src/index",
-	"sideEffects": [
-		"build-style/**",
-		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js}"
-	],
-	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"rememo": "^4.0.0"
-	},
-	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/nux/src/components/dot-tip/README.md b/packages/nux/src/components/dot-tip/README.md
deleted file mode 100644
index f143a22a222588..00000000000000
--- a/packages/nux/src/components/dot-tip/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# DotTip
-
-`DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `tipId`.
-
-## Usage
-
-```jsx
-<button onClick={ ... }>
-	Add to Cart
-	<DotTip tipId="acme/add-to-cart">
-		Click here to add the product to your shopping cart.
-	</DotTip>
-</button>
-}
-```
-
-## Props
-
-The component accepts the following props:
-
-### tipId
-
-A string that uniquely identifies the tip. Identifiers should be prefixed with the name of the plugin, followed by a `/`. For example, `acme/add-to-cart`.
-
--   Type: `string`
--   Required: Yes
-
-### position
-
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
-
--   Type: `String`
--   Required: No
--   Default: `"middle right"`
-
-### children
-
-Any React element or elements can be passed as children. They will be rendered within the tip bubble.
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
deleted file mode 100644
index 50de7ddb3be9df..00000000000000
--- a/packages/nux/src/components/dot-tip/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { Popover, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
-import { close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as nuxStore } from '../../store';
-
-function onClick( event ) {
-	// Tips are often nested within buttons. We stop propagation so that clicking
-	// on a tip doesn't result in the button being clicked.
-	event.stopPropagation();
-}
-
-export function DotTip( {
-	position = 'middle right',
-	children,
-	isVisible,
-	hasNextTip,
-	onDismiss,
-	onDisable,
-} ) {
-	const anchorParent = useRef( null );
-	const onFocusOutsideCallback = useCallback(
-		( event ) => {
-			if ( ! anchorParent.current ) {
-				return;
-			}
-			if ( anchorParent.current.contains( event.relatedTarget ) ) {
-				return;
-			}
-			onDisable();
-		},
-		[ onDisable, anchorParent ]
-	);
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			className="nux-dot-tip"
-			position={ position }
-			focusOnMount
-			role="dialog"
-			aria-label={ __( 'Editor tips' ) }
-			onClick={ onClick }
-			onFocusOutside={ onFocusOutsideCallback }
-		>
-			<p>{ children }</p>
-			<p>
-				<Button variant="link" onClick={ onDismiss }>
-					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
-				</Button>
-			</p>
-			<Button
-				className="nux-dot-tip__disable"
-				icon={ close }
-				label={ __( 'Disable tips' ) }
-				onClick={ onDisable }
-			/>
-		</Popover>
-	);
-}
-
-export default compose(
-	withSelect( ( select, { tipId } ) => {
-		const { isTipVisible, getAssociatedGuide } = select( nuxStore );
-		const associatedGuide = getAssociatedGuide( tipId );
-		return {
-			isVisible: isTipVisible( tipId ),
-			hasNextTip: !! ( associatedGuide && associatedGuide.nextTipId ),
-		};
-	} ),
-	withDispatch( ( dispatch, { tipId } ) => {
-		const { dismissTip, disableTips } = dispatch( nuxStore );
-		return {
-			onDismiss() {
-				dismissTip( tipId );
-			},
-			onDisable() {
-				disableTips();
-			},
-		};
-	} )
-)( DotTip );
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
deleted file mode 100644
index 3ab0c1a540fd5a..00000000000000
--- a/packages/nux/src/components/dot-tip/style.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-
-$dot-size: 8px; // Size of the indicator dot
-$dot-scale: 3;  // How much the pulse animation should scale up by in size
-
-.nux-dot-tip {
-	&::before,
-	&::after {
-		border-radius: 100%;
-		content: " ";
-		pointer-events: none;
-		position: absolute;
-	}
-
-	&::before {
-		animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
-		background: rgba(#00739c, 0.9);
-		opacity: 0.9;
-		height: $dot-size * $dot-scale;
-		left: -($dot-size * $dot-scale) * 0.5;
-		top: -($dot-size * $dot-scale) * 0.5;
-		transform: scale(math.div(1, $dot-scale));
-		width: $dot-size * $dot-scale;
-	}
-
-	&::after {
-		background: #00739c;
-		height: $dot-size;
-		left: -$dot-size * 0.5;
-		top: -$dot-size * 0.5;
-		width: $dot-size;
-	}
-
-	@keyframes nux-pulse {
-		100% {
-			background: rgba(#00739c, 0);
-			transform: scale(1);
-		}
-	}
-
-	.components-popover__content {
-		width: 350px;
-		padding: 20px 18px;
-
-		@include break-small {
-			width: 450px;
-		}
-
-		.nux-dot-tip__disable {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
-
-	// Position the dot right next to the edge of the button
-	&[data-y-axis="top"] {
-		margin-top: -$dot-size * 0.5;
-	}
-	&[data-y-axis="bottom"] {
-		margin-top: $dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] {
-		margin-left: -$dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] {
-		margin-left: $dot-size * 0.5;
-	}
-
-	// Position the tip content away from the dot
-	&[data-y-axis="top"] .components-popover__content {
-		margin-bottom: 20px;
-	}
-	&[data-y-axis="bottom"] .components-popover__content {
-		margin-top: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] .components-popover__content {
-		margin-right: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] .components-popover__content {
-		margin-left: 20px;
-	}
-
-	// Extra specificity so that we can override the styles in .component-popover
-	&[data-y-axis="left"],
-	&[data-y-axis="center"],
-	&[data-y-axis="right"] {
-		// Position tips above popovers
-		z-index: z-index(".nux-dot-tip");
-
-		// On mobile, always position the tip below the dot and fill the width of the viewport
-		@media (max-width: $break-small) {
-			.components-popover__content {
-				align-self: end;
-				left: 5px;
-				margin: 20px 0 0 0;
-				max-width: none !important; // Override the inline style set by <Popover>
-				position: fixed;
-				right: 5px;
-				width: auto;
-			}
-		}
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: 0;
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: 0;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: -12px;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: -12px;
-	}
-}
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
deleted file mode 100644
index a453da0254b487..00000000000000
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DotTip should render correctly 1`] = `
-<div
-  aria-label="Editor tips"
-  class="components-popover nux-dot-tip is-positioned"
-  role="dialog"
-  style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
-  tabindex="-1"
->
-  <div
-    class="components-popover__content"
-    style="max-height: 0px; overflow: auto;"
-  >
-    <p>
-      It looks like you’re writing a letter. Would you like help?
-    </p>
-    <p>
-      <button
-        class="components-button is-link"
-        type="button"
-      >
-        Got it
-      </button>
-    </p>
-    <button
-      aria-label="Disable tips"
-      class="components-button nux-dot-tip__disable has-icon"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
-        />
-      </svg>
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/nux/src/components/dot-tip/test/index.js b/packages/nux/src/components/dot-tip/test/index.js
deleted file mode 100644
index 7917b044fc3e2d..00000000000000
--- a/packages/nux/src/components/dot-tip/test/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { DotTip } from '..';
-
-const noop = () => {};
-
-describe( 'DotTip', () => {
-	it( 'should not render anything if invisible', async () => {
-		render(
-			<DotTip>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should render correctly', async () => {
-		render(
-			<DotTip isVisible setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
-	} );
-
-	it( 'should call onDismiss when the dismiss button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onDismiss = jest.fn();
-
-		render(
-			<DotTip isVisible onDismiss={ onDismiss } setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		await user.click( screen.getByRole( 'button', { name: 'Got it' } ) );
-
-		expect( onDismiss ).toHaveBeenCalled();
-	} );
-
-	it( 'should call onDisable when the X button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onDisable = jest.fn();
-
-		render(
-			<DotTip isVisible onDisable={ onDisable } setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Disable tips' } )
-		);
-
-		expect( onDisable ).toHaveBeenCalled();
-	} );
-} );
diff --git a/packages/nux/src/index.js b/packages/nux/src/index.js
deleted file mode 100644
index a0b3e073503750..00000000000000
--- a/packages/nux/src/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-export { store } from './store';
-export { default as DotTip } from './components/dot-tip';
-
-deprecated( 'wp.nux', {
-	since: '5.4',
-	hint: 'wp.components.Guide can be used to show a user guide.',
-	version: '6.2',
-} );
diff --git a/packages/nux/src/store/actions.js b/packages/nux/src/store/actions.js
deleted file mode 100644
index ad8adb79c5530d..00000000000000
--- a/packages/nux/src/store/actions.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Returns an action object that, when dispatched, presents a guide that takes
- * the user through a series of tips step by step.
- *
- * @param {string[]} tipIds Which tips to show in the guide.
- *
- * @return {Object} Action object.
- */
-export function triggerGuide( tipIds ) {
-	return {
-		type: 'TRIGGER_GUIDE',
-		tipIds,
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, dismisses the given tip. A
- * dismissed tip will not show again.
- *
- * @param {string} id The tip to dismiss.
- *
- * @return {Object} Action object.
- */
-export function dismissTip( id ) {
-	return {
-		type: 'DISMISS_TIP',
-		id,
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, prevents all tips from
- * showing again.
- *
- * @return {Object} Action object.
- */
-export function disableTips() {
-	return {
-		type: 'DISABLE_TIPS',
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, makes all tips show again.
- *
- * @return {Object} Action object.
- */
-export function enableTips() {
-	return {
-		type: 'ENABLE_TIPS',
-	};
-}
diff --git a/packages/nux/src/store/index.js b/packages/nux/src/store/index.js
deleted file mode 100644
index 39fef6c78c7911..00000000000000
--- a/packages/nux/src/store/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createReduxStore, registerStore } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import reducer from './reducer';
-import * as actions from './actions';
-import * as selectors from './selectors';
-
-const STORE_NAME = 'core/nux';
-
-/**
- * Store definition for the nux namespace.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
- */
-export const store = createReduxStore( STORE_NAME, {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'preferences' ],
-} );
-
-// Once we build a more generic persistence plugin that works across types of stores
-// we'd be able to replace this with a register call.
-registerStore( STORE_NAME, {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'preferences' ],
-} );
diff --git a/packages/nux/src/store/reducer.js b/packages/nux/src/store/reducer.js
deleted file mode 100644
index 373e4781f52353..00000000000000
--- a/packages/nux/src/store/reducer.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { combineReducers } from '@wordpress/data';
-
-/**
- * Reducer that tracks which tips are in a guide. Each guide is represented by
- * an array which contains the tip identifiers contained within that guide.
- *
- * @param {Array}  state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Array} Updated state.
- */
-export function guides( state = [], action ) {
-	switch ( action.type ) {
-		case 'TRIGGER_GUIDE':
-			return [ ...state, action.tipIds ];
-	}
-
-	return state;
-}
-
-/**
- * Reducer that tracks whether or not tips are globally enabled.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function areTipsEnabled( state = true, action ) {
-	switch ( action.type ) {
-		case 'DISABLE_TIPS':
-			return false;
-
-		case 'ENABLE_TIPS':
-			return true;
-	}
-
-	return state;
-}
-
-/**
- * Reducer that tracks which tips have been dismissed. If the state object
- * contains a tip identifier, then that tip is dismissed.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function dismissedTips( state = {}, action ) {
-	switch ( action.type ) {
-		case 'DISMISS_TIP':
-			return {
-				...state,
-				[ action.id ]: true,
-			};
-
-		case 'ENABLE_TIPS':
-			return {};
-	}
-
-	return state;
-}
-
-const preferences = combineReducers( { areTipsEnabled, dismissedTips } );
-
-export default combineReducers( { guides, preferences } );
diff --git a/packages/nux/src/store/selectors.js b/packages/nux/src/store/selectors.js
deleted file mode 100644
index e87cf688a1ba32..00000000000000
--- a/packages/nux/src/store/selectors.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
-/**
- * An object containing information about a guide.
- *
- * @typedef {Object} NUXGuideInfo
- * @property {string[]} tipIds       Which tips the guide contains.
- * @property {?string}  currentTipId The guide's currently showing tip.
- * @property {?string}  nextTipId    The guide's next tip to show.
- */
-
-/**
- * Returns an object describing the guide, if any, that the given tip is a part
- * of.
- *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
- *
- * @return {?NUXGuideInfo} Information about the associated guide.
- */
-export const getAssociatedGuide = createSelector(
-	( state, tipId ) => {
-		for ( const tipIds of state.guides ) {
-			if ( tipIds.includes( tipId ) ) {
-				const nonDismissedTips = tipIds.filter(
-					( tId ) =>
-						! Object.keys(
-							state.preferences.dismissedTips
-						).includes( tId )
-				);
-				const [ currentTipId = null, nextTipId = null ] =
-					nonDismissedTips;
-				return { tipIds, currentTipId, nextTipId };
-			}
-		}
-
-		return null;
-	},
-	( state ) => [ state.guides, state.preferences.dismissedTips ]
-);
-
-/**
- * Determines whether or not the given tip is showing. Tips are hidden if they
- * are disabled, have been dismissed, or are not the current tip in any
- * guide that they have been added to.
- *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
- *
- * @return {boolean} Whether or not the given tip is showing.
- */
-export function isTipVisible( state, tipId ) {
-	if ( ! state.preferences.areTipsEnabled ) {
-		return false;
-	}
-
-	if ( state.preferences.dismissedTips?.hasOwnProperty( tipId ) ) {
-		return false;
-	}
-
-	const associatedGuide = getAssociatedGuide( state, tipId );
-	if ( associatedGuide && associatedGuide.currentTipId !== tipId ) {
-		return false;
-	}
-
-	return true;
-}
-
-/**
- * Returns whether or not tips are globally enabled.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether tips are globally enabled.
- */
-export function areTipsEnabled( state ) {
-	return state.preferences.areTipsEnabled;
-}
diff --git a/packages/nux/src/store/test/actions.js b/packages/nux/src/store/test/actions.js
deleted file mode 100644
index 4e22afe03c8b82..00000000000000
--- a/packages/nux/src/store/test/actions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Internal dependencies
- */
-import { triggerGuide, dismissTip, disableTips, enableTips } from '../actions';
-
-describe( 'actions', () => {
-	describe( 'triggerGuide', () => {
-		it( 'should return a TRIGGER_GUIDE action', () => {
-			expect( triggerGuide( [ 'test/tip-1', 'test/tip-2' ] ) ).toEqual( {
-				type: 'TRIGGER_GUIDE',
-				tipIds: [ 'test/tip-1', 'test/tip-2' ],
-			} );
-		} );
-	} );
-
-	describe( 'dismissTip', () => {
-		it( 'should return an DISMISS_TIP action', () => {
-			expect( dismissTip( 'test/tip' ) ).toEqual( {
-				type: 'DISMISS_TIP',
-				id: 'test/tip',
-			} );
-		} );
-	} );
-
-	describe( 'disableTips', () => {
-		it( 'should return an DISABLE_TIPS action', () => {
-			expect( disableTips() ).toEqual( {
-				type: 'DISABLE_TIPS',
-			} );
-		} );
-	} );
-
-	describe( 'enableTips', () => {
-		it( 'should return an ENABLE_TIPS action', () => {
-			expect( enableTips() ).toEqual( {
-				type: 'ENABLE_TIPS',
-			} );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/store/test/reducer.js b/packages/nux/src/store/test/reducer.js
deleted file mode 100644
index 49172442d8f379..00000000000000
--- a/packages/nux/src/store/test/reducer.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Internal dependencies
- */
-import { guides, areTipsEnabled, dismissedTips } from '../reducer';
-
-describe( 'reducer', () => {
-	describe( 'guides', () => {
-		it( 'should start out empty', () => {
-			expect( guides( undefined, {} ) ).toEqual( [] );
-		} );
-
-		it( 'should add a guide when it is triggered', () => {
-			const state = guides( [], {
-				type: 'TRIGGER_GUIDE',
-				tipIds: [ 'test/tip-1', 'test/tip-2' ],
-			} );
-			expect( state ).toEqual( [ [ 'test/tip-1', 'test/tip-2' ] ] );
-		} );
-	} );
-
-	describe( 'areTipsEnabled', () => {
-		it( 'should default to true', () => {
-			expect( areTipsEnabled( undefined, {} ) ).toBe( true );
-		} );
-
-		it( 'should flip when tips are disabled', () => {
-			const state = areTipsEnabled( true, {
-				type: 'DISABLE_TIPS',
-			} );
-			expect( state ).toBe( false );
-		} );
-
-		it( 'should flip when tips are enabled', () => {
-			const state = areTipsEnabled( false, {
-				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toBe( true );
-		} );
-	} );
-
-	describe( 'dismissedTips', () => {
-		it( 'should start out empty', () => {
-			expect( dismissedTips( undefined, {} ) ).toEqual( {} );
-		} );
-
-		it( 'should mark tips as dismissed', () => {
-			const state = dismissedTips(
-				{},
-				{
-					type: 'DISMISS_TIP',
-					id: 'test/tip',
-				}
-			);
-			expect( state ).toEqual( {
-				'test/tip': true,
-			} );
-		} );
-
-		it( 'should reset if tips are enabled', () => {
-			const initialState = {
-				'test/tip': true,
-			};
-			const state = dismissedTips( initialState, {
-				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toEqual( {} );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/store/test/selectors.js b/packages/nux/src/store/test/selectors.js
deleted file mode 100644
index e2a06c74e08b68..00000000000000
--- a/packages/nux/src/store/test/selectors.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getAssociatedGuide, isTipVisible, areTipsEnabled } from '../selectors';
-
-describe( 'selectors', () => {
-	describe( 'getAssociatedGuide', () => {
-		const state = {
-			guides: [
-				[ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				[ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				[ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-			],
-			preferences: {
-				dismissedTips: {
-					'test/tip-1': true,
-					'test/tip-a': true,
-					'test/tip-b': true,
-					'test/tip-α': true,
-					'test/tip-β': true,
-					'test/tip-γ': true,
-				},
-			},
-		};
-
-		it( 'should return null when there is no associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/unknown' ) ).toBeNull();
-		} );
-
-		it( 'should return the associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/tip-2' ) ).toEqual( {
-				tipIds: [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				currentTipId: 'test/tip-2',
-				nextTipId: 'test/tip-3',
-			} );
-		} );
-
-		it( 'should indicate when there is no next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-b' ) ).toEqual( {
-				tipIds: [ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				currentTipId: 'test/tip-c',
-				nextTipId: null,
-			} );
-		} );
-
-		it( 'should indicate when there is no current or next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-β' ) ).toEqual( {
-				tipIds: [ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-				currentTipId: null,
-				nextTipId: null,
-			} );
-		} );
-	} );
-
-	describe( 'isTipVisible', () => {
-		it( 'is tolerant to individual preferences being undefined', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'is tolerant to undefined dismissedTips', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return true by default', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is dismissed', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {
-						'test/tip': true,
-					},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is in a guide and it is not the current tip', () => {
-			const state = {
-				guides: [ [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ] ],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip-2' ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'areTipsEnabled', () => {
-		it( 'should return true if tips are enabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( false );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/style.scss b/packages/nux/src/style.scss
deleted file mode 100644
index 0df73ff851e9f9..00000000000000
--- a/packages/nux/src/style.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./components/dot-tip/style.scss";
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json b/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
index f9cee4142d11ac..28c0c1b17b4adc 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
@@ -13,11 +13,5 @@
 			"hiddenBlockTypes": [],
 			"preferredStyleVariations": {}
 		}
-	},
-	"core/nux": {
-		"preferences": {
-			"areTipsEnabled": false,
-			"dismissedTips": {}
-		}
 	}
 }

From cd8451d98b98dbd1150e6d0aa96bd93180d57ea8 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Fri, 16 Dec 2022 13:11:59 +0100
Subject: [PATCH 118/209] useSelect: add unit tests for static select mode
 (#46606)

---
 .../src/components/use-select/test/index.js   | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js
index 6dccfd74b741fc..4b7babcedeaac7 100644
--- a/packages/data/src/components/use-select/test/index.js
+++ b/packages/data/src/components/use-select/test/index.js
@@ -1146,4 +1146,38 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 		} );
 	} );
+
+	describe( 'static store selection mode', () => {
+		it( 'can read the current value from store', () => {
+			registry.registerStore( 'testStore', {
+				reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ),
+				actions: { inc: () => ( { type: 'INC' } ) },
+				selectors: { get: ( s ) => s },
+			} );
+
+			const record = jest.fn();
+
+			function TestComponent() {
+				const { get } = useSelect( 'testStore' );
+				return (
+					<button onClick={ () => record( get() ) }>record</button>
+				);
+			}
+
+			render(
+				<RegistryProvider value={ registry }>
+					<TestComponent />
+				</RegistryProvider>
+			);
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			expect( record ).toHaveBeenLastCalledWith( 0 );
+
+			// no need to act() as the component doesn't react to the updates
+			registry.dispatch( 'testStore' ).inc();
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			expect( record ).toHaveBeenLastCalledWith( 1 );
+		} );
+	} );
 } );

From 7ab478bf01314913a660b5c1c3f9e016f14d46c9 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Fri, 16 Dec 2022 13:16:36 +0100
Subject: [PATCH 119/209] Data: recreate listeningStores set for every
 markListeningStores call (#46607)

---
 packages/data/src/registry.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index 89286f689294a5..df46227257f363 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -60,7 +60,7 @@ function getStoreName( storeNameOrDescriptor ) {
 export function createRegistry( storeConfigs = {}, parent = null ) {
 	const stores = {};
 	const emitter = createEmitter();
-	const listeningStores = new Set();
+	let listeningStores = null;
 
 	/**
 	 * Global listener called for each store's update.
@@ -112,7 +112,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function select( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSelectors();
@@ -122,11 +122,12 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	}
 
 	function __unstableMarkListeningStores( callback, ref ) {
-		listeningStores.clear();
+		listeningStores = new Set();
 		try {
 			return callback.call( this );
 		} finally {
 			ref.current = Array.from( listeningStores );
+			listeningStores = null;
 		}
 	}
 
@@ -143,7 +144,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function resolveSelect( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getResolveSelectors();
@@ -165,7 +166,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function suspendSelect( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSuspendSelectors();

From 89998fdfd4d8763cd7396e040db0a85f0c59b13e Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <me@andreidraganescu.info>
Date: Fri, 16 Dec 2022 14:44:51 +0200
Subject: [PATCH 120/209] Adds page list as child of submenu (#46414)

* adds page list as child of submenu and disables direct insert

* fix page link CSS when adding to submenu, enable transform to pagelist, restore direct insert

* try to not render a wrapper if page list block is nested

* Fixes styling, aligns off canvas implementation to list view, fixes
styling bug of page list

Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>
Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>
Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>

* fix fixture

* add missing useEffect

* Fixes markup rendering in the editor to avoid a double LI element

Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>
Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>

* added submenu container class to the page list item uls

* Ensure submenus are correctly positioned in the editor

* add a comment

Co-authored-by: Andrei Draganescu <github@andreidraganescu.info>
Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>
Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>
Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>
Co-authored-by: Ben Dwyer <ben@escruffian.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
---
 docs/reference-guides/core-blocks.md          |  2 +-
 .../block-library/src/page-list-item/edit.js  | 92 ++++++++++++++++++-
 .../block-library/src/page-list/block.json    |  4 +
 packages/block-library/src/page-list/edit.js  | 41 ++++++---
 .../block-library/src/page-list/editor.scss   |  4 +
 .../block-library/src/page-list/index.php     | 12 ++-
 .../fixtures/blocks/core__page-list.json      |  3 +-
 7 files changed, 133 insertions(+), 25 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 14f800f140aee3..25fe5746a04122 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -429,7 +429,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Name:** core/page-list
 -	**Category:** widgets
 -	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** parentPageID
+-	**Attributes:** isNested, parentPageID
 
 ## Page List Item
 
diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
index db8e0a5c173736..aa0836e774848b 100644
--- a/packages/block-library/src/page-list-item/edit.js
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -30,10 +30,95 @@ function useFrontPageId() {
 	}, [] );
 }
 
+/**
+ * Determine the colors for a menu.
+ *
+ * Order of priority is:
+ * 1: Overlay custom colors (if submenu)
+ * 2: Overlay theme colors (if submenu)
+ * 3: Custom colors
+ * 4: Theme colors
+ * 5: Global styles
+ *
+ * @param {Object}  context
+ * @param {boolean} isSubMenu
+ */
+function getColors( context, isSubMenu ) {
+	const {
+		textColor,
+		customTextColor,
+		backgroundColor,
+		customBackgroundColor,
+		overlayTextColor,
+		customOverlayTextColor,
+		overlayBackgroundColor,
+		customOverlayBackgroundColor,
+		style,
+	} = context;
+
+	const colors = {};
+
+	if ( isSubMenu && !! customOverlayTextColor ) {
+		colors.customTextColor = customOverlayTextColor;
+	} else if ( isSubMenu && !! overlayTextColor ) {
+		colors.textColor = overlayTextColor;
+	} else if ( !! customTextColor ) {
+		colors.customTextColor = customTextColor;
+	} else if ( !! textColor ) {
+		colors.textColor = textColor;
+	} else if ( !! style?.color?.text ) {
+		colors.customTextColor = style.color.text;
+	}
+
+	if ( isSubMenu && !! customOverlayBackgroundColor ) {
+		colors.customBackgroundColor = customOverlayBackgroundColor;
+	} else if ( isSubMenu && !! overlayBackgroundColor ) {
+		colors.backgroundColor = overlayBackgroundColor;
+	} else if ( !! customBackgroundColor ) {
+		colors.customBackgroundColor = customBackgroundColor;
+	} else if ( !! backgroundColor ) {
+		colors.backgroundColor = backgroundColor;
+	} else if ( !! style?.color?.background ) {
+		colors.customTextColor = style.color.background;
+	}
+
+	return colors;
+}
+
 export default function PageListItemEdit( { context, attributes } ) {
 	const { id, label, link, hasChildren } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const frontPageId = useFrontPageId();
+
+	const innerBlocksColors = getColors( context, true );
+
+	const blockProps = useBlockProps( {
+		className: classnames(
+			'wp-block-pages-list__item',
+			'wp-block-navigation__submenu-container',
+			{
+				'has-text-color': !! (
+					innerBlocksColors.textColor ||
+					innerBlocksColors.customTextColor
+				),
+				[ `has-${ innerBlocksColors.textColor }-color` ]:
+					!! innerBlocksColors.textColor,
+				'has-background': !! (
+					innerBlocksColors.backgroundColor ||
+					innerBlocksColors.customBackgroundColor
+				),
+				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
+					!! innerBlocksColors.backgroundColor,
+			}
+		),
+		style: {
+			color: innerBlocksColors.customTextColor,
+			backgroundColor: innerBlocksColors.customBackgroundColor,
+		},
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
+
 	return (
 		<li
 			key={ id }
@@ -84,9 +169,8 @@ export default function PageListItemEdit( { context, attributes } ) {
 							'wp-block-navigation__submenu-container':
 								isNavigationChild,
 						} ) }
-					>
-						<InnerBlocks />
-					</ul>
+						{ ...innerBlocksProps }
+					></ul>
 				</>
 			) }
 		</li>
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index e8ff316a9fb4f6..4f4f45c4bb4748 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -11,6 +11,10 @@
 		"parentPageID": {
 			"type": "integer",
 			"default": 0
+		},
+		"isNested": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index 7372191723f466..219822ed87944f 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -25,7 +25,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -189,20 +189,33 @@ export default function PageListEdit( {
 
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
-
-		const _selectedBlockClientId = getSelectedBlockClientId();
+	const { parentNavBlockClientId, isNested } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				isNested:
+					getBlockParentsByBlockName(
+						clientId,
+						'core/navigation-submenu',
+						true
+					).length > 0,
+			};
+		},
+		[ clientId ]
+	);
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
-				_selectedBlockClientId,
-				'core/navigation',
-				true
-			)[ 0 ],
-		};
-	}, [] );
+	useEffect( () => {
+		setAttributes( { isNested } );
+	}, [ isNested ] );
 
 	return (
 		<>
diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
index 83a70bafd94853..4cda6018220d32 100644
--- a/packages/block-library/src/page-list/editor.scss
+++ b/packages/block-library/src/page-list/editor.scss
@@ -22,6 +22,10 @@
 	}
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+	display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned.
+}
+
 // Make links unclickable in the editor.
 .wp-block-pages-list__item__link {
 	pointer-events: none;
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 7944f6f3a84ad6..3ae63047e27485 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -139,13 +139,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
+ * @param boolean $is_nested Whether the submenu is nested or not.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
  * @param array   $colors Color information for overlay styles.
  * @param integer $depth The nesting depth.
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -173,7 +174,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
 
 		// If this is the first level of submenus, include the overlay colors.
-		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
+		if ( ( ( 0 < $depth && ! $is_nested ) || $is_nested ) && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
 			if ( '' !== $colors['overlay_inline_styles'] ) {
 				$style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) );
@@ -212,7 +213,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			if ( $is_navigation_child ) {
 				$markup .= ' wp-block-navigation__submenu-container';
 			}
-			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -253,6 +254,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	++$block_id;
 
 	$parent_page_id = $attributes['parentPageID'];
+	$is_nested      = $attributes['isNested'];
 
 	$all_pages = get_pages(
 		array(
@@ -321,9 +323,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$wrapper_markup = $is_nested ? '%2$s' : '<ul %1$s>%2$s</ul>';
 
-	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
diff --git a/test/integration/fixtures/blocks/core__page-list.json b/test/integration/fixtures/blocks/core__page-list.json
index b1992a437b8849..2552d5e093c777 100644
--- a/test/integration/fixtures/blocks/core__page-list.json
+++ b/test/integration/fixtures/blocks/core__page-list.json
@@ -3,7 +3,8 @@
 		"name": "core/page-list",
 		"isValid": true,
 		"attributes": {
-			"parentPageID": 0
+			"parentPageID": 0,
+			"isNested": false
 		},
 		"innerBlocks": []
 	}

From 76aa4bb2e9c8b5734e118823913963ef11c0a517 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 16 Dec 2022 15:45:15 +0200
Subject: [PATCH 121/209] [Pattern Setup]: Fix full heights during transition.
 (#46615)

---
 .../src/components/block-pattern-setup/style.scss            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 15edb5cd75f3ff..79f5868176608e 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -6,7 +6,6 @@
 	width: 100%;
 	border-radius: $radius-block-ui;
 
-	// TODO change to check parent.
 	&.view-mode-grid {
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
@@ -84,6 +83,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 
 		.carousel-container {
@@ -91,6 +91,7 @@
 			position: relative;
 			padding: 0;
 			margin: 0;
+			height: 100%;
 			list-style: none;
 			transform-style: preserve-3d;
 			* {
@@ -100,6 +101,8 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				height: 100%;
+				background-color: $white;
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;

From 9258e2dbfa8881944ccbd73e21dead650e5ba0ce Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 16 Dec 2022 14:23:15 +0000
Subject: [PATCH 122/209] Update: Use offsite navigation editor on the
 navigation inspector sidebar. (#46440)

---
 .../navigation-menu-sidebar/navigation-menu.js         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
index 86e7d334318cc3..89a66bd6c73592 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
@@ -3,6 +3,7 @@
  */
 import {
 	__experimentalListView as ListView,
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -48,5 +49,14 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
+
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
+		return (
+			<OffCanvasEditor
+				blocks={ innerBlocks }
+				selectBlockInCanvas={ false }
+			/>
+		);
+	}
 	return <ListView id={ id } />;
 }

From 869050027302d24b9ee6729c92d50f8fcb83e1f5 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Fri, 16 Dec 2022 16:43:09 +0100
Subject: [PATCH 123/209] Element: export new React 18 APIs (#46610)

* Element: export new React 18 APIs

* Export more APIs
---
 packages/element/CHANGELOG.md          |  4 ++
 packages/element/README.md             | 52 ++++++++++++++++++++++++++
 packages/element/src/react-platform.js | 15 ++++++++
 packages/element/src/react.js          | 48 +++++++++++++++++++++---
 4 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index efb51cc2dca060..78329b5047949f 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
 
+### New Features
+
+-   Started exporting new React 18 APIs ([46610](https://github.com/WordPress/gutenberg/pull/46610))
+
 ## 4.20.0 (2022-11-16)
 
 ## 4.19.0 (2022-11-02)
diff --git a/packages/element/README.md b/packages/element/README.md
index 8a3e39dc50a1ff..60a64113bca7ef 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -198,6 +198,14 @@ _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Creates a new React root for the target DOM node.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#createroot>
+
 ### findDOMNode
 
 Finds the dom node of a React component.
@@ -234,6 +242,14 @@ _Parameters_
 -   _element_ `import('./react').WPElement`: Element to hydrate.
 -   _target_ `HTMLElement`: DOM node into which element should be hydrated.
 
+### hydrateRoot
+
+Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#hydrateroot>
+
 ### isEmptyElement
 
 Checks if the provided WP element is empty.
@@ -332,6 +348,12 @@ _Returns_
 
 -   `string`: Serialized element.
 
+### startTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/react-api.html#starttransition>
+
 ### StrictMode
 
 Component that activates additional checks and warnings for its descendants.
@@ -381,18 +403,36 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usedebugvalue>
 
+### useDeferredValue
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usedeferredvalue>
+
 ### useEffect
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useeffect>
 
+### useId
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useid>
+
 ### useImperativeHandle
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useimperativehandle>
 
+### useInsertionEffect
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useinsertioneffect>
+
 ### useLayoutEffect
 
 _Related_
@@ -423,6 +463,18 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usestate>
 
+### useSyncExternalStore
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore>
+
+### useTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usetransition>
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Contributing to this package
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index 7b35ea8d2a2d53..c819565b79553d 100644
--- a/packages/element/src/react-platform.js
+++ b/packages/element/src/react-platform.js
@@ -8,6 +8,7 @@ import {
 	hydrate,
 	unmountComponentAtNode,
 } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Creates a portal into which a component can be rendered.
@@ -43,6 +44,20 @@ export { render };
  */
 export { hydrate };
 
+/**
+ * Creates a new React root for the target DOM node.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#createroot
+ */
+export { createRoot };
+
+/**
+ * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+export { hydrateRoot };
+
 /**
  * Removes any mounted element from the target DOM node.
  *
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index 292f18cc92c627..4f2b8e150303ee 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -14,16 +14,22 @@ import {
 	isValidElement,
 	memo,
 	StrictMode,
-	useState,
-	useEffect,
-	useContext,
-	useReducer,
 	useCallback,
+	useContext,
+	useDebugValue,
+	useDeferredValue,
+	useEffect,
+	useId,
 	useMemo,
-	useRef,
 	useImperativeHandle,
+	useInsertionEffect,
 	useLayoutEffect,
-	useDebugValue,
+	useReducer,
+	useRef,
+	useState,
+	useSyncExternalStore,
+	useTransition,
+	startTransition,
 	lazy,
 	Suspense,
 } from 'react';
@@ -150,16 +156,31 @@ export { useContext };
  */
 export { useDebugValue };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue
+ */
+export { useDeferredValue };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useeffect
  */
 export { useEffect };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useid
+ */
+export { useId };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
  */
 export { useImperativeHandle };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect
+ */
+export { useInsertionEffect };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */
@@ -185,6 +206,21 @@ export { useRef };
  */
 export { useState };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
+ */
+export { useSyncExternalStore };
+
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usetransition
+ */
+export { useTransition };
+
+/**
+ * @see https://reactjs.org/docs/react-api.html#starttransition
+ */
+export { startTransition };
+
 /**
  * @see https://reactjs.org/docs/react-api.html#reactlazy
  */

From f19cbe2a49272ef20cf140976d53214833ff156e Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Fri, 16 Dec 2022 16:51:37 +0100
Subject: [PATCH 124/209] Navigation list view: use smaller lock icon (#46578)

* used smaller lock icon on off canvas editor

* reduce size of lock icon on list view too

* removed repeated css
---
 .../components/list-view/block-select-button.js  |  2 +-
 .../src/components/list-view/style.scss          |  7 ++++++-
 .../off-canvas-editor/block-select-button.js     |  2 +-
 packages/icons/src/index.js                      |  1 +
 packages/icons/src/library/lock-small.js         | 16 ++++++++++++++++
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/icons/src/library/lock-small.js

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 9477eb2cda40c0..39baf78d5a7a88 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 0c271352b91552..6bcb7667b36b85 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -319,11 +319,16 @@
 
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
-		width: 24px;
+		width: 16px;
 		min-width: 24px;
+		height: 16px;
 		margin-left: auto;
 		padding: 0;
 		vertical-align: middle;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
 	}
 }
 
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
index a3cb64e9298dd4..543823ab1ada25 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 92bc48c185cc99..77c974fc61211f 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -129,6 +129,7 @@ export { default as listItem } from './library/list-item';
 export { default as listView } from './library/list-view';
 export { default as lock } from './library/lock';
 export { default as lockOutline } from './library/lock-outline';
+export { default as lockSmall } from './library/lock-small';
 export { default as login } from './library/login';
 export { default as loop } from './library/loop';
 export { default as mapMarker } from './library/map-marker';
diff --git a/packages/icons/src/library/lock-small.js b/packages/icons/src/library/lock-small.js
new file mode 100644
index 00000000000000..9ed94cc264b003
--- /dev/null
+++ b/packages/icons/src/library/lock-small.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lockSmall = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15 11h-.2V9c0-1.5-1.2-2.8-2.8-2.8S9.2 7.5 9.2 9v2H9c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1zm-1.8 0h-2.5V9c0-.7.6-1.2 1.2-1.2s1.2.6 1.2 1.2v2z"
+		/>
+	</SVG>
+);
+
+export default lockSmall;

From a10e7eb16d14b7a83413dc35605213a877ca967a Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Sat, 17 Dec 2022 02:03:44 +0800
Subject: [PATCH 125/209] Always run initialization code before e2e tests
 (#46459)

---
 packages/e2e-test-utils-playwright/src/test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index 3872ce5b9fafb4..6f8046f2dde7ea 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -153,7 +153,7 @@ const test = base.extend<
 
 			await use( requestUtils );
 		},
-		{ scope: 'worker' },
+		{ scope: 'worker', auto: true },
 	],
 	// An automatic fixture to configure snapshot settings globally.
 	snapshotConfig: [

From ec33daec0cefd421349eb2f1e3b739be3fef6acd Mon Sep 17 00:00:00 2001
From: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Date: Fri, 16 Dec 2022 14:00:06 -0700
Subject: [PATCH 126/209] E2E: Refactor global inserter utility (#46366)

---
 packages/e2e-test-utils/README.md             |  64 ++--
 packages/e2e-test-utils/src/index.js          |  13 +-
 packages/e2e-test-utils/src/inserter.js       | 352 ++++++++++++------
 .../plugins/block-directory-add.test.js       |   2 +-
 4 files changed, 279 insertions(+), 152 deletions(-)

diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index 8d1ae7c47b1dfa..96ed7f3dcb1ea4 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -111,7 +111,7 @@ _Parameters_
 
 ### closeGlobalBlockInserter
 
-Undocumented declaration.
+Closes the global inserter.
 
 ### closeListView
 
@@ -455,41 +455,37 @@ _Returns_
 
 ### insertBlock
 
-Opens the inserter, searches for the given term, then selects the first
-result that appears. It then waits briefly for the block list to update.
+Inserts a block matching a given search term via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the block to insert.
 
 ### insertBlockDirectoryBlock
 
-Opens the inserter, searches for the given block, then selects the
-first result that appears from the block directory. It then waits briefly for the block list to
-update.
+Inserts a Block Directory block matching a given search term via the global
+inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the Block Directory block to insert.
 
 ### insertPattern
 
-Opens the inserter, searches for the given pattern, then selects the first
-result that appears. It then waits briefly for the block list to update.
+Inserts a pattern matching a given search term via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the pattern to insert.
 
 ### insertReusableBlock
 
-Opens the inserter, searches for the given reusable block, then selects the
-first result that appears. It then waits briefly for the block list to
-update.
+Inserts a reusable block matching a given search term via the global
+inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the reusable block to insert.
 
 ### installPlugin
 
@@ -577,7 +573,7 @@ Clicks on the button in the header which opens Document Settings sidebar when it
 
 ### openGlobalBlockInserter
 
-Opens the global block inserter.
+Opens the global inserter.
 
 ### openGlobalStylesPanel
 
@@ -667,27 +663,51 @@ _Returns_
 
 ### searchForBlock
 
-Search for block in the global inserter
+Searches for a block via the global inserter.
+
+_Parameters_
+
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of block to be inserted or null if nothing was found.
+
+### searchForBlockDirectoryBlock
+
+Searches for a Block Directory block via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the Block Directory block to be inserted or null if nothing was found.
 
 ### searchForPattern
 
-Search for pattern in the global inserter
+Searches for a pattern via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the pattern to be inserted or null if nothing was found.
 
 ### searchForReusableBlock
 
-Search for reusable block in the global inserter.
+Searches for a reusable block via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the reusable block to be inserted or null if nothing was found.
 
 ### selectBlockByClientId
 
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index fda35292174b00..6b217d52c44074 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -42,16 +42,17 @@ export { hasBlockSwitcher } from './has-block-switcher';
 export { getPageError } from './get-page-error';
 export { getOption } from './get-option';
 export {
-	insertBlock,
-	insertPattern,
-	insertReusableBlock,
+	openGlobalBlockInserter,
+	closeGlobalBlockInserter,
+	toggleGlobalBlockInserter,
 	searchForBlock,
 	searchForPattern,
 	searchForReusableBlock,
+	searchForBlockDirectoryBlock,
+	insertBlock,
+	insertPattern,
+	insertReusableBlock,
 	insertBlockDirectoryBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	toggleGlobalBlockInserter,
 } from './inserter';
 export { installPlugin } from './install-plugin';
 export { installTheme } from './install-theme';
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index e69282c9dd2bf5..84521728160bee 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { ElementHandle } from 'puppeteer-core';
+
 /**
  * Internal dependencies
  */
@@ -10,38 +15,37 @@ const INSERTER_SEARCH_SELECTOR =
 	'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 
 /**
- * Opens the global block inserter.
+ * Opens the global inserter.
  */
 export async function openGlobalBlockInserter() {
-	if ( await isGlobalInserterOpen() ) {
-		// If global inserter is already opened, reset to an initial state where
-		// the default (first) tab is selected.
-		const tab = await page.$(
-			'.block-editor-inserter__tabs .components-tab-panel__tabs-item:nth-of-type(1):not(.is-active)'
-		);
-
-		if ( tab ) {
-			await tab.click();
-		}
-	} else {
+	if ( ! ( await isGlobalInserterOpen() ) ) {
 		await toggleGlobalBlockInserter();
 
-		// Waiting here is necessary because sometimes the inserter takes more time to
-		// render than Puppeteer takes to complete the 'click' action.
+		// Waiting here is necessary because sometimes the inserter takes more
+		// time to render than Puppeteer takes to complete the 'click' action.
 		await page.waitForSelector( '.block-editor-inserter__menu' );
 	}
 }
 
+/**
+ * Closes the global inserter.
+ */
 export async function closeGlobalBlockInserter() {
 	if ( await isGlobalInserterOpen() ) {
 		await toggleGlobalBlockInserter();
 	}
 }
 
+/**
+ * Checks if the global inserter is open.
+ *
+ * @return {Promise<boolean>} Whether the inserter is open or not.
+ */
 async function isGlobalInserterOpen() {
 	return await page.evaluate( () => {
 		// "Add block" selector is required to make sure performance comparison
-		// doesn't fail on older branches where we still had "Add block" as label.
+		// doesn't fail on older branches where we still had "Add block" as
+		// label.
 		return !! document.querySelector(
 			'.edit-post-header [aria-label="Add block"].is-pressed,' +
 				'.edit-site-header-edit-mode [aria-label="Add block"].is-pressed,' +
@@ -70,11 +74,56 @@ export async function toggleGlobalBlockInserter() {
 	);
 }
 
+/**
+ * Selects the global inserter tab/category, unless it's already selected.
+ *
+ * @param {string} label The label of the tab to select.
+ */
+export async function selectGlobalInserterTab( label ) {
+	const tabs = await page.$( '.block-editor-inserter__tabs' );
+	if ( ! tabs ) {
+		return; // Do nothing if tabs are unavailable (e.g. for inner blocks).
+	}
+
+	const activeTab = await page.waitForSelector(
+		'.block-editor-inserter__tabs button.is-active'
+	);
+
+	const activeTabLabel = await page.evaluate(
+		( el ) => el.innerText,
+		activeTab
+	);
+
+	if ( activeTabLabel === label ) {
+		return; // Do nothing if the target tab is already active.
+	}
+
+	let labelSelector;
+
+	switch ( label ) {
+		case 'Blocks':
+		case 'Patterns':
+		case 'Media':
+			labelSelector = `. = "${ label }"`;
+			break;
+		case 'Reusable':
+			// Reusable tab label is an icon, hence the different selector.
+			labelSelector = `@aria-label = "${ label }"`;
+			break;
+	}
+
+	const targetTab = await page.waitForXPath(
+		`//div[contains(@class, "block-editor-inserter__tabs")]//button[${ labelSelector }]`
+	);
+
+	await targetTab.click();
+}
+
 /**
  * Moves focus to the selected block.
  */
 async function focusSelectedBlock() {
-	// Ideally there shouuld be a UI way to do this. (Focus the selected block)
+	// Ideally, there should be a UI way to focus the selected block.
 	await page.evaluate( () => {
 		wp.data
 			.dispatch( 'core/block-editor' )
@@ -88,7 +137,8 @@ async function focusSelectedBlock() {
 }
 
 /**
- * Retrieves the document container by css class and checks to make sure the document's active element is within it
+ * Retrieves the document container by css class and checks to make sure the
+ * document's active element is within it.
  */
 async function waitForInserterCloseAndContentFocus() {
 	await canvas().waitForFunction(
@@ -100,157 +150,213 @@ async function waitForInserterCloseAndContentFocus() {
 }
 
 /**
- * Wait for the inserter search to yield results because that input is debounced.
+ * Searches for an entity matching given category and term via the global
+ * inserter. If nothing is found, null will be returned.
+ *
+ * Available categories: Blocks, Patterns, Reusable and Block Directory.
+ *
+ * @param {string} category   The category to search within.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the element to be
+ * inserted or null if nothing was found.
+ */
+export async function searchGlobalInserter( category, searchTerm ) {
+	await openGlobalBlockInserter();
+	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
+	await page.focus( INSERTER_SEARCH_SELECTOR );
+	await pressKeyWithModifier( 'primary', 'a' );
+	await page.keyboard.type( searchTerm );
+
+	// Wait for the default block list to disappear to prevent its items from
+	// being considered as search results. This is needed since we're debouncing
+	// search request.
+	await page.waitForSelector( '.block-editor-inserter__block-list', {
+		hidden: true,
+	} );
+
+	let waitForInsertElement;
+	let waitForNoResults;
+
+	switch ( category ) {
+		case 'Blocks':
+		case 'Patterns':
+		case 'Reusable': {
+			waitForInsertElement = async () => {
+				return await page.waitForXPath(
+					`//*[@role='option' and contains(., '${ searchTerm }')]`
+				);
+			};
+			waitForNoResults = async () => {
+				await page.waitForSelector(
+					'.block-editor-inserter__no-results'
+				);
+				return null;
+			};
+			break;
+		}
+		case 'Block Directory': {
+			waitForInsertElement = async () => {
+				// Return the first item from the Block Directory search results.
+				return await page.waitForSelector(
+					'.block-directory-downloadable-blocks-list button:first-child'
+				);
+			};
+			waitForNoResults = async () => {
+				// Use a soft timeout if Block Directory doesn't return anything
+				// within 5 seconds, as there's no "empty results" element being
+				// rendered when nothing is found.
+				return await new Promise( ( resolve ) =>
+					setTimeout( () => resolve( null ), 5000 )
+				);
+			};
+		}
+	}
+
+	return await Promise.race( [ waitForInsertElement(), waitForNoResults() ] );
+}
+
+/**
+ * Inserts an entity matching given category and term via the global inserter.
+ * If the entity is not instantly available in the open inserter, a search will
+ * be performed. If the search returns no results, an error will be thrown.
+ *
+ * Available categories: Blocks, Patterns, Reusable and Block Directory.
+ *
+ * @param {string} category   The category to insert from.
+ * @param {string} searchTerm The term by which to find the entity to insert.
  */
-async function waitForInserterSearch() {
-	try {
+export async function insertFromGlobalInserter( category, searchTerm ) {
+	await openGlobalBlockInserter();
+	await selectGlobalInserterTab( category );
+
+	let insertButton;
+
+	if ( [ 'Blocks', 'Reusable' ].includes( category ) ) {
+		// If it's a block, see it it's insertable without searching...
+		try {
+			insertButton = (
+				await page.$x(
+					`//*[@role='option' and contains(., '${ searchTerm }')]`
+				)
+			 )[ 0 ];
+		} catch ( error ) {
+			// noop
+		}
+	}
+
+	// ...and if not, perform a global search.
+	if ( ! insertButton ) {
+		insertButton = await searchGlobalInserter( category, searchTerm );
+	}
+
+	// Throw an error if nothing was found.
+	if ( ! insertButton ) {
+		throw new Error(
+			`Couldn't find "${ searchTerm }" in the ${ category } category.`
+		);
+	}
+
+	// Insert found entity.
+	await insertButton.click();
+
+	// Extra wait for the reusable block to be ready.
+	if ( category === 'Reusable' ) {
 		await page.waitForSelector(
-			'.block-editor-inserter__no-tab-container',
-			{ timeout: 2000 }
+			'.block-library-block__reusable-block-container'
 		);
-	} catch ( e ) {
-		// This selector doesn't exist in older versions, so let's just continue.
 	}
+
+	// Extra wait for the Block Directory block to be ready.
+	if ( category === 'Block Directory' ) {
+		await page.waitForSelector(
+			'.block-directory-downloadable-blocks-list button:first-child:not(.is-busy)'
+		);
+	}
+
+	await focusSelectedBlock();
+	await waitForInserterCloseAndContentFocus();
 }
 
 /**
- * Search for block in the global inserter
+ * Searches for a block via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of block to be
+ * inserted or null if nothing was found.
  */
 export async function searchForBlock( searchTerm ) {
-	await openGlobalBlockInserter();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+	return await searchGlobalInserter( 'Blocks', searchTerm );
 }
 
 /**
- * Search for pattern in the global inserter
+ * Searches for a pattern via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the pattern to be
+ * inserted or null if nothing was found.
  */
 export async function searchForPattern( searchTerm ) {
-	await openGlobalBlockInserter();
-	// Select the patterns tab.
-	const tab = await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[.="Patterns"]'
-	);
-	await tab.click();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+	return await searchGlobalInserter( 'Patterns', searchTerm );
 }
 
 /**
- * Search for reusable block in the global inserter.
+ * Searches for a reusable block via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the reusable block to be
+ * inserted or null if nothing was found.
  */
 export async function searchForReusableBlock( searchTerm ) {
-	await openGlobalBlockInserter();
-
-	// The reusable blocks tab won't appear until the reusable blocks have been
-	// fetched. They aren't fetched until an inserter is used or the post
-	// already contains reusable blocks, so wait for the tab to appear.
-	await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[@aria-label="Reusable"]'
-	);
+	return await searchGlobalInserter( 'Reusable', searchTerm );
+}
 
-	// Select the reusable blocks tab.
-	const tab = await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[@aria-label="Reusable"]'
-	);
-	await tab.click();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+/**
+ * Searches for a Block Directory block via the global inserter.
+ *
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the Block Directory block
+ * to be inserted or null if nothing was found.
+ */
+export async function searchForBlockDirectoryBlock( searchTerm ) {
+	return await searchGlobalInserter( 'Block Directory', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given term, then selects the first
- * result that appears. It then waits briefly for the block list to update.
+ * Inserts a block matching a given search term via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the block to insert.
  */
 export async function insertBlock( searchTerm ) {
-	await searchForBlock( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//button//span[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	await insertFromGlobalInserter( 'Blocks', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given pattern, then selects the first
- * result that appears. It then waits briefly for the block list to update.
+ * Inserts a pattern matching a given search term via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the pattern to insert.
  */
 export async function insertPattern( searchTerm ) {
-	await searchForPattern( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//div[@role = 'option']//div[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	await insertFromGlobalInserter( 'Patterns', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given reusable block, then selects the
- * first result that appears. It then waits briefly for the block list to
- * update.
+ * Inserts a reusable block matching a given search term via the global
+ * inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the reusable block to
+ *                            insert.
  */
 export async function insertReusableBlock( searchTerm ) {
-	await searchForReusableBlock( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//button//span[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
-	// We should wait until the block is loaded.
-	await page.waitForXPath(
-		'//*[contains(@class,"block-library-block__reusable-block-container")]'
-	);
+	await insertFromGlobalInserter( 'Reusable', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given block, then selects the
- * first result that appears from the block directory. It then waits briefly for the block list to
- * update.
+ * Inserts a Block Directory block matching a given search term via the global
+ * inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the Block Directory
+ *                            block to insert.
  */
 export async function insertBlockDirectoryBlock( searchTerm ) {
-	await searchForBlock( searchTerm );
-
-	// Grab the first block in the list.
-	const insertButton = await page.waitForSelector(
-		'.block-directory-downloadable-blocks-list button:first-child'
-	);
-	await insertButton.click();
-	await page.waitForFunction(
-		() =>
-			! document.body.querySelector(
-				'.block-directory-downloadable-blocks-list button:first-child.is-busy'
-			)
-	);
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	return await insertFromGlobalInserter( 'Block Directory', searchTerm );
 }
diff --git a/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js b/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
index d1537263968192..2e969d17915924 100644
--- a/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
@@ -166,7 +166,7 @@ const matchUrl = ( reqUrl, urls ) => {
 };
 
 describe( 'adding blocks from block directory', () => {
-	beforeEach( async () => {
+	beforeAll( async () => {
 		await createNewPost();
 	} );
 

From 4b4c4befb34d815634b85cbee23cad169ab0e073 Mon Sep 17 00:00:00 2001
From: brookewp <35543432+brookewp@users.noreply.github.com>
Date: Fri, 16 Dec 2022 13:14:39 -0800
Subject: [PATCH 127/209] TextareaControl: add new opt-in prop (#46559)

* TextareaControl: add new opt-in prop

* Remove margin bottom and replace div with VStack for Disabled component

* Update Changelog

* Revert "Update Changelog"
---
 .../block-library/src/cover/edit/inspector-controls.js    | 1 +
 packages/block-library/src/image/image.js                 | 1 +
 packages/block-library/src/media-text/edit.js             | 1 +
 packages/block-library/src/navigation-link/edit.js        | 1 +
 packages/block-library/src/navigation-submenu/edit.js     | 1 +
 packages/components/src/disabled/stories/index.tsx        | 8 ++++++--
 .../edit-site/src/components/global-styles/custom-css.js  | 1 +
 packages/editor/src/components/post-excerpt/index.js      | 1 +
 8 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index d3f65672e09328..6160f5d7828d6a 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -180,6 +180,7 @@ export default function CoverInspectorControls( {
 							isImageBackground &&
 							isImgElement && (
 								<TextareaControl
+									__nextHasNoMarginBottom
 									label={ __(
 										'Alt text (alternative text)'
 									) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 5eb511b455864d..15f152a1ff7a45 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -413,6 +413,7 @@ export default function Image( {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
+							__nextHasNoMarginBottom
 							label={ __( 'Alt text (alternative text)' ) }
 							value={ alt }
 							onChange={ updateAlt }
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 83b7074e3d1550..e4f005f7986aec 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -281,6 +281,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaType === 'image' && (
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Alt text (alternative text)' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 7e58527d947f5c..1f1fd9ac61fcf0 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -495,6 +495,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( { description: descriptionValue } );
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 47a222bd57bb66..a6029e98661ddc 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -481,6 +481,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( {
diff --git a/packages/components/src/disabled/stories/index.tsx b/packages/components/src/disabled/stories/index.tsx
index 06246adde633f1..81f2bf4c079233 100644
--- a/packages/components/src/disabled/stories/index.tsx
+++ b/packages/components/src/disabled/stories/index.tsx
@@ -15,6 +15,7 @@ import Disabled from '../';
 import SelectControl from '../../select-control/';
 import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
+import { VStack } from '../../v-stack/';
 
 const meta: ComponentMeta< typeof Disabled > = {
 	title: 'Components/Disabled',
@@ -37,18 +38,21 @@ const Form = () => {
 	const [ textControlValue, setTextControlValue ] = useState( '' );
 	const [ textAreaValue, setTextAreaValue ] = useState( '' );
 	return (
-		<div>
+		<VStack>
 			<TextControl
+				__nextHasNoMarginBottom
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }
 			/>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label="TextArea Control"
 				value={ textAreaValue }
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [
@@ -58,7 +62,7 @@ const Form = () => {
 					{ value: 'c', label: 'Option C' },
 				] }
 			/>
-		</div>
+		</VStack>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
index 6c7d3de1cf06e5..61aad940cd372f 100644
--- a/packages/edit-site/src/components/global-styles/custom-css.js
+++ b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -42,6 +42,7 @@ function CustomCSSControl() {
 	return (
 		<>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				value={
 					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
 					themeCustomCSS
diff --git a/packages/editor/src/components/post-excerpt/index.js b/packages/editor/src/components/post-excerpt/index.js
index fcba84ec03754a..dc0220f861abff 100644
--- a/packages/editor/src/components/post-excerpt/index.js
+++ b/packages/editor/src/components/post-excerpt/index.js
@@ -15,6 +15,7 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label={ __( 'Write an excerpt (optional)' ) }
 				className="editor-post-excerpt__textarea"
 				onChange={ ( value ) => onUpdateExcerpt( value ) }

From 69388d0301b198239fe9062e0628ce4dffd08c7a Mon Sep 17 00:00:00 2001
From: Viral Sampat <53076293+viralsampat-multidots@users.noreply.github.com>
Date: Sun, 18 Dec 2022 22:13:48 +0530
Subject: [PATCH 128/209] fixed table block footer section issue (#46567)

* fixed table block footer section issue

* fixed table block footer section issue

* fixed table block footer section issue and removed extra css from theme file
---
 packages/block-library/src/table/style.scss | 8 ++++++++
 packages/block-library/src/table/theme.scss | 8 --------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 9721513a53eee0..4f4271650f50e1 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -11,6 +11,14 @@
 		width: 100%;
 	}
 
+	thead {
+		border-bottom: 3px solid;
+	}
+
+	tfoot {
+		border-top: 3px solid;
+	}
+
 	// Match default border style to default style in editor
 	td,
 	th {
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 3adc4d3e452ba7..d42e79b02b4965 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,14 +1,6 @@
 .wp-block-table {
 	margin: 0 0 1em 0;
 
-	thead {
-		border-bottom: 3px solid;
-	}
-
-	tfoot {
-		border-top: 3px solid;
-	}
-
 	td,
 	th {
 		word-break: normal;

From ded93540d8b333570f4968a119157894f0619d96 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 19 Dec 2022 11:55:43 +0800
Subject: [PATCH 129/209] Verse: Prevent default styles overriding theme.json
 font family (#46560)

---
 packages/block-library/src/verse/style.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/verse/style.scss b/packages/block-library/src/verse/style.scss
index 954e6abaa517d4..2b3247f0b40cdc 100644
--- a/packages/block-library/src/verse/style.scss
+++ b/packages/block-library/src/verse/style.scss
@@ -1,5 +1,8 @@
 pre.wp-block-verse {
-	font-family: inherit;
 	overflow: auto;
 	white-space: pre-wrap;
 }
+
+:where(pre.wp-block-verse) {
+	font-family: inherit;
+}

From f6cccc29db4f474db9809933078928b405a2d820 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Mon, 19 Dec 2022 18:07:23 +1100
Subject: [PATCH 130/209] Reverting changes and updated doc comment blocks.
 (#43928)

The reason for revert is that `wp_typography_get_css_variable_inline_style` was only deprecated in 6.1, and the Gutenberg plugin supports a minimum of 6.0.
---
 lib/block-supports/typography.php | 35 +++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 809fba1a6e7aca..aa6c74a5d2e73c 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -168,16 +168,21 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 }
 
 /**
- * Note: this method is for backwards compatibility.
- * It mostly replaces `gutenberg_typography_get_css_variable_inline_style()`.
- *
  * Generates an inline style value for a typography feature e.g. text decoration,
  * text transform, and font style.
  *
- * @param string $style_value    A raw style value for a single typography feature from a block's style attribute.
- * @param string $css_property   Slug for the CSS property the inline style sets.
+ * Note: This function is for backwards compatibility.
+ * * It is necessary to parse older blocks whose typography styles contain presets.
+ * * It mostly replaces the deprecated `wp_typography_get_css_variable_inline_style()`,
+ *   but skips compiling a CSS declaration as the style engine takes over this role.
+ *
+ * @link https://github.com/wordpress/gutenberg/pull/27555
+ *
+ * @since 6.1.0
  *
- * @return string?             A CSS inline style value.
+ * @param string $style_value  A raw style value for a single typography feature from a block's style attribute.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string A CSS inline style value.
  */
 function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_property ) {
 	// If the style value is not a preset CSS variable go no further.
@@ -185,10 +190,12 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_
 		return $style_value;
 	}
 
-	// For backwards compatibility.
-	// Presets were removed in https://github.com/WordPress/gutenberg/pull/27555.
-	// We have a preset CSS variable as the style.
-	// Get the style value from the string and return CSS style.
+	/*
+	 * For backwards compatibility.
+	 * Presets were removed in WordPress/gutenberg#27555.
+	 * We have a preset CSS variable as the style.
+	 * Get the style value from the string and return CSS style.
+	 */
 	$index_to_splice = strrpos( $style_value, '|' ) + 1;
 	$slug            = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
 
@@ -197,14 +204,16 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_
 }
 
 /**
- * Deprecated.
- * This method is no longer used and will have to be deprecated in Core.
+ * This method is no longer used and has been deprecated in Core since 6.1.0.
  *
- * It can be deleted once migrated to the next WordPress version.
+ * It can be deleted once Gutenberg's minimum supported WordPress version is >= 6.1
  *
  * Generates an inline style for a typography feature e.g. text decoration,
  * text transform, and font style.
  *
+ * @since 5.8.0
+ * @deprecated 6.1.0
+ *
  * @param array  $attributes   Block's attributes.
  * @param string $feature      Key for the feature within the typography styles.
  * @param string $css_property Slug for the CSS property the inline style sets.

From a556b6932d0163f1f23886bd003ad6c819cb4dc0 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Mon, 19 Dec 2022 13:25:29 +0530
Subject: [PATCH 131/209] add block preview in nested styles panels (#46401)

---
 .../global-styles/block-preview-panel.js      | 23 +++++++++++--------
 .../components/global-styles/screen-block.js  |  5 +---
 .../components/global-styles/screen-border.js |  2 ++
 .../components/global-styles/screen-colors.js |  3 +++
 .../components/global-styles/screen-layout.js |  2 ++
 .../global-styles/screen-typography.js        |  3 +++
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 296a39a5d065d1..2d73c0495cdfc4 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -4,25 +4,30 @@
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 const BlockPreviewPanel = ( { name } ) => {
-	const blockExample = getBlockType( name )?.example;
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
+	const blockExample = getBlockType( name )?.example;
+	const blocks = blockExample && getBlockFromExample( name, blockExample );
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+	const minHeight = containerHeight;
 
 	return ! blockExample ? null : (
-		<div className="edit-site-global-styles__block-preview-panel">
-			{ containerResizeListener }
+		<Spacer marginX={ 4 } marginBottom={ 4 }>
+			<div className="edit-site-global-styles__block-preview-panel">
+				{ containerResizeListener }
 
-			<BlockPreview
-				viewportWidth={ viewportWidth }
-				__experimentalMinHeight={ containerHeight }
-				blocks={ getBlockFromExample( name, blockExample ) }
-			/>
-		</div>
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					__experimentalMinHeight={ minHeight }
+					blocks={ blocks }
+				/>
+			</div>
+		</Spacer>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 57860a8623c6ae..9e9d585e88d31d 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,9 +16,7 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<Spacer paddingX={ 4 }>
-				<BlockPreviewPanel name={ name } />
-			</Spacer>
+			<BlockPreviewPanel name={ name } />
 			<ContextMenu
 				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
 				name={ name }
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
index 04a92653f4e102..d2d3707271dede 100644
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBorder( { name } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
@@ -15,6 +16,7 @@ function ScreenBorder( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index c713cb5ee5818f..ec5cb308b20271 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -20,6 +20,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import BlockPreviewPanel from './block-preview-panel';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -186,6 +187,8 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 3fbc911f5fde79..2909cc34273b21 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenLayout( { name } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
@@ -15,6 +16,7 @@ function ScreenLayout( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 3f7a5eb3eb8670..49282b73318127 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -17,6 +17,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -87,6 +88,8 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>

From 87c738e8a6fc05dbe549429e0e8a9dfa7e58d1ed Mon Sep 17 00:00:00 2001
From: Tonya Mork <hello@hellofromtonya.com>
Date: Mon, 19 Dec 2022 05:53:39 -0600
Subject: [PATCH 132/209] Webfonts: redesign architecture to use
 WP_Dependencies (#43492)

Complete redesign of the Webfonts API:

* The current implementation re-implements a lot of the concepts that are already handled by `WP_Dependencies` for the script and style loaders. The script loader classes already have the concepts of dependencies, enqueuing, and registering, as well as a way to "do_item()" (generate CSS or a tag with source, in this case).

* Includes a temporary backwards-compatible (BC) layer to give extenders time and information to upgrade their code to the new API data structures and functionality.

Props: hellofromtonya, aristath, desrosj, colorful-tones, ironprogrammer.
---
 lib/compat/wordpress-6.2/script-loader.php    |   24 +
 lib/experimental/class-wp-web-fonts.php       |  744 +++++++++++
 .../class-wp-webfonts-provider-local.php      |   20 +-
 .../class-wp-webfonts-provider.php            |   70 +-
 lib/experimental/class-wp-webfonts-utils.php  |  122 ++
 lib/experimental/class-wp-webfonts.php        |  467 +++----
 .../register-webfonts-from-theme-json.php     |  271 ++--
 lib/experimental/webfonts-deprecations.php    |  100 ++
 lib/experimental/webfonts.php                 |  229 ++--
 lib/load.php                                  |   16 +-
 phpunit/class-wp-webfonts-test.php            |  453 -------
 phpunit/fixtures/mock-provider.php            |   27 +
 phpunit/multisite.xml                         |    1 +
 phpunit/webfonts/wp-webfonts-testcase.php     |  268 ++++
 .../webfonts/wp-webfonts-tests-dataset.php    | 1155 +++++++++++++++++
 .../webfonts/wpDeregisterFontFamily-test.php  |   74 ++
 .../wpDeregisterWebfontVariation-test.php     |  298 +++++
 .../wpEnqueueWebfontVariations-test.php       |   82 ++
 phpunit/webfonts/wpEnqueueWebfonts-test.php   |  122 ++
 phpunit/webfonts/wpPrintWebfonts-test.php     |  127 ++
 .../wpRegisterWebfontProvider-test.php        |   96 ++
 phpunit/webfonts/wpRegisterWebfonts-test.php  |  325 +++++
 phpunit/webfonts/wpWebfonts-test.php          |   38 +
 phpunit/webfonts/wpWebfonts/add-test.php      |   45 +
 .../wpWebfonts/addFontFamily-test.php         |   66 +
 .../webfonts/wpWebfonts/addVariation-test.php |  149 +++
 phpunit/webfonts/wpWebfonts/dequeue-test.php  |   72 +
 phpunit/webfonts/wpWebfonts/doItem-test.php   |  336 +++++
 phpunit/webfonts/wpWebfonts/doItems-test.php  |  196 +++
 phpunit/webfonts/wpWebfonts/enqueue-test.php  |   53 +
 .../webfonts/wpWebfonts/getEnqueued-test.php  |   57 +
 .../webfonts/wpWebfonts/getProviders-test.php |   62 +
 .../wpWebfonts/getRegistered-test.php         |   90 ++
 phpunit/webfonts/wpWebfonts/query-test.php    |  151 +++
 .../wpWebfonts/registerProvider-test.php      |  116 ++
 phpunit/webfonts/wpWebfonts/remove-test.php   |  118 ++
 .../wpWebfonts/removeFontFamily-test.php      |   89 ++
 .../wpWebfonts/removeVariation-test.php       |  278 ++++
 .../wpWebfontsProviderLocal-test.php}         |   91 +-
 .../convertFontFamilyIntoHandle-test.php      |   84 ++
 .../convertVariationIntoHandle-test.php       |  122 ++
 .../getFontFamilyFromVariation-test.php       |  134 ++
 .../wpWebfontsUtils/isDefined-test.php        |   61 +
 43 files changed, 6452 insertions(+), 1047 deletions(-)
 create mode 100644 lib/experimental/class-wp-web-fonts.php
 create mode 100644 lib/experimental/class-wp-webfonts-utils.php
 create mode 100644 lib/experimental/webfonts-deprecations.php
 delete mode 100644 phpunit/class-wp-webfonts-test.php
 create mode 100644 phpunit/fixtures/mock-provider.php
 create mode 100644 phpunit/webfonts/wp-webfonts-testcase.php
 create mode 100644 phpunit/webfonts/wp-webfonts-tests-dataset.php
 create mode 100644 phpunit/webfonts/wpDeregisterFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpDeregisterWebfontVariation-test.php
 create mode 100644 phpunit/webfonts/wpEnqueueWebfontVariations-test.php
 create mode 100644 phpunit/webfonts/wpEnqueueWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpPrintWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpRegisterWebfontProvider-test.php
 create mode 100644 phpunit/webfonts/wpRegisterWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/add-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/addFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/addVariation-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/dequeue-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/doItem-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/doItems-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/enqueue-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getEnqueued-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getProviders-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getRegistered-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/query-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/registerProvider-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/remove-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/removeVariation-test.php
 rename phpunit/{class-wp-webfonts-local-provider-test.php => webfonts/wpWebfontsProviderLocal-test.php} (78%)
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/isDefined-test.php

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index e08bfa6e46ca8e..f3fde930383bc2 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -127,6 +127,30 @@ function gutenberg_resolve_assets_override() {
 
 	$scripts = ob_get_clean();
 
+	/*
+	 * Generate web font @font-face styles for the site editor iframe.
+	 * Use the registered font families for printing.
+	 */
+	if ( class_exists( 'WP_Web_Fonts' ) ) {
+		$wp_webfonts = wp_webfonts();
+		$registered  = $wp_webfonts->get_registered_font_families();
+		if ( ! empty( $registered ) ) {
+			$queue = $wp_webfonts->queue;
+			$done  = $wp_webfonts->done;
+
+			$wp_webfonts->done  = array();
+			$wp_webfonts->queue = $registered;
+
+			ob_start();
+			$wp_webfonts->do_items();
+			$styles .= ob_get_clean();
+
+			// Reset the Web Fonts API.
+			$wp_webfonts->done  = $done;
+			$wp_webfonts->queue = $queue;
+		}
+	}
+
 	return array(
 		'styles'  => $styles,
 		'scripts' => $scripts,
diff --git a/lib/experimental/class-wp-web-fonts.php b/lib/experimental/class-wp-web-fonts.php
new file mode 100644
index 00000000000000..15df7ecf47e5c5
--- /dev/null
+++ b/lib/experimental/class-wp-web-fonts.php
@@ -0,0 +1,744 @@
+<?php
+/**
+ * Web Fonts API class.
+ *
+ * @package    WordPress
+ * @subpackage WebFonts
+ * @since      X.X.X
+ */
+
+if ( class_exists( 'WP_Web_Fonts' ) ) {
+	return;
+}
+
+/**
+ * Class WP_Web_Fonts
+ *
+ * @since X.X.X
+ */
+class WP_Web_Fonts extends WP_Webfonts {
+
+	/**
+	 * An array of registered providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $providers = array();
+
+	/**
+	 * The flipped $to_do array of web font handles.
+	 *
+	 * Used for a faster lookup of the web font handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string[]
+	 */
+	private $to_do_keyed_handles;
+
+	/**
+	 * Provider instance store, keyed by provider ID.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $provider_instances = array();
+
+	/**
+	 * Variation property defaults.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $variation_property_defaults = array(
+		'provider'     => 'local',
+		'font-family'  => '',
+		'font-style'   => 'normal',
+		'font-weight'  => '400',
+		'font-display' => 'fallback',
+	);
+
+	/**
+	 * Constructor.
+	 *
+	 * @since X.X.X
+	 */
+	public function __construct() {
+		/**
+		 * Filters the web font variation's property defaults.
+		 *
+		 * @since X.X.X
+		 *
+		 * @param array $defaults {
+		 *     An array of required web font properties and defaults.
+		 *
+		 *     @type string $provider     The provider ID. Default 'local'.
+		 *     @type string $font-family  The font-family property. Default empty string.
+		 *     @type string $font-style   The font-style property. Default 'normal'.
+		 *     @type string $font-weight  The font-weight property. Default '400'.
+		 *     @type string $font-display The font-display property. Default 'fallback'.
+		 * }
+		 */
+		$this->variation_property_defaults = apply_filters( 'wp_webfont_variation_defaults', $this->variation_property_defaults );
+
+		/**
+		 * Fires when the WP_Webfonts instance is initialized.
+		 *
+		 * @since X.X.X
+		 *
+		 * @param WP_Web_Fonts $wp_webfonts WP_Web_Fonts instance (passed by reference).
+		 */
+		do_action_ref_array( 'wp_default_webfonts', array( &$this ) );
+	}
+
+	/**
+	 * Get the list of registered providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array $providers {
+	 *     An associative array of registered providers, keyed by their unique ID.
+	 *
+	 *     @type string $provider_id => array {
+	 *         An associate array of provider's class name and fonts.
+	 *
+	 *         @type string $class   Fully qualified name of the provider's class.
+	 *         @type string[] $fonts An array of enqueued font handles for this provider.
+	 *     }
+	 * }
+	 */
+	public function get_providers() {
+		return $this->providers;
+	}
+
+	/**
+	 * Register a provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider's unique ID.
+	 * @param string $class       The provider class name.
+	 * @return bool True if successfully registered, else false.
+	 */
+	public function register_provider( $provider_id, $class ) {
+		if ( empty( $provider_id ) || empty( $class ) || ! class_exists( $class ) ) {
+			return false;
+		}
+
+		$this->providers[ $provider_id ] = array(
+			'class' => $class,
+			'fonts' => array(),
+		);
+		return true;
+	}
+
+	/**
+	 * Get the list of all registered font family handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	public function get_registered_font_families() {
+		$font_families = array();
+		foreach ( $this->registered as $handle => $obj ) {
+			if ( $obj->extra['is_font_family'] ) {
+				$font_families[] = $handle;
+			}
+		}
+		return $font_families;
+	}
+
+	/**
+	 * Get the list of all registered font families and their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	public function get_registered() {
+		return array_keys( $this->registered );
+	}
+
+	/**
+	 * Get the list of enqueued font families and their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array[]
+	 */
+	public function get_enqueued() {
+		return $this->queue;
+	}
+
+	/**
+	 * Registers a font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family Font family name to register.
+	 * @return string|null Font family handle when registration successes. Null on failure.
+	 */
+	public function add_font_family( $font_family ) {
+		$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+		if ( ! $font_family_handle ) {
+			return null;
+		}
+
+		if ( isset( $this->registered[ $font_family_handle ] ) ) {
+			return $font_family_handle;
+		}
+
+		$registered = $this->add( $font_family_handle, false );
+		if ( ! $registered ) {
+			return null;
+		}
+
+		$this->add_data( $font_family_handle, 'font-properties', array( 'font-family' => $font_family ) );
+		$this->add_data( $font_family_handle, 'is_font_family', true );
+
+		return $font_family_handle;
+	}
+
+	/**
+	 * Removes a font family and all registered variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family to remove.
+	 */
+	public function remove_font_family( $font_family_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return;
+		}
+
+		$variations = $this->registered[ $font_family_handle ]->deps;
+
+		foreach ( $variations as $variation ) {
+			$this->remove( $variation );
+		}
+
+		$this->remove( $font_family_handle );
+	}
+
+	/**
+	 * Add a variation to an existing family or register family if none exists.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 * @param string $variation_handle   Optional. The variation's handle. When none is provided, the
+	 *                                   handle will be dynamically generated.
+	 *                                   Default empty string.
+	 * @return string|null Variation handle on success. Else null.
+	 */
+	public function add_variation( $font_family_handle, array $variation, $variation_handle = '' ) {
+		if ( ! WP_Webfonts_Utils::is_defined( $font_family_handle ) ) {
+			trigger_error( 'Font family handle must be a non-empty string.' );
+			return null;
+		}
+
+		// When there is a variation handle, check it.
+		if ( '' !== $variation_handle && ! WP_Webfonts_Utils::is_defined( $variation_handle ) ) {
+			trigger_error( 'Variant handle must be a non-empty string.' );
+			return null;
+		}
+
+		// Register the font family when it does not yet exist.
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			if ( ! $this->add_font_family( $font_family_handle ) ) {
+				return null;
+			}
+		}
+
+		$variation = $this->validate_variation( $variation );
+
+		// Variation validation failed.
+		if ( ! $variation ) {
+			return null;
+		}
+
+		// When there's no variation handle, attempt to create one.
+		if ( '' === $variation_handle ) {
+			$variation_handle = WP_Webfonts_Utils::convert_variation_into_handle( $font_family_handle, $variation );
+			if ( is_null( $variation_handle ) ) {
+				return null;
+			}
+		}
+
+		// Bail out if the variant is already registered.
+		if ( $this->is_variation_registered( $font_family_handle, $variation_handle ) ) {
+			return $variation_handle;
+		}
+
+		$variation_src = array_key_exists( 'src', $variation ) ? $variation['src'] : false;
+		$result        = $this->add( $variation_handle, $variation_src );
+
+		// Bail out if the registration failed.
+		if ( ! $result ) {
+			return null;
+		}
+
+		$this->add_data( $variation_handle, 'font-properties', $variation );
+		$this->add_data( $variation_handle, 'is_font_family', false );
+
+		// Add the font variation as a dependency to the registered font family.
+		$this->add_dependency( $font_family_handle, $variation_handle );
+
+		$this->providers[ $variation['provider'] ]['fonts'][] = $variation_handle;
+
+		return $variation_handle;
+	}
+
+	/**
+	 * Removes a variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family for this variation.
+	 * @param string $variation_handle   The variation's handle to remove.
+	 */
+	public function remove_variation( $font_family_handle, $variation_handle ) {
+		if ( isset( $this->registered[ $variation_handle ] ) ) {
+			$this->remove( $variation_handle );
+		}
+
+		if ( ! $this->is_variation_registered( $font_family_handle, $variation_handle ) ) {
+			return;
+		}
+
+		// Remove the variation as a dependency from its font family.
+		$this->registered[ $font_family_handle ]->deps = array_values(
+			array_diff(
+				$this->registered[ $font_family_handle ]->deps,
+				array( $variation_handle )
+			)
+		);
+	}
+
+	/**
+	 * Checks if the variation is registered.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param string $variation_handle   Variation's handle.
+	 * @return bool True when registered to the given font family. Else false.
+	 */
+	private function is_variation_registered( $font_family_handle, $variation_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return false;
+		}
+
+		return in_array( $variation_handle, $this->registered[ $font_family_handle ]->deps, true );
+	}
+
+	/**
+	 * Adds a variation as a dependency to the given font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param string $variation_handle   The variation's handle.
+	 */
+	private function add_dependency( $font_family_handle, $variation_handle ) {
+		$this->registered[ $font_family_handle ]->deps[] = $variation_handle;
+	}
+
+	/**
+	 * Validates and sanitizes a variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $variation  Variation properties to add.
+	 * @return false|array Validated variation on success. Else, false.
+	 */
+	private function validate_variation( $variation ) {
+		$variation = wp_parse_args( $variation, $this->variation_property_defaults );
+
+		// Check the font-family.
+		if ( empty( $variation['font-family'] ) || ! is_string( $variation['font-family'] ) ) {
+			trigger_error( 'Webfont font-family must be a non-empty string.' );
+			return false;
+		}
+
+		// Local fonts need a "src".
+		if ( 'local' === $variation['provider'] ) {
+			// Make sure that local fonts have 'src' defined.
+			if ( empty( $variation['src'] ) || ( ! is_string( $variation['src'] ) && ! is_array( $variation['src'] ) ) ) {
+				trigger_error( 'Webfont src must be a non-empty string or an array of strings.' );
+				return false;
+			}
+		} elseif ( ! isset( $this->providers[ $variation['provider'] ] ) ) {
+			trigger_error( sprintf( 'The provider "%s" is not registered', $variation['provider'] ) );
+			return false;
+		} elseif ( ! class_exists( $this->providers[ $variation['provider'] ]['class'] ) ) {
+			trigger_error( sprintf( 'The provider class "%s" does not exist', $variation['provider'] ) );
+			return false;
+		}
+
+		// Validate the 'src' property.
+		if ( ! empty( $variation['src'] ) ) {
+			foreach ( (array) $variation['src'] as $src ) {
+				if ( empty( $src ) || ! is_string( $src ) ) {
+					trigger_error( 'Each webfont src must be a non-empty string.' );
+					return false;
+				}
+			}
+		}
+
+		// Check the font-weight.
+		if ( ! is_string( $variation['font-weight'] ) && ! is_int( $variation['font-weight'] ) ) {
+			trigger_error( 'Webfont font-weight must be a properly formatted string or integer.' );
+			return false;
+		}
+
+		// Check the font-display.
+		if ( ! in_array( $variation['font-display'], array( 'auto', 'block', 'fallback', 'swap', 'optional' ), true ) ) {
+			$variation['font-display'] = 'fallback';
+		}
+
+		$valid_props = array(
+			'ascent-override',
+			'descent-override',
+			'font-display',
+			'font-family',
+			'font-stretch',
+			'font-style',
+			'font-weight',
+			'font-variant',
+			'font-feature-settings',
+			'font-variation-settings',
+			'line-gap-override',
+			'size-adjust',
+			'src',
+			'unicode-range',
+
+			// Exceptions.
+			'provider',
+		);
+
+		foreach ( $variation as $prop => $value ) {
+			if ( ! in_array( $prop, $valid_props, true ) ) {
+				unset( $variation[ $prop ] );
+			}
+		}
+
+		return $variation;
+	}
+
+	/**
+	 * Processes the items and dependencies.
+	 *
+	 * Processes the items passed to it or the queue, and their dependencies.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[]|bool $handles Optional. Items to be processed: queue (false),
+	 *                                      single item (string), or multiple items (array of strings).
+	 *                                      Default false.
+	 * @param int|false            $group   Optional. Group level: level (int), no group (false).
+	 *
+	 * @return array|string[] Array of web font handles that have been processed.
+	 *                        An empty array if none were processed.
+	 */
+	public function do_items( $handles = false, $group = false ) {
+		$handles = $this->prepare_handles_for_printing( $handles );
+
+		if ( empty( $handles ) ) {
+			return $this->done;
+		}
+
+		$this->all_deps( $handles );
+		if ( empty( $this->to_do ) ) {
+			return $this->done;
+		}
+
+		$this->to_do_keyed_handles = array_flip( $this->to_do );
+
+		foreach ( $this->get_providers() as $provider_id => $provider ) {
+			// Alert and skip if the provider class does not exist.
+			if ( ! class_exists( $provider['class'] ) ) {
+				/* translators: %s is the provider name. */
+				trigger_error(
+					sprintf(
+						'Class "%s" not found for "%s" web font provider',
+						$provider['class'],
+						$provider_id
+					)
+				);
+				continue;
+			}
+
+			$this->do_item( $provider_id, $group );
+		}
+
+		$this->process_font_families_after_printing( $handles );
+
+		return $this->done;
+	}
+
+	/**
+	 * Prepares the given handles for printing.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[]|bool $handles Optional. Handles to prepare.
+	 *                                      Default false.
+	 * @return array Array of handles.
+	 */
+	private function prepare_handles_for_printing( $handles = false ) {
+		if ( false !== $handles ) {
+			$handles = $this->validate_handles( $handles );
+			// Bail out when invalid.
+			if ( empty( $handles ) ) {
+				return array();
+			}
+		}
+
+		// Use the enqueued queue.
+		if ( empty( $handles ) ) {
+			if ( empty( $this->queue ) ) {
+				return array();
+			}
+			$handles = $this->queue;
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Validates handle(s) to ensure each is a non-empty string.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[] $handles Handles to prepare.
+	 * @return string[]|null Array of handles on success. Else null.
+	 */
+	private function validate_handles( $handles ) {
+		// Validate each element is a non-empty string handle.
+		$handles = array_filter( (array) $handles, array( WP_Webfonts_Utils::class, 'is_defined' ) );
+
+		if ( empty( $handles ) ) {
+			trigger_error( 'Handles must be a non-empty string or array of non-empty strings' );
+			return null;
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Invokes each provider to process and print its styles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @see WP_Dependencies::do_item()
+	 *
+	 * @param string    $provider_id The provider to process.
+	 * @param int|false $group       Not used.
+	 * @return bool
+	 */
+	public function do_item( $provider_id, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		// Bail out if the provider is not registered.
+		if ( ! isset( $this->providers[ $provider_id ] ) ) {
+			return false;
+		}
+
+		$font_handles = $this->get_enqueued_fonts_for_provider( $provider_id );
+		if ( empty( $font_handles ) ) {
+			return false;
+		}
+
+		$properties_by_font = $this->get_font_properties_for_provider( $font_handles );
+		if ( empty( $properties_by_font ) ) {
+			return false;
+		}
+
+		// Invoke provider to print its styles.
+		$provider = $this->get_provider_instance( $provider_id );
+		$provider->set_webfonts( $properties_by_font );
+		$provider->print_styles();
+
+		// Clean up.
+		$this->update_queues_for_printed_fonts( $font_handles );
+
+		return true;
+	}
+
+	/**
+	 * Retrieves a list of enqueued web font variations for a provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider to process.
+	 * @return array[] Webfonts organized by providers.
+	 */
+	private function get_enqueued_fonts_for_provider( $provider_id ) {
+		$providers = $this->get_providers();
+
+		if ( empty( $providers[ $provider_id ] ) ) {
+			return array();
+		}
+
+		return array_intersect(
+			$providers[ $provider_id ]['fonts'],
+			$this->to_do
+		);
+	}
+
+	/**
+	 * Gets a list of font properties for each of the given font handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $font_handles Font handles to get properties.
+	 * @return array A list of fonts with each font's properties.
+	 */
+	private function get_font_properties_for_provider( array $font_handles ) {
+		$font_properties = array();
+
+		foreach ( $font_handles as $font_handle ) {
+			$properties = $this->get_data( $font_handle, 'font-properties' );
+			if ( ! $properties ) {
+				continue;
+			}
+			$font_properties[ $font_handle ] = $properties;
+		}
+
+		return $font_properties;
+	}
+
+	/**
+	 * Gets the instance of the provider from the WP_Webfonts::$provider_instance store.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider to get.
+	 * @return object Instance of the provider.
+	 */
+	private function get_provider_instance( $provider_id ) {
+		if ( ! isset( $this->provider_instances[ $provider_id ] ) ) {
+			$this->provider_instances[ $provider_id ] = new $this->providers[ $provider_id ]['class']();
+		}
+		return $this->provider_instances[ $provider_id ];
+	}
+
+	/**
+	 * Update queues for the given printed fonts.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $font_handles Font handles to get properties.
+	 */
+	private function update_queues_for_printed_fonts( array $font_handles ) {
+		foreach ( $font_handles as $font_handle ) {
+			$this->set_as_done( $font_handle );
+			$this->remove_from_to_do_queues( $font_handle );
+		}
+	}
+
+	/**
+	 * Processes the font families after printing the variations.
+	 *
+	 * For each queued font family:
+	 *
+	 * a. if any of their variations were printed, the font family is added to the `done` list.
+	 * b. removes each from the to_do queues.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $handles Handles to process.
+	 */
+	private function process_font_families_after_printing( array $handles ) {
+		foreach ( $handles as $handle ) {
+			if (
+				! $this->get_data( $handle, 'is_font_family' ) ||
+				! isset( $this->to_do_keyed_handles[ $handle ] )
+			) {
+				continue;
+			}
+			$font_family = $this->registered[ $handle ];
+
+			// Add the font family to `done` list if any of its variations were printed.
+			if ( ! empty( $font_family->deps ) ) {
+				$processed = array_intersect( $font_family->deps, $this->done );
+				if ( ! empty( $processed ) ) {
+					$this->set_as_done( $handle );
+				}
+			}
+
+			$this->remove_from_to_do_queues( $handle );
+		}
+	}
+
+	/**
+	 * Removes the handle from the `to_do` and `to_do_keyed_handles` lists.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $handle Handle to remove.
+	 */
+	private function remove_from_to_do_queues( $handle ) {
+		unset(
+			$this->to_do[ $this->to_do_keyed_handles[ $handle ] ],
+			$this->to_do_keyed_handles[ $handle ]
+		);
+	}
+
+	/**
+	 * Sets the given handle to done by adding it to the `done` list.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $handle Handle to set as done.
+	 */
+	private function set_as_done( $handle ) {
+		if ( ! is_array( $this->done ) ) {
+			$this->done = array();
+		}
+		$this->done[] = $handle;
+	}
+
+	/**
+	 * Converts the font family and its variations into theme.json structural format.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle Font family to convert.
+	 * @return array Webfonts in theme.json structural format.
+	 */
+	public function to_theme_json( $font_family_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return array();
+		}
+
+		$font_family_name  = $this->registered[ $font_family_handle ]->extra['font-properties']['font-family'];
+		$theme_json_format = array(
+			'fontFamily' => str_contains( $font_family_name, ' ' ) ? "'{$font_family_name}'" : $font_family_name,
+			'name'       => $font_family_name,
+			'slug'       => $font_family_handle,
+			'fontFace'   => array(),
+		);
+
+		foreach ( $this->registered[ $font_family_handle ]->deps as $variation_handle ) {
+			if ( ! isset( $this->registered[ $variation_handle ] ) ) {
+				continue;
+			}
+
+			$variation_obj        = $this->registered[ $variation_handle ];
+			$variation_properties = array( 'origin' => 'gutenberg_wp_webfonts_api' );
+			foreach ( $variation_obj->extra['font-properties'] as $property_name => $property_value ) {
+				$property_in_camelcase                          = lcfirst( str_replace( '-', '', ucwords( $property_name, '-' ) ) );
+				$variation_properties[ $property_in_camelcase ] = $property_value;
+			}
+			$theme_json_format['fontFace'][ $variation_obj->handle ] = $variation_properties;
+		}
+
+		return $theme_json_format;
+	}
+}
diff --git a/lib/experimental/class-wp-webfonts-provider-local.php b/lib/experimental/class-wp-webfonts-provider-local.php
index 9af27fa7c436a7..3950ebcd624c39 100644
--- a/lib/experimental/class-wp-webfonts-provider-local.php
+++ b/lib/experimental/class-wp-webfonts-provider-local.php
@@ -35,6 +35,21 @@ class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
 	 */
 	protected $id = 'local';
 
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.1.0
+	 */
+	public function __construct() {
+		if (
+			function_exists( 'is_admin' ) && ! is_admin()
+			&&
+			function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
+		) {
+			$this->style_tag_atts = array( 'type' => 'text/css' );
+		}
+	}
+
 	/**
 	 * Gets the `@font-face` CSS styles for locally-hosted font files.
 	 *
@@ -81,7 +96,7 @@ class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
 	 * }
 	 * </code>
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @return string The `@font-face` CSS.
 	 */
@@ -183,7 +198,8 @@ private function order_src( array $webfont ) {
 	private function build_font_face_css( array $webfont ) {
 		$css = '';
 
-		// Wrap font-family in quotes if it contains spaces.
+		// Wrap font-family in quotes if it contains spaces
+		// and is not already wrapped in quotes.
 		if (
 			str_contains( $webfont['font-family'], ' ' ) &&
 			! str_contains( $webfont['font-family'], '"' ) &&
diff --git a/lib/experimental/class-wp-webfonts-provider.php b/lib/experimental/class-wp-webfonts-provider.php
index a49b8a324b7f5f..8fcbd76a76d3cf 100644
--- a/lib/experimental/class-wp-webfonts-provider.php
+++ b/lib/experimental/class-wp-webfonts-provider.php
@@ -6,7 +6,7 @@
  *
  * @package    WordPress
  * @subpackage WebFonts
- * @since      6.0.0
+ * @since      X.X.X
  */
 
 if ( class_exists( 'WP_Webfonts_Provider' ) ) {
@@ -30,26 +30,46 @@
  * into styles (in a performant way for the provider service
  * it manages).
  *
- * @since 6.0.0
+ * @since X.X.X
  */
 abstract class WP_Webfonts_Provider {
 
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string
+	 */
+	protected $id = '';
+
 	/**
 	 * Webfonts to be processed.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @var array[]
 	 */
 	protected $webfonts = array();
 
+	/**
+	 * Array of Font-face style tag's attribute(s)
+	 * where the key is the attribute name and the
+	 * value is its value.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string[]
+	 */
+	protected $style_tag_atts = array();
+
 	/**
 	 * Sets this provider's webfonts property.
 	 *
 	 * The API's Controller passes this provider's webfonts
 	 * for processing here in the provider.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @param array[] $webfonts Registered webfonts.
 	 */
@@ -57,6 +77,18 @@ public function set_webfonts( array $webfonts ) {
 		$this->webfonts = $webfonts;
 	}
 
+	/**
+	 * Prints the generated styles.
+	 *
+	 * @since X.X.X
+	 */
+	public function print_styles() {
+		printf(
+			$this->get_style_element(),
+			$this->get_css()
+		);
+	}
+
 	/**
 	 * Gets the `@font-face` CSS for the provider's webfonts.
 	 *
@@ -64,9 +96,37 @@ public function set_webfonts( array $webfonts ) {
 	 * needed `@font-face` CSS for all of its webfonts. Specifics of how
 	 * this processing is done is contained in each provider.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @return string The `@font-face` CSS.
 	 */
 	abstract public function get_css();
+
+	/**
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string The style element.
+	 */
+	protected function get_style_element() {
+		$attributes = $this->generate_style_element_attributes();
+
+		return "<style id='wp-webfonts-{$this->id}'{$attributes}>\n%s\n</style>\n";
+	}
+
+	/**
+	 * Gets the defined <style> element's attributes.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string A string of attribute=value when defined, else, empty string.
+	 */
+	private function generate_style_element_attributes() {
+		$attributes = '';
+		foreach ( $this->style_tag_atts as $name => $value ) {
+			$attributes .= " {$name}='{$value}'";
+		}
+		return $attributes;
+	}
 }
diff --git a/lib/experimental/class-wp-webfonts-utils.php b/lib/experimental/class-wp-webfonts-utils.php
new file mode 100644
index 00000000000000..3c086a974ab9d0
--- /dev/null
+++ b/lib/experimental/class-wp-webfonts-utils.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * Webfont API's utility helpers.
+ *
+ * @package    WordPress
+ * @subpackage WebFonts
+ * @since      X.X.X
+ */
+
+if ( class_exists( 'WP_Webfonts_Utils' ) ) {
+	return;
+}
+
+/**
+ * Utility helpers for the Webfonts API.
+ *
+ * @since X.X.X
+ */
+class WP_Webfonts_Utils {
+
+	/**
+	 * Converts the given font family into a handle.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family Font family to convert into a handle.
+	 * @return string|null The font family handle on success. Else, null.
+	 */
+	public static function convert_font_family_into_handle( $font_family ) {
+		if ( ! self::is_defined( $font_family ) ) {
+			return null;
+		}
+
+		// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
+		if ( str_contains( $font_family, ',' ) ) {
+			$font_family = explode( ',', $font_family )[0];
+		}
+
+		return sanitize_title( $font_family );
+	}
+
+	/**
+	 * Converts the given variation and its font-family into a handle.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family The font family's handle for this variation.
+	 * @param array  $variation   An array of variation properties.
+	 * @return string|null The variation handle.
+	 */
+	public static function convert_variation_into_handle( $font_family, array $variation ) {
+		$handle = '';
+		foreach ( array( 'font-weight', 'font-style' ) as $property ) {
+			if ( ! array_key_exists( $property, $variation ) || ! static::is_defined( $variation[ $property ] ) ) {
+				continue;
+			}
+
+			$handle .= ' ' . $variation[ $property ];
+		}
+
+		if ( '' === $handle ) {
+			trigger_error( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+			return null;
+		}
+
+		return sanitize_title( $font_family . $handle );
+	}
+
+	/**
+	 * Gets the font family from the variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $variation An array of variation properties to search.
+	 * @return string|null The font family if defined. Else, null.
+	 */
+	public static function get_font_family_from_variation( array $variation ) {
+		return static::search_for_font_family( $variation );
+	}
+
+	/**
+	 * Checks if the given input is defined, i.e. meaning is a non-empty string.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $input The input to check.
+	 * @return bool True when non-empty string. Else false.
+	 */
+	public static function is_defined( $input ) {
+		return ( is_string( $input ) && ! empty( $input ) );
+	}
+
+	/**
+	 * Searches the variation array to extract the font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $haystack An array of variation properties to search.
+	 * @return string|null The font family when found. Else, null.
+	 */
+	private static function search_for_font_family( array $haystack ) {
+		if ( array_key_exists( 'fontFamily', $haystack ) ) {
+			$key = 'fontFamily';
+		} elseif ( array_key_exists( 'font-family', $haystack ) ) {
+			$key = 'font-family';
+		} else {
+			trigger_error( 'Font family not found.' );
+			return null;
+		}
+
+		if ( static::is_defined( $haystack[ $key ] ) ) {
+			// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
+			if ( strpos( $haystack[ $key ], ',' ) !== false ) {
+				return explode( ',', $haystack[ $key ] )[0];
+			}
+			return $haystack[ $key ];
+		}
+
+		trigger_error( 'Font family not defined in the variation.' );
+		return null;
+	}
+}
diff --git a/lib/experimental/class-wp-webfonts.php b/lib/experimental/class-wp-webfonts.php
index 0c0cb06a27ffb3..fd00d39cfc5bf8 100644
--- a/lib/experimental/class-wp-webfonts.php
+++ b/lib/experimental/class-wp-webfonts.php
@@ -1,10 +1,15 @@
 <?php
 /**
- * Webfonts API class.
+ * Webfonts API class: backwards-compatibility (BC) layer for all
+ * deprecated publicly exposed methods and functionality.
  *
- * @package    WordPress
+ * This class/file will NOT be backported to Core. Rather for sites
+ * using the previous API, it exists to prevent breakages, giving
+ * developers time to upgrade their code.
+ *
+ * @since      X.X.X
  * @subpackage WebFonts
- * @since      6.0.0
+ * @package    WordPress
  */
 
 if ( class_exists( 'WP_Webfonts' ) ) {
@@ -14,411 +19,277 @@
 /**
  * Class WP_Webfonts
  *
- * @since 6.0.0
+ * BACKPORT NOTE: Do not backport this file to Core.
+ * This class exists to give extenders guidance and time to upgrade their code
+ * to use the new Web Fonts API.
  */
-class WP_Webfonts {
+class WP_Webfonts extends WP_Dependencies {
 
 	/**
-	 * An array of registered webfonts.
-	 *
-	 * @since 6.0.0
+	 * Gets the font slug.
 	 *
-	 * @var array[]
-	 */
-	private $registered_webfonts = array();
-
-	/**
-	 * An array of enqueued webfonts.
+	 * @since X.X.X
+	 * @deprecated Use WP_Webfonts_Utils::convert_font_family_into_handle() or WP_Webfonts_Utils::get_font_family_from_variation().
 	 *
-	 * @var array[]
-	 */
-	private $enqueued_webfonts = array();
-
-	/**
-	 * An array of registered providers.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var array
+	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
+	 *                                 or a font-family as a string.
+	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
 	 */
-	private $providers = array();
+	public static function get_font_slug( $to_convert ) {
+		$message = is_array( $to_convert )
+			? 'Use WP_Webfonts_Utils::get l_font_family_from_variation() to get the font family from an array and then WP_Webfonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle'
+			: 'Use WP_Webfonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle';
+		_deprecated_function( __METHOD__, 'X.X.X', $message );
 
-	/**
-	 * Stylesheet handle.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var string
-	 */
-	private $stylesheet_handle = '';
+		return static::_get_font_slug( $to_convert );
+	}
 
 	/**
-	 * Init.
+	 * Initializes the API.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts().
 	 */
-	public function init() {
-		// Register default providers.
-		$this->register_provider( 'local', 'WP_Webfonts_Provider_Local' );
-
-		// Register callback to generate and enqueue styles.
-		if ( did_action( 'wp_enqueue_scripts' ) ) {
-			$this->stylesheet_handle = 'webfonts-footer';
-			$hook                    = 'wp_print_footer_scripts';
-		} else {
-			$this->stylesheet_handle = 'webfonts';
-			$hook                    = 'wp_enqueue_scripts';
-		}
-		add_action( $hook, array( $this, 'generate_and_enqueue_styles' ) );
-
-		// Enqueue webfonts in the block editor.
-		add_action( 'admin_init', array( $this, 'generate_and_enqueue_editor_styles' ) );
+	public static function init() {
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()' );
 	}
 
 	/**
-	 * Get the list of registered fonts.
+	 * Gets the list of registered fonts.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_registered().
 	 *
 	 * @return array[]
 	 */
 	public function get_registered_webfonts() {
-		return $this->registered_webfonts;
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_registered()' );
+
+		return $this->_get_registered_webfonts();
 	}
 
 	/**
-	 * Get the list of enqueued fonts.
+	 * Gets the list of enqueued fonts.
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_enqueued().
 	 *
 	 * @return array[]
 	 */
 	public function get_enqueued_webfonts() {
-		return $this->enqueued_webfonts;
-	}
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_enqueued()' );
 
-	/**
-	 * Get the list of all fonts.
-	 *
-	 * @return array[]
-	 */
-	public function get_all_webfonts() {
-		return array_merge( $this->get_registered_webfonts(), $this->get_enqueued_webfonts() );
+		return $this->queue;
 	}
 
 	/**
-	 * Get the list of providers.
+	 * Gets the list of all fonts.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_registered().
 	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
+	 * @return array[]
 	 */
-	public function get_providers() {
-		return $this->providers;
+	public function get_all_webfonts() {
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_registered()' );
+
+		return $this->_get_registered_webfonts();
 	}
 
 	/**
-	 * Register a webfont.
+	 * Registers a webfont.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_register_webfonts().
 	 *
-	 * @param array $webfont Webfont to be registered.
+	 * @param array  $webfont             Web font to register.
+	 * @param string $font_family_handle  Optional. Font family handle for the given variation.
+	 *                                    Default empty string.
+	 * @param string $variation_handle    Optional. Handle for the variation to register.
+	 * @param bool   $silence_deprecation Optional. Silences the deprecation notice. For internal use.
 	 * @return string|false The font family slug if successfully registered, else false.
 	 */
-	public function register_webfont( array $webfont ) {
-		$webfont = $this->validate_webfont( $webfont );
-
-		// If not valid, bail out.
-		if ( ! $webfont ) {
-			return false;
+	public function register_webfont( array $webfont, $font_family_handle = '', $variation_handle = '', $silence_deprecation = false ) {
+		if ( ! $silence_deprecation ) {
+			_deprecated_function( __METHOD__, 'X.X.X', 'wp_register_webfonts()' );
 		}
 
-		$slug = $this->get_font_slug( $webfont );
+		// When font family's handle is not passed, attempt to get it from the variation.
+		if ( ! WP_Webfonts_Utils::is_defined( $font_family_handle ) ) {
+			$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+			if ( $font_family ) {
+				$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+			}
+		}
 
-		// Initialize a new font-family collection.
-		if ( ! isset( $this->registered_webfonts[ $slug ] ) ) {
-			$this->registered_webfonts[ $slug ] = array();
+		if ( empty( $font_family_handle ) ) {
+			return false;
 		}
 
-		$this->registered_webfonts[ $slug ][] = $webfont;
-		return $slug;
+		return $this->add_variation( $font_family_handle, $webfont, $variation_handle )
+			? $font_family_handle
+			: false;
 	}
 
 	/**
 	 * Enqueue a font-family that has been already registered.
 	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_enqueue_webfonts().
+	 *
 	 * @param string $font_family_name The font family name to be enqueued.
 	 * @return bool True if successfully enqueued, else false.
 	 */
 	public function enqueue_webfont( $font_family_name ) {
-		$slug = $this->get_font_slug( $font_family_name );
-
-		if ( isset( $this->enqueued_webfonts[ $slug ] ) ) {
-			return true;
-		}
-
-		if ( ! isset( $this->registered_webfonts[ $slug ] ) ) {
-			/* translators: %s unique slug to identify the font family of the webfont */
-			_doing_it_wrong( __METHOD__, sprintf( __( 'The "%s" font family is not registered.', 'gutenberg' ), $slug ), '6.0.0' );
-
-			return false;
-		}
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_enqueue_webfonts()' );
 
-		$this->enqueued_webfonts[ $slug ] = $this->registered_webfonts[ $slug ];
-		unset( $this->registered_webfonts[ $slug ] );
+		wp_enqueue_webfonts( array( $font_family_name ) );
 		return true;
 	}
 
 	/**
-	 * Get the font slug.
-	 *
-	 * @since 6.0.0
+	 * Migrates deprecated webfonts structure into new API data structure,
+	 * i.e. variations grouped by their font-family.
 	 *
-	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
-	 *                                 or a font-family as a string.
-	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
+	 * @param array $webfonts Array of webfonts to migrate.
+	 * @return array
 	 */
-	public static function get_font_slug( $to_convert ) {
-		if ( is_array( $to_convert ) ) {
-			if ( isset( $to_convert['slug'] ) ) {
-				return $to_convert['slug'];
-			} elseif ( isset( $to_convert['font-family'] ) ) {
-				$to_convert = $to_convert['font-family'];
-			} elseif ( isset( $to_convert['fontFamily'] ) ) {
-				$to_convert = $to_convert['fontFamily'];
-			} else {
-				_doing_it_wrong( __METHOD__, __( 'Could not determine the font family name.', 'gutenberg' ), '6.0.0' );
-				return false;
+	public function migrate_deprecated_structure( array $webfonts ) {
+		$message = 'A deprecated web fonts array structure passed to wp_register_webfonts(). ' .
+			'Variations must be grouped and keyed by their font family.';
+		trigger_error( $message, E_USER_DEPRECATED );
+
+		$new_webfonts = array();
+		foreach ( $webfonts as $webfont ) {
+			$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+			if ( ! $font_family ) {
+				continue;
+			}
+
+			if ( ! isset( $new_webfonts[ $font_family ] ) ) {
+				$new_webfonts[ $font_family ] = array();
 			}
-		}
 
-		// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
-		if ( strpos( $to_convert, ',' ) !== false ) {
-			$to_convert = explode( ',', $to_convert )[0];
+			$new_webfonts[ $font_family ][] = $webfont;
 		}
 
-		return sanitize_title( $to_convert );
+		return $new_webfonts;
 	}
 
 	/**
-	 * Validate a webfont.
+	 * Determines if the given webfonts array is the deprecated array structure.
 	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont The webfont arguments.
-	 *
-	 * @return array|false The validated webfont arguments, or false if the webfont is invalid.
+	 * @param array $webfonts Array of webfonts to check.
+	 * @return bool True when deprecated structure, else false.
 	 */
-	public function validate_webfont( $webfont ) {
-		$webfont = wp_parse_args(
-			$webfont,
-			array(
-				'provider'     => 'local',
-				'font-family'  => '',
-				'font-style'   => 'normal',
-				'font-weight'  => '400',
-				'font-display' => 'fallback',
-			)
-		);
-
-		// Check the font-family.
-		if ( empty( $webfont['font-family'] ) || ! is_string( $webfont['font-family'] ) ) {
-			trigger_error( __( 'Webfont font family must be a non-empty string.', 'gutenberg' ) );
-			return false;
-		}
-
-		// Local fonts need a "src".
-		if ( 'local' === $webfont['provider'] ) {
-			// Make sure that local fonts have 'src' defined.
-			if ( empty( $webfont['src'] ) || ( ! is_string( $webfont['src'] ) && ! is_array( $webfont['src'] ) ) ) {
-				trigger_error( __( 'Webfont src must be a non-empty string or an array of strings.', 'gutenberg' ) );
-				return false;
-			}
-		}
-
-		// Validate the 'src' property.
-		if ( ! empty( $webfont['src'] ) ) {
-			foreach ( (array) $webfont['src'] as $src ) {
-				if ( empty( $src ) || ! is_string( $src ) ) {
-					trigger_error( __( 'Each webfont src must be a non-empty string.', 'gutenberg' ) );
-					return false;
-				}
-			}
-		}
-
-		// Check the font-weight.
-		if ( ! is_string( $webfont['font-weight'] ) && ! is_int( $webfont['font-weight'] ) ) {
-			trigger_error( __( 'Webfont font weight must be a properly formatted string or integer.', 'gutenberg' ) );
-			return false;
+	public function is_deprecated_structure( array $webfonts ) {
+		// Checks the first key to determine if it's empty or non-string.
+		foreach ( $webfonts as $font_family => $variations ) {
+			return ! WP_Webfonts_Utils::is_defined( $font_family );
 		}
+	}
 
-		// Check the font-display.
-		if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'swap', 'optional' ), true ) ) {
-			$webfont['font-display'] = 'fallback';
-		}
+	/**
+	 * Handle the deprecated web fonts structure.
+	 *
+	 * @param array  $webfont Web font for extracting font family.
+	 * @param string $message Deprecation message to throw.
+	 * @return string|null The font family slug if successfully registered. Else null.
+	 */
+	protected function extract_font_family_from_deprecated_webfonts_structure( array $webfont, $message ) {
+		trigger_error( $message, E_USER_DEPRECATED );
 
-		$valid_props = array(
-			'ascent-override',
-			'descent-override',
-			'font-display',
-			'font-family',
-			'font-stretch',
-			'font-style',
-			'font-weight',
-			'font-variant',
-			'font-feature-settings',
-			'font-variation-settings',
-			'line-gap-override',
-			'size-adjust',
-			'src',
-			'unicode-range',
-
-			// Exceptions.
-			'provider',
-		);
-
-		foreach ( $webfont as $prop => $value ) {
-			if ( ! in_array( $prop, $valid_props, true ) ) {
-				unset( $webfont[ $prop ] );
-			}
+		$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+		if ( ! $font_family ) {
+			return null;
 		}
 
-		return $webfont;
+		return WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
 	}
 
 	/**
-	 * Register a provider.
+	 * Gets the font slug.
 	 *
-	 * @since 6.0.0
+	 * Helper function for reuse without the deprecation.
 	 *
-	 * @param string $provider The provider name.
-	 * @param string $class    The provider class name.
-	 * @return bool True if successfully registered, else false.
+	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
+	 *                                 or a font-family as a string.
+	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
 	 */
-	public function register_provider( $provider, $class ) {
-		if ( empty( $provider ) || empty( $class ) ) {
-			return false;
-		}
-		$this->providers[ $provider ] = $class;
-		return true;
+	private static function _get_font_slug( $to_convert ) {
+		$font_family_name = is_array( $to_convert ) ? WP_Webfonts_Utils::get_font_family_from_variation( $to_convert ) : $to_convert;
+		return ! empty( $font_family_name )
+			? WP_Webfonts_Utils::convert_font_family_into_handle( $font_family_name )
+			: false;
 	}
 
 	/**
-	 * Generate and enqueue webfonts styles.
+	 * Gets the registered webfonts in the original web font property structure keyed by each handle.
 	 *
-	 * @since 6.0.0
+	 * @return array[]
 	 */
-	public function generate_and_enqueue_styles() {
-		// Generate the styles.
-		$webfonts = $this->get_webfonts_by_provider( $this->get_enqueued_webfonts() );
-		$styles   = $this->generate_styles( $webfonts );
-
-		// Bail out if there are no styles to enqueue.
-		if ( '' === $styles ) {
-			return;
-		}
+	private function _get_registered_webfonts() {
+		$font_families = array();
+		$registered    = array();
 
-		// Enqueue the stylesheet.
-		wp_register_style( $this->stylesheet_handle, '' );
-		wp_enqueue_style( $this->stylesheet_handle );
+		// Find the registered font families.
+		foreach ( $this->registered as $handle => $obj ) {
+			if ( ! $obj->extra['is_font_family'] ) {
+				continue;
+			}
 
-		// Add the styles to the stylesheet.
-		wp_add_inline_style( $this->stylesheet_handle, $styles );
-	}
+			if ( ! isset( $registered[ $handle ] ) ) {
+				$registered[ $handle ] = array();
+			}
 
-	/**
-	 * Generate and enqueue editor styles.
-	 *
-	 * @since 6.0.0
-	 */
-	public function generate_and_enqueue_editor_styles() {
-		// Generate the styles.
-		$webfonts = $this->get_webfonts_by_provider( $this->get_all_webfonts() );
-		$styles   = $this->generate_styles( $webfonts );
-
-		// Bail out if there are no styles to enqueue.
-		if ( '' === $styles ) {
-			return;
+			$font_families[ $handle ] = $obj->deps;
+		}
+
+		// Build the return array structure.
+		foreach ( $font_families as $font_family_handle => $variations ) {
+			foreach ( $variations as $variation_handle ) {
+				$variation_obj = $this->registered[ $variation_handle ];
+
+				$registered[ $font_family_handle ][ $variation_handle ] = $variation_obj->extra['font-properties'];
+			}
 		}
 
-		wp_enqueue_style( 'wp-block-library' );
-		wp_add_inline_style( 'wp-block-library', $styles );
+		return $registered;
 	}
 
 	/**
-	 * Generate styles for webfonts.
-	 *
-	 * @since 6.0.0
+	 * Gets the enqueued webfonts in the original web font property structure keyed by each handle.
 	 *
-	 * @param array[] $webfonts_by_provider Webfonts organized by provider.
-	 * @return string $styles Generated styles.
+	 * @return array[]
 	 */
-	private function generate_styles( array $webfonts_by_provider ) {
-		$styles    = '';
-		$providers = $this->get_providers();
-
-		/*
-		 * Loop through each of the providers to get the CSS for their respective webfonts
-		 * to incrementally generate the collective styles for all of them.
-		 */
-		foreach ( $providers as $provider_id => $provider_class ) {
-
-			// Bail out if the provider class does not exist.
-			if ( ! class_exists( $provider_class ) ) {
-				/* translators: %s is the provider name. */
-				trigger_error( sprintf( __( 'Webfont provider "%s" is not registered.', 'gutenberg' ), $provider_id ) );
+	private function _get_enqueued_webfonts() {
+		$enqueued = array();
+		foreach ( $this->queue as $handle ) {
+			// Skip if not registered.
+			if ( ! isset( $this->registered[ $handle ] ) ) {
 				continue;
 			}
 
-			$provider_webfonts = isset( $webfonts_by_provider[ $provider_id ] )
-				? $webfonts_by_provider[ $provider_id ]
-				: array();
-
-			// If there are no registered webfonts for this provider, skip it.
-			if ( empty( $provider_webfonts ) ) {
+			// Skip if already found.
+			if ( isset( $enqueued[ $handle ] ) ) {
 				continue;
 			}
 
-			/*
-			 * Process the webfonts by first passing them to the provider via `set_webfonts()`
-			 * and then getting the CSS from the provider.
-			 */
-			$provider = new $provider_class();
-			$provider->set_webfonts( $provider_webfonts );
-			$styles .= $provider->get_css();
-		}
-
-		return $styles;
-	}
+			$obj = $this->registered[ $handle ];
 
+			// If a variation, add it.
+			if ( ! $obj->extra['is_font_family'] ) {
+				$enqueued[ $handle ] = $obj->extra['font-properties'];
+				continue;
+			}
 
-	/**
-	 * Reorganizes webfonts grouped by font-family into grouped by provider.
-	 *
-	 * @param array[] $font_families Font families and each of their webfonts.
-	 * @return array[] Webfonts organized by providers.
-	 */
-	private function get_webfonts_by_provider( array $font_families ) {
-		$providers            = $this->get_providers();
-		$webfonts_by_provider = array();
-
-		foreach ( $font_families as $webfonts ) {
-			foreach ( $webfonts as $webfont ) {
-				$provider = $webfont['provider'];
-
-				// Skip if the provider is not registered.
-				if ( ! isset( $providers[ $provider ] ) ) {
-					/* translators: %s is the provider name. */
-					trigger_error( sprintf( __( 'Webfont provider "%s" is not registered.', 'gutenberg' ), $provider ) );
-					continue;
-				}
-
-				// Initialize a new provider collection.
-				if ( ! isset( $webfonts_by_provider[ $provider ] ) ) {
-					$webfonts_by_provider[ $provider ] = array();
-				}
-				$webfonts_by_provider[ $provider ][] = $webfont;
+			// If font-family, add all of its variations.
+			foreach ( $obj->deps as $variation_handle ) {
+				$obj                           = $this->registered[ $variation_handle ];
+				$enqueued[ $variation_handle ] = $obj->extra['font-properties'];
 			}
 		}
 
-		return $webfonts_by_provider;
+		return $enqueued;
 	}
 }
diff --git a/lib/experimental/register-webfonts-from-theme-json.php b/lib/experimental/register-webfonts-from-theme-json.php
index f0a37677eb0637..4b49f6e0534fa3 100644
--- a/lib/experimental/register-webfonts-from-theme-json.php
+++ b/lib/experimental/register-webfonts-from-theme-json.php
@@ -5,173 +5,174 @@
  * @package gutenberg
  */
 
-/**
- * Register webfonts defined in theme.json.
- */
-function gutenberg_register_webfonts_from_theme_json() {
-	// Get settings.
-	$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_settings();
-
-	// If in the editor, add webfonts defined in variations.
-	if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
-		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
-
-		foreach ( $variations as $variation ) {
-
-			// Sanity check: Skip if fontFamilies are not defined in the variation.
-			if (
-				empty( $variation['settings'] ) ||
-				empty( $variation['settings']['typography'] ) ||
-				empty( $variation['settings']['typography']['fontFamilies'] )
-			) {
-				continue;
-			}
+if ( ! function_exists( 'gutenberg_register_webfonts_from_theme_json' ) ) {
+	/**
+	 * Register webfonts defined in theme.json.
+	 */
+	function gutenberg_register_webfonts_from_theme_json() {
+		// Get settings.
+		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_settings();
+
+		// If in the editor, add webfonts defined in variations.
+		if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
+			$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
+
+			foreach ( $variations as $variation ) {
+
+				// Sanity check: Skip if fontFamilies are not defined in the variation.
+				if (
+					empty( $variation['settings'] ) ||
+					empty( $variation['settings']['typography'] ) ||
+					empty( $variation['settings']['typography']['fontFamilies'] )
+				) {
+					continue;
+				}
 
-			// Merge the variation settings with the global settings.
-			$settings['typography']                          = empty( $settings['typography'] ) ? array() : $settings['typography'];
-			$settings['typography']['fontFamilies']          = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies'];
-			$settings['typography']['fontFamilies']['theme'] = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies']['theme'];
-			$settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
+				// Merge the variation settings with the global settings.
+				$settings['typography']                          = empty( $settings['typography'] ) ? array() : $settings['typography'];
+				$settings['typography']['fontFamilies']          = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies'];
+				$settings['typography']['fontFamilies']['theme'] = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies']['theme'];
+				$settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
 
-			// Make sure there are no duplicates.
-			$settings['typography']['fontFamilies'] = array_unique( $settings['typography']['fontFamilies'] );
+				// Make sure there are no duplicates.
+				$settings['typography']['fontFamilies'] = array_unique( $settings['typography']['fontFamilies'] );
+			}
 		}
-	}
-
-	// Bail out early if there are no settings for webfonts.
-	if ( empty( $settings['typography'] ) || empty( $settings['typography']['fontFamilies'] ) ) {
-		return;
-	}
-
-	$webfonts = array();
 
-	// Look for fontFamilies.
-	foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
-		foreach ( $font_families as $font_family ) {
+		// Bail out early if there are no settings for webfonts.
+		if ( empty( $settings['typography'] ) || empty( $settings['typography']['fontFamilies'] ) ) {
+			return;
+		}
 
-			// Skip if fontFace is not defined.
-			if ( empty( $font_family['fontFace'] ) ) {
-				continue;
-			}
+		$webfonts = array();
+		$handles  = array();
 
-			$font_family['fontFace'] = (array) $font_family['fontFace'];
+		// Look for fontFamilies.
+		foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
+			foreach ( $font_families as $font_family ) {
 
-			foreach ( $font_family['fontFace'] as $font_face ) {
-				// Skip if the webfont was registered through the Webfonts API.
-				if ( isset( $font_face['origin'] ) && 'gutenberg_wp_webfonts_api' === $font_face['origin'] ) {
+				// Skip if fontFace is not defined.
+				if ( empty( $font_family['fontFace'] ) ) {
 					continue;
 				}
 
-				// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
-				if ( ! empty( $font_face['src'] ) ) {
-					$font_face['src'] = (array) $font_face['src'];
+				$font_family['fontFace'] = (array) $font_family['fontFace'];
+
+				foreach ( $font_family['fontFace'] as $font_face ) {
+					// Skip if the webfont was registered through the Webfonts API.
+					if ( isset( $font_face['origin'] ) && 'gutenberg_wp_webfonts_api' === $font_face['origin'] ) {
+						continue;
+					}
+
+					// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
+					if ( ! empty( $font_face['src'] ) ) {
+						$font_face['src'] = (array) $font_face['src'];
 
-					foreach ( $font_face['src'] as $src_key => $url ) {
-						// Tweak the URL to be relative to the theme root.
-						if ( ! str_starts_with( $url, 'file:./' ) ) {
-							continue;
+						foreach ( $font_face['src'] as $src_key => $url ) {
+							// Tweak the URL to be relative to the theme root.
+							if ( ! str_starts_with( $url, 'file:./' ) ) {
+								continue;
+							}
+							$font_face['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
 						}
-						$font_face['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
 					}
-				}
 
-				// Convert keys to kebab-case.
-				foreach ( $font_face as $property => $value ) {
-					$kebab_case               = _wp_to_kebab_case( $property );
-					$font_face[ $kebab_case ] = $value;
-					if ( $kebab_case !== $property ) {
-						unset( $font_face[ $property ] );
+					// Convert keys to kebab-case.
+					foreach ( $font_face as $property => $value ) {
+						$kebab_case               = _wp_to_kebab_case( $property );
+						$font_face[ $kebab_case ] = $value;
+						if ( $kebab_case !== $property ) {
+							unset( $font_face[ $property ] );
+						}
+					}
+
+					$font_family_handle = WP_Webfonts_Utils::get_font_family_from_variation( $font_face );
+					if ( empty( $font_family_handle ) && isset( $font_family['slug'] ) ) {
+						$font_family_handle = $font_family['slug'];
+					}
+					if ( ! empty( $font_family_handle ) ) {
+						$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family_handle );
+					}
+					if ( empty( $font_family_handle ) ) {
+						_doing_it_wrong( __FUNCTION__, __( 'Font family not defined in the variation or "slug".', 'gutenberg' ), '6.1.0' );
+					}
+
+					$handles[] = $font_family_handle;
+					if ( ! array_key_exists( $font_family_handle, $webfonts ) ) {
+						$webfonts[ $font_family_handle ] = array();
 					}
-				}
 
-				$webfonts[] = $font_face;
+					$webfonts[ $font_family_handle ][] = $font_face;
+				}
 			}
 		}
-	}
-	foreach ( $webfonts as $webfont ) {
-		wp_webfonts()->register_webfont( $webfont );
-	}
-	foreach ( $webfonts as $webfont ) {
-		wp_webfonts()->enqueue_webfont( $webfont['font-family'] );
-	}
-}
 
-/**
- * Add missing fonts data to the global styles.
- *
- * @param array $data The global styles.
- * @return array The global styles with missing fonts data.
- */
-function gutenberg_add_registered_webfonts_to_theme_json( $data ) {
-	$font_families_registered = wp_webfonts()->get_all_webfonts();
-	$font_families_from_theme = array();
-	if ( ! empty( $data['settings'] ) && ! empty( $data['settings']['typography'] ) && ! empty( $data['settings']['typography']['fontFamilies'] ) ) {
-		$font_families_from_theme = $data['settings']['typography']['fontFamilies'];
+		wp_register_webfonts( $webfonts );
+		wp_enqueue_webfonts( $handles );
 	}
+}
 
+if ( ! function_exists( 'gutenberg_add_registered_webfonts_to_theme_json' ) ) {
 	/**
-	 * Helper to get an array of the font-families.
+	 * Add missing fonts data to the global styles.
 	 *
-	 * @param array $families_data The font-families data.
-	 * @return array The font-families array.
+	 * @param array $data The global styles.
+	 * @return array The global styles with missing fonts data.
 	 */
-	$get_families = static function( $families_data ) {
-		$families = array();
-		foreach ( $families_data as $family ) {
-			$families[] = WP_Webfonts::get_font_slug( $family );
-		}
-
-		// Micro-optimization: Use array_flip( array_flip( $array ) )
-		// instead of array_unique( $array ) because it's faster.
-		// The result is the same.
-		return array_flip( array_flip( $families ) );
-	};
+	function gutenberg_add_registered_webfonts_to_theme_json( $data ) {
+		$font_families_registered = wp_webfonts()->get_registered_font_families();
+		$font_families_from_theme = ! empty( $data['settings']['typography']['fontFamilies'] )
+			? $data['settings']['typography']['fontFamilies']
+			: array();
+
+		/**
+		 * Helper to get an array of the font-families.
+		 *
+		 * @param array $families_data The font-families data.
+		 * @return array The font-families array.
+		 */
+		$get_families = static function ( $families_data ) {
+			$families = array();
+			foreach ( $families_data as $family ) {
+				$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $family );
+				$handle      = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+				if ( ! empty( $handle ) ) {
+					$families[ $handle ] = true;
+				}
+			}
 
-	// Diff the arrays to find the missing fonts.
-	$to_add = array_diff(
-		array_keys( $font_families_registered ),
-		$get_families( $font_families_from_theme )
-	);
+			return ! empty( $families ) ? array_keys( $families ) : array();
+		};
 
-	// Bail out early if there are no missing fonts.
-	if ( empty( $to_add ) ) {
-		return $data;
-	}
+		// Find missing fonts that are not in the theme's theme.json.
+		$to_add = array();
+		if ( ! empty( $font_families_registered ) ) {
+			$to_add = array_diff( $font_families_registered, $get_families( $font_families_from_theme ) );
+		}
 
-	// Make sure the path to settings.typography.fontFamilies.theme exists
-	// before adding missing fonts.
-	if ( empty( $data['settings'] ) ) {
-		$data['settings'] = array();
-	}
-	if ( empty( $data['settings']['typography'] ) ) {
-		$data['settings']['typography'] = array();
-	}
-	if ( empty( $data['settings']['typography']['fontFamilies'] ) ) {
-		$data['settings']['typography']['fontFamilies'] = array();
-	}
+		// Bail out early if there are no missing fonts.
+		if ( empty( $to_add ) ) {
+			return $data;
+		}
 
-	foreach ( $to_add as $slug ) {
-		$font_faces_for_family = $font_families_registered[ $slug ];
-		$family_name           = $font_faces_for_family[0]['font-family'];
-		$font_faces            = array();
+		// Make sure the path to settings.typography.fontFamilies.theme exists
+		// before adding missing fonts.
+		if ( empty( $data['settings'] ) ) {
+			$data['settings'] = array();
+		}
+		if ( empty( $data['settings']['typography'] ) ) {
+			$data['settings']['typography'] = array();
+		}
+		if ( empty( $data['settings']['typography']['fontFamilies'] ) ) {
+			$data['settings']['typography']['fontFamilies'] = array();
+		}
 
-		foreach ( $font_faces_for_family as $font_face ) {
-			$camel_cased = array( 'origin' => 'gutenberg_wp_webfonts_api' );
-			foreach ( $font_face as $key => $value ) {
-				$camel_cased[ lcfirst( str_replace( '-', '', ucwords( $key, '-' ) ) ) ] = $value;
-			}
-			$font_faces[] = $camel_cased;
+		foreach ( $to_add as $font_family_handle ) {
+			$data['settings']['typography']['fontFamilies'][] = wp_webfonts()->to_theme_json( $font_family_handle );
 		}
 
-		$data['settings']['typography']['fontFamilies'][] = array(
-			'fontFamily' => str_contains( $family_name, ' ' ) ? "'{$family_name}'" : $family_name,
-			'name'       => $family_name,
-			'slug'       => $slug,
-			'fontFace'   => $font_faces,
-		);
+		return $data;
 	}
-
-	return $data;
 }
 
 // `gutenberg_register_webfonts_from_theme_json()` calls `WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()`, which instantiates `WP_Theme_JSON_Gutenberg()`;
diff --git a/lib/experimental/webfonts-deprecations.php b/lib/experimental/webfonts-deprecations.php
new file mode 100644
index 00000000000000..bd50b0f476d96a
--- /dev/null
+++ b/lib/experimental/webfonts-deprecations.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * Deprecated functions provided here to give extenders time to change
+ * their plugins/themes before this API is introduced into Core.
+ *
+ * BACKPORT NOTE: Do not backport these deprecated functions to Core.
+ *
+ * @since      X.X.X
+ * @subpackage WebFonts
+ * @package    WordPress
+ */
+
+if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
+	/**
+	 * Enqueue a single font family that has been registered beforehand.
+	 *
+	 * Example of how to enqueue Source Serif Pro font:
+	 *
+	 * <code>
+	 * wp_enqueue_webfont( 'Source Serif Pro' );
+	 * </code>
+	 *
+	 * Font families should be enqueued from the `init` hook or later.
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_enqueue_webfonts().
+	 *
+	 * @param string $font_family_name The font family name to be enqueued.
+	 * @return bool True if successfully enqueued, else false.
+	 */
+	function wp_enqueue_webfont( $font_family_name ) {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_enqueue_webfonts()' );
+
+		wp_enqueue_webfonts( array( $font_family_name ) );
+		return true;
+	}
+}
+
+if ( ! function_exists( 'wp_register_webfont' ) ) {
+	/**
+	 * Registers a single webfont.
+	 *
+	 * Example of how to register Source Serif Pro font with font-weight range of 200-900:
+	 *
+	 * If the font file is contained within the theme:
+	 *
+	 * <code>
+	 * wp_register_webfont(
+	 *      array(
+	 *          'provider'    => 'local',
+	 *          'font-family' => 'Source Serif Pro',
+	 *          'font-weight' => '200 900',
+	 *          'font-style'  => 'normal',
+	 *          'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
+	 *      )
+	 * );
+	 * </code>
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_register_webfonts().
+	 *
+	 * @param array $webfont Webfont to be registered.
+	 * @return string|false The font family slug if successfully registered, else false.
+	 */
+	function wp_register_webfont( array $webfont ) {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_register_webfonts()' );
+
+		return wp_webfonts()->register_webfont( $webfont, '', '', false );
+	}
+}
+
+if ( ! function_exists( 'wp_get_webfont_providers' ) ) {
+	/**
+	 * Gets all registered providers.
+	 *
+	 * Return an array of providers, each keyed by their unique
+	 * ID (i.e. the `$id` property in the provider's object) with
+	 * an instance of the provider (object):
+	 *     ID => provider instance
+	 *
+	 * Each provider contains the business logic for how to
+	 * process its specific font service (i.e. local or remote)
+	 * and how to generate the `@font-face` styles for its service.
+	 *
+	 * @since X.X.X
+	 * @deprecated X.X.X Use wp_webfonts()->get_providers().
+	 *
+	 * @return string[] All registered providers, each keyed by their unique ID.
+	 */
+	function wp_get_webfont_providers() {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_webfonts()->get_providers()' );
+
+		$providers = array();
+		foreach ( wp_webfonts()->get_providers() as $id => $config ) {
+			$providers[ $id ] = $config['class'];
+		}
+
+		return $providers;
+	}
+}
diff --git a/lib/experimental/webfonts.php b/lib/experimental/webfonts.php
index 201101d1d7093e..c4ccc1640d9c83 100644
--- a/lib/experimental/webfonts.php
+++ b/lib/experimental/webfonts.php
@@ -4,23 +4,25 @@
  *
  * @package    WordPress
  * @subpackage WebFonts
- * @since      6.0.0
+ * @since      X.X.X
  */
 
 if ( ! function_exists( 'wp_webfonts' ) ) {
 	/**
-	 * Instantiates the webfonts controller, if not already set, and returns it.
+	 * Initialize $wp_webfonts if it has not been set.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
+	 *
+	 * @global WP_Web_Fonts $wp_webfonts
 	 *
-	 * @return WP_Webfonts Instance of the controller.
+	 * @return WP_Web_Fonts WP_Web_Fonts instance.
 	 */
 	function wp_webfonts() {
 		global $wp_webfonts;
 
-		if ( ! $wp_webfonts instanceof WP_Webfonts ) {
-			$wp_webfonts = new WP_Webfonts();
-			$wp_webfonts->init();
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = new WP_Web_Fonts();
+			$wp_webfonts->register_provider( 'local', 'WP_Webfonts_Provider_Local' );
 		}
 
 		return $wp_webfonts;
@@ -29,132 +31,111 @@ function wp_webfonts() {
 
 if ( ! function_exists( 'wp_register_webfonts' ) ) {
 	/**
-	 * Registers a collection of webfonts.
-	 *
-	 * Example of how to register Source Serif Pro font with font-weight range of 200-900
-	 * and font-style of normal and italic:
-	 *
-	 * If the font files are contained within the theme:
-	 * <code>
-	 * wp_register_webfonts(
-	 *      array(
-	 *          array(
-	 *              'provider'    => 'local',
-	 *              'font-family' => 'Source Serif Pro',
-	 *              'font-weight' => '200 900',
-	 *              'font-style'  => 'normal',
-	 *              'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
-	 *          ),
-	 *          array(
-	 *              'provider'    => 'local',
-	 *              'font-family' => 'Source Serif Pro',
-	 *              'font-weight' => '200 900',
-	 *              'font-style'  => 'italic',
-	 *              'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2' ),
-	 *          ),
-	 *      )
-	 * );
-	 * </code>
-	 *
-	 * Webfonts should be registered in the `after_setup_theme` hook.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array[] $webfonts Webfonts to be registered.
-	 *                        This contains an array of webfonts to be registered.
-	 *                        Each webfont is an array.
-	 * @return string[] The font family slug of the registered webfonts.
+	 * Registers one or more font-families and each of their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array[] $webfonts {
+	 *     Web fonts to be registered, grouped by each font-family.
+	 *
+	 *     @type string $font-family => array[] $variations {
+	 *          An array of web font variations for this font-family.
+	 *          Each variation has the following structure.
+	 *
+	 *          @type array $variation {
+	 *              @type string $provider     The provider ID. Default 'local'.
+	 *              @type string $font-style   The font-style property. Default 'normal'.
+	 *              @type string $font-weight  The font-weight property. Default '400'.
+	 *              @type string $font-display The font-display property. Default 'fallback'.
+	 *         }
+	 *     }
+	 * }
+	 * @return string[] Array of registered font family handles.
 	 */
 	function wp_register_webfonts( array $webfonts ) {
-		$registered_webfont_slugs = array();
+		$registered  = array();
+		$wp_webfonts = wp_webfonts();
 
-		foreach ( $webfonts as $webfont ) {
-			$slug = wp_register_webfont( $webfont );
+		// BACKPORT NOTE: Do not backport this code block to Core.
+		if ( $wp_webfonts->is_deprecated_structure( $webfonts ) ) {
+			$webfonts = $wp_webfonts->migrate_deprecated_structure( $webfonts );
+		}
+		// BACKPORT NOTE: end of code block.
 
-			if ( is_string( $slug ) ) {
-				$registered_webfont_slugs[ $slug ] = true;
+		foreach ( $webfonts as $font_family => $variations ) {
+			$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+			if ( ! $font_family_handle ) {
+				continue;
 			}
+
+			// Register each of the variations for this font family.
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! WP_Webfonts_Utils::is_defined( $variation_handle ) ) {
+					$variation_handle = '';
+				}
+
+				$wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+			}
+
+			$registered[] = $font_family_handle;
 		}
 
-		return array_keys( $registered_webfont_slugs );
+		return $registered;
 	}
 }
 
-if ( ! function_exists( 'wp_register_webfont' ) ) {
+if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
 	/**
-	 * Registers a single webfont.
+	 * Enqueues one or more font family and all of its variations.
 	 *
-	 * Example of how to register Source Serif Pro font with font-weight range of 200-900:
+	 * @since X.X.X
 	 *
-	 * If the font file is contained within the theme:
-	 *
-	 * <code>
-	 * wp_register_webfont(
-	 *      array(
-	 *          'provider'    => 'local',
-	 *          'font-family' => 'Source Serif Pro',
-	 *          'font-weight' => '200 900',
-	 *          'font-style'  => 'normal',
-	 *          'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
-	 *      )
-	 * );
-	 * </code>
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont Webfont to be registered.
-	 * @return string|false The font family slug if successfully registered, else false.
+	 * @param string[] $font_families Font family(ies) to enqueue.
 	 */
-	function wp_register_webfont( array $webfont ) {
-		return wp_webfonts()->register_webfont( $webfont );
+	function wp_enqueue_webfonts( array $font_families ) {
+		$handles = array_map( array( WP_Webfonts_Utils::class, 'convert_font_family_into_handle' ), $font_families );
+
+		wp_webfonts()->enqueue( $handles );
 	}
 }
 
-if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
+if ( ! function_exists( 'wp_enqueue_webfont_variations' ) ) {
 	/**
-	 * Enqueues a collection of font families.
-	 *
-	 * Example of how to enqueue Source Serif Pro and Roboto font families, both registered beforehand.
-	 *
-	 * <code>
-	 * wp_enqueue_webfonts(
-	 *  'Roboto',
-	 *  'Sans Serif Pro'
-	 * );
-	 * </code>
+	 * Enqueues a specific set of web font variations.
 	 *
-	 * Font families should be enqueued from the `init` hook or later.
-	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @param string[] $webfonts Font families to be enqueued.
+	 * @param string|string[] $variation_handles Variation handle (string) or handles (array of strings).
 	 */
-	function wp_enqueue_webfonts( array $webfonts ) {
-		foreach ( $webfonts as $webfont ) {
-			wp_enqueue_webfont( $webfont );
-		}
+	function wp_enqueue_webfont_variations( $variation_handles ) {
+		wp_webfonts()->enqueue( $variation_handles );
 	}
 }
 
-if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
+if ( ! function_exists( 'wp_deregister_font_family' ) ) {
 	/**
-	 * Enqueue a single font family that has been registered beforehand.
-	 *
-	 * Example of how to enqueue Source Serif Pro font:
+	 * Deregisters a font family and all of its registered variations.
 	 *
-	 * <code>
-	 * wp_enqueue_webfont( 'Source Serif Pro' );
-	 * </code>
+	 * @since X.X.X
 	 *
-	 * Font families should be enqueued from the `init` hook or later.
+	 * @param string $font_family_handle The font family to remove.
+	 */
+	function wp_deregister_font_family( $font_family_handle ) {
+		wp_webfonts()->remove_font_family( $font_family_handle );
+	}
+}
+
+if ( ! function_exists( 'wp_deregister_webfont_variation' ) ) {
+	/**
+	 * Deregisters a font variation.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @param string $font_family_name The font family name to be enqueued.
-	 * @return bool True if successfully enqueued, else false.
+	 * @param string $font_family_handle The font family for this variation.
+	 * @param string $variation_handle   The variation's handle to remove.
 	 */
-	function wp_enqueue_webfont( $font_family_name ) {
-		return wp_webfonts()->enqueue_webfont( $font_family_name );
+	function wp_deregister_webfont_variation( $font_family_handle, $variation_handle ) {
+		wp_webfonts()->remove_variation( $font_family_handle, $variation_handle );
 	}
 }
 
@@ -189,28 +170,40 @@ function wp_register_webfont_provider( $name, $classname ) {
 	}
 }
 
-if ( ! function_exists( 'wp_get_webfont_providers' ) ) {
+if ( ! function_exists( 'wp_print_webfonts' ) ) {
 	/**
-	 * Gets all registered providers.
-	 *
-	 * Return an array of providers, each keyed by their unique
-	 * ID (i.e. the `$id` property in the provider's object) with
-	 * an instance of the provider (object):
-	 *     ID => provider instance
-	 *
-	 * Each provider contains the business logic for how to
-	 * process its specific font service (i.e. local or remote)
-	 * and how to generate the `@font-face` styles for its service.
+	 * Invokes each provider to process and print its styles.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
+	 * @param string|string[]|false $handles Optional. Items to be processed: queue (false),
+	 *                                       single item (string), or multiple items (array of strings).
+	 *                                       Default false.
+	 * @return array|string[] Array of web font handles that have been processed.
+	 *                        An empty array if none were processed.
 	 */
-	function wp_get_webfont_providers() {
-		return wp_webfonts()->get_providers();
+	function wp_print_webfonts( $handles = false ) {
+		global $wp_webfonts;
+
+		if ( empty( $handles ) ) {
+			$handles = false;
+		}
+
+		_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
+
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			if ( ! $handles ) {
+				return array(); // No need to instantiate if nothing is there.
+			}
+		}
+
+		return wp_webfonts()->do_items( $handles );
 	}
 }
 
+add_action( 'admin_print_styles', 'wp_print_webfonts', 50 );
+add_action( 'wp_head', 'wp_print_webfonts', 50 );
+
 /**
  * Add webfonts mime types.
  */
diff --git a/lib/load.php b/lib/load.php
index b700ec3f2a11d1..21b9e7acbc6b97 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -89,19 +89,25 @@ function gutenberg_is_experiment_enabled( $name ) {
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
-require __DIR__ . '/experimental/register-webfonts-from-theme-json.php';
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/experimental/html/index.php';
 }
 require __DIR__ . '/experimental/class-wp-theme-json-resolver-gutenberg.php';
-require __DIR__ . '/experimental/class-wp-webfonts.php';
-require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
-require __DIR__ . '/experimental/class-wp-webfonts-provider-local.php';
-require __DIR__ . '/experimental/webfonts.php';
+require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/navigation-page.php';
 require __DIR__ . '/experimental/kses.php';
 
+// Web Fonts API.
+require __DIR__ . '/experimental/webfonts-deprecations.php'; // Temporary deprecated functions.
+require __DIR__ . '/experimental/class-wp-webfonts.php'; // Temporary deprecated class.
+require __DIR__ . '/experimental/class-wp-webfonts-utils.php';
+require __DIR__ . '/experimental/register-webfonts-from-theme-json.php';
+require __DIR__ . '/experimental/class-wp-web-fonts.php';
+require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
+require __DIR__ . '/experimental/class-wp-webfonts-provider-local.php';
+require __DIR__ . '/experimental/webfonts.php';
+
 // Plugin specific code.
 require __DIR__ . '/class-wp-theme-json-gutenberg.php';
 require __DIR__ . '/blocks.php';
diff --git a/phpunit/class-wp-webfonts-test.php b/phpunit/class-wp-webfonts-test.php
deleted file mode 100644
index 45732c6a265b4c..00000000000000
--- a/phpunit/class-wp-webfonts-test.php
+++ /dev/null
@@ -1,453 +0,0 @@
-<?php
-
-/**
- * @group  webfonts
- * @covers WP_Webfonts_Test
- */
-class WP_Webfonts_Test extends WP_UnitTestCase {
-	/**
-	 * WP_Webfonts instance reference
-	 *
-	 * @var WP_Webfonts
-	 */
-	private $old_wp_webfonts;
-
-	public function set_up() {
-		parent::set_up();
-
-		global $wp_webfonts;
-		$this->old_wp_webfonts = $wp_webfonts;
-
-		$wp_webfonts = null;
-	}
-
-	public function tear_down() {
-		global $wp_webfonts;
-
-		$wp_webfonts = $this->old_wp_webfonts;
-		parent::tear_down();
-	}
-
-	/**
-	 * Test wp_register_webfonts() bulk register webfonts.
-	 *
-	 * @covers wp_register_webfonts
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfonts() {
-		$font_family_name = 'Source Serif Pro';
-
-		$fonts = array(
-			array(
-				'provider'     => 'local',
-				'font-family'  => $font_family_name,
-				'font-style'   => 'normal',
-				'font-weight'  => '200 900',
-				'font-stretch' => 'normal',
-				'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-				'font-display' => 'fallback',
-			),
-			array(
-				'provider'     => 'local',
-				'font-family'  => $font_family_name,
-				'font-style'   => 'italic',
-				'font-weight'  => '200 900',
-				'font-stretch' => 'normal',
-				'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-				'font-display' => 'fallback',
-			),
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => $fonts,
-		);
-
-		wp_register_webfonts( $fonts );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_register_webfont() register a single webfont.
-	 *
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_register_webfont() does not enqueue the webfont on registration.
-	 *
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfont_does_not_enqueue_on_registration() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_webfonts() bulk enqueue webfonts.
-	 *
-	 * @covers wp_enqueue_webfonts
-	 * @covers WP_Webfonts::enqueue_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 */
-	public function test_wp_enqueue_webfonts() {
-		$source_serif_pro = array(
-			'provider'     => 'local',
-			'font-family'  => 'Source Serif Pro',
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		wp_register_webfont( $source_serif_pro );
-
-		$roboto = array(
-			'provider'     => 'local',
-			'font-family'  => 'Roboto',
-			'font-style'   => 'normal',
-			'font-weight'  => '400',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/roboto/Roboto.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		wp_register_webfont( $roboto );
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $source_serif_pro['font-family'] ) => array( $source_serif_pro ),
-			wp_webfonts()->get_font_slug( $roboto['font-family'] ) => array( $roboto ),
-		);
-
-		wp_enqueue_webfonts(
-			array(
-				$source_serif_pro['font-family'],
-				$roboto['font-family'],
-			)
-		);
-
-		$this->assertEquals( $expected, wp_webfonts()->get_enqueued_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_registered_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_font() enqueues a registered webfont.
-	 *
-	 * @covers wp_enqueue_webfont
-	 * @covers WP_Webfonts::enqueued_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 */
-	public function test_wp_enqueue_webfont_enqueues_registered_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		wp_enqueue_webfont( $font_family_name );
-
-		$this->assertEquals( array(), wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( $expected, wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_font() does not enqueue a webfont that was not registered.
-	 *
-	 * @covers wp_enqueue_webfont
-	 * @covers WP_Webfonts::enqueued_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 *
-	 * @expectedIncorrectUsage WP_Webfonts::enqueue_webfont
-	 */
-	public function test_wp_enqueue_webfont_does_not_enqueue_unregistered_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		wp_enqueue_webfont( $font_family_name );
-
-		$this->assertSame( array(), wp_webfonts()->get_registered_webfonts(), 'WP_Webfonts::get_registered_webfonts should return an empty array' );
-		$this->assertSame( array(), wp_webfonts()->get_enqueued_webfonts(), 'WP_Webfonts::get_enqueued_webfonts should return an empty array' );
-	}
-
-	/**
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_provider
-	 * @covers WP_Webfonts::get_providers
-	 */
-	public function test_get_providers() {
-		wp_register_webfont_provider( 'test-provider', 'Test_Provider' );
-		$this->assertEquals(
-			array(
-				'local'         => 'WP_Webfonts_Provider_Local',
-				'test-provider' => 'Test_Provider',
-			),
-			wp_get_webfont_providers()
-		);
-	}
-
-	/**
-	 * @dataProvider data_get_font_slug_when_cannot_determine_fontfamily
-	 * @covers       WP_Webfonts::get_font_slug
-	 *
-	 * @expectedIncorrectUsage WP_Webfonts::get_font_slug
-	 */
-	public function test_get_font_slug_when_cannot_determine_fontfamily( $to_convert ) {
-		$this->assertFalse( wp_webfonts()->get_font_slug( $to_convert ) );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array[]
-	 */
-	public function data_get_font_slug_when_cannot_determine_fontfamily() {
-		return array(
-			'empty array'                     => array( array() ),
-			'array without a font-family key' => array(
-				array(
-					'provider'     => 'local',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-display' => 'fallback',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-				),
-			),
-			"array with 'font family' key"    => array(
-				array( 'font family' => 'Source Serif Pro' ),
-			),
-			"array with 'Font-Family' key"    => array(
-				array( 'Font-Family' => 'Source Serif Pro' ),
-			),
-			"array with 'FontFamily' key"     => array(
-				array( 'FontFamily' => 'Source Serif Pro' ),
-			),
-		);
-	}
-
-	/**
-	 * @dataProvider data_get_font_slug
-	 * @covers       WP_Webfonts::get_font_slug
-	 */
-	public function test_get_font_slug( $to_convert, $expected ) {
-		$this->assertSame( $expected, wp_webfonts()->get_font_slug( $to_convert ) );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array[]
-	 */
-	public function data_get_font_slug() {
-		return array(
-			"array using 'fontFamily' format"  => array(
-				'to_convert' => array( 'fontFamily' => 'Source Serif Pro' ),
-				'expected'   => 'source-serif-pro',
-			),
-			"array using 'font-family' format" => array(
-				'to_convert' => array( 'font-family' => 'Source Serif Pro' ),
-				'expected'   => 'source-serif-pro',
-			),
-			'string with font family name'     => array(
-				'to_convert' => 'Source Serif Pro',
-				'expected'   => 'source-serif-pro',
-			),
-			'empty string'                     => array(
-				'to_convert' => '',
-				'expected'   => '',
-			),
-		);
-	}
-
-	/**
-	 * @covers WP_Webfonts::validate_webfont
-	 */
-	public function test_validate_webfont() {
-		$this->expectNotice();
-
-		// Test empty array.
-		$this->assertFalse( wp_webfonts()->validate_webfont( array() ) );
-
-		$font = array(
-			'font-family' => 'Test Font 1',
-			'src'         => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-		);
-
-		// Test missing provider fallback to local.
-		$this->assertEquals( 'local', wp_webfonts()->validate_webfont( $font )['provider'] );
-
-		// Test missing font-weight fallback to 400.
-		$this->assertEquals( '400', wp_webfonts()->validate_webfont( $font )['font-weight'] );
-
-		// Test missing font-style fallback to normal.
-		$this->assertEquals( 'normal', wp_webfonts()->validate_webfont( $font )['font-style'] );
-
-		// Test missing font-display fallback to fallback.
-		$this->assertEquals( 'fallback', wp_webfonts()->validate_webfont( $font )['font-display'] );
-
-		// Test local font with missing "src".
-		$this->assertFalse( wp_webfonts()->validate_webfont( array( 'font-family' => 'Test Font 2' ) ) );
-
-		// Test valid src URL, without a protocol.
-		$font['src'] = '//example.com/SourceSerif4Variable-Roman.ttf.woff2';
-		$this->assertEquals( wp_webfonts()->validate_webfont( $font )['src'], $font['src'] );
-
-		// Test font-weight.
-		$font_weights = array( 100, '100', '100 900', 'normal' );
-		foreach ( $font_weights as $value ) {
-			$font['font-weight'] = $value;
-			$this->assertEquals( wp_webfonts()->validate_webfont( $font )['font-weight'], $value );
-		}
-
-		// Test that invalid keys get removed from the font.
-		$font['invalid-key'] = 'invalid';
-		$this->assertArrayNotHasKey( 'invalid-key', wp_webfonts()->validate_webfont( $font ) );
-	}
-
-	/**
-	 * Test generate_and_enqueue_styles outputs only enqueued webfonts.
-	 *
-	 * @covers WP_Webfonts::generate_and_enqueue_styles
-	 */
-	public function test_generate_and_enqueue_styles() {
-		wp_register_webfonts(
-			array(
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Roboto',
-					'font-style'   => 'normal',
-					'font-weight'  => '400',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/roboto/Roboto-Regular.ttf',
-					'font-display' => 'fallback',
-				),
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Source Serif Pro',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-					'font-display' => 'fallback',
-				),
-			)
-		);
-
-		wp_enqueue_webfont( 'Source Serif Pro' );
-
-		wp_webfonts()->generate_and_enqueue_styles();
-
-		$expected = <<<EOF
-@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
-EOF;
-
-		$this->assertStringContainsString(
-			$expected,
-			get_echo( 'wp_print_styles' )
-		);
-	}
-
-	/**
-	 * Test generate_and_enqueue_editor_styles outputs registered and enqueued webfonts.
-	 * Both are necessary so the editor correctly loads webfonts picked while in the editor.
-	 *
-	 * @covers WP_Webfonts::generate_and_enqueue_editor_styles
-	 */
-	public function test_generate_and_enqueue_editor_styles() {
-		wp_register_webfonts(
-			array(
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Roboto',
-					'font-style'   => 'normal',
-					'font-weight'  => '400',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/roboto/Roboto-Regular.ttf',
-					'font-display' => 'fallback',
-				),
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Source Serif Pro',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-					'font-display' => 'fallback',
-				),
-			)
-		);
-
-		wp_enqueue_webfont( 'Source Serif Pro' );
-
-		wp_webfonts()->generate_and_enqueue_editor_styles();
-
-		$expected = <<<EOF
-@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:fallback;font-stretch:normal;src:local(Roboto), url('https://example.com/assets/fonts/roboto/Roboto-Regular.ttf') format('truetype');}@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
-EOF;
-
-		$this->assertStringContainsString(
-			$expected,
-			get_echo( 'wp_print_styles' )
-		);
-	}
-}
diff --git a/phpunit/fixtures/mock-provider.php b/phpunit/fixtures/mock-provider.php
new file mode 100644
index 00000000000000..91475837e0e916
--- /dev/null
+++ b/phpunit/fixtures/mock-provider.php
@@ -0,0 +1,27 @@
+<?php
+
+class Mock_Provider extends WP_Webfonts_Provider {
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @var string
+	 */
+	protected $id = 'mock';
+
+	public function get_css() {
+		$handles = array_keys( $this->webfonts );
+		return implode( '; ', $handles );
+		return sprintf( $this->css, implode( '; ', $handles ) );
+	}
+
+	/**
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string The style element.
+	 */
+	protected function get_style_element() {
+		return '<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n';
+	}
+}
diff --git a/phpunit/multisite.xml b/phpunit/multisite.xml
index 494c9a4610d07b..7a6117948547d3 100644
--- a/phpunit/multisite.xml
+++ b/phpunit/multisite.xml
@@ -5,6 +5,7 @@
 		convertErrorsToExceptions="true"
 		convertNoticesToExceptions="true"
 		convertWarningsToExceptions="true"
+		convertDeprecationsToExceptions="true"
 >
 	<php>
 		<env name="WP_MULTISITE" value="1" />
diff --git a/phpunit/webfonts/wp-webfonts-testcase.php b/phpunit/webfonts/wp-webfonts-testcase.php
new file mode 100644
index 00000000000000..ec0e20c27bfc6d
--- /dev/null
+++ b/phpunit/webfonts/wp-webfonts-testcase.php
@@ -0,0 +1,268 @@
+<?php
+/**
+ * Test case for the WP Webfonts API tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-tests-dataset.php';
+
+/**
+ * Abstracts the common tasks for the API's tests.
+ */
+abstract class WP_Webfonts_TestCase extends WP_UnitTestCase {
+	use WP_Webfonts_Tests_Datasets;
+
+	/**
+	 * Original WP_Web_Fonts instance, before the tests.
+	 *
+	 * @var WP_Web_Fonts
+	 */
+	private $old_wp_webfonts;
+
+	/**
+	 * Current error reporting level (before a test changes it).
+	 *
+	 * @var null|int
+	 */
+	protected $error_reporting_level = null;
+
+	/**
+	 * Reflection data store for non-public property access.
+	 *
+	 * @var ReflectionProperty[]
+	 */
+	protected $property = array();
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->old_wp_webfonts  = $GLOBALS['wp_webfonts'];
+		$GLOBALS['wp_webfonts'] = null;
+	}
+
+	public function tear_down() {
+		$this->property         = array();
+		$GLOBALS['wp_webfonts'] = $this->old_wp_webfonts;
+
+		// Reset the error reporting when modified within a test.
+		if ( is_int( $this->error_reporting_level ) ) {
+			error_reporting( $this->error_reporting_level );
+			$this->error_reporting_level = null;
+		}
+
+		parent::tear_down();
+	}
+
+	protected function set_up_mock( $method ) {
+		$mock = $this->setup_object_mock( $method, WP_Web_Fonts::class );
+
+		// Set the global.
+		$GLOBALS['wp_webfonts'] = $mock;
+
+		return $mock;
+	}
+
+	protected function setup_object_mock( $method, $class ) {
+		if ( is_string( $method ) ) {
+			$method = array( $method );
+		}
+
+		return $this->getMockBuilder( $class )->setMethods( $method )->getMock();
+	}
+
+	protected function get_registered_handles() {
+		return array_keys( $this->get_registered() );
+	}
+
+	protected function get_registered() {
+		return wp_webfonts()->registered;
+	}
+
+	protected function get_variations( $font_family, $wp_webfonts = null ) {
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		return $wp_webfonts->registered[ $font_family ]->deps;
+	}
+
+	protected function get_enqueued_handles() {
+		return wp_webfonts()->queue;
+	}
+
+	protected function get_queued_before_register( $wp_webfonts = null ) {
+		return $this->get_property_value( 'queued_before_register', WP_Dependencies::class, $wp_webfonts );
+	}
+
+	protected function get_reflection_property( $property_name, $class = 'WP_Web_Fonts' ) {
+		$property = new ReflectionProperty( $class, $property_name );
+		$property->setAccessible( true );
+
+		return $property;
+	}
+
+	protected function get_property_value( $property_name, $class, $wp_webfonts = null ) {
+		$property = $this->get_reflection_property( $property_name, $class );
+
+		if ( ! $wp_webfonts ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		return $property->getValue( $wp_webfonts );
+	}
+
+	protected function setup_property( $class, $property_name ) {
+		$key = $this->get_property_key( $class, $property_name );
+
+		if ( ! isset( $this->property[ $key ] ) ) {
+			$this->property[ $key ] = new ReflectionProperty( $class, 'providers' );
+			$this->property[ $key ]->setAccessible( true );
+		}
+
+		return $this->property[ $key ];
+	}
+
+	protected function get_property_key( $class, $property_name ) {
+		return $class . '::$' . $property_name;
+	}
+
+	/**
+	 * Opens the accessibility to access the given private or protected method.
+	 *
+	 * @param string $method_name Name of the method to open.
+	 * @return ReflectionMethod Instance of the method, ie to invoke it in the test.
+	 */
+	protected function get_reflection_method( $method_name ) {
+		$method = new ReflectionMethod( WP_Web_Fonts::class, $method_name );
+		$method->setAccessible( true );
+
+		return $method;
+	}
+
+	/**
+	 * Sets up multiple font family and variation mocks.
+	 *
+	 * @param array        $inputs      Array of array( font-family => variations ) to setup.
+	 * @param WP_Web_Fonts $wp_webfonts Instance of WP_Web_Fonts.
+	 * @return stdClass[] Array of registered mocks.
+	 */
+	protected function setup_registration_mocks( array $inputs, WP_Web_Fonts $wp_webfonts ) {
+		$mocks = array();
+
+		$build_mock = function ( $font_family, $is_font_family = false ) use ( &$mocks, $wp_webfonts ) {
+			$mock        = new stdClass();
+			$mock->deps  = array();
+			$mock->extra = array( 'is_font_family' => $is_font_family );
+			if ( $is_font_family ) {
+				$mock->extra['font-family'] = $font_family;
+			}
+
+			$handle = $is_font_family ? WP_Webfonts_Utils::convert_font_family_into_handle( $font_family ) : $font_family;
+
+			// Add to each queue.
+			$mocks[ $handle ]                   = $mock;
+			$wp_webfonts->registered[ $handle ] = $mock;
+
+			return $mock;
+		};
+
+		foreach ( $inputs as $font_family => $variations ) {
+			$font_mock = $build_mock( $font_family, true );
+
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! is_string( $variation_handle ) ) {
+					$variation_handle = $variation;
+				}
+				$variation_mock                           = $build_mock( $variation_handle );
+				$variation_mock->extra['font-properties'] = $variation;
+				$font_mock->deps[]                        = $variation_handle;
+			}
+		}
+
+		return $mocks;
+	}
+
+	/**
+	 * Register one or more font-family and its variations to set up a test.
+	 *
+	 * @param string            $font_family Font family to test.
+	 * @param array             $variations  Variations.
+	 * @param WP_Web_Fonts|null $wp_webfonts Optional. Instance of the WP_Web_Fonts.
+	 */
+	protected function setup_register( $font_family, $variations, $wp_webfonts = null ) {
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+
+		foreach ( $variations as $variation_handle => $variation ) {
+			if ( ! is_string( $variation_handle ) ) {
+				$variation_handle = '';
+			}
+			$wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		}
+	}
+
+	/**
+	 * Sets up the WP_Web_Fonts::$provider property.
+	 *
+	 * @param WP_Web_Fonts $wp_webfonts  Instance of WP_Web_Fonts.
+	 * @param string|array $provider     Provider ID when string. Else provider definition with 'id' and 'class' keys.
+	 * @param array        $font_handles Optional. Font handles for this provider.
+	 */
+	protected function setup_provider_property_mock( WP_Web_Fonts $wp_webfonts, $provider, array $font_handles = array() ) {
+		if ( is_string( $provider ) ) {
+			$provider = $this->get_provider_definitions( $provider );
+		}
+
+		$property  = $this->setup_property( WP_Web_Fonts::class, 'providers' );
+		$providers = $property->getValue( $wp_webfonts );
+
+		if ( ! isset( $providers[ $provider['id'] ] ) ) {
+			$providers[ $provider['id'] ] = array(
+				'class' => $provider['class'],
+				'fonts' => $font_handles,
+			);
+		} else {
+			$providers[ $provider['id'] ] = array_merge( $font_handles, $providers[ $provider['id'] ]['fonts'] );
+		}
+
+		$property->setValue( $wp_webfonts, $providers );
+	}
+
+	/**
+	 * Gets the variation handles for the provider from the given fonts.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array  $fonts       Fonts definitions keyed by font family.
+	 * @param string $provider_id Provider ID.
+	 * @return array|string[] Array of handles on success. Else empty array.
+	 */
+	protected function get_handles_for_provider( array $fonts, $provider_id ) {
+		$handles = array();
+
+		foreach ( $fonts as $variations ) {
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( $provider_id !== $variation['provider'] ) {
+					continue;
+				}
+				$handles[] = $variation_handle;
+			}
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Suppresses deprecation notices allowing a test to skip deprecations
+	 * to test notices or other specifics.
+	 */
+	protected function suppress_deprecations() {
+		$this->error_reporting_level = error_reporting();
+		error_reporting( $this->error_reporting_level & ~E_USER_DEPRECATED );
+	}
+}
diff --git a/phpunit/webfonts/wp-webfonts-tests-dataset.php b/phpunit/webfonts/wp-webfonts-tests-dataset.php
new file mode 100644
index 00000000000000..100595c75a3fc2
--- /dev/null
+++ b/phpunit/webfonts/wp-webfonts-tests-dataset.php
@@ -0,0 +1,1155 @@
+<?php
+
+trait WP_Webfonts_Tests_Datasets {
+	/**
+	 * Data provider for testing variation registration that has valid structure.
+	 *
+	 * @return array
+	 */
+	public function data_valid_variation() {
+		return array(
+			'font-weight and font-style not defined; without variation handle' => array(
+				'expected'           => 'lato-400-normal',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+			),
+
+			'font-weight and font-style not defined; with variation handle' => array(
+				'expected'           => 'my-custom-handle',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'variation_handle'   => 'my-custom-handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+			),
+
+			'font-weight defined; with variation handle' => array(
+				'expected'           => 'my_custom_handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+				'variation_handle'   => 'my_custom_handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+			),
+
+			'font-weight defined; with variation handle' => array(
+				'expected'           => 'my_custom_handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+				'variation_handle'   => 'my_custom_handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+
+			'more variation properties; with variation handle' => array(
+				'expected'           => 'my-custom-handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'variation_handle'   => 'my-custom-handle',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing registration of variations where the font family handle
+	 * is not defined.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_handle_undefined() {
+		return array(
+			'empty string font family handle' => array(
+				'font_family_handle' => '',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+			'empty string font family handle with font-family defined in variant' => array(
+				'font_family_handle' => '',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+			'non string font family handle'   => array(
+				'font_family_handle' => 10,
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing registration of variations where the font family is not defined
+	 * in the variation.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_undefined_in_variation() {
+		$message = 'Webfont font-family must be a non-empty string.';
+		return array(
+			'font-family: undefined'    => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: null'         => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => null,
+					'font-weight' => '200',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: non string'   => array(
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 10,
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: empty string' => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => '',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing when the variation's handle can't be determine from the given input.
+	 *
+	 * @return array
+	 */
+	public function data_unable_determine_variation_handle() {
+		return array(
+			'integer values'                               => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'font-weight' => 400,
+					'font-style'  => 0,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'with empty string font-weight and font-style' => array(
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => '',
+					'font-style'  => '',
+					'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+				'expected_message'   => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'integer font-weight, empty string font-style' => array(
+				'font_family'      => 'merriweather',
+				'variation'        => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => 400,
+					'font-style'  => '',
+					'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+				'expected_message' => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'empty string font-weight, integer font-style' => array(
+				'font_family'      => 'lato',
+				'variation'        => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => '',
+					'font-style'  => 400,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+				'expected_message' => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing an invalid variation.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_variation() {
+		return array(
+			'font-family: undefined'          => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'font-family: null'               => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => null,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'font-family: empty string'       => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => '',
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'src: undefined'                  => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+				),
+			),
+			'src: null'                       => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+					'src'         => null,
+				),
+			),
+			'src: empty string'               => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+					'src'         => '',
+				),
+			),
+			'src: empty array'                => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(),
+				),
+			),
+			'src: array of an empty string'   => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array( '' ),
+				),
+			),
+			'src: array of a non-string'      => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array( null ),
+				),
+			),
+			'src: array with an empty string' => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(
+						'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						'',
+						'https://example.com/assets/fonts/lato.ttf.woff2',
+					),
+				),
+			),
+			'src: array with a non-string'    => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(
+						'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						null,
+						'https://example.com/assets/fonts/lato.ttf.woff2',
+					),
+				),
+			),
+			'provider does not exist'         => array(
+				'expected'           => 'The provider "doesnotexit" is not registered',
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'provider'    => 'doesnotexit',
+					'font-family' => 'Merriweather',
+					'font-weight' => '200 900',
+				),
+			),
+			'font-weight: null'               => array(
+				'expected'           => 'Webfont font-weight must be a properly formatted string or integer.',
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => null,
+					'font-style'  => 'normal',
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing one or more font families with varying number of variations.
+	 *
+	 * @return array
+	 */
+	public function data_one_to_many_font_families_and_zero_to_many_variations() {
+		return array(
+			'one family family no variations'           => array(
+				'font_family' => 'lato',
+				'inputs'      => array(
+					'lato' => array(),
+				),
+				'handles'     => array( 'lato' ),
+				'expected'    => array(),
+			),
+			'one family family with 1 variation'        => array(
+				'font_family' => 'merriweather',
+				'inputs'      => array(
+					'merriweather' => array(
+						'merriweather-200-900-normal' => array(
+							'font-family'  => 'Merriweather',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+				'handles'     => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected'    => array(),
+			),
+			'font family with multiple variations'      => array(
+				'font_family' => 'source-serif-pro',
+				'inputs'      => array(
+					'Source Serif Pro' => array(
+						'Source Serif Pro-300-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						'Source Serif Pro-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'handles'     => array( 'source-serif-pro', 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ),
+				'expected'    => array(),
+			),
+			'multiple font families without variations' => array(
+				'font_family' => 'source-serif-pro',
+				'inputs'      => array(
+					'lato'             => array(),
+					'my-font'          => array(),
+					'Source Serif Pro' => array(),
+					'some other font'  => array(),
+				),
+				'handles'     => array( 'lato', 'my-font', 'source-serif-pro', 'some-other-font' ),
+				'expected'    => array( 'lato', 'my-font', 'some-other-font' ),
+			),
+			'multiple font families with variations'    => array(
+				'font_family' => 'my-font',
+				'inputs'      => array(
+					'merriweather'     => array(
+						'merriweather-200-900-normal' => array(
+							'font-family'  => 'Merriweather',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+					'Source Serif Pro' => array(
+						'Source Serif Pro-300-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						'Source Serif Pro-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+					'my-font'          => array(
+						'my-font-300-italic' => array(
+							'font-family' => 'My Font',
+							'font-weight' => '300',
+							'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+						),
+					),
+				),
+				'handles'     => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+					'my-font',
+					'my-font-300-italic',
+				),
+				'expected'    => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_handles() {
+		return array(
+			'single word handle'   => array( 'lato' ),
+			'multiple word handle' => array( 'source-sans-pro' ),
+			'single word name'     => array( 'Merriweather' ),
+			'multiple word name'   => array( 'My Cool Font' ),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_providers() {
+		$local = array(
+			'local' => array(
+				'class' => WP_Webfonts_Provider_Local::class,
+				'fonts' => array(),
+			),
+		);
+		$mock  = array(
+			'mock' => array(
+				'class' => Mock_Provider::class,
+				'fonts' => array(),
+			),
+		);
+
+		return array(
+			'local provider'           => array(
+				'providers' => array(
+					'local' => WP_Webfonts_Provider_Local::class,
+				),
+				'expected'  => $local,
+			),
+			'mock provider'            => array(
+				'providers' => array(
+					'mock' => Mock_Provider::class,
+				),
+				'expected'  => $mock,
+			),
+			'local and mock providers' => array(
+				'providers' => array(
+					'local' => WP_Webfonts_Provider_Local::class,
+					'mock'  => Mock_Provider::class,
+				),
+				'expected'  => array_merge( $local, $mock ),
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_remove_variations() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'      => 'merriweather',
+				'variation_handle' => 'merriweather-200-900-normal',
+				'expected'         => array(
+					'registered'       => array(
+						'merriweather',
+						'source-serif-pro',
+						'Source Serif Pro-300-normal',
+						'Source Serif Pro-900-italic',
+					),
+					'font_family_deps' => array(),
+				),
+			),
+			'Font with multiple variations' => array(
+				'font_family'      => 'source-serif-pro',
+				'variation_handle' => 'Source Serif Pro-300-normal',
+				'expected'         => array(
+					'registered'       => array(
+						'merriweather',
+						'merriweather-200-900-normal',
+						'source-serif-pro',
+						'Source Serif Pro-900-italic',
+					),
+					'font_family_deps' => array( 'Source Serif Pro-900-italic' ),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_enqueue() {
+		return array(
+			'1 font-family'   => array(
+				'handles'                         => 'lato',
+				'expected_queue'                  => array( 'lato' ),
+				'expected_queued_before_register' => array(
+					'lato' => null,
+				),
+			),
+			'2 font families' => array(
+				'handles'                         => array( 'merriweather', 'my-font' ),
+				'expected_queue'                  => array( 'merriweather', 'my-font' ),
+				'expected_queued_before_register' => array(
+					'merriweather' => null,
+					'my-font'      => null,
+				),
+			),
+			'3 font families' => array(
+				'handles'                         => array( 'merriweather', 'my-font', 'source-serif-pro' ),
+				'expected_queue'                  => array( 'merriweather', 'my-font', 'source-serif-pro' ),
+				'expected_queued_before_register' => array(
+					'merriweather'     => null,
+					'my-font'          => null,
+					'source-serif-pro' => null,
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_enqueue_variations() {
+		return array(
+			'1 variation'                               => array(
+				'handles'                         => array( 'my-font-300-normal' ),
+				'expected_queue'                  => array( 'my-font-300-normal' ),
+				'expected_queued_before_register' => array(
+					'my-font-300-normal' => null,
+				),
+			),
+			'1 variation from different font families'  => array(
+				'handles'                         => array( 'merriweather-200-900-normal', 'my-font-300-normal' ),
+				'expected_queue'                  => array( 'merriweather-200-900-normal', 'my-font-300-normal' ),
+				'expected_queued_before_register' => array(
+					'merriweather-200-900-normal' => null,
+					'my-font-300-normal'          => null,
+				),
+			),
+			'enqueue one variation and its font family' => array(
+				'handles'                         => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_queue'                  => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_queued_before_register' => array(
+					'merriweather'                => null,
+					'merriweather-200-900-normal' => null,
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_print_enqueued() {
+		$providers          = $this->get_provider_definitions();
+		$mock_fonts         = $this->get_registered_mock_fonts();
+		$mock_font_handles  = $this->get_handles_for_provider( $mock_fonts, 'mock' );
+		$local_fonts        = $this->get_registered_local_fonts();
+		$local_font_handles = $this->get_handles_for_provider( $local_fonts, 'local' );
+		$font_faces         = $this->get_registered_fonts_css();
+
+		$all_variation_handles = array_merge( $mock_font_handles, $local_font_handles );
+		$setup_all             = array(
+			'provider'         => array(
+				'local' => $providers['local'],
+				'mock'  => $providers['mock'],
+			),
+			'provider_handles' => array(
+				'local' => $local_font_handles,
+				'mock'  => $mock_font_handles,
+			),
+			'registered'       => array_merge( $mock_fonts, $local_fonts ),
+		);
+
+		return array(
+
+			// One provider registered with multiple fonts.
+
+			'print font2 for mock provider'             => array(
+				'setup'           => array(
+					'provider'         => array( 'mock' => $providers['mock'] ),
+					'provider_handles' => array( 'mock' => $mock_font_handles ),
+					'registered'       => $mock_fonts,
+					'enqueued'         => array( 'font2' ),
+				),
+				'expected_done'   => array( 'font2', 'font2-200-900-normal', 'font2-200-900-italic' ),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s</mock>\n',
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic']
+				),
+			),
+			'print all fonts for mock provider'         => array(
+				'setup'           => array(
+					'provider'         => array( 'mock' => $providers['mock'] ),
+					'provider_handles' => array( 'mock' => $mock_font_handles ),
+					'registered'       => $mock_fonts,
+					'enqueued'         => array( 'font1', 'font2', 'font3' ),
+				),
+				'expected_done'   => array(
+					'font1',
+					'font1-300-normal',
+					'font1-300-italic',
+					'font1-900-normal',
+					'font2',
+					'font2-200-900-normal',
+					'font2-200-900-italic',
+					'font3',
+					'font3-bold-normal',
+				),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal'],
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic'],
+					$font_faces['font3-bold-normal']
+				),
+			),
+			'print merriweather for local provider'     => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'merriweather' ),
+				),
+				'expected_done'   => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'print Source Serif Pro for local provider' => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'source-serif-pro' ),
+				),
+				'expected_done'   => array( 'source-serif-pro', 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s\n</style>\n",
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+			'print all fonts for local provider'        => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'merriweather', 'source-serif-pro' ),
+				),
+				'expected_done'   => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+
+			// All providers registered with multiple fonts.
+
+			'print font1 when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font1' ) ) ),
+				'expected_done'   => array( 'font1', 'font1-300-normal', 'font1-300-italic', 'font1-900-normal' ),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal']
+				),
+			),
+			'print all mock fonts when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font1', 'font2', 'font3' ) ) ),
+				'expected_done'   => array(
+					'font1',
+					'font1-300-normal',
+					'font1-300-italic',
+					'font1-900-normal',
+					'font2',
+					'font2-200-900-normal',
+					'font2-200-900-italic',
+					'font3',
+					'font3-bold-normal',
+				),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal'],
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic'],
+					$font_faces['font3-bold-normal']
+				),
+			),
+			'print merriweather when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather' ) ) ),
+				'expected_done'   => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'print all local fonts when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather', 'source-serif-pro' ) ) ),
+				'expected_done'   => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+
+			'print all fonts for all providers'         => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => $all_variation_handles ) ),
+				'expected_done'   => $all_variation_handles,
+				'expected_output' =>
+					sprintf(
+						"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal'],
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					) .
+					sprintf(
+						'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+						$font_faces['font1-300-normal'],
+						$font_faces['font1-300-italic'],
+						$font_faces['font1-900-normal'],
+						$font_faces['font2-200-900-normal'],
+						$font_faces['font2-200-900-italic'],
+						$font_faces['font3-bold-normal']
+					),
+			),
+
+			// Specific variations enqueued.
+			// Validates that only these specific variations print once.
+
+			'specific variation: 1 local'               => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'specific variation: 1 local from different font families' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+			'specific variation: 1 local and 1 mock'    => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal', 'font2-200-900-normal' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal', 'font2-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n" .
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n',
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['font2-200-900-normal']
+				),
+			),
+			'specific variation: 1 mock and 1 local'    => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font2-200-900-normal', 'Source Serif Pro-300-normal' ) ) ),
+				'expected_done'   => array( 'font2-200-900-normal', 'Source Serif Pro-300-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n" .
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n',
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['font2-200-900-normal']
+				),
+			),
+		);
+	}
+
+	protected function get_data_registry() {
+		return array(
+			'lato'             => array(),
+			'merriweather'     => array(
+				'merriweather-200-900-normal' => array(
+					'font-family'  => 'Merriweather',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+			),
+			'Source Serif Pro' => array(
+				'Source Serif Pro-300-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '300',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'Source Serif Pro-900-italic' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'italic',
+					'font-weight'  => '900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+			'my-font'          => array(
+				'my-font-300-normal' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '300',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+				'my-font-300-italic' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '300',
+					'font-style'  => 'italic',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+				'my-font-900-normal' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '900',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Gets the provider definitions.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id Optional. Provider ID to get. Default empty string.
+	 * @return array
+	 */
+	protected function get_provider_definitions( $provider_id = '' ) {
+		$providers = array(
+			'mock'  => array(
+				'id'    => 'mock',
+				'class' => Mock_Provider::class,
+			),
+			'local' => array(
+				'id'    => 'local',
+				'class' => WP_Webfonts_Provider_Local::class,
+			),
+		);
+
+		if ( '' === $provider_id ) {
+			return $providers;
+		}
+
+		if ( isset( $providers[ $provider_id ] ) ) {
+			return $providers[ $provider_id ];
+		}
+
+		return array(
+			'id'    => $provider_id,
+			'class' => '',
+		);
+	}
+
+	/**
+	 * Gets web font definitions for both local and mock providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array|string[][][]
+	 */
+	protected function get_registered_fonts() {
+		return array_merge(
+			$this->get_registered_local_fonts(),
+			$this->get_registered_mock_fonts()
+		);
+	}
+
+	/**
+	 * Returns an array of font-face styles that matches the font definitions
+	 * in get_registered_local_fonts() and get_registered_mock_fonts().
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	protected function get_registered_fonts_css() {
+		return array(
+			'merriweather-200-900-normal' => <<<CSS
+@font-face{font-family:Merriweather;font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local(Merriweather), url('https://example.com/assets/fonts/merriweather.ttf.woff2') format('woff2');}
+CSS
+		,
+			'Source Serif Pro-300-normal' => <<<CSS
+@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:300;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
+CSS
+		,
+			'Source Serif Pro-900-italic' => <<<CSS
+@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');}
+CSS
+		,
+			'font1-300-normal'            => 'font1-300-normal',
+			'font1-300-italic'            => 'font1-300-italic',
+			'font1-900-normal'            => 'font1-900-normal',
+			'font2-200-900-normal'        => 'font2-200-900-normal',
+			'font2-200-900-italic'        => 'font2-200-900-italic',
+			'font3-bold-normal'           => 'font3-bold-normal',
+		);
+	}
+
+	/**
+	 * Gets web font definitions for local provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[][][]
+	 */
+	protected function get_registered_local_fonts() {
+		return array(
+			'lato'             => array(),
+			'merriweather'     => array(
+				'merriweather-200-900-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Merriweather',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+			),
+			'Source Serif Pro' => array(
+				'Source Serif Pro-300-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '300',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'Source Serif Pro-900-italic' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'italic',
+					'font-weight'  => '900',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Gets web font definitions for mock provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[][][]
+	 */
+	protected function get_registered_mock_fonts() {
+		return array(
+			'font1' => array(
+				'font1-300-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '300',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+				'font1-300-italic' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '300',
+					'font-style'   => 'italic',
+					'font-display' => 'fallback',
+				),
+				'font1-900-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '900',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+			),
+			'font2' => array(
+				'font2-200-900-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 2',
+					'font-weight'  => '200 900',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+				'font2-200-900-italic' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 2',
+					'font-weight'  => '200 900',
+					'font-style'   => 'italic',
+					'font-display' => 'fallback',
+				),
+			),
+			'font3' => array(
+				'font3-bold-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 3',
+					'font-weight'  => 'bold',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpDeregisterFontFamily-test.php b/phpunit/webfonts/wpDeregisterFontFamily-test.php
new file mode 100644
index 00000000000000..2487053b6149c5
--- /dev/null
+++ b/phpunit/webfonts/wpDeregisterFontFamily-test.php
@@ -0,0 +1,74 @@
+<?php
+/**
+ * Unit and integration tests for wp_deregister_font_family().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @group remove_webfonts
+ * @covers ::wp_deregister_font_family
+ * @covers WP_Web_Fonts::remove_font_family
+ */
+class Tests_Webfonts_WpDeregisterFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering a font-family that mocks WP_Web_Fonts.
+	 *
+	 * @dataProvider data_font_family_handles
+	 *
+	 * @param string $font_family_handle Font family handle to test.
+	 */
+	public function test_unit_should_deregister( $font_family_handle ) {
+		$mock = $this->set_up_mock( 'remove_font_family' );
+		$mock->expects( $this->once() )
+			->method( 'remove_font_family' )
+			->with(
+				$this->identicalTo( $font_family_handle )
+			);
+
+		wp_deregister_font_family( $font_family_handle );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering a font family and all of its variations.
+	 *
+	 * @dataProvider data_font_family_handles
+	 *
+	 * @param string $font_family Font family to test.
+	 */
+	public function test_should_deregister_before_registration( $font_family ) {
+		wp_deregister_font_family( $font_family );
+
+		$this->assertIsArray( $this->get_registered(), 'Registration queue should be an array' );
+		$this->assertEmpty( $this->get_registered(), 'Registration queue should be empty after deregistering' );
+	}
+
+	/**
+	 * Integration test for deregistering a font family and all of its variations.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_deregister_after_registration( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		foreach ( $inputs as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+		// Test the before state, just to make sure.
+		$this->assertSame( $registered_handles, $this->get_registered_handles(), 'Font family and variations should be registered before deregistering' );
+
+		wp_deregister_font_family( $font_family );
+
+		// Test after deregistering.
+		$this->assertIsArray( $this->get_registered_handles(), 'Registration queue should be an array' );
+		$this->assertSame( $expected, $this->get_registered_handles(), 'Registration queue should match after deregistering' );
+	}
+}
diff --git a/phpunit/webfonts/wpDeregisterWebfontVariation-test.php b/phpunit/webfonts/wpDeregisterWebfontVariation-test.php
new file mode 100644
index 00000000000000..a6a0ab67ad4480
--- /dev/null
+++ b/phpunit/webfonts/wpDeregisterWebfontVariation-test.php
@@ -0,0 +1,298 @@
+<?php
+/**
+ * Unit and integration tests for wp_deregister_webfont_variation().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers ::wp_deregister_webfont_variation
+ * @covers WP_Webfonts::remove_variation
+ */
+class Tests_Webfonts_WpDeregisterWebfontVariation extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $fonts_to_register = array();
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts       = wp_webfonts();
+		$this->fonts_to_register = $this->get_registered_local_fonts();
+	}
+
+	/**
+	 * Sets up the unit test by mocking the WP_Dependencies object using stdClass and
+	 * registering each font family directly to the WP_Webfonts::$registered property
+	 * and its variations to the mocked $deps property.
+	 */
+	private function setup_unit_test() {
+		$this->setup_registration_mocks( $this->fonts_to_register, $this->wp_webfonts );
+	}
+
+	/**
+	 * Sets up the integration test by properly registering each font family and its variations
+	 * by using the WP_Webfonts::add() and WP_Webfonts::add_variation() methods.
+	 */
+	private function setup_integration_test() {
+		foreach ( $this->fonts_to_register as $font_family_handle => $variations ) {
+			$this->setup_register( $font_family_handle, $variations, $this->wp_webfonts );
+		}
+	}
+
+	/**
+	 * Testing the test setup to ensure it works.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_mocked_setup( $font_family_handle, $variation_handle ) {
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be in the registered queue before removal' );
+		$this->assertContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should be in its font family deps before removal' );
+	}
+
+	/**
+	 * Unit test for deregistering a font-family's variation using mock of WP_Webfonts.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family to test.
+	 * @param string $variation_handle   Variation's handle to test.
+	 */
+	public function test_should_deregister_when_mocked( $font_family_handle, $variation_handle ) {
+		$mock = $this->set_up_mock( 'remove_variation' );
+		$mock->expects( $this->once() )
+			->method( 'remove_variation' )
+			->with(
+				$this->identicalTo( $font_family_handle, $variation_handle )
+			);
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_should_do_nothing
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_unit_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_unit_test();
+		$registered_queue = $this->wp_webfonts->registered;
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSame( $registered_queue, $this->wp_webfonts->registered, 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_should_do_nothing
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_integration_test();
+		$registered_queue = $this->wp_webfonts->get_registered();
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSameSets( $registered_queue, $this->wp_webfonts->get_registered(), 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_should_do_nothing() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'        => 'merriweather',
+				'font_family_handle' => 'merriweather',
+				'variation_handle'   => 'merriweather-200-900-normal',
+			),
+			'Font with multiple variations' => array(
+				'font_family'        => 'Source Serif Pro',
+				'font_family_handle' => 'source-serif-pro',
+				'variation_handle'   => 'Source Serif Pro-300-normal',
+			),
+		);
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Remove the variation handle from the font family's deps.
+	 *
+	 * @param string $font_family_handle Font family.
+	 * @param string $variation_handle   The variation handle to remove.
+	 */
+	private function setup_remove_from_font_family_deps( $font_family_handle, $variation_handle ) {
+		foreach ( $this->wp_webfonts->registered[ $font_family_handle ]->deps as $index => $vhandle ) {
+			if ( $variation_handle !== $vhandle ) {
+				continue;
+			}
+			unset( $this->wp_webfonts->registered[ $font_family_handle ]->deps[ $index ] );
+			break;
+		}
+	}
+
+	/**
+	 * Removes the variation from the WP_Webfonts::$registered queue.
+	 *
+	 * @param string $variation_handle The variation handle to remove.
+	 */
+	private function setup_remove_variation_from_registered( $variation_handle ) {
+		unset( $this->wp_webfonts->registered[ $variation_handle ] );
+	}
+}
diff --git a/phpunit/webfonts/wpEnqueueWebfontVariations-test.php b/phpunit/webfonts/wpEnqueueWebfontVariations-test.php
new file mode 100644
index 00000000000000..f6ce62d3f47ee0
--- /dev/null
+++ b/phpunit/webfonts/wpEnqueueWebfontVariations-test.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * Unit and integration tests for wp_enqueue_webfont_variations().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_enqueue_webfont_variations
+ * @covers WP_Webfonts::enqueue
+ */
+class Tests_Webfonts_WpEnqueueWebfontVariations extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering one or more specific variations that mocks WP_Webfonts.
+	 *
+	 * @dataProvider data_variation_handles
+	 *
+	 * @param string|string[] $handles Variation handles to test.
+	 */
+	public function test_unit_should_enqueue( $handles ) {
+		$mock = $this->set_up_mock( 'enqueue' );
+		$mock->expects( $this->once() )
+			->method( 'enqueue' )
+			->with(
+				$this->identicalTo( $handles )
+			);
+
+		wp_enqueue_webfont_variations( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_variation_handles() {
+		return array(
+			'1 variation handle'                   => array( 'merriweather-200-900-normal' ),
+			'multiple same font family handles'    => array( array( 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ) ),
+			'handles from different font families' => array( array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ) ),
+		);
+	}
+
+	/**
+	 * Integration test for enqueuing one or more specific variations.
+	 *
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Variation handles to test.
+	 * @param array           $expected Expected queue.
+	 */
+	public function test_should_enqueue_after_registration( $handles, array $expected ) {
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+
+		wp_enqueue_webfont_variations( $handles );
+		$this->assertEmpty( $this->get_queued_before_register(), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected, $this->get_enqueued_handles(), 'Queue should contain the given handles' );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering one or more specific variations.
+	 *
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Variation handles to test.
+	 * @param array           $not_used Not used.
+	 * @param array           $expected Expected "queued_before_register" queue.
+	 */
+	public function test_should_enqueue_before_registration( $handles, array $not_used, array $expected ) {
+		wp_enqueue_webfont_variations( $handles );
+
+		$this->assertSame( $expected, $this->get_queued_before_register(), '"queued_before_register" queue should contain the given handles' );
+		$this->assertEmpty( $this->get_enqueued_handles(), 'Queue should be empty' );
+	}
+}
diff --git a/phpunit/webfonts/wpEnqueueWebfonts-test.php b/phpunit/webfonts/wpEnqueueWebfonts-test.php
new file mode 100644
index 00000000000000..a0ee6af5c1ddad
--- /dev/null
+++ b/phpunit/webfonts/wpEnqueueWebfonts-test.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * Unit and integration tests for wp_enqueue_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_enqueue_webfonts
+ * @covers WP_Web_Fonts::enqueue
+ */
+class Tests_Webfonts_WpEnqueueWebfonts extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering a font-family that mocks WP_Web_Fonts.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_unit_should_enqueue( $font_families, $expected_handles ) {
+		$mock = $this->set_up_mock( 'enqueue' );
+		$mock->expects( $this->once() )
+			->method( 'enqueue' )
+			->with(
+				$this->identicalTo( $expected_handles )
+			);
+
+		wp_enqueue_webfonts( $font_families );
+	}
+
+	/**
+	 * Integration test for enqueuing a font family and all of its variations.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_should_enqueue_after_registration( $font_families, $expected_handles ) {
+		// Register the font-families.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+
+		wp_enqueue_webfonts( $font_families );
+
+		$this->assertEmpty( $this->get_queued_before_register(), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected_handles, $this->get_enqueued_handles(), 'Queue should contain the given font family(ies)' );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering a font family and all of its variations.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_should_enqueue_before_registration( $font_families, $expected_handles ) {
+		wp_enqueue_webfonts( $font_families );
+
+		// Set up what "queued_before_register" queue should be.
+		$expected = array();
+		foreach ( $expected_handles as $handle ) {
+			$expected[ $handle ] = null;
+		}
+		$this->assertSame( $expected, $this->get_queued_before_register(), '"queued_before_register" queue should contain the given font family(ies)' );
+		$this->assertEmpty( $this->get_enqueued_handles(), 'Queue should be empty' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_enqueue() {
+		return array(
+			'1: single word handle'                 => array(
+				'font_families'    => array( 'lato' ),
+				'expected_handles' => array( 'lato' ),
+			),
+			'1: multiple word handle'               => array(
+				'font_families'    => array( 'source-serif-pro' ),
+				'expected_handles' => array( 'source-serif-pro' ),
+			),
+			'1: single word name'                   => array(
+				'font_families'    => array( 'Merriweather' ),
+				'expected_handles' => array( 'merriweather' ),
+			),
+			'1: multiple word name'                 => array(
+				'font_families'    => array( 'My Font' ),
+				'expected_handles' => array( 'my-font' ),
+			),
+			'>1: single word handle'                => array(
+				'font_families'    => array( 'lato', 'merriweather' ),
+				'expected_handles' => array( 'lato', 'merriweather' ),
+			),
+			'>1: multiple word handle'              => array(
+				'font_families'    => array( 'source-serif-pro', 'my-font' ),
+				'expected_handles' => array( 'source-serif-pro', 'my-font' ),
+			),
+			'>1: single word name'                  => array(
+				'font_families'    => array( 'Lato', 'Merriweather' ),
+				'expected_handles' => array( 'lato', 'merriweather' ),
+			),
+			'>1: multiple word name'                => array(
+				'font_families'    => array( 'My Font', 'Source Serif Pro' ),
+				'expected_handles' => array( 'my-font', 'source-serif-pro' ),
+			),
+			'>1: mixture of word handles and names' => array(
+				'font_families'    => array( 'Source Serif Pro', 'Merriweather', 'my-font', 'Lato' ),
+				'expected_handles' => array( 'source-serif-pro', 'merriweather', 'my-font', 'lato' ),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpPrintWebfonts-test.php b/phpunit/webfonts/wpPrintWebfonts-test.php
new file mode 100644
index 00000000000000..3f782fec580fd7
--- /dev/null
+++ b/phpunit/webfonts/wpPrintWebfonts-test.php
@@ -0,0 +1,127 @@
+<?php
+/**
+ * Unit and integration tests for wp_print_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+require_once __DIR__ . '/../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_print_webfonts
+ */
+class Tests_Webfonts_WpPrintWebfonts extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_array_when_global_not_instance() {
+		global $wp_webfonts;
+		wp_webfonts();
+		$wp_webfonts = null;
+
+		$this->assertSame( array(), wp_print_webfonts() );
+		$this->assertNotInstanceOf( WP_Webfonts::class, $wp_webfonts );
+	}
+
+	/**
+	 * Unit test to mock WP_Webfonts::do_items().
+	 *
+	 * @dataProvider data_mocked_handles
+	 *
+	 * @param string|string[]|false $handles  Handles to test.
+	 * @param array|string[]        $expected Expected array of processed handles.
+	 */
+	public function test_should_return_mocked_handles( $handles, $expected ) {
+		$mock = $this->set_up_mock( 'do_items' );
+		$mock->expects( $this->once() )
+			->method( 'do_items' )
+			->with(
+				$this->identicalTo( $handles )
+			)
+			->will( $this->returnValue( $expected ) );
+
+		wp_print_webfonts( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_mocked_handles() {
+		return array(
+			'no handles'          => array(
+				'handles'  => false,
+				'expected' => array(),
+			),
+			'font family handles' => array(
+				'handles'  => array( 'my-custom-font' ),
+				'expected' => array( 'my-custom-font' ),
+			),
+		);
+	}
+
+	/**
+	 * Integration test that registers providers and fonts and then enqueues before
+	 * testing the printing functionality.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_enqueued( $setup, $expected_done, $expected_output ) {
+		$wp_webfonts = wp_webfonts();
+
+		$this->setup_integrated_deps( $setup, $wp_webfonts );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = wp_print_webfonts();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test to validate printing given handles. Rather than mocking internal functionality,
+	 * it registers providers and fonts but does not enqueue.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_handles_when_not_enqueued( $setup, $expected_done, $expected_output ) {
+		$wp_webfonts = wp_webfonts();
+
+		$this->setup_integrated_deps( $setup, $wp_webfonts, false );
+		// Do not enqueue. Instead, pass the handles to wp_print_webfonts().
+		$handles = $setup['enqueued'];
+		$this->assertEmpty( $wp_webfonts->queue, 'No fonts should be enqueued' );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = wp_print_webfonts( $handles );
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Sets up the dependencies for integration test.
+	 *
+	 * @param array        $setup       Dependencies to set up.
+	 * @param WP_Web_Fonts $wp_webfonts Instance of WP_Web_Fonts.
+	 * @param bool         $enqueue     Whether to enqueue. Default true.
+	 */
+	private function setup_integrated_deps( array $setup, $wp_webfonts, $enqueue = true ) {
+		foreach ( $setup['provider'] as $provider ) {
+			$wp_webfonts->register_provider( $provider['id'], $provider['class'] );
+		}
+		foreach ( $setup['registered'] as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+
+		if ( $enqueue ) {
+			$wp_webfonts->enqueue( $setup['enqueued'] );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpRegisterWebfontProvider-test.php b/phpunit/webfonts/wpRegisterWebfontProvider-test.php
new file mode 100644
index 00000000000000..8f1367d6dbb23d
--- /dev/null
+++ b/phpunit/webfonts/wpRegisterWebfontProvider-test.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * Unit tests for wp_register_webfont_provider().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+require_once __DIR__ . '/../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_register_webfont_provider
+ */
+class Tests_Webfonts_WpRegisterWebfontProvider extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_register_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_register_provider( $provider_id, $class ) {
+		$mock = $this->set_up_mock( 'register_provider' );
+		$mock->expects( $this->once() )
+			->method( 'register_provider' )
+			->with(
+				$this->identicalTo( $provider_id ),
+				$this->identicalTo( $class )
+			)
+			->will( $this->returnValue( true ) );
+
+		$this->assertTrue( wp_register_webfont_provider( $provider_id, $class ), 'wp_register_webfont_provider() should return true' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_register_providers() {
+		return array(
+			'mock'  => array(
+				'provider_id' => 'mock',
+				'class'       => Mock_Provider::class,
+			),
+			'local' => array(
+				'provider_id' => 'local',
+				'class'       => WP_Webfonts_Provider_Local::class,
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_invalid_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_not_register( $provider_id, $class ) {
+		$mock = $this->set_up_mock( 'register_provider' );
+		$mock->expects( $this->once() )
+			->method( 'register_provider' )
+			->with(
+				$this->identicalTo( $provider_id ),
+				$this->identicalTo( $class )
+			)
+			->will( $this->returnValue( false ) );
+
+		$this->assertFalse( wp_register_webfont_provider( $provider_id, $class ), 'wp_register_webfont_provider() should return false' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_providers() {
+		return array(
+			'provider_id is empty' => array(
+				'provider_id' => '',
+				'class'       => Mock_Provider::class,
+			),
+			'class is empty'       => array(
+				'provider_id' => 'local',
+				'class'       => '',
+			),
+			'class does not exist' => array(
+				'provider_id' => 'doesnotexist',
+				'class'       => 'Provider_Does_Not_Exist',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpRegisterWebfonts-test.php b/phpunit/webfonts/wpRegisterWebfonts-test.php
new file mode 100644
index 00000000000000..11dbf9d73c2ea3
--- /dev/null
+++ b/phpunit/webfonts/wpRegisterWebfonts-test.php
@@ -0,0 +1,325 @@
+<?php
+/**
+ * Integration tests for wp_register_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_register_webfonts
+ * @covers WP_Web_Fonts::add
+ * @covers WP_Web_Fonts::add_variation
+ */
+class Tests_Webfonts_WpRegisterWebfonts extends WP_Webfonts_TestCase {
+	use WP_Webfonts_Tests_Datasets;
+
+	/**
+	 * @dataProvider data_webfonts
+	 *
+	 * @param array $webfonts Array of webfonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_register( array $webfonts, array $expected ) {
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( $expected['wp_register_webfonts'], $actual, 'Font family handle(s) should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Web fonts should match registered queue' );
+	}
+
+	/**
+	 * @dataProvider data_webfonts
+	 *
+	 * @param array $webfonts Array of webfonts to test.
+	 */
+	public function test_should_not_enqueue_on_registration( array $webfonts ) {
+		wp_register_webfonts( $webfonts );
+		$this->assertEmpty( $this->get_enqueued_handles() );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_webfonts() {
+		return array(
+			'font family keyed with slug' => array(
+				'webfonts' => array(
+					'source-serif-pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-200-900-normal',
+					),
+				),
+			),
+			'font family keyed with name' => array(
+				'webfonts' => array(
+					'Source Serif Pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-200-900-normal',
+						'source-serif-pro-200-900-italic',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @param array $webfonts Webfonts to test.
+	 */
+	public function test_should_throw_deprecation_with_deprecated_structure( array $webfonts ) {
+		$this->expectDeprecation();
+		$this->expectDeprecationMessage(
+			'A deprecated web fonts array structure passed to wp_register_webfonts(). ' .
+			'Variations must be grouped and keyed by their font family.'
+		);
+
+		wp_register_webfonts( $webfonts );
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @param array $webfonts Webfonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_register_with_deprecated_structure( array $webfonts, array $expected ) {
+		$this->suppress_deprecations();
+
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( $expected['wp_register_webfonts'], $actual, 'Font family handle(s) should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Web fonts should match registered queue' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_deprecated_structure() {
+		return array(
+			'1 web font'                           => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'merriweather' ),
+					'get_registered'       => array( 'merriweather', 'merriweather-200-900-normal' ),
+				),
+			),
+			'2 web font in same font family'       => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+					),
+				),
+			),
+			'Web fonts in different font families' => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro', 'merriweather' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+						'merriweather',
+						'merriweather-200-900-normal',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_invalid_font_family
+	 *
+	 * @param array  $webfonts         Web fonts to test.
+	 * @param string $expected_message Expected notice message.
+	 */
+	public function test_should_not_register_with_undefined_font_family( array $webfonts, $expected_message ) {
+		$this->suppress_deprecations();
+
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( array(), $actual, 'Return value should be an empty array' );
+		$this->assertEmpty( $this->get_registered_handles(), 'No Web fonts should have registered' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_font_family() {
+		return array(
+			'non-string'                                  => array(
+				'webfonts'         => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => null,
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+			'empty string in deprecated structure'        => array(
+				'webfonts'         => array(
+					'0' => array(
+						'provider'     => 'local',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'incorrect parameter in deprecated structure' => array(
+				'webfonts'         => array(
+					array(
+						'provider'     => 'local',
+						'FontFamily'   => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font_family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts-test.php b/phpunit/webfonts/wpWebfonts-test.php
new file mode 100644
index 00000000000000..17ab8c60583fae
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts-test.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * Unit and integration tests for wp_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_webfonts
+ */
+class Tests_Webfonts_WpWebfonts extends WP_Webfonts_TestCase {
+
+	public function test_returns_instance() {
+		$this->assertInstanceOf( WP_Web_Fonts::class, wp_webfonts() );
+	}
+
+	public function test_global_set() {
+		global $wp_webfonts;
+		$this->assertNull( $wp_webfonts );
+		$instance = wp_webfonts();
+		$this->assertInstanceOf( WP_Web_Fonts::class, $wp_webfonts );
+		$this->assertSame( $instance, $wp_webfonts );
+	}
+
+	public function test_local_provider_is_automatically_registered() {
+		$expected = array(
+			'local' => array(
+				'class' => 'WP_Webfonts_Provider_Local',
+				'fonts' => array(),
+			),
+		);
+		$this->assertSame( $expected, wp_webfonts()->get_providers() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/add-test.php b/phpunit/webfonts/wpWebfonts/add-test.php
new file mode 100644
index 00000000000000..a432c7e8572129
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/add-test.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * WP_Web_Fonts::add() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add
+ */
+class Tests_Webfonts_WpWebfonts_Add extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_handles
+	 *
+	 * @param string $handle Handle to register.
+	 */
+	public function test_add( $handle ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$this->assertTrue( $wp_webfonts->add( $handle, false ), 'Registering a handle should return true' );
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_handles() {
+		return array(
+			'name: multiple'    => array( 'Source Serif Pro' ),
+			'handle: multiple'  => array( 'source-serif-pro' ),
+			'name: single'      => array( 'Merriweather' ),
+			'handle: single'    => array( 'merriweather' ),
+			'handle: variation' => array( 'my-custom-font-200-900-normal' ),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/addFontFamily-test.php b/phpunit/webfonts/wpWebfonts/addFontFamily-test.php
new file mode 100644
index 00000000000000..4aa5e55b1ef3cb
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/addFontFamily-test.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * WP_Web_Fonts::add_font_family() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add_font_family
+ */
+class Tests_Webfonts_WpWebfonts_AddFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_handles
+	 *
+	 * @param string $font_family Font family to register.
+	 * @param string $expected    Expected handle.
+	 */
+	public function test_should_register( $font_family, $expected ) {
+		$wp_webfonts        = new WP_Web_Fonts();
+		$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+
+		$this->assertSame( $expected, $font_family_handle, 'Registering a font-family should return its handle' );
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_handles() {
+		return array(
+			'name: multiple'               => array(
+				'font_family' => 'Source Serif Pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'handle: multiple'             => array(
+				'font_family' => 'source-serif-pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'name: single'                 => array(
+				'font_family' => 'Merriweather',
+				'expected'    => 'merriweather',
+			),
+			'handle: single'               => array(
+				'font_family' => 'merriweather',
+				'expected'    => 'merriweather',
+			),
+			'handle: variation'            => array(
+				'font_family' => 'my-custom-font-200-900-normal',
+				'expected'    => 'my-custom-font-200-900-normal',
+			),
+			'name: multiple font-families' => array(
+				'font_family' => 'Source Serif Pro, Merriweather',
+				'expected'    => 'source-serif-pro',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/addVariation-test.php b/phpunit/webfonts/wpWebfonts/addVariation-test.php
new file mode 100644
index 00000000000000..5f948b81fd146b
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/addVariation-test.php
@@ -0,0 +1,149 @@
+<?php
+/**
+ * WP_Web_Fonts::add_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add_variation
+ */
+class Tests_Webfonts_WpWebfonts_AddVariation extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_register_variation_when_font_family_is_registered( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variation_handle, 'Registering a variation should return its handle' );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+		$this->assertSame( array( $expected ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should be registered to font family' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_not_reregister_font_family( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+
+		// Font family should appear only once in the registered queue.
+		$expected = array( $font_family_handle, $variation_handle );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Font family should not be re-registered after registering a variation' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_not_reregister_variation( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		// Set up the test.
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+
+		// Run the test.
+		$variant_handle_on_reregister = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variant_handle_on_reregister, 'Variation should be registered to font family' );
+		$this->assertSame( $variation_handle, $variant_handle_on_reregister, 'Variation should return the previously registered variant handle' );
+		$this->assertSame( array( $variation_handle ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should only be registered once' );
+
+		$this->assertCount( 2, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_register_font_family_and_variation( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variation_handle, 'Variation should return its registered handle' );
+
+		// Extra checks to ensure both are registered.
+		$this->assertCount( 2, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+		$this->assertSame( array( $variation_handle ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should be registered to the font family' );
+	}
+
+	/**
+	 * @dataProvider data_font_family_handle_undefined
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 */
+	public function test_should_not_register_font_family_or_variant( $font_family_handle, array $variation ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Font family handle must be a non-empty string.' );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add_variation( $font_family_handle, $variation );
+
+		$this->assertEmpty( $wp_webfonts->registered, 'Registered queue should be empty' );
+		$this->assertEmpty( $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should not be registered to the font family' );
+	}
+
+	/**
+	 * @dataProvider data_font_family_undefined_in_variation
+	 * @dataProviders data_unable_determine_variation_handle
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 * @param string $expected_message   Expected notice message.
+	 */
+	public function test_should_not_register_variation_when_font_family_not_defined( $font_family_handle, array $variation, $expected_message ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertNull( $wp_webfonts->add_variation( $font_family_handle, $variation ) );
+	}
+
+	/**
+	 * @dataProvider data_unable_determine_variation_handle
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 */
+	public function test_should_register_font_family_when_variant_fails_to_register( $font_family_handle, array $variation ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add_variation( $font_family_handle, $variation );
+
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/dequeue-test.php b/phpunit/webfonts/wpWebfonts/dequeue-test.php
new file mode 100644
index 00000000000000..c4959958a2ccf4
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/dequeue-test.php
@@ -0,0 +1,72 @@
+<?php
+/**
+ * WP_Web_Fonts::dequeue() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::dequeue
+ */
+class Tests_Webfonts_WpWebfonts_Dequeue extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_do_nothing_when_handles_not_queued( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue should be empty' );
+		$this->assertEmpty( $wp_webfonts->queue, 'Queue should be empty' );
+	}
+
+	/**
+	 * Integration test for dequeuing from queue. It first registers and then enqueues before dequeuing.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_dequeue_from_queue( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register and enqueue.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+		$wp_webfonts->enqueue( $handles );
+
+		// To make sure the handles are in the queue before dequeuing.
+		$this->assertNotEmpty( $wp_webfonts->queue, 'Queue not be empty before dequeueing' );
+
+		// Run the test.
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $wp_webfonts->queue, 'Queue should be empty after dequeueing' );
+	}
+
+	/**
+	 * Integration test for dequeuing from prequeue. It enqueues first.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_dequeue_from_prequeue( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->enqueue( $handles );
+		$this->assertNotEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue not be empty before dequeueing' );
+
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue should be empty after dequeueing' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/doItem-test.php b/phpunit/webfonts/wpWebfonts/doItem-test.php
new file mode 100644
index 00000000000000..e54b909f83429e
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/doItem-test.php
@@ -0,0 +1,336 @@
+<?php
+/**
+ * WP_Web_Fonts::do_item() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  printwebfonts
+ * @covers WP_Web_Fonts::do_item
+ */
+class Tests_Webfonts_WpWebfonts_DoItem extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts;
+	}
+
+	public function test_should_return_false_when_provider_not_registered() {
+		$this->assertFalse( $this->wp_webfonts->do_item( 'provider_not_registered' ) );
+	}
+
+	/**
+	 * @dataProvider data_provider_definitions
+	 *
+	 * @param array $provider Provider to mock.
+	 */
+	public function test_should_return_false_when_no_fonts_enqueued_for_provider( array $provider ) {
+		$this->setup_provider_property_mock( $this->wp_webfonts, $provider );
+		$this->assertFalse( $this->wp_webfonts->do_item( $provider['id'] ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_provider_definitions() {
+		$providers = $this->get_provider_definitions();
+
+		return array(
+			'mock'  => array( $providers['mock'] ),
+			'local' => array( $providers['local'] ),
+		);
+	}
+
+	/**
+	 * Test the test set up to ensure the `Tests_Webfonts_WpWebfonts_DoItem_::setup_provider_property_mock()`
+	 * method works as expected.
+	 */
+	public function test_mocking_providers_property() {
+		$font_handles = array( 'font1', 'font2', 'font3' );
+		$expected     = array(
+			'mock' => array(
+				'class' => Mock_Provider::class,
+				'fonts' => $font_handles,
+			),
+		);
+
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+		$actual = $this->property['WP_Web_Fonts::$providers']->getValue( $this->wp_webfonts );
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Test the private method WP_Web_Fonts::get_enqueued_fonts_for_provider().
+	 *
+	 * Why? This test validates the right fonts are returned for use within
+	 * WP_Web_Fonts::do_item().
+	 *
+	 * @dataProvider data_get_enqueued_fonts_for_provider
+	 *
+	 * @param array $font_handles Array of handles for the provider.
+	 * @param array $to_do        Handles to set for the WP_Web_Fonts::$to_do property.
+	 * @param array $expected     Expected result.
+	 */
+	public function test_get_enqueued_fonts_for_provider( $font_handles, $to_do, $expected ) {
+		// Set up the `to_do` property.
+		$this->wp_webfonts->to_do = $to_do;
+
+		// Open the method's visibility for testing.
+		$get_enqueued_fonts_for_provider = $this->get_reflection_method( 'get_enqueued_fonts_for_provider' );
+
+		// Mock the WP_Web_Fonts::$property to set up the test.
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+
+		$actual = $get_enqueued_fonts_for_provider->invoke( $this->wp_webfonts, 'mock' );
+		$this->assertSameSets( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_enqueued_fonts_for_provider() {
+		return array(
+			'to_do queue is empty'                   => array(
+				'font_handles ' => array( 'font1', 'font2', 'font3' ),
+				'to_do'         => array(),
+				'expected'      => array(),
+			),
+			'fonts not in to_do queue'               => array(
+				'font_handles ' => array( 'font1', 'font2', 'font3' ),
+				'to_do'         => array( 'font12', 'font13' ),
+				'expected'      => array(),
+			),
+			'2 of the provider fonts in to_do queue' => array(
+				'font_handles ' => array( 'font11', 'font12', 'font13' ),
+				'to_do'         => array( 'font11', 'font13' ),
+				'expected'      => array( 'font11', 'font13' ),
+			),
+			'do all of the provider fonts'           => array(
+				'font_handles ' => array( 'font21', 'font22', 'font23' ),
+				'to_do'         => array( 'font21', 'font22', 'font23' ),
+				'expected'      => array( 'font21', 'font22', 'font23' ),
+			),
+		);
+	}
+
+	/**
+	 * Test the private method WP_Web_Fonts::get_font_properties_for_provider().
+	 *
+	 * Why? This test validates the right font properties are returned for use within
+	 * WP_Web_Fonts::do_item().
+	 *
+	 * @dataProvider data_get_font_properties_for_provider
+	 *
+	 * @param array $font_handles Web fonts for testing.
+	 * @param array $expected     Expected result.
+	 */
+	public function test_get_font_properties_for_provider( $font_handles, $expected ) {
+		// Set up the fonts for WP_Dependencies:get_data().
+		$fonts = $this->get_registered_fonts();
+		// Set all variations to 'mock' provider.
+
+		// Mock the WP_Web_Fonts::$property to set up the test.
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+		$this->setup_registration_mocks( $fonts, $this->wp_webfonts );
+
+		// Open the method's visibility for testing.
+		$method = $this->get_reflection_method( 'get_font_properties_for_provider' );
+
+		$actual = $method->invoke( $this->wp_webfonts, $font_handles );
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_font_properties_for_provider() {
+		$fonts = $this->get_registered_fonts();
+
+		return array(
+			'handles not registered'                => array(
+				'font_handles' => array( 'font-not-registered1', 'font-not-registered2', 'font-not-registered3' ),
+				'expected'     => array(),
+			),
+			'registered and non-registered handles' => array(
+				'font_handles' => array( 'Source Serif Pro-300-normal', 'not-registered-handle', 'Source Serif Pro-900-italic' ),
+				'expected'     => array(
+					'Source Serif Pro-300-normal' => $fonts['Source Serif Pro']['Source Serif Pro-300-normal'],
+					'Source Serif Pro-900-italic' => $fonts['Source Serif Pro']['Source Serif Pro-900-italic'],
+				),
+			),
+			'font-family handles, ie no "font-properties" extra data' => array(
+				'font_handles' => array( 'font1', 'font2', 'merriweather' ),
+				'expected'     => array(),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_print_enqueued_fonts
+	 *
+	 * @param array $provider Define provider.
+	 * @param array $fonts    Fonts to register and enqueue.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_trigger_provider_when_mocked( array $provider, array $fonts, array $expected ) {
+		$this->setup_print_deps( $provider, $fonts );
+
+		$provider_mock = $this->setup_object_mock( array( 'set_webfonts', 'print_styles' ), $provider['class'] );
+
+		// Test the provider's methods are invoked.
+		$provider_mock->expects( $this->once() )->method( 'set_webfonts' )->with( $this->identicalTo( $expected['set_webfonts'] ) );
+		$provider_mock->expects( $this->once() )->method( 'print_styles' );
+
+		// Set up the WP_Web_Fonts::$provider_instances property.
+		$provider_instances = $this->get_reflection_property( 'provider_instances' );
+		$provider_instances->setValue( $this->wp_webfonts, array( $provider['id'] => $provider_mock ) );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( '' );
+		$this->assertTrue( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return true' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_print_enqueued_fonts
+	 *
+	 * @param array $provider Define provider.
+	 * @param array $fonts    Fonts to register and enqueue.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_print( array $provider, array $fonts, array $expected ) {
+		$this->setup_print_deps( $provider, $fonts );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( $expected['printed_output'] );
+		$this->assertTrue( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return true' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_print_enqueued_fonts() {
+		$mock       = $this->get_registered_mock_fonts();
+		$local      = $this->get_registered_local_fonts();
+		$font_faces = $this->get_registered_fonts_css();
+
+		return array(
+			'mock'  => array(
+				'provider' => $this->get_provider_definitions( 'mock' ),
+				'fonts'    => $mock,
+				'expected' => array(
+					'set_webfonts'   => array_merge( $mock['font1'], $mock['font2'], $mock['font3'] ),
+					'printed_output' => sprintf(
+						'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+						$font_faces['font1-300-normal'],
+						$font_faces['font1-300-italic'],
+						$font_faces['font1-900-normal'],
+						$font_faces['font2-200-900-normal'],
+						$font_faces['font2-200-900-italic'],
+						$font_faces['font3-bold-normal']
+					),
+				),
+			),
+			'local' => array(
+				'provider' => $this->get_provider_definitions( 'local' ),
+				'fonts'    => $local,
+				'expected' => array(
+					'set_webfonts'   => array_merge( $local['merriweather'], $local['Source Serif Pro'] ),
+					'printed_output' => sprintf(
+						"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal'],
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_not_print_enqueued_fonts
+	 *
+	 * @param array $provider    Define provider.
+	 * @param array $fonts       Fonts to register and enqueue.
+	 * @param array $expected    Not used.
+	 * @param array $to_do_queue Value to set in the WP_Web_Fonts::$to_do queue.
+	 */
+	public function test_should_not_print_when_to_do_queue_empty( array $provider, array $fonts, $expected, $to_do_queue ) {
+		$this->setup_print_deps( $provider, $fonts, $to_do_queue );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( '' );
+		$this->assertFalse( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return false' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_not_print_enqueued_fonts() {
+		$mock  = $this->get_registered_mock_fonts();
+		$local = $this->get_registered_local_fonts();
+
+		return array(
+			'mock provider when to_do queue is empty'  => array(
+				'provider'    => $this->get_provider_definitions( 'mock' ),
+				'fonts'       => $mock,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+			'local provider when to_do queue is empty' => array(
+				'provider'    => $this->get_provider_definitions( 'local' ),
+				'fonts'       => $local,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+			'fonts not in to_do queue'                 => array(
+				'provider'    => $this->get_provider_definitions( 'mock' ),
+				'fonts'       => $mock,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+		);
+	}
+
+	/**
+	 * Sets up the print dependencies.
+	 *
+	 * @param array      $provider    Provider id and class.
+	 * @param array      $fonts       Fonts to register and enqueue.
+	 * @param array|null $to_do_queue Set the WP_Web_Fonts:$to_do queue.
+	 */
+	private function setup_print_deps( $provider, $fonts, $to_do_queue = null ) {
+		// Set up the fonts for WP_Dependencies:get_data().
+		$mocks   = $this->setup_registration_mocks( $fonts, $this->wp_webfonts );
+		$handles = array_keys( $mocks );
+		$this->setup_provider_property_mock( $this->wp_webfonts, $provider, $handles );
+
+		// Set up the `WP_Web_Fonts::$to_do` and `WP_Web_Fonts::$to_do_keyed_handles` properties.
+		if ( null === $to_do_queue ) {
+			$to_do_queue = $handles;
+		}
+
+		$this->wp_webfonts->to_do = $to_do_queue;
+		$to_do_keyed_handles      = $this->get_reflection_property( 'to_do_keyed_handles' );
+		$to_do_keyed_handles->setValue( $this->wp_webfonts, array_flip( $to_do_queue ) );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/doItems-test.php b/phpunit/webfonts/wpWebfonts/doItems-test.php
new file mode 100644
index 00000000000000..7efb8dff67b7ec
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/doItems-test.php
@@ -0,0 +1,196 @@
+<?php
+/**
+ * WP_Web_Fonts::do_items() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @group  printwebfonts
+ * @covers WP_Web_Fonts::do_items
+ */
+class Tests_Webfonts_WpWebfonts_DoItems extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts;
+	}
+
+	public function test_should_not_process_when_no_providers_registered() {
+		$this->setup_deps( array( 'enqueued' => 'font1' ) );
+
+		$done = $this->wp_webfonts->do_items();
+
+		$this->assertSame( array(), $done, 'WP_Web_Fonts::do_items() should return an empty array' );
+		$this->assertSame( array(), $this->wp_webfonts->to_do, 'WP_Web_Fonts::$to_do should be an empty array' );
+	}
+
+	/**
+	 * @dataProvider data_invalid_handles
+	 *
+	 * @param mixed $handles Handles to test.
+	 */
+	public function test_should_throw_notice_when_invalid_handles( $handles ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Handles must be a non-empty string or array of non-empty strings' );
+
+		$this->wp_webfonts->do_items( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_handles() {
+		return array(
+			'null'                         => array( null ),
+			'empty array'                  => array( array() ),
+			'empty string'                 => array( '' ),
+			'array of empty strings'       => array( array( '', '' ) ),
+			'array of mixed falsey values' => array( array( '', false, null, array() ) ),
+		);
+	}
+
+	public function test_should_throw_notice_when_provider_class_not_found() {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Class "Provider_Does_Not_Exist" not found for "doesnotexist" web font provider' );
+
+		$setup = array(
+			'provider'         => array(
+				'doesnotexist' => array(
+					'id'    => 'doesnotexist',
+					'class' => 'Provider_Does_Not_Exist',
+				),
+			),
+			'provider_handles' => array( 'doesnotexist' => array( 'font1' ) ),
+			'registered'       => array(
+				'doesnotexist' => array(
+					'font1' => array(
+						'font1-300-normal' => array(
+							'provider'     => 'doesnotexist',
+							'font-weight'  => '300',
+							'font-style'   => 'normal',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+			),
+			'enqueued'         => array( 'font1', 'font1-300-normal' ),
+		);
+		$this->setup_deps( $setup );
+
+		$this->wp_webfonts->do_items();
+	}
+
+	/**
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_mocked_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_deps( $setup );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = $this->wp_webfonts->do_items();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test that registers providers and fonts and then enqueues before
+	 * testing the printing functionality.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_integrated_deps( $setup );
+
+		$this->expectOutputString( $expected_output, 'Printed @font-face styles should match' );
+		$actual_done = $this->wp_webfonts->do_items();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test to validate printing given handles. Rather than mocking internal functionality,
+	 * it registers providers and fonts but does not enqueue.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_handles_when_not_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_integrated_deps( $setup, false );
+		// Do not enqueue. Instead, pass the handles to WP_Web_Fonts::do_items().
+		$handles = $setup['enqueued'];
+		$this->assertEmpty( $this->wp_webfonts->queue, 'No fonts should be enqueued' );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = $this->wp_webfonts->do_items( $handles );
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Sets up the dependencies for the mocked test.
+	 *
+	 * @param array $setup Dependencies to set up.
+	 */
+	private function setup_deps( array $setup ) {
+		$setup = array_merge(
+			array(
+				'provider'         => array(),
+				'provider_handles' => array(),
+				'registered'       => array(),
+				'enqueued'         => array(),
+			),
+			$setup
+		);
+
+		if ( ! empty( $setup['provider'] ) ) {
+			foreach ( $setup['provider'] as $provider_id => $provider ) {
+				$this->setup_provider_property_mock( $this->wp_webfonts, $provider, $setup['provider_handles'][ $provider_id ] );
+			}
+		}
+
+		if ( ! empty( $setup['registered'] ) ) {
+			$this->setup_registration_mocks( $setup['registered'], $this->wp_webfonts );
+		}
+
+		if ( ! empty( $setup['enqueued'] ) ) {
+			$queue = $this->get_reflection_property( 'queue' );
+			$queue->setValue( $this->wp_webfonts, $setup['enqueued'] );
+		}
+	}
+
+	/**
+	 * Sets up the dependencies for integration test.
+	 *
+	 * @param array $setup   Dependencies to set up.
+	 * @param bool  $enqueue Whether to enqueue. Default true.
+	 */
+	private function setup_integrated_deps( array $setup, $enqueue = true ) {
+		foreach ( $setup['provider'] as $provider ) {
+			$this->wp_webfonts->register_provider( $provider['id'], $provider['class'] );
+		}
+		foreach ( $setup['registered'] as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $this->wp_webfonts );
+		}
+
+		if ( $enqueue ) {
+			$this->wp_webfonts->enqueue( $setup['enqueued'] );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/enqueue-test.php b/phpunit/webfonts/wpWebfonts/enqueue-test.php
new file mode 100644
index 00000000000000..dde2d92c6df377
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/enqueue-test.php
@@ -0,0 +1,53 @@
+<?php
+/**
+ * WP_Web_Fonts::enqueue() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::enqueue
+ */
+class Tests_Webfonts_WpWebfonts_Enqueue extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Handles to test.
+	 * @param array           $not_used Not used.
+	 * @param array           $expected Expected "queued_before_register" queue.
+	 */
+	public function test_should_prequeue_when_not_registered( $handles, $not_used, $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->enqueue( $handles );
+
+		$this->assertSame( $expected, $this->get_queued_before_register( $wp_webfonts ), 'Handles should be added to before registered queue' );
+		$this->assertEmpty( $wp_webfonts->queue, 'Handles should not be added to the enqueue queue when not registered' );
+	}
+
+	/**
+	 * Integration test for enqueuing (a) a font family and all of its variations or (b) specific variations.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProviders data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Handles to test.
+	 * @param array           $expected Expected queue.
+	 */
+	public function test_should_enqueue_when_registered( $handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		foreach ( $this->get_data_registry() as $font_family => $variations ) {
+			$this->setup_register( $font_family, $variations, $wp_webfonts );
+		}
+
+		$wp_webfonts->enqueue( $handles );
+
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected, $wp_webfonts->queue, 'Queue should contain the given handles' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getEnqueued-test.php b/phpunit/webfonts/wpWebfonts/getEnqueued-test.php
new file mode 100644
index 00000000000000..63ea923c085f54
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getEnqueued-test.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * WP_Web_Fonts::get_enqueued() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_enqueued
+ */
+class Tests_Webfonts_WpWebfonts_GetEnqueued extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_when_non_enqueued() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertEmpty( $wp_webfonts->get_enqueued() );
+	}
+
+	/**
+	 * Unit test for when font families are enqueued.
+	 *
+	 * @dataProvider data_enqueue
+	 *
+	 * @param string|string[] $not_used Not used.
+	 * @param array           $expected    Expected queue.
+	 */
+	public function test_should_return_queue_when_property_has_font_families( $not_used, array $expected ) {
+		$wp_webfonts        = new WP_Web_Fonts();
+		$wp_webfonts->queue = $expected;
+
+		$this->assertSame( $expected, $wp_webfonts->get_enqueued() );
+	}
+
+	/**
+	 * Full integration test that registers and enqueues the queue
+	 * is properly wired for "get_enqueued()".
+	 *
+	 * @dataProvider data_enqueue
+	 *
+	 * @param string|string[] $font_family Font family to test.
+	 * @param array           $expected    Expected queue.
+	 */
+	public function test_should_return_queue_when_font_families_registered_and_enqueued( $font_family, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register and enqueue.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+		$wp_webfonts->enqueue( $font_family );
+
+		$this->assertSame( $expected, $wp_webfonts->get_enqueued() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getProviders-test.php b/phpunit/webfonts/wpWebfonts/getProviders-test.php
new file mode 100644
index 00000000000000..7aa758582cb7c7
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getProviders-test.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * WP_Web_Fonts::get_providers() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_providers
+ */
+class Tests_Webfonts_WpWebfonts_GetProviders extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $providers_property;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts();
+
+		$this->providers_property = new ReflectionProperty( WP_Web_Fonts::class, 'providers' );
+		$this->providers_property->setAccessible( true );
+	}
+
+	public function test_should_be_empty() {
+		$actual = $this->wp_webfonts->get_providers();
+		$this->assertIsArray( $actual, 'Should return an empty array' );
+		$this->assertEmpty( $actual, 'Should return an empty array when no providers are registered' );
+	}
+
+	/**
+	 * @dataProvider data_get_providers
+	 *
+	 * @param array $providers Array of providers to test.
+	 * @param array $expected  Expected results.
+	 */
+	public function test_get_providers( array $providers, array $expected ) {
+		$this->setup_providers( $providers );
+		$this->assertSame( $expected, $this->wp_webfonts->get_providers() );
+	}
+
+	/**
+	 * Sets up the given providers and stores them in the `WP_Web_Fonts::providers` property.
+	 *
+	 * @param array $providers Array of providers to set up.
+	 */
+	private function setup_providers( array $providers ) {
+		$data = array();
+
+		foreach ( $providers as $provider_id => $class ) {
+			$data[ $provider_id ] = array(
+				'class' => $class,
+				'fonts' => array(),
+			);
+		}
+
+		$this->providers_property->setValue( $this->wp_webfonts, $data );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getRegistered-test.php b/phpunit/webfonts/wpWebfonts/getRegistered-test.php
new file mode 100644
index 00000000000000..76b0ab3a5d097c
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getRegistered-test.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * WP_Web_Fonts::get_registered() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_registered
+ */
+class Tests_Webfonts_WpWebfonts_GetRegistered extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_when_none_registered() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertEmpty( $wp_webfonts->get_registered() );
+	}
+
+	/**
+	 * Unit test for when font families are enqueued.
+	 *
+	 * @dataProvider data_get_registered
+	 *
+	 * @param array $inputs Font family(ies) and variations to register.
+	 */
+	public function test_should_return_queue_when_mocking_registered_property( array $inputs ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$mocks       = $this->setup_registration_mocks( $inputs, $wp_webfonts );
+		$expected    = array_keys( $mocks );
+
+		$this->assertSame( $expected, $wp_webfonts->get_registered() );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_registered() {
+		return array(
+			'no variations'                          => array(
+				'inputs' => array(
+					'lato' => array(),
+				),
+			),
+			'with 1 variation'                       => array(
+				'inputs' => array(
+					'Source Serif Pro' => array( 'variation-1' ),
+				),
+			),
+			'with 2 variations'                      => array(
+				'inputs' => array(
+					'my-cool-font' => array( 'cool-1', 'cool-2' ),
+				),
+			),
+			'when multiple font families registered' => array(
+				'inputs' => array(
+					'font-family-1' => array( 'variation-11', 'variation-12' ),
+					'font-family-2' => array( 'variation-21', 'variation-22' ),
+					'font-family-3' => array( 'variation-31', 'variation-32' ),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Full integration test that registers varying number of font families and variations
+	 * to validate if "get_registered()" internals is property wired to the registered queue.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family Not used.
+	 * @param array  $inputs      Font family(ies) and variations to register.
+	 * @param array  $expected    Expected results.
+	 */
+	public function test_should_return_queue_when_items_are_registered( $font_family, array $inputs, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register before testing.
+		foreach ( $inputs as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+
+		$this->assertSame( $expected, $wp_webfonts->get_registered() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/query-test.php b/phpunit/webfonts/wpWebfonts/query-test.php
new file mode 100644
index 00000000000000..75b44b2717f2b9
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/query-test.php
@@ -0,0 +1,151 @@
+<?php
+/**
+ * WP_Web_Fonts::query() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::query
+ */
+class Tests_Webfonts_WpWebfonts_Query extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->wp_webfonts = new WP_Web_Fonts();
+	}
+
+	/**
+	 * @dataProvider data_invalid_query
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_should_fail_when_handles_not_registered( $query_handle ) {
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'registered' ) );
+	}
+
+	/**
+	 * @dataProvider data_invalid_query
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_should_fail_when_handles_not_registered_or_enqueued( $query_handle ) {
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'queue' ) );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_registered_query_should_succeed_when_registered( $query_handle ) {
+		$this->setup_registry();
+
+		$actual = $this->wp_webfonts->query( $query_handle, 'registered' );
+		$this->assertInstanceOf( '_WP_Dependency', $actual, 'Query should return an instance of _WP_Dependency' );
+		$this->assertSame( $query_handle, $actual->handle, 'Query object handle should match the given handle to query' );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_enqueued_query_should_succeed_when_registered_and_enqueued( $query_handle ) {
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		$this->assertTrue( $this->wp_webfonts->query( $query_handle, 'enqueued' ) );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_enqueued_query_should_fail_when_not_registered_but_enqueued( $query_handle ) {
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'enqueued' ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_query() {
+		return array(
+			'DM Sans' => array( 'DM Sans' ),
+			'roboto'  => array( 'roboto' ),
+			'my-font' => array( 'my-font' ),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_valid_query() {
+		return array(
+			'lato'             => array( 'lato' ),
+			'merriweather'     => array( 'merriweather' ),
+			'Source Serif Pro' => array( 'source-serif-pro' ),
+		);
+	}
+
+	public function test_done_query_should_fail_when_no_variations() {
+		$this->wp_webfonts->register_provider( 'local', WP_Webfonts_Provider_Local::class );
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( 'lato' );
+
+		$this->wp_webfonts->do_items( 'lato' );
+
+		$this->assertFalse( $this->wp_webfonts->query( 'lato', 'done' ) );
+	}
+
+	/**
+	 * @dataProvider data_done_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_done_query_should_succeed_when_registered_and_enqueued( $query_handle ) {
+		$this->wp_webfonts->register_provider( 'local', WP_Webfonts_Provider_Local::class );
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		// Process the web fonts while ignoring all the printed output.
+		$this->expectOutputRegex( '`.`' );
+		$this->wp_webfonts->do_items( $query_handle );
+		$this->getActualOutput();
+
+		$this->assertTrue( $this->wp_webfonts->query( $query_handle, 'done' ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_done_query() {
+		return array(
+			'merriweather'     => array( 'merriweather' ),
+			'Source Serif Pro' => array( 'source-serif-pro' ),
+		);
+	}
+
+	private function setup_registry() {
+		foreach ( $this->get_registered_local_fonts() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $this->wp_webfonts );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/registerProvider-test.php b/phpunit/webfonts/wpWebfonts/registerProvider-test.php
new file mode 100644
index 00000000000000..b73623259fcf48
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/registerProvider-test.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * WP_Web_Fonts::register_provider() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::register_provider
+ */
+class Tests_Webfonts_WpWebfonts_RegisterProvider extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_register_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 * @param array  $expected    Expected providers queue.
+	 */
+	public function test_should_register_provider( $provider_id, $class, $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertTrue( $wp_webfonts->register_provider( $provider_id, $class ), 'WP_Web_Fonts::register_provider() should return true' );
+		$this->assertSame( $expected, $wp_webfonts->get_providers(), 'Provider "' . $provider_id . '" should be registered in providers queue' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_register_providers() {
+		return array(
+			'mock'  => array(
+				'provider_id' => 'mock',
+				'class'       => Mock_Provider::class,
+				'expected'    => array(
+					'mock' => array(
+						'class' => Mock_Provider::class,
+						'fonts' => array(),
+					),
+				),
+			),
+			'local' => array(
+				'provider_id' => 'local',
+				'class'       => WP_Webfonts_Provider_Local::class,
+				'expected'    => array(
+					'local' => array(
+						'class' => WP_Webfonts_Provider_Local::class,
+						'fonts' => array(),
+					),
+				),
+			),
+		);
+	}
+
+	public function test_should_register_mutliple_providers() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$providers   = $this->get_provider_definitions();
+		foreach ( $providers as $provider ) {
+			$this->assertTrue( $wp_webfonts->register_provider( $provider['id'], $provider['class'] ), 'WP_Web_Fonts::register_provider() should return true for provider ' . $provider['id'] );
+		}
+
+		$expected = array(
+			'mock'  => array(
+				'class' => $providers['mock']['class'],
+				'fonts' => array(),
+			),
+			'local' => array(
+				'class' => $providers['local']['class'],
+				'fonts' => array(),
+			),
+		);
+
+		$this->assertSame( $expected, $wp_webfonts->get_providers(), 'Both local and mock providers should be registered' );
+	}
+
+	/**
+	 * @dataProvider data_invalid_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_not_register( $provider_id, $class ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$this->assertFalse( $wp_webfonts->register_provider( $provider_id, $class ), 'WP_Web_Fonts::register_provider() should return false' );
+		$this->assertArrayNotHasKey( $provider_id, $wp_webfonts->get_providers(), 'Both local and mock providers should be registered' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_providers() {
+		return array(
+			'provider_id is empty' => array(
+				'provider_id' => '',
+				'class'       => Mock_Provider::class,
+			),
+			'class is empty'       => array(
+				'provider_id' => 'local',
+				'class'       => '',
+			),
+			'class does not exist' => array(
+				'provider_id' => 'doesnotexist',
+				'class'       => 'Provider_Does_Not_Exist',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/remove-test.php b/phpunit/webfonts/wpWebfonts/remove-test.php
new file mode 100644
index 00000000000000..86cf9fa6ad1bac
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/remove-test.php
@@ -0,0 +1,118 @@
+<?php
+/**
+ * WP_Web_Fonts::remove() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers WP_Web_Fonts::remove
+ */
+class Tests_Webfonts_WpWebfonts_Remove extends WP_Webfonts_TestCase {
+
+	public function test_should_not_remove_when_none_registered() {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$wp_webfonts->remove( array( 'handle-1', 'handle2' ) );
+
+		$this->assertEmpty( $wp_webfonts->registered );
+	}
+
+	/**
+	 * @dataProvider data_remove_when_registered
+	 *
+	 * @param array $handles  Handles to remove.
+	 * @param array $expected Expected handles are running test.
+	 */
+	public function test_should_remove_when_registered( array $handles, array $expected ) {
+		$wp_webfonts             = new WP_Web_Fonts();
+		$wp_webfonts->registered = $this->generate_registered_queue();
+
+		$wp_webfonts->remove( $handles );
+
+		$this->assertSameSets( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing handles' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_remove_when_registered() {
+		$all = array(
+			'handle-1',
+			'handle-2',
+			'handle-3',
+			'handle-4',
+			'handle-5',
+			'handle-6',
+			'handle-7',
+			'handle-8',
+			'handle-9',
+			'handle-10',
+		);
+
+		return array(
+			'remove none'                 => array(
+				'handles'  => array(),
+				'expected' => $all,
+			),
+			'remove handle-5'             => array(
+				'handles'  => array( 'handle-5' ),
+				'expected' => array(
+					'handle-1',
+					'handle-2',
+					'handle-3',
+					'handle-4',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+					'handle-9',
+					'handle-10',
+				),
+			),
+			'remove 2 from start and end' => array(
+				'handles'  => array( 'handle-1', 'handle-2', 'handle-9', 'handle-10' ),
+				'expected' => array(
+					'handle-3',
+					'handle-4',
+					'handle-5',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+				),
+			),
+			'remove all'                  => array(
+				'handles'  => $all,
+				'expected' => array(),
+			),
+			'remove only registered'      => array(
+				'handles'  => array( 'handle-1', 'handle-10', 'handle-abc', 'handle-5' ),
+				'expected' => array(
+					'handle-2',
+					'handle-3',
+					'handle-4',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+					'handle-9',
+				),
+			),
+		);
+	}
+
+	private function generate_registered_queue() {
+		$queue = array();
+		for ( $num = 1; $num <= 10; $num++ ) {
+			$handle           = "handle-{$num}";
+			$queue[ $handle ] = $num;
+		}
+
+		return $queue;
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php b/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
new file mode 100644
index 00000000000000..959744e555202f
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
@@ -0,0 +1,89 @@
+<?php
+/**
+ * WP_Web_Fonts::remove_font_family() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @group remove_webfonts
+ * @covers WP_Web_Fonts::remove_font_family
+ */
+class Tests_Webfonts_WpWebfonts_RemoveFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_dequeue_when_mocks_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->setup_registration_mocks( $inputs, $wp_webfonts );
+		// Test the before state, just to make sure.
+		$this->assertArrayHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should contain the font family before remove' );
+		$this->assertSame( $registered_handles, array_keys( $wp_webfonts->registered ), 'Font family and variations should be registered before remove' );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+
+	/**
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Not used.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_bail_out_when_not_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		unset( $inputs[ $font_family ] );
+		$this->setup_registration_mocks( $inputs, $wp_webfonts );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+
+	/**
+	 * Integration test for removing a font family and all of its variation when font family is registered.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_deregister_when_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		// Register all font families and their variations.
+		foreach ( $inputs as $input_font_family => $variations ) {
+			$handle = $wp_webfonts->add_font_family( $input_font_family );
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! is_string( $variation_handle ) ) {
+					$variation_handle = '';
+				}
+				$wp_webfonts->add_variation( $handle, $variation, $variation_handle );
+			}
+		}
+		// Test the before state, just to make sure.
+		$this->assertArrayHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should contain the font family before remove' );
+		$this->assertSame( $registered_handles, array_keys( $wp_webfonts->registered ), 'Font family and variations should be registered before remove' );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/removeVariation-test.php b/phpunit/webfonts/wpWebfonts/removeVariation-test.php
new file mode 100644
index 00000000000000..dd3b21a9573eaa
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/removeVariation-test.php
@@ -0,0 +1,278 @@
+<?php
+/**
+ * WP_Web_Fonts::remove_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers WP_Web_Fonts::remove_variation
+ */
+class Tests_Webfonts_WpWebfonts_RemoveVariation extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $fonts_to_register = array();
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts       = new WP_Web_Fonts();
+		$this->fonts_to_register = $this->get_registered_local_fonts();
+	}
+
+	/**
+	 * Sets up the unit test by mocking the WP_Dependencies object using stdClass and
+	 * registering each font family directly to the WP_Web_Fonts::$registered property
+	 * and its variations to the mocked $deps property.
+	 */
+	private function setup_unit_test() {
+		$this->setup_registration_mocks( $this->fonts_to_register, $this->wp_webfonts );
+	}
+
+	/**
+	 * Sets up the integration test by properly registering each font family and its variations
+	 * by using the WP_Web_Fonts::add() and WP_Web_Fonts::add_variation() methods.
+	 */
+	private function setup_integration_test() {
+		foreach ( $this->fonts_to_register as $font_family_handle => $variations ) {
+			$this->setup_register( $font_family_handle, $variations, $this->wp_webfonts );
+		}
+	}
+
+	/**
+	 * Testing the test setup to ensure it works.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_mocked_setup( $font_family_handle, $variation_handle ) {
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be in the registered queue before remval' );
+		$this->assertContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should be in its font family deps before removal' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_should_do_nothing_when_variation_and_font_family_not_registered
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_unit_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_unit_test();
+		$registered_queue = $this->wp_webfonts->registered;
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSame( $registered_queue, $this->wp_webfonts->registered, 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_should_do_nothing_when_variation_and_font_family_not_registered
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_integration_test();
+		$registered_queue = $this->wp_webfonts->get_registered();
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSameSets( $registered_queue, $this->wp_webfonts->get_registered(), 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_should_do_nothing_when_variation_and_font_family_not_registered() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'        => 'merriweather',
+				'font_family_handle' => 'merriweather',
+				'variation_handle'   => 'merriweather-200-900-normal',
+			),
+			'Font with multiple variations' => array(
+				'font_family'        => 'Source Serif Pro',
+				'font_family_handle' => 'source-serif-pro',
+				'variation_handle'   => 'Source Serif Pro-300-normal',
+			),
+		);
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Remove the variation handle from the font family's deps.
+	 *
+	 * @param string $font_family_handle Font family.
+	 * @param string $variation_handle   The variation handle to remove.
+	 */
+	private function setup_remove_from_font_family_deps( $font_family_handle, $variation_handle ) {
+		foreach ( $this->wp_webfonts->registered[ $font_family_handle ]->deps as $index => $vhandle ) {
+			if ( $variation_handle !== $vhandle ) {
+				continue;
+			}
+			unset( $this->wp_webfonts->registered[ $font_family_handle ]->deps[ $index ] );
+			break;
+		}
+	}
+
+	/**
+	 * Removes the variation from the WP_Web_Fonts::$registered queue.
+	 *
+	 * @param string $variation_handle The variation handle to remove.
+	 */
+	private function setup_remove_variation_from_registered( $variation_handle ) {
+		unset( $this->wp_webfonts->registered[ $variation_handle ] );
+	}
+}
diff --git a/phpunit/class-wp-webfonts-local-provider-test.php b/phpunit/webfonts/wpWebfontsProviderLocal-test.php
similarity index 78%
rename from phpunit/class-wp-webfonts-local-provider-test.php
rename to phpunit/webfonts/wpWebfontsProviderLocal-test.php
index 43ef4a84951c84..08f9f18c3cd6a2 100644
--- a/phpunit/class-wp-webfonts-local-provider-test.php
+++ b/phpunit/webfonts/wpWebfontsProviderLocal-test.php
@@ -1,10 +1,15 @@
 <?php
+/**
+ * WP_WebfontsLocal_Provider tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
 
 /**
- * @group  webfonts
- * @covers WP_WebfontsLocal_Provider
+ * @group webfonts
  */
-class WP_Webfonts_Provider_Local_Test extends WP_UnitTestCase {
+class Tests_Webfonts_WpWebfontsProviderLocal extends WP_UnitTestCase {
 	private $provider;
 	private $theme_root;
 	private $orig_theme_dir;
@@ -17,27 +22,6 @@ public function set_up() {
 		$this->set_up_theme();
 	}
 
-	/**
-	 * Local `src` paths to need to be relative to the theme. This method sets up the
-	 * `wp-content/themes/` directory to ensure consistency when running tests.
-	 */
-	private function set_up_theme() {
-		$this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
-		$this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
-		$GLOBALS['wp_theme_directories'] = array( $this->theme_root );
-
-		$theme_root_callback = function () {
-			return $this->theme_root;
-		};
-		add_filter( 'theme_root', $theme_root_callback );
-		add_filter( 'stylesheet_root', $theme_root_callback );
-		add_filter( 'template_root', $theme_root_callback );
-
-		// Clear caches.
-		wp_clean_themes_cache();
-		unset( $GLOBALS['wp_themes'] );
-	}
-
 	public function tear_down() {
 		// Restore the original theme directory setup.
 		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
@@ -79,7 +63,7 @@ public function test_set_webfonts() {
 	/**
 	 * @covers WP_Webfonts_Provider_Local::get_css
 	 *
-	 * @dataProvider data_get_css
+	 * @dataProvider data_get_css_print_styles
 	 *
 	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
 	 * @param string $expected Expected CSS.
@@ -88,7 +72,24 @@ public function test_get_css( array $webfonts, $expected ) {
 		$property = $this->get_webfonts_property();
 		$property->setValue( $this->provider, $webfonts );
 
-		$this->assertSame( $expected, $this->provider->get_css() );
+		$this->assertSame( $expected['font-face-css'], $this->provider->get_css() );
+	}
+
+	/**
+	 * @covers WP_Webfonts_Provider_Local::print_styles
+	 *
+	 * @dataProvider data_get_css_print_styles
+	 *
+	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
+	 * @param string $expected Expected CSS.
+	 */
+	public function test_print_styles( array $webfonts, $expected ) {
+		$property = $this->get_webfonts_property();
+		$property->setValue( $this->provider, $webfonts );
+
+		$expected_output = sprintf( $expected['style-element'], $expected['font-face-css'] );
+		$this->expectOutputString( $expected_output );
+		$this->provider->print_styles();
 	}
 
 	/**
@@ -96,7 +97,7 @@ public function test_get_css( array $webfonts, $expected ) {
 	 *
 	 * @return array
 	 */
-	public function data_get_css() {
+	public function data_get_css_print_styles() {
 		return array(
 			'truetype format' => array(
 				'webfonts' => array(
@@ -108,10 +109,13 @@ public function data_get_css() {
 						'src'         => 'http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf',
 					),
 				),
-				'expected' => <<<CSS
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;src:local("Open Sans"), url('http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');}
 CSS
-			,
+					,
+				),
 			),
 			'woff2 format'    => array(
 				'webfonts' => array(
@@ -132,14 +136,39 @@ public function data_get_css() {
 						'src'          => 'http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
 					),
 				),
-				'expected' => <<<CSS
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');}
 CSS
-			,
+
+					,
+				),
 			),
 		);
 	}
 
+	/**
+	 * Local `src` paths to need to be relative to the theme. This method sets up the
+	 * `wp-content/themes/` directory to ensure consistency when running tests.
+	 */
+	private function set_up_theme() {
+		$this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
+		$this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
+		$GLOBALS['wp_theme_directories'] = array( $this->theme_root );
+
+		$theme_root_callback = function () {
+			return $this->theme_root;
+		};
+		add_filter( 'theme_root', $theme_root_callback );
+		add_filter( 'stylesheet_root', $theme_root_callback );
+		add_filter( 'template_root', $theme_root_callback );
+
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
 	private function get_webfonts_property() {
 		$property = new ReflectionProperty( $this->provider, 'webfonts' );
 		$property->setAccessible( true );
diff --git a/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php b/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
new file mode 100644
index 00000000000000..d258f1e5c435df
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
@@ -0,0 +1,84 @@
+<?php
+/**
+ * WP_Webfonts_Utils::convert_font_family_into_handle() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::convert_font_family_into_handle
+ */
+class Tests_Webfonts_WpWebfontsUtils_ConvertFontFamilyIntoHandle extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_input
+	 *
+	 * @param mixed  $font_family Font family to test.
+	 * @param string $expected    Expected results.
+	 */
+	public function test_should_convert_with_valid_input( $font_family, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::convert_font_family_into_handle( $font_family ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_input() {
+		return array(
+			'font family single word name'               => array(
+				'font_family' => 'Merriweather',
+				'expected'    => 'merriweather',
+			),
+			'font family multiword name'                 => array(
+				'font_family' => 'Source Sans Pro',
+				'expected'    => 'source-sans-pro',
+			),
+			'font family handle delimited by hyphens'    => array(
+				'font_family' => 'source-serif-pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'font family handle delimited by underscore' => array(
+				'font_family' => 'source_serif_pro',
+				'expected'    => 'source_serif_pro',
+			),
+			'font family handle delimited by hyphens and underscore' => array(
+				'font_family' => 'my-custom_font_family',
+				'expected'    => 'my-custom_font_family',
+			),
+			'font family handle delimited mixture'       => array(
+				'font_family' => 'My custom_font-family',
+				'expected'    => 'my-custom_font-family',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @covers WP_Webfonts_Utils::convert_font_family_into_handle
+	 *
+	 * @param mixed $invalid_input Invalid input.
+	 */
+	public function test_should_not_convert_with_invalid_input( $invalid_input ) {
+		$this->assertNull( WP_Webfonts_Utils::convert_font_family_into_handle( $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'empty string'                    => array( '' ),
+			'integer'                         => array( 10 ),
+			'font family wrapped in an array' => array( array( 'source-serif-pro' ) ),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php b/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
new file mode 100644
index 00000000000000..9e2a3462ed7a82
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * WP_Webfonts_Utils::convert_variation_into_handle() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::convert_variation_into_handle
+ */
+class Tests_Webfonts_WpWebfontsUtils_ConvertVariationIntoHandle extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_input
+	 *
+	 * @param string $font_family Font family to test.
+	 * @param array  $variation   Variation to test.
+	 * @param string $expected    Expected results.
+	 */
+	public function test_should_convert_with_valid_inputs( $font_family, array $variation, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::convert_variation_into_handle( $font_family, $variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_input() {
+		return array(
+			'with only font-weight'                  => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => '400',
+				),
+				'expected'    => 'merriweather-400',
+			),
+			'with no font-style'                     => array(
+				'font_family' => 'source-sans-pro',
+				'variation'   => array(
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected'    => 'source-sans-pro-200-900',
+			),
+			'with font family name and full variant' => array(
+				'font_family' => 'source-sans-pro',
+				'variation'   => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'    => 'source-sans-pro-200-900-normal',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @param string $font_family   Font family to test.
+	 * @param array  $invalid_input Variation to test.
+	 */
+	public function tests_should_convert_with_invalid_input( $font_family, $invalid_input ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+
+		$this->assertNull( WP_Webfonts_Utils::convert_variation_into_handle( $font_family, $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'with no font-weight or font-style' => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'provider'     => 'local',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+			'with non-string font-weight'       => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => 400,
+				),
+			),
+			'with non-string font-style'        => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-style' => 0,
+				),
+			),
+			'with empty string font-weight'     => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => '',
+				),
+			),
+			'with empty string font-style'      => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-style' => '',
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php b/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
new file mode 100644
index 00000000000000..f370e1d043222c
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
@@ -0,0 +1,134 @@
+<?php
+/**
+ * WP_Webfonts_Utils::get_font_family_from_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::get_font_family_from_variation
+ */
+class Tests_Webfonts_WpWebfontsUtils_GetFontFamilyFromVariation extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_variation
+	 *
+	 * @param array  $variation Variation to test.
+	 * @param string $expected  Expected results.
+	 */
+	public function test_with_valid_variation( array $variation, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::get_font_family_from_variation( $variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_variation() {
+		return array(
+			'keyed by font-family'                   => array(
+				'variation' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'  => 'Source Serif Pro',
+			),
+			'keyed by fontFamily and as a handle'    => array(
+				'variation' => array(
+					'fontFamily'  => 'source-sans-pro',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected'  => 'source-sans-pro',
+			),
+			'with font family name and full variant' => array(
+				'variation' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Merriweather',
+					'font-style'   => 'normal',
+					'font-weight'  => '400 600',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'  => 'Merriweather',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @param array  $invalid_variation Variation to test.
+	 * @param string $expected_message  Expected notice message.
+	 */
+	public function test_with_invalid_input( array $invalid_variation, $expected_message ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$this->assertNull( WP_Webfonts_Utils::get_font_family_from_variation( $invalid_variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'keyed with underscore'       => array(
+				'variation'        => array(
+					'provider'     => 'local',
+					'font_family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'keyed with space'            => array(
+				'variation'        => array(
+					'font family' => 'Source Sans Pro',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'fontFamily => empty string'  => array(
+				'variation'        => array(
+					'fontFamily'  => '',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+			'font-family => empty string' => array(
+				'variation'        => array(
+					'provider'     => 'local',
+					'font-family'  => '',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php b/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php
new file mode 100644
index 00000000000000..c5b2a1608269c8
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * WP_Webfonts_Utils::is_defined() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::is_defined
+ */
+class Tests_Webfonts_WpWebfontsUtils_IsDefined extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_when_defined
+	 *
+	 * @param mixed $input Input to test.
+	 */
+	public function test_should_return_true_when_defined( $input ) {
+		$this->assertTrue( WP_Webfonts_Utils::is_defined( $input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_when_defined() {
+		return array(
+			'name: non empty string'   => array( 'Some Font Family' ),
+			'handle: non empty string' => array( 'some-font-family' ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_when_not_defined
+	 *
+	 * @param mixed $invalid_input Input to test.
+	 */
+	public function test_should_return_false_when_not_defined( $invalid_input ) {
+		$this->assertFalse( WP_Webfonts_Utils::is_defined( $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_when_not_defined() {
+		return array(
+			'empty string'               => array( '' ),
+			'string 0'                   => array( '0' ),
+			'integer'                    => array( 10 ),
+			'name wrapped in an array'   => array( array( 'Some Font Family' ) ),
+			'handle wrapped in an array' => array( array( 'some-font-family' ) ),
+		);
+	}
+}

From 29341d6f5103f25a02f7fc70fa1491ff2c3c3747 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 19 Dec 2022 20:56:50 +0900
Subject: [PATCH 133/209] Code Quality: Use <> instead of Fragment (#46633)

---
 docs/reference-guides/filters/block-filters.md       |  5 ++---
 docs/reference-guides/slotfills/README.md            |  4 ++--
 .../slotfills/plugin-sidebar-more-menu-item.md       |  5 ++---
 .../src/components/block-inspector/index.js          | 12 +++++-------
 .../src/components/responsive-block-control/label.js |  5 ++---
 .../responsive-block-control/test/index.js           |  4 ++--
 .../src/cover/edit/inspector-controls.js             |  6 +++---
 packages/block-library/src/navigation-link/edit.js   |  6 +++---
 .../block-library/src/navigation-submenu/edit.js     |  6 +++---
 packages/block-library/src/social-link/edit.js       |  6 +++---
 packages/components/src/dimension-control/index.js   |  5 ++---
 packages/components/src/dropdown-menu/README.md      |  5 ++---
 12 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index 823248bb451bdd..e41215d67065a1 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -179,19 +179,18 @@ _Example:_
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
-const { Fragment } = wp.element;
 const { InspectorControls } = wp.blockEditor;
 const { PanelBody } = wp.components;
 
 const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		return (
-			<Fragment>
+			<>
 				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody>My custom control</PanelBody>
 				</InspectorControls>
-			</Fragment>
+			</>
 		);
 	};
 }, 'withInspectorControl' );
diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index b3ab4dcc083862..c41e6da0d8eb9f 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -75,7 +75,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 	>
 		<PluginPostStatusInfo.Slot>
 			{ ( fills ) => (
-				<Fragment>
+				<>
 					<PostVisibility />
 					<PostSchedule />
 					<PostFormat />
@@ -84,7 +84,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 					<PostAuthor />
 					{ fills }
 					<PostTrash />
-				</Fragment>
+				</>
 			) }
 		</PluginPostStatusInfo.Slot>
 	</PanelBody>
diff --git a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
index 8ede72e782b02c..4d32d754578cc4 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
@@ -9,17 +9,16 @@ This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match t
 import { registerPlugin } from '@wordpress/plugins';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
 import { image } from '@wordpress/icons';
-import { Fragment } from '@wordpress/element';
 
 const PluginSidebarMoreMenuItemTest = () => (
-	<Fragment>
+	<>
 		<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
 			Expanded Sidebar - More item
 		</PluginSidebarMoreMenuItem>
 		<PluginSidebar name="sidebar-name" icon={ image } title="My Sidebar">
 			Content of the sidebar
 		</PluginSidebar>
-	</Fragment>
+	</>
 );
 
 registerPlugin( 'plugin-sidebar-expanded-test', {
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 48d5d982e75089..3e2aebb5d500a5 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -17,7 +17,7 @@ import {
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback, Fragment } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -268,12 +268,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				</AnimatedContainer>
 			) }
 		>
-			<Fragment>
-				<BlockInspectorSingleBlock
-					clientId={ selectedBlockClientId }
-					blockName={ blockType.name }
-				/>
-			</Fragment>
+			<BlockInspectorSingleBlock
+				clientId={ selectedBlockClientId }
+				blockName={ blockType.name }
+			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
 };
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index b0bd0c180cb902..49be9ba5227ed1 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/packages/block-editor/src/components/responsive-block-control/label.js
@@ -4,7 +4,6 @@
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 export default function ResponsiveBlockControlLabel( {
 	property,
@@ -24,13 +23,13 @@ export default function ResponsiveBlockControlLabel( {
 			viewport.label
 		);
 	return (
-		<Fragment>
+		<>
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
 			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index f0454dcc87bc76..d9e9a26f96dfe7 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -38,13 +38,13 @@ const sizeOptions = [
 
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
-		<Fragment>
+		<>
 			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
 			</p>
-		</Fragment>
+		</>
 	);
 };
 
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 6160f5d7828d6a..0332bf42b1e090 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	Button,
 	ExternalLink,
@@ -146,7 +146,7 @@ export default function CoverInspectorControls( {
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
 						{ isImageBackground && (
-							<Fragment>
+							<>
 								<ToggleControl
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
@@ -158,7 +158,7 @@ export default function CoverInspectorControls( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
-							</Fragment>
+							</>
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 1f1fd9ac61fcf0..b5ba89d604abda 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -30,7 +30,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
@@ -455,7 +455,7 @@ export default function NavigationLinkEdit( {
 			: __( 'This item is missing a link' );
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -645,6 +645,6 @@ export default function NavigationLinkEdit( {
 				</a>
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index a6029e98661ddc..30dc457938c91e 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -27,7 +27,7 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
@@ -438,7 +438,7 @@ export default function NavigationSubmenuEdit( {
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					{ ! openSubmenusOnClick && (
@@ -571,6 +571,6 @@ export default function NavigationSubmenuEdit( {
 				) }
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index fab49838afa2e4..71ec7faee6406b 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -89,7 +89,7 @@ const SocialLinkEdit = ( {
 	} );
 
 	return (
-		<Fragment>
+		<>
 			<InspectorControls>
 				<PanelBody
 					title={ sprintf(
@@ -144,7 +144,7 @@ const SocialLinkEdit = ( {
 					) }
 				</Button>
 			</li>
-		</Fragment>
+		</>
 	);
 };
 
diff --git a/packages/components/src/dimension-control/index.js b/packages/components/src/dimension-control/index.js
index 3e782e748a90d4..a6893b165fbf0a 100644
--- a/packages/components/src/dimension-control/index.js
+++ b/packages/components/src/dimension-control/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,10 +49,10 @@ export function DimensionControl( props ) {
 	};
 
 	const selectLabel = (
-		<Fragment>
+		<>
 			{ icon && <Icon icon={ icon } /> }
 			{ label }
-		</Fragment>
+		</>
 	);
 
 	return (
diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md
index f85d2813fb1c9a..aa930f22edcf18 100644
--- a/packages/components/src/dropdown-menu/README.md
+++ b/packages/components/src/dropdown-menu/README.md
@@ -101,14 +101,13 @@ const MyDropdownMenu = () => (
 Alternatively, specify a `children` function which returns elements valid for use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
 
 ```jsx
-import { Fragment } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
 
 const MyDropdownMenu = () => (
 	<DropdownMenu icon={ more } label="Select a direction">
 		{ ( { onClose } ) => (
-			<Fragment>
+			<>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
@@ -122,7 +121,7 @@ const MyDropdownMenu = () => (
 						Remove
 					</MenuItem>
 				</MenuGroup>
-			</Fragment>
+			</>
 		) }
 	</DropdownMenu>
 );

From 967cba40dbba5638593f2bd4fc5282997f10b33b Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Mon, 19 Dec 2022 14:45:37 +0200
Subject: [PATCH 134/209] Post editor: iframe for block-based themes (#46212)

---
 lib/compat/wordpress-6.2/script-loader.php    |   3 +-
 packages/block-library/src/freeform/edit.js   |  77 +++++++-----
 packages/block-library/src/freeform/modal.js  | 111 ++++++++++++++++++
 .../src/create-reusable-block.js              |   3 +-
 .../site-editor/multi-entity-saving.test.js   |  25 ++--
 .../src/components/visual-editor/index.js     |   6 +-
 test/e2e/specs/editor/blocks/comments.spec.js |  31 +++--
 7 files changed, 204 insertions(+), 52 deletions(-)
 create mode 100644 packages/block-library/src/freeform/modal.js

diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index f3fde930383bc2..e3e11d9cf1f563 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -161,7 +161,8 @@ function gutenberg_resolve_assets_override() {
 	'block_editor_settings_all',
 	function( $settings ) {
 		// We must override what core is passing now.
-		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets_override();
+		$settings['__unstableResolvedAssets']    = gutenberg_resolve_assets_override();
+		$settings['__unstableIsBlockBasedTheme'] = wp_is_block_theme();
 		return $settings;
 	},
 	100
diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index ab9a2257f87e4e..c41a78ca5c0422 100644
--- a/packages/block-library/src/freeform/edit.js
+++ b/packages/block-library/src/freeform/edit.js
@@ -6,10 +6,10 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { debounce } from '@wordpress/compose';
+import { debounce, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 
@@ -17,6 +17,7 @@ import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import ConvertToBlocksButton from './convert-to-blocks-button';
+import ModalEdit from './modal';
 
 const { wp } = window;
 
@@ -36,17 +37,44 @@ function isTmceEmpty( editor ) {
 	return /^\n?$/.test( body.innerText || body.textContent );
 }
 
-export default function ClassicEdit( {
+export default function FreeformEdit( props ) {
+	const { clientId } = props;
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+	const [ isIframed, setIsIframed ] = useState( false );
+	const ref = useRefEffect( ( element ) => {
+		setIsIframed( element.ownerDocument !== document );
+	}, [] );
+
+	return (
+		<>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<div { ...useBlockProps( { ref } ) }>
+				{ isIframed ? (
+					<ModalEdit { ...props } />
+				) : (
+					<ClassicEdit { ...props } />
+				) }
+			</div>
+		</>
+	);
+}
+
+function ClassicEdit( {
 	clientId,
 	attributes: { content },
 	setAttributes,
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
-		[ clientId ]
-	);
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -225,28 +253,19 @@ export default function ClassicEdit( {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<>
-			{ canRemove && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ConvertToBlocksButton clientId={ clientId } />
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-			<div { ...useBlockProps() }>
-				<div
-					key="toolbar"
-					id={ `toolbar-${ clientId }` }
-					className="block-library-classic__toolbar"
-					onClick={ focus }
-					data-placeholder={ __( 'Classic' ) }
-					onKeyDown={ onToolbarKeyDown }
-				/>
-				<div
-					key="editor"
-					id={ `editor-${ clientId }` }
-					className="wp-block-freeform block-library-rich-text__tinymce"
-				/>
-			</div>
+			<div
+				key="toolbar"
+				id={ `toolbar-${ clientId }` }
+				className="block-library-classic__toolbar"
+				onClick={ focus }
+				data-placeholder={ __( 'Classic' ) }
+				onKeyDown={ onToolbarKeyDown }
+			/>
+			<div
+				key="editor"
+				id={ `editor-${ clientId }` }
+				className="wp-block-freeform block-library-rich-text__tinymce"
+			/>
 		</>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
new file mode 100644
index 00000000000000..67338be91fa864
--- /dev/null
+++ b/packages/block-library/src/freeform/modal.js
@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls, store } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Modal,
+	Button,
+} from '@wordpress/components';
+import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+function ClassicEdit( props ) {
+	const styles = useSelect(
+		( select ) => select( store ).getSettings().styles
+	);
+	useEffect( () => {
+		const { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;
+
+		window.tinymce.EditorManager.overrideDefaults( {
+			base_url: baseURL,
+			suffix,
+		} );
+
+		window.wp.oldEditor.initialize( props.id, {
+			tinymce: {
+				...settings,
+				height: 500,
+				setup( editor ) {
+					editor.on( 'init', () => {
+						const doc = editor.getDoc();
+						styles.forEach( ( { css } ) => {
+							const styleEl = doc.createElement( 'style' );
+							styleEl.innerHTML = css;
+							doc.head.appendChild( styleEl );
+						} );
+					} );
+				},
+			},
+		} );
+
+		return () => {
+			window.wp.oldEditor.remove( props.id );
+		};
+	}, [] );
+
+	return <textarea { ...props } />;
+}
+
+export default function ModalEdit( props ) {
+	const {
+		clientId,
+		attributes: { content },
+		setAttributes,
+		onReplace,
+	} = props;
+	const [ isOpen, setOpen ] = useState( false );
+	const id = `editor-${ clientId }`;
+	const label = __( 'Classic Edit' );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton onClick={ () => setOpen( true ) }>
+						{ label }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			{ content && <RawHTML>{ content }</RawHTML> }
+			{ ( isOpen || ! content ) && (
+				<Modal title={ label } __experimentalHideHeader={ true }>
+					<h2
+						style={ {
+							display: 'flex',
+							justifyContent: 'space-between',
+						} }
+					>
+						<div>{ label }</div>
+						<div>
+							<Button
+								onClick={ () =>
+									content ? setOpen( false ) : onReplace( [] )
+								}
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								isPrimary
+								onClick={ () => {
+									setAttributes( {
+										content:
+											window.wp.oldEditor.getContent(
+												id
+											),
+									} );
+									setOpen( false );
+								} }
+							>
+								{ __( 'Save' ) }
+							</Button>
+						</div>
+					</h2>
+					<ClassicEdit id={ id } defaultValue={ content } />
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index 3bf2e33aeb34f3..ec35e073908477 100644
--- a/packages/e2e-test-utils/src/create-reusable-block.js
+++ b/packages/e2e-test-utils/src/create-reusable-block.js
@@ -4,6 +4,7 @@
 import { insertBlock } from './inserter';
 import { clickMenuItem } from './click-menu-item';
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
+import { canvas } from './canvas';
 
 /**
  * Creates a simple reusable block with a paragraph block.
@@ -33,7 +34,7 @@ export const createReusableBlock = async ( content, title ) => {
 	);
 
 	// Check that we have a reusable block on the page
-	const block = await page.waitForSelector(
+	const block = await canvas().waitForSelector(
 		'.block-editor-block-list__block[data-type="core/block"]'
 	);
 	expect( block ).not.toBeNull();
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
index 592d7781856a4b..2d4d1a396b7250 100644
--- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
@@ -15,6 +15,7 @@ import {
 	visitSiteEditor,
 	enterEditMode,
 	deleteAllTemplates,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Multi-entity save flow', () => {
@@ -94,8 +95,8 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should work as expected.', async () => {
 			await createNewPost();
 			// Edit the page some.
-			await page.waitForSelector( '.editor-post-title' );
-			await page.click( '.editor-post-title' );
+			await canvas().waitForSelector( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
 
@@ -110,8 +111,8 @@ describe( 'Multi-entity save flow', () => {
 
 			// Add a reusable block and edit it.
 			await createReusableBlock( 'Hi!', 'Test' );
-			await page.waitForSelector( 'p[data-type="core/paragraph"]' );
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().waitForSelector( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'Oh!' );
 
 			// Should trigger multi-entity save button once template part edited.
@@ -169,7 +170,7 @@ describe( 'Multi-entity save flow', () => {
 			} );
 
 			// Update the post.
-			await page.click( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
@@ -182,9 +183,9 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistence( saveA11ySelector, false );
 
 			// Update reusable block again.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			// We need to click again due to the clickthrough overlays in reusable blocks.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'R!' );
 
 			// Multi-entity saving should be enabled.
@@ -203,19 +204,19 @@ describe( 'Multi-entity save flow', () => {
 			);
 			const editableSiteTitleSelector =
 				'.wp-block-site-title a[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTitleSelector );
-			await page.focus( editableSiteTitleSelector );
+			await canvas().waitForSelector( editableSiteTitleSelector );
+			await canvas().focus( editableSiteTitleSelector );
 			await page.keyboard.type( '...' );
 
 			await insertBlock( 'Site Tagline' );
 			// Wait for the placeholder.
-			await page.waitForXPath(
+			await canvas().waitForXPath(
 				'//span[@data-rich-text-placeholder="Write site tagline…"]'
 			);
 			const editableSiteTagLineSelector =
 				'.wp-block-site-tagline[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTagLineSelector );
-			await page.focus( editableSiteTagLineSelector );
+			await canvas().waitForSelector( editableSiteTagLineSelector );
+			await canvas().focus( editableSiteTagLineSelector );
 			await page.keyboard.type( 'Just another WordPress site' );
 
 			await clickButton( 'Publish' );
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 8062e9d51dada3..ab708d3e87dbf5 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -119,6 +119,7 @@ export default function VisualEditor( { styles } ) {
 		editedPostTemplate = {},
 		wrapperBlockName,
 		wrapperUniqueId,
+		isBlockBasedTheme,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -137,7 +138,8 @@ export default function VisualEditor( { styles } ) {
 			_wrapperBlockName = 'core/post-content';
 		}
 
-		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
+		const editorSettings = getEditorSettings();
+		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const canEditTemplate = select( coreStore ).canUser(
 			'create',
 			'templates'
@@ -155,6 +157,7 @@ export default function VisualEditor( { styles } ) {
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
+			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -336,6 +339,7 @@ export default function VisualEditor( { styles } ) {
 				>
 					<MaybeIframe
 						shouldIframe={
+							( isBlockBasedTheme && ! hasMetaBoxes ) ||
 							isTemplateMode ||
 							deviceType === 'Tablet' ||
 							deviceType === 'Mobile'
diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
index 581027f53a09ec..3232b8ff95cd8f 100644
--- a/test/e2e/specs/editor/blocks/comments.spec.js
+++ b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
 
 /**
  * @typedef {import('@playwright/test').Page} Page
@@ -12,6 +16,9 @@ test.use( {
 	commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => {
 		await use( new CommentsBlockUtils( { page, admin, requestUtils } ) );
 	},
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
 } );
 
 test.describe( 'Comments', () => {
@@ -45,14 +52,15 @@ test.describe( 'Comments', () => {
 	test( 'We show no results message if there are no comments', async ( {
 		admin,
 		editor,
-		page,
 		requestUtils,
 	} ) => {
 		await requestUtils.deleteAllComments();
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/comments' } );
 		await expect(
-			page.locator( 'role=document[name="Block: Comment Template"i]' )
+			editor.canvas.locator(
+				'role=document[name="Block: Comment Template"i]'
+			)
 		).toContainText( 'No results found.' );
 	} );
 
@@ -145,7 +153,6 @@ test.describe( 'Comments', () => {
 	test( 'A button allows the block to switch from legacy mode to editable mode', async ( {
 		admin,
 		editor,
-		page,
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlock( {
@@ -153,7 +160,9 @@ test.describe( 'Comments', () => {
 			attributes: { legacy: true, textColor: 'vivid-purple' },
 		} );
 
-		const block = page.locator( 'role=document[name="Block: Comments"i]' );
+		const block = editor.canvas.locator(
+			'role=document[name="Block: Comments"i]'
+		);
 		const warning = block.locator( '.block-editor-warning' );
 		const placeholder = block.locator(
 			'.wp-block-comments__legacy-placeholder'
@@ -163,7 +172,9 @@ test.describe( 'Comments', () => {
 		await expect( warning ).toBeVisible();
 		await expect( placeholder ).toBeVisible();
 
-		await page.click( 'role=button[name="Switch to editable mode"i]' );
+		await editor.canvas.click(
+			'role=button[name="Switch to editable mode"i]'
+		);
 
 		const commentTemplate = block.locator(
 			'role=document[name="Block: Comment Template"i]'
@@ -301,8 +312,12 @@ test.describe( 'Post Comments', () => {
 		await commentsBlockUtils.hideWelcomeGuide();
 
 		// Check that the Post Comments block has been replaced with Comments.
-		await expect( page.locator( '.wp-block-post-comments' ) ).toBeHidden();
-		await expect( page.locator( '.wp-block-comments' ) ).toBeVisible();
+		await expect(
+			editor.canvas.locator( '.wp-block-post-comments' )
+		).toBeHidden();
+		await expect(
+			editor.canvas.locator( '.wp-block-comments' )
+		).toBeVisible();
 
 		// Check the block definition has changed.
 		const content = await editor.getEditedPostContent();

From 1b5994afbfc2b42f8e50fa8d04b586e92d6b2a4c Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Mon, 19 Dec 2022 14:07:50 +0100
Subject: [PATCH 135/209] withFilters tests: more precise act() calls (#46630)

---
 .../higher-order/with-filters/test/index.js   | 144 +++++++++---------
 1 file changed, 70 insertions(+), 74 deletions(-)

diff --git a/packages/components/src/higher-order/with-filters/test/index.js b/packages/components/src/higher-order/with-filters/test/index.js
index f933a547f58ad6..839640dcf7c595 100644
--- a/packages/components/src/higher-order/with-filters/test/index.js
+++ b/packages/components/src/higher-order/with-filters/test/index.js
@@ -13,6 +13,8 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
  */
 import withFilters from '..';
 
+jest.useFakeTimers();
+
 describe( 'withFilters', () => {
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
@@ -79,14 +81,13 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', async () => {
+	it( 'should re-render component once when new filter added after component was mounted', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -94,25 +95,24 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when two filters added in the same animation frame', async () => {
+	it( 'should re-render component once when two filters added in the same animation frame', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -120,65 +120,62 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-2',
-				( FilteredComponent ) => () =>
-					(
-						<section>
-							<FilteredComponent />
-						</section>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-2',
+			( FilteredComponent ) => () =>
+				(
+					<section>
+						<FilteredComponent />
+					</section>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
+	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy',
-				( FilteredComponent ) => () =>
-					(
-						<div>
-							<FilteredComponent />
-						</div>
-					)
-			);
-			jest.runAllTimers();
-		} );
-
-		await act( () => {
-			removeFilter( hookName, 'test/enhanced-component-spy' );
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy',
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+					</div>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
+
+		removeFilter( hookName, 'test/enhanced-component-spy' );
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', async () => {
+	it( 'should re-render both components once each when one filter added', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -192,19 +189,18 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();

From 822eb7685dffb25eeac8cc2623c99c21fe1419d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Mon, 19 Dec 2022 15:19:04 +0100
Subject: [PATCH 136/209] Blocks: Fix incorrect CHANGELOG link (#46609)

---
 packages/blocks/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 5d1f797d7063d5..132f04f18795f4 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -37,7 +37,7 @@
 
 ### Deprecations
 
--   `withBlockContentContext` is no longer used by the block editor and therefore got deprecated ([#41395](https://github.com/WordPress/gutenberg/pull/3204139530)).
+-   `withBlockContentContext` is no longer used by the block editor and therefore got deprecated ([#41395](https://github.com/WordPress/gutenberg/pull/41395)).
 
 ### New API
 

From b1234a731fad3a4e1f6b5a196efd47f765cc1e82 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Tue, 20 Dec 2022 13:39:42 +1300
Subject: [PATCH 137/209] Reverts the custom CSS to an experiment while we
 resolve the handling of unfiltered html capabilities (#46663)

* Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities

* Update copy

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
---
 lib/experimental/editor-settings.php          |  3 +
 lib/experiments-page.php                      | 16 +++++
 .../components/global-styles/screen-root.js   | 61 +++++++++++--------
 3 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 862a1bfe2b28c6..fbff977cb9fb2d 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -89,6 +89,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 6051aed56bc405..83e926da520e93 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -89,6 +89,22 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-global-styles-custom-css',
+		__( 'Global styles custom css ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => sprintf(
+				/* translators: %s: WordPress documentation for roles and capabilities. */
+				__( 'Test the Global Styles custom CSS field in the site editor. This requires a user to have <a href="%s">unfiltered html capabilities</a>.', 'gutenberg' ),
+				'https://wordpress.org/support/article/roles-and-capabilities/#unfiltered_html'
+			),
+			'id'    => 'gutenberg-global-styles-custom-css',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index ecb68d27b7f4d7..0d7959f59fe95b 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }

From 0d5caa2313e30dddaac236ab266b53b807d61b93 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 20 Dec 2022 15:58:10 +1100
Subject: [PATCH 138/209] Update performance tests to work with themes that
 load editor into an iframe (#46665)

* Update performance tests to work with themes that load editor into an iframe

* Use same waitForSelector() approach that site editor tests use
---
 .../e2e-tests/specs/performance/post-editor.test.js  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 63fa92514728ec..89952c6e0aeae3 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -15,6 +15,7 @@ import {
 	closeGlobalBlockInserter,
 	openListView,
 	closeListView,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -100,7 +101,10 @@ describe( 'Post Editor Performance', () => {
 		let i = 5;
 		while ( i-- ) {
 			await page.reload();
-			await page.waitForSelector( '.wp-block' );
+			await page.waitForSelector( '.edit-post-layout', {
+				timeout: 120000,
+			} );
+			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 			const {
 				serverResponse,
 				firstPaint,
@@ -166,8 +170,8 @@ describe( 'Post Editor Performance', () => {
 			)
 		);
 		// Select the block where we type in
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await page.click( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().click( 'p[aria-label="Paragraph block"]' );
 		// Ignore firsted typed character because it's different
 		// It probably deserves a dedicated metric.
 		// (isTyping triggers so it's slower)
@@ -217,7 +221,7 @@ describe( 'Post Editor Performance', () => {
 			);
 			dispatch( 'core/block-editor' ).resetBlocks( blocks );
 		} );
-		const paragraphs = await page.$$( '.wp-block' );
+		const paragraphs = await canvas().$$( '.wp-block' );
 		await page.tracing.start( {
 			path: traceFile,
 			screenshots: false,

From 4cc4c3c062c3c6a39b7d4cddbbacbdebca13bc27 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 20 Dec 2022 17:28:01 +1100
Subject: [PATCH 139/209] Revert "[`customize-widgets/utils/widgetToBlock`]
 Initialize a widget's `raw_content.content` to an empty string if it's
 `undefined`" (#46600)

* Revert "[`customize-widgets/utils/widgetToBlock`] Initialize a widget's `raw_content.content` to an empty string if it's `undefined` (#46487)"

This reverts commit 271f650c05795ab81cc73b2617ba53485ac57de9.

* Guard against undefined content closer to parse() call
---
 packages/customize-widgets/src/utils.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js
index 8cf2d5990423ca..9c3622a3ea8a5c 100644
--- a/packages/customize-widgets/src/utils.js
+++ b/packages/customize-widgets/src/utils.js
@@ -98,16 +98,12 @@ export function widgetToBlock( { id, idBase, number, instance } ) {
 	const {
 		encoded_serialized_instance: encoded,
 		instance_hash_key: hash,
-		raw_instance: rawInstance,
+		raw_instance: raw,
 		...rest
 	} = instance;
 
-	// It's unclear why `content` is sometimes `undefined`, but it shouldn't be.
-	const rawContent = rawInstance.content || '';
-	const raw = { ...rawInstance, content: rawContent };
-
 	if ( idBase === 'block' ) {
-		const parsedBlocks = parse( raw.content, {
+		const parsedBlocks = parse( raw.content ?? '', {
 			__unstableSkipAutop: true,
 		} );
 		block = parsedBlocks.length

From a83f7fac256b6b5c4b7641e7baed5199bb0e0d14 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 20 Dec 2022 10:58:40 +0200
Subject: [PATCH 140/209] [Block Library - Query Loop]: Connect scoped `block`
 variation to `inserter` variations (#46410)

* [Block Library - Query Loop]: Connect scoped `block` variation to `inserter` variations

* address feedback and support multiple variations connections

* add docs
---
 .../extending-the-query-loop-block.md         |  6 ++
 .../src/query/edit/query-placeholder.js       | 29 ++++-----
 packages/block-library/src/query/utils.js     | 60 ++++++++++++++++++-
 3 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
index e43dcb9727088d..cc4d0b1ee0a0d7 100644
--- a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
+++ b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
@@ -119,6 +119,12 @@ The Query Loop block determines if there is an active variation of itself and if
 
 In order for a pattern to be “connected” with a Query Loop variation, you should add the name of your variation prefixed with the Query Loop name (e.g. `core/query/$variation_name`) to the pattern's `blockTypes` property. For more details about registering patterns [see here](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/).
 
+If you have not provided `innerBlocks` in your variation, there is also a way to suggest “connected” variations when the user selects `Start blank` in the setup phase. This is handled in a similar fashion with “connected” patterns, by checking if there is an active variation of Query Loop and if there are any connected variations to suggest.
+
+In order for a variation to be connected to another Query Loop variation we need to define the `scope` attribute with `['block']` as value and the `namespace` attribute defined as an array. This array should contain the names(`name` property) of any variations they want to be connected to.
+
+For example, if we have a Query Loop variation exposed to the inserter(`scope: ['inserter']`) with the name `products`, we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`. If the user selects this variation after having clicked `Start blank`, the namespace attribute will be overridden by the main inserter variation.
+
 ### Making Gutenberg recognize your variation
 
 There is one slight problem you might have realized after implementing this variation: while it is transparent to the user as they are inserting it, Gutenberg will still recognize the variation as a Query Loop block at its core and so, after its insertion, it will show up as a Query Loop block in the tree view of the editor, for instance.
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index fa1ef818e2f1f7..5766328808a3ca 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -16,6 +16,11 @@ import {
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useScopedBlockVariations } from '../utils';
+
 export default function QueryPlaceholder( {
 	attributes,
 	clientId,
@@ -57,7 +62,6 @@ export default function QueryPlaceholder( {
 		return (
 			<QueryVariationPicker
 				clientId={ clientId }
-				name={ name }
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 				icon={ icon }
@@ -98,16 +102,12 @@ export default function QueryPlaceholder( {
 
 function QueryVariationPicker( {
 	clientId,
-	name,
 	attributes,
 	setAttributes,
 	icon,
 	label,
 } ) {
-	const variations = useSelect(
-		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
-		[ name ]
-	);
+	const scopeVariations = useScopedBlockVariations( attributes );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
 	return (
@@ -115,24 +115,25 @@ function QueryVariationPicker( {
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }
-				variations={ variations }
-				onSelect={ ( nextVariation ) => {
-					if ( nextVariation.attributes ) {
+				variations={ scopeVariations }
+				onSelect={ ( variation ) => {
+					if ( variation.attributes ) {
 						setAttributes( {
-							...nextVariation.attributes,
+							...variation.attributes,
 							query: {
-								...nextVariation.attributes.query,
+								...variation.attributes.query,
 								postType:
 									attributes.query.postType ||
-									nextVariation.attributes.query.postType,
+									variation.attributes.query.postType,
 							},
+							namespace: attributes.namespace,
 						} );
 					}
-					if ( nextVariation.innerBlocks ) {
+					if ( variation.innerBlocks ) {
 						replaceInnerBlocks(
 							clientId,
 							createBlocksFromInnerBlocksTemplate(
-								nextVariation.innerBlocks
+								variation.innerBlocks
 							),
 							false
 						);
diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
index 276d7b21638173..9bffcfd988fd09 100644
--- a/packages/block-library/src/query/utils.js
+++ b/packages/block-library/src/query/utils.js
@@ -18,6 +18,8 @@ import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
  */
 import { name as queryLoopName } from './block.json';
 
+/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -237,7 +239,6 @@ export function useBlockNameForPatterns( clientId, attributes ) {
 				queryLoopName,
 				attributes
 			)?.name,
-
 		[ attributes ]
 	);
 	const blockName = `${ queryLoopName }/${ activeVariationName }`;
@@ -260,3 +261,60 @@ export function useBlockNameForPatterns( clientId, attributes ) {
 	);
 	return activeVariationPatterns?.length ? blockName : queryLoopName;
 }
+
+/**
+ * Helper hook that determines if there is an active variation of the block
+ * and if there are available specific scoped `block` variations connected with
+ * this variation.
+ *
+ * If there are, these variations are going to be the only ones suggested
+ * to the user in setup flow when clicking to `start blank`, without including
+ * the default ones for Query Loop.
+ *
+ * If there are no such scoped `block` variations, the default ones for Query
+ * Loop are going to be suggested.
+ *
+ * The way we determine such variations is with the convention that they have the `namespace`
+ * attribute defined as an array. This array should contain the names(`name` property) of any
+ * variations they want to be connected to.
+ * For example, if we have a `Query Loop` scoped `inserter` variation with the name `products`,
+ * we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`.
+ * If the user selects this variation, the `namespace` attribute will be overridden by the
+ * main `inserter` variation.
+ *
+ * @param {Object} attributes The block's attributes.
+ * @return {WPBlockVariation[]} The block variations to be suggested in setup flow, when clicking to `start blank`.
+ */
+export function useScopedBlockVariations( attributes ) {
+	const { activeVariationName, blockVariations } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+			return {
+				activeVariationName: getActiveBlockVariation(
+					queryLoopName,
+					attributes
+				)?.name,
+				blockVariations: getBlockVariations( queryLoopName, 'block' ),
+			};
+		},
+		[ attributes ]
+	);
+	const variations = useMemo( () => {
+		// Filter out the variations that have defined a `namespace` attribute,
+		// which means they are 'connected' to specific variations of the block.
+		const isNotConnected = ( variation ) =>
+			! variation.attributes?.namespace;
+		if ( ! activeVariationName ) {
+			return blockVariations.filter( isNotConnected );
+		}
+		const connectedVariations = blockVariations.filter( ( variation ) =>
+			variation.attributes?.namespace?.includes( activeVariationName )
+		);
+		if ( !! connectedVariations.length ) {
+			return connectedVariations;
+		}
+		return blockVariations.filter( isNotConnected );
+	}, [ activeVariationName, blockVariations ] );
+	return variations;
+}

From 7cd5ea23f2cbb739827836725cfeef0e8e5556ee Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Tue, 20 Dec 2022 04:42:26 -0500
Subject: [PATCH 141/209] [Query Loop Block ] Only show the Filters panel when
 there are allowed controls that need to be displayed (#45869)

* Check to ensure there are Filters to display before rendering the Filters ToolsPanel.

* Make better choices when using isControlAllowed and only call it once for each section.
---
 .../query/edit/inspector-controls/index.js    | 87 +++++++++++--------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 13cc70e9dc5428..6bd0289687ad7a 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -110,6 +110,21 @@ export default function QueryInspectorControls( {
 		showColumnsControl ||
 		showOrderControl ||
 		showStickyControl;
+	const showTaxControl =
+		!! taxonomies?.length &&
+		isControlAllowed( allowedControls, 'taxQuery' );
+	const showAuthorControl = isControlAllowed( allowedControls, 'author' );
+	const showSearchControl = isControlAllowed( allowedControls, 'search' );
+	const showParentControl =
+		isControlAllowed( allowedControls, 'parents' ) &&
+		isPostTypeHierarchical;
+
+	const showFiltersPanel =
+		showTaxControl ||
+		showAuthorControl ||
+		showSearchControl ||
+		showParentControl;
+
 	return (
 		<>
 			{ showSettingsPanel && (
@@ -179,7 +194,7 @@ export default function QueryInspectorControls( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			{ ! inherit && (
+			{ ! inherit && showFiltersPanel && (
 				<InspectorControls>
 					<ToolsPanel
 						className="block-library-query-toolspanel__filters"
@@ -194,26 +209,25 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomies?.length &&
-							isControlAllowed( allowedControls, 'taxQuery' ) && (
-								<ToolsPanelItem
-									label={ __( 'Taxonomies' ) }
-									hasValue={ () =>
-										Object.values( taxQuery || {} ).some(
-											( terms ) => !! terms.length
-										)
-									}
-									onDeselect={ () =>
-										setQuery( { taxQuery: null } )
-									}
-								>
-									<TaxonomyControls
-										onChange={ setQuery }
-										query={ query }
-									/>
-								</ToolsPanelItem>
-							) }
-						{ isControlAllowed( allowedControls, 'author' ) && (
+						{ showTaxControl && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ showAuthorControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! authorIds }
 								label={ __( 'Authors' ) }
@@ -225,7 +239,7 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isControlAllowed( allowedControls, 'search' ) && (
+						{ showSearchControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! querySearch }
 								label={ __( 'Keyword' ) }
@@ -238,22 +252,19 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isPostTypeHierarchical &&
-							isControlAllowed( allowedControls, 'parents' ) && (
-								<ToolsPanelItem
-									hasValue={ () => !! parents?.length }
-									label={ __( 'Parents' ) }
-									onDeselect={ () =>
-										setQuery( { parents: [] } )
-									}
-								>
-									<ParentControl
-										parents={ parents }
-										postType={ postType }
-										onChange={ setQuery }
-									/>
-								</ToolsPanelItem>
-							) }
+						{ showParentControl && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
 					</ToolsPanel>
 				</InspectorControls>
 			) }

From 09dc1843fa69e5ce71da18eb496336b4b88f5eb5 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 20 Dec 2022 10:42:40 +0100
Subject: [PATCH 142/209] Reset the page between every performance test
 (#46646)

---
 .../specs/performance/post-editor.test.js     | 53 +++++++++----------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 89952c6e0aeae3..10699f921be510 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -50,6 +50,17 @@ async function loadHtmlIntoTheBlockEditor( html ) {
 	}, html );
 }
 
+async function load1000Paragraphs() {
+	await page.evaluate( () => {
+		const { createBlock } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = Array.from( { length: 1000 } ).map( () =>
+			createBlock( 'core/paragraph' )
+		);
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	} );
+}
+
 describe( 'Post Editor Performance', () => {
 	const results = {
 		serverResponse: [],
@@ -69,14 +80,6 @@ describe( 'Post Editor Performance', () => {
 	const traceFile = __dirname + '/trace.json';
 	let traceResults;
 
-	beforeAll( async () => {
-		await createNewPost();
-		await loadHtmlIntoTheBlockEditor(
-			readFile( join( __dirname, '../../assets/large-post.html' ) )
-		);
-		await saveDraft();
-	} );
-
 	afterAll( async () => {
 		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
 		writeFileSync(
@@ -87,6 +90,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	beforeEach( async () => {
+		await createNewPost();
 		// Disable auto-save to avoid impacting the metrics.
 		await page.evaluate( () => {
 			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
@@ -97,7 +101,10 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Loading', async () => {
-		// Measuring loading time.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
+		await saveDraft();
 		let i = 5;
 		while ( i-- ) {
 			await page.reload();
@@ -124,7 +131,9 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Typing', async () => {
-		// Measuring typing performance.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
@@ -159,8 +168,6 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Typing within containers', async () => {
-		// Measuring block selection performance.
-		await createNewPost();
 		await loadHtmlIntoTheBlockEditor(
 			readFile(
 				join(
@@ -211,16 +218,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Selecting blocks', async () => {
-		// Measuring block selection performance.
-		await createNewPost();
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = Array.from( { length: 1000 } ).map( () =>
-				createBlock( 'core/paragraph' )
-			);
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
-		} );
+		await load1000Paragraphs();
 		const paragraphs = await canvas().$$( '.wp-block' );
 		await page.tracing.start( {
 			path: traceFile,
@@ -241,8 +239,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening persistent list view', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -261,8 +258,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening the inserter', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -284,8 +280,7 @@ describe( 'Post Editor Performance', () => {
 		function sum( arr ) {
 			return arr.reduce( ( a, b ) => a + b, 0 );
 		}
-
-		// Measure time to search the inserter and get results.
+		await load1000Paragraphs();
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
@@ -317,7 +312,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Hovering Inserter Items', async () => {
-		// Measure inserter hover performance.
+		await load1000Paragraphs();
 		const paragraphBlockItem =
 			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
 		const headingBlockItem =

From 69b2830474a25b9e43bf91228172071f55c22b6d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 20 Dec 2022 10:09:01 +0000
Subject: [PATCH 143/209] Extract hook for offcanvas inserted block (#46618)

* Extract hook

* Add tests

* Use the hook
---
 .../components/off-canvas-editor/appender.js  |  31 ++---
 .../test/use-inserted-block.js                | 108 ++++++++++++++++++
 .../off-canvas-editor/use-inserted-block.js   |  47 ++++++++
 3 files changed, 163 insertions(+), 23 deletions(-)
 create mode 100644 packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
 create mode 100644 packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js

diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
index 0fb19df664f016..5571db2816382d 100644
--- a/packages/block-editor/src/components/off-canvas-editor/appender.js
+++ b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -10,6 +10,7 @@ import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
+import { useInsertedBlock } from './use-inserted-block';
 
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
@@ -36,27 +37,11 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const { insertedBlockAttributes, insertedBlockName } = useSelect(
-		( select ) => {
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
-
-			return {
-				insertedBlockAttributes: getBlockAttributes(
-					insertedBlockClientId
-				),
-				insertedBlockName: getBlockName( insertedBlockClientId ),
-			};
-		},
-		[ insertedBlockClientId ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const setAttributes =
-		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
-		};
+	const {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	} = useInsertedBlock( insertedBlockClientId );
 
 	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
 		if ( ! _insertedBlock?.clientId ) {
@@ -81,7 +66,7 @@ export const Appender = forwardRef( ( props, ref ) => {
 				onChange={ ( updatedValue ) => {
 					updateAttributes(
 						updatedValue,
-						setAttributes( insertedBlockClientId ),
+						setInsertedBlockAttributes,
 						insertedBlockAttributes
 					);
 					setInsertedBlockClientId( null );
diff --git a/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js b/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
new file mode 100644
index 00000000000000..f4e6746581e008
--- /dev/null
+++ b/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { useInsertedBlock } from '../use-inserted-block';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+describe( 'useInsertedBlock', () => {
+	const mockUpdateBlockAttributes = jest.fn();
+
+	it( 'returns undefined values when called without a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () => useInsertedBlock() );
+
+		const {
+			insertedBlockName,
+			insertedBlockAttributes,
+			setInsertedBlockAttributes,
+		} = result.current;
+
+		expect( insertedBlockName ).toBeUndefined();
+		expect( insertedBlockAttributes ).toBeUndefined();
+		expect(
+			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns name and attributes when called with a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () =>
+			useInsertedBlock( 'some-client-id-here' )
+		);
+
+		const { insertedBlockName, insertedBlockAttributes } = result.current;
+
+		expect( insertedBlockName ).toBe( 'core/navigation-link' );
+		expect( insertedBlockAttributes ).toEqual( {
+			'some-attribute': 'some-value',
+		} );
+	} );
+
+	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const clientId = '123456789';
+
+		const { result } = renderHook( () => useInsertedBlock( clientId ) );
+
+		const { setInsertedBlockAttributes } = result.current;
+
+		act( () => {
+			setInsertedBlockAttributes( {
+				'some-attribute': 'new-value',
+			} );
+		} );
+
+		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
+			'some-attribute': 'new-value',
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js b/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js
new file mode 100644
index 00000000000000..0e5a25c980a1c3
--- /dev/null
+++ b/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useInsertedBlock = ( insertedBlockClientId ) => {
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
+			};
+		},
+		[ insertedBlockClientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setInsertedBlockAttributes = ( _updatedAttributes ) => {
+		if ( ! insertedBlockClientId ) return;
+		updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+	};
+
+	if ( ! insertedBlockClientId ) {
+		return {
+			insertedBlockAttributes: undefined,
+			insertedBlockName: undefined,
+			setInsertedBlockAttributes,
+		};
+	}
+
+	return {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	};
+};

From b72b6084f1dbcdd2ac236b35aa901a0e95d8c6dd Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Tue, 20 Dec 2022 04:32:06 -0600
Subject: [PATCH 144/209] Improve empty menu state in nav off-canvas editor
 (#46602)

* Add note about empty list view

* Try moving the notice to the right
---
 .../src/components/off-canvas-editor/index.js            | 9 +++++++++
 .../src/components/off-canvas-editor/style.scss          | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 7d38d7c83c3350..2642d6605baac1 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -231,6 +231,15 @@ function __ExperimentalOffCanvasEditor(
 									<Appender { ...treeGridCellProps } />
 								) }
 							</TreeGridCell>
+							{ ! clientIdsTree.length && (
+								<TreeGridCell withoutGridItem>
+									<div className="offcanvas-editor-list-view-is-empty">
+										{ __(
+											'Your menu is currently empty. Add your first menu item to get started.'
+										) }
+									</div>
+								</TreeGridCell>
+							) }
 						</TreeGridRow>
 					</ListViewContext.Provider>
 				</TreeGrid>
diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
index 8fedf057b03333..9cfb098c7e2598 100644
--- a/packages/block-editor/src/components/off-canvas-editor/style.scss
+++ b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -24,3 +24,7 @@
 	// sidebar width - tab panel padding
 	max-width: $sidebar-width - (2 * $grid-unit-20);
 }
+
+.offcanvas-editor-list-view-is-empty {
+	margin-left: $grid-unit-20;
+}

From 068ac38ea5b74594b40479aa2e3fabb92e7292b9 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:36:19 +0200
Subject: [PATCH 145/209] Lodash: Remove omit usage from RN test mocks (#46660)

---
 .../native/__mocks__/@wordpress/react-native-aztec/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/test/native/__mocks__/@wordpress/react-native-aztec/index.js b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
index 1452aeb957c872..0c08c17521fc34 100644
--- a/test/native/__mocks__/@wordpress/react-native-aztec/index.js
+++ b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TextInput } from 'react-native';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,9 +14,8 @@ const AztecInputState = jest.requireActual( '@wordpress/react-native-aztec' )
 const AztecKeyCodes = jest.requireActual( '@wordpress/react-native-aztec' )
 	.default.KeyCodes;
 
-const UNSUPPORTED_PROPS = [ 'style' ];
-
 const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
+	const { style, ...supportedProps } = rest;
 	const inputRef = useRef();
 
 	useImperativeHandle( ref, () => ( {
@@ -40,7 +38,7 @@ const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
 
 	return (
 		<TextInput
-			{ ...omit( rest, UNSUPPORTED_PROPS ) }
+			{ ...supportedProps }
 			accessibilityLabel={
 				accessibilityLabel || `Text input. ${ text.text || 'Empty' }`
 			}

From 86a1c19e475549a813e7215be67e6a3df15a2637 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Tue, 20 Dec 2022 18:39:54 +0800
Subject: [PATCH 146/209] Fix CORS error in the demo e2e test (#46668)

---
 packages/scripts/config/puppeteer.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/scripts/config/puppeteer.config.js b/packages/scripts/config/puppeteer.config.js
index 2ca9621040a64a..dc222b0e8d1caf 100644
--- a/packages/scripts/config/puppeteer.config.js
+++ b/packages/scripts/config/puppeteer.config.js
@@ -3,6 +3,9 @@ module.exports = {
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,
-		args: [ '--enable-blink-features=ComputedAccessibilityInfo' ],
+		args: [
+			'--enable-blink-features=ComputedAccessibilityInfo',
+			'--disable-web-security',
+		],
 	},
 };

From cd7a7c70ad7310069ee31bf9b6423c912ebd8ce0 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 12:44:45 +0200
Subject: [PATCH 147/209] Block Editor: Optimize useAvailableAlignments
 performance (#46655)

---
 .../block-alignment-control/use-available-alignments.js    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
index ba6f885a09cd55..ab6213b4389282 100644
--- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
+++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
@@ -10,6 +10,7 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
@@ -40,14 +41,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
 		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
-			return [];
+			return EMPTY_ARRAY;
 		}
 		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
 	const enabledControls = controls
@@ -66,7 +67,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		enabledControls.length === 1 &&
 		enabledControls[ 0 ].name === 'none'
 	) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 
 	return enabledControls;

From 9cbaa94fa60caccdeb07c871fc50000a8bc03ab7 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 20 Dec 2022 12:47:51 +0200
Subject: [PATCH 148/209] [Block Library - Query Loop]: Fetch terms suggestions
 dynamically (#46649)

* [Block Library - Query Loop]: Fetch terms suggestions dynamically

* rename vars and add comments

* add back the div wrapper of `FormTokenField`
---
 packages/block-library/src/query/constants.js |   7 -
 .../inspector-controls/taxonomy-controls.js   | 140 +++++++++++++-----
 .../src/query/edit/query-content.js           |   3 +-
 3 files changed, 104 insertions(+), 46 deletions(-)
 delete mode 100644 packages/block-library/src/query/constants.js

diff --git a/packages/block-library/src/query/constants.js b/packages/block-library/src/query/constants.js
deleted file mode 100644
index 9f606c1c6920c3..00000000000000
--- a/packages/block-library/src/query/constants.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const MAX_FETCHED_TERMS = 100;
-export const DEFAULTS_POSTS_PER_PAGE = 3;
-
-export default {
-	MAX_FETCHED_TERMS,
-	DEFAULTS_POSTS_PER_PAGE,
-};
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
index 1cfee79a8e8001..30b983737cbe8b 100644
--- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -4,12 +4,20 @@
 import { FormTokenField } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useTaxonomies } from '../../utils';
-import { MAX_FETCHED_TERMS } from '../../constants';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,name',
+	context: 'view',
+};
 
 // Helper function to get the term id based on user input in terms `FormTokenField`.
 const getTermIdByTermValue = ( terms, termValue ) => {
@@ -35,20 +43,6 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 	)?.id;
 };
 
-const useTaxonomyTerms = ( slug ) => {
-	return useSelect(
-		( select ) => {
-			const terms = select( coreStore ).getEntityRecords(
-				'taxonomy',
-				slug,
-				{ context: 'view', per_page: MAX_FETCHED_TERMS }
-			);
-			return { terms };
-		},
-		[ slug ]
-	);
-};
-
 export function TaxonomyControls( { onChange, query } ) {
 	const { postType, taxQuery } = query;
 
@@ -60,7 +54,7 @@ export function TaxonomyControls( { onChange, query } ) {
 	return (
 		<>
 			{ taxonomies.map( ( taxonomy ) => {
-				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds ) =>
 					onChange( {
 						taxQuery: {
@@ -73,7 +67,7 @@ export function TaxonomyControls( { onChange, query } ) {
 					<TaxonomyItem
 						key={ taxonomy.slug }
 						taxonomy={ taxonomy }
-						value={ value }
+						termIds={ termIds }
 						onChange={ handleChange }
 					/>
 				);
@@ -81,38 +75,108 @@ export function TaxonomyControls( { onChange, query } ) {
 		</>
 	);
 }
-function TaxonomyItem( { taxonomy, value, onChange } ) {
-	const { terms } = useTaxonomyTerms( taxonomy.slug );
-	if ( ! terms?.length ) {
-		return null;
-	}
 
+/**
+ * Renders a `FormTokenField` for a given taxonomy.
+ *
+ * @param {Object}   props          The props for the component.
+ * @param {Object}   props.taxonomy The taxonomy object.
+ * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.
+ * @param {Function} props.onChange Callback `onChange` function.
+ * @return {JSX.Element} The rendered component.
+ */
+function TaxonomyItem( { taxonomy, termIds, onChange } ) {
+	const [ search, setSearch ] = useState( '' );
+	const [ value, setValue ] = useState( EMPTY_ARRAY );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const { searchResults, searchHasResolved } = useSelect(
+		( select ) => {
+			if ( ! search ) {
+				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+			}
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
+			const selectorArgs = [
+				'taxonomy',
+				taxonomy.slug,
+				{
+					...BASE_QUERY,
+					search,
+					orderby: 'name',
+					exclude: termIds,
+					per_page: 20,
+				},
+			];
+			return {
+				searchResults: getEntityRecords( ...selectorArgs ),
+				searchHasResolved: hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ search, termIds ]
+	);
+	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
+	// They are used to extract the terms' names to populate the `FormTokenField` properly
+	// and to sanitize the provided `termIds`, by setting only the ones that exist.
+	const existingTerms = useSelect(
+		( select ) => {
+			if ( ! termIds?.length ) return EMPTY_ARRAY;
+			const { getEntityRecords } = select( coreStore );
+			return getEntityRecords( 'taxonomy', taxonomy.slug, {
+				...BASE_QUERY,
+				include: termIds,
+				per_page: termIds.length,
+			} );
+		},
+		[ termIds ]
+	);
+	// Update the `value` state only after the selectors are resolved
+	// to avoid emptying the input when we're changing terms.
+	useEffect( () => {
+		if ( ! termIds?.length ) {
+			setValue( EMPTY_ARRAY );
+		}
+		if ( ! existingTerms?.length ) return;
+		// Returns only the existing entity ids. This prevents the component
+		// from crashing in the editor, when non existing ids are provided.
+		const sanitizedValue = termIds.reduce( ( accumulator, id ) => {
+			const entity = existingTerms.find( ( term ) => term.id === id );
+			if ( entity ) {
+				accumulator.push( {
+					id,
+					value: entity.name,
+				} );
+			}
+			return accumulator;
+		}, [] );
+		setValue( sanitizedValue );
+	}, [ termIds, existingTerms ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( searchResults.map( ( result ) => result.name ) );
+	}, [ searchResults, searchHasResolved ] );
 	const onTermsChange = ( newTermValues ) => {
-		const termIds = new Set();
+		const newTermIds = new Set();
 		for ( const termValue of newTermValues ) {
-			const termId = getTermIdByTermValue( terms, termValue );
+			const termId = getTermIdByTermValue( searchResults, termValue );
 			if ( termId ) {
-				termIds.add( termId );
+				newTermIds.add( termId );
 			}
 		}
-
-		onChange( Array.from( termIds ) );
+		setSuggestions( EMPTY_ARRAY );
+		onChange( Array.from( newTermIds ) );
 	};
-
-	// Selects only the existing term ids in proper format to be
-	// used in `FormTokenField`. This prevents the component from
-	// crashing in the editor, when non existing term ids were provided.
-	const taxQueryValue = value
-		.map( ( termId ) => terms.find( ( t ) => t.id === termId ) )
-		.filter( Boolean )
-		.map( ( term ) => ( { id: term.id, value: term.name } ) );
-
 	return (
 		<div className="block-library-query-inspector__taxonomy-control">
 			<FormTokenField
 				label={ taxonomy.name }
-				value={ taxQueryValue }
-				suggestions={ terms.map( ( t ) => t.name ) }
+				value={ value }
+				onInputChange={ debouncedSearch }
+				suggestions={ suggestions }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
 			/>
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index bdb4dc3e734337..9cb8d8775a2bf3 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -20,7 +20,8 @@ import { __ } from '@wordpress/i18n';
  */
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
-import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
+
+const DEFAULTS_POSTS_PER_PAGE = 3;
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export default function QueryContent( {

From a33c2141285542256dcc022e17fdd072816b37c3 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 20 Dec 2022 10:50:05 +0000
Subject: [PATCH 149/209] Update: Remove need for template prefix in
 gutenberg_get_template_hierarchy. (#46257)

---
 ...ss-gutenberg-rest-templates-controller.php |   2 +-
 .../wordpress-6.2/block-template-utils.php    | 112 +++++++++++++++
 lib/load.php                                  |   1 +
 phpunit/block-template-utils-test.php         | 135 +++++++++++++++---
 4 files changed, 226 insertions(+), 24 deletions(-)
 create mode 100644 lib/compat/wordpress-6.2/block-template-utils.php

diff --git a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
index e911b0f1e4d203..f0416e0a50e96f 100644
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
+++ b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
@@ -55,7 +55,7 @@ public function register_routes() {
 	 * @return WP_REST_Response|WP_Error
 	 */
 	public function get_template_fallback( $request ) {
-		$hierarchy         = get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] );
+		$hierarchy         = gutenberg_get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] );
 		$fallback_template = resolve_block_template( $request['slug'], $hierarchy, '' );
 		$response          = $this->prepare_item_for_response( $fallback_template, $request );
 		return rest_ensure_response( $response );
diff --git a/lib/compat/wordpress-6.2/block-template-utils.php b/lib/compat/wordpress-6.2/block-template-utils.php
new file mode 100644
index 00000000000000..832b9714dd13d3
--- /dev/null
+++ b/lib/compat/wordpress-6.2/block-template-utils.php
@@ -0,0 +1,112 @@
+<?php
+/**
+ * Temporary compatibility shims for features present in Gutenberg.
+ * This file should be removed when WordPress 6.1.0 becomes the lowest
+ * supported version by this plugin.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Helper function to get the Template Hierarchy for a given slug.
+ * We need to Handle special cases here like `front-page`, `singular` and `archive` templates.
+ *
+ * Noting that we always add `index` as the last fallback template.
+ *
+ * @param string  $slug            The template slug to be created.
+ * @param boolean $is_custom       Indicates if a template is custom or part of the template hierarchy.
+ * @param string  $template_prefix The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`.
+ *
+ * @return array<string> The template hierarchy.
+ */
+function gutenberg_get_template_hierarchy( $slug, $is_custom = false, $template_prefix = '' ) {
+	if ( 'index' === $slug ) {
+		return array( 'index' );
+	}
+	if ( $is_custom ) {
+		return array( 'page', 'singular', 'index' );
+	}
+	if ( 'front-page' === $slug ) {
+		return array( 'front-page', 'home', 'index' );
+	}
+
+	$template_hierarchy = array( $slug );
+	// Most default templates don't have `$template_prefix` assigned.
+	if ( ! empty( $template_prefix ) ) {
+		list($type) = explode( '-', $template_prefix );
+		// We need these checks because we always add the `$slug` above.
+		if ( ! in_array( $template_prefix, array( $slug, $type ), true ) ) {
+			$template_hierarchy[] = $template_prefix;
+		}
+		if ( $slug !== $type ) {
+			$template_hierarchy[] = $type;
+		}
+	} else {
+		$matches = array();
+		if ( preg_match( '/^(author|category|archive|tag|page)-(.+)$/', $slug, $matches ) ) {
+			$template_hierarchy[] = $matches[1];
+		} elseif ( preg_match( '/^(single|taxonomy)-(.+)$/', $slug, $matches ) ) {
+			$type           = $matches[1];
+			$slug_remaining = $matches[2];
+			if ( 'single' === $type ) {
+				$post_types = get_post_types();
+				foreach ( $post_types as $post_type ) {
+					if ( str_starts_with( $slug_remaining, $post_type ) ) {
+						// If $slug_remaining is equal to $post_type we have the single-$post_type template.
+						if ( $slug_remaining === $post_type ) {
+							$template_hierarchy[] = 'single';
+							break;
+						}
+						// If $slug_remaining is single-$post_type-$slug template.
+						if ( str_starts_with( $slug_remaining, $post_type . '-' ) && strlen( $slug_remaining ) > strlen( $post_type ) + 1 ) {
+							$template_hierarchy[] = "single-$post_type";
+							$template_hierarchy[] = 'single';
+							break;
+						}
+					}
+				}
+			} elseif ( 'taxonomy' === $type ) {
+				$taxonomies = get_taxonomies();
+				foreach ( $taxonomies as $taxonomy ) {
+					if ( str_starts_with( $slug_remaining, $taxonomy ) ) {
+						// If $slug_remaining is equal to $taxonomy we have the taxonomy-$taxonomy template.
+						if ( $slug_remaining === $taxonomy ) {
+							$template_hierarchy[] = 'taxonomy';
+							break;
+						}
+						// If $slug_remaining is taxonomy-$taxonomy-$term template.
+						if ( str_starts_with( $slug_remaining, $taxonomy . '-' ) && strlen( $slug_remaining ) > strlen( $taxonomy ) + 1 ) {
+							$template_hierarchy[] = "taxonomy-$taxonomy";
+							$template_hierarchy[] = 'taxonomy';
+							break;
+						}
+					}
+				}
+			}
+		}
+	}
+	// Handle `archive` template.
+	if (
+		str_starts_with( $slug, 'author' ) ||
+		str_starts_with( $slug, 'taxonomy' ) ||
+		str_starts_with( $slug, 'category' ) ||
+		str_starts_with( $slug, 'tag' ) ||
+		'date' === $slug
+	) {
+		$template_hierarchy[] = 'archive';
+	}
+	// Handle `single` template.
+	if ( 'attachment' === $slug ) {
+		$template_hierarchy[] = 'single';
+	}
+	// Handle `singular` template.
+	if (
+		str_starts_with( $slug, 'single' ) ||
+		str_starts_with( $slug, 'page' ) ||
+		'attachment' === $slug
+	) {
+		$template_hierarchy[] = 'singular';
+	}
+	$template_hierarchy[] = 'index';
+	return $template_hierarchy;
+}
diff --git a/lib/load.php b/lib/load.php
index 21b9e7acbc6b97..4f2a9b42790b10 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -77,6 +77,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.2 compat.
 require __DIR__ . '/compat/wordpress-6.2/script-loader.php';
+require __DIR__ . '/compat/wordpress-6.2/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
diff --git a/phpunit/block-template-utils-test.php b/phpunit/block-template-utils-test.php
index ceffe180d98707..ac2e4145cd0ed2 100644
--- a/phpunit/block-template-utils-test.php
+++ b/phpunit/block-template-utils-test.php
@@ -11,24 +11,40 @@ public function set_up() {
 		switch_theme( 'emptytheme' );
 	}
 
+	public static function wpSetUpBeforeClass() {
+		register_post_type(
+			'custom_book',
+			array(
+				'public'       => true,
+				'show_in_rest' => true,
+			)
+		);
+		register_taxonomy( 'book_type', 'custom_book' );
+	}
+
+	public static function wpTearDownAfterClass() {
+		unregister_post_type( 'custom_book' );
+		unregister_taxonomy( 'book_type' );
+	}
+
 	public function test_get_template_hierarchy() {
-		$hierarchy = get_template_hierarchy( 'front-page' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'front-page' );
 		$this->assertEquals( array( 'front-page', 'home', 'index' ), $hierarchy );
 		// Custom templates.
-		$hierarchy = get_template_hierarchy( 'whatever-slug', true );
+		$hierarchy = gutenberg_get_template_hierarchy( 'whatever-slug', true );
 		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
 		// Single slug templates(ex. page, tag, author, etc..
-		$hierarchy = get_template_hierarchy( 'page' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'page' );
 		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'tag' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'tag' );
 		$this->assertEquals( array( 'tag', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'author' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'author' );
 		$this->assertEquals( array( 'author', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'date' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'date' );
 		$this->assertEquals( array( 'date', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'taxonomy' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy' );
 		$this->assertEquals( array( 'taxonomy', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'attachment' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'attachment' );
 		$this->assertEquals(
 			array(
 				'attachment',
@@ -38,20 +54,34 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'singular' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'singular' );
 		$this->assertEquals( array( 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'single' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single' );
 		$this->assertEquals( array( 'single', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'archive' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'archive' );
 		$this->assertEquals( array( 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'index' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'index' );
 		$this->assertEquals( array( 'index' ), $hierarchy );
 
 		// Taxonomies.
-		$hierarchy = get_template_hierarchy( 'taxonomy-books', false, 'taxonomy-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-book_type', false );
+		$this->assertEquals( array( 'taxonomy-book_type', 'taxonomy', 'archive', 'index' ), $hierarchy );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books', false, 'taxonomy-books' );
 		$this->assertEquals( array( 'taxonomy-books', 'taxonomy', 'archive', 'index' ), $hierarchy );
 		// Single word category.
-		$hierarchy = get_template_hierarchy( 'category-fruits', false, 'category' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits', false );
+		$this->assertEquals(
+			array(
+				'category-fruits',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits', false, 'category' );
 		$this->assertEquals(
 			array(
 				'category-fruits',
@@ -62,7 +92,18 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Multi word category.
-		$hierarchy = get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits-yellow', false );
+		$this->assertEquals(
+			array(
+				'category-fruits-yellow',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
 		$this->assertEquals(
 			array(
 				'category-fruits-yellow',
@@ -73,7 +114,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Single word taxonomy.
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-books-action',
@@ -84,7 +125,11 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-book_type-adventure', false );
+		$this->assertEquals( array( 'taxonomy-book_type-adventure', 'taxonomy-book_type', 'taxonomy', 'archive', 'index' ), $hierarchy );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-books-action-adventure',
@@ -96,7 +141,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Multi word taxonomy/terms.
-		$hierarchy = get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-greek-books-action-adventure',
@@ -108,7 +153,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Post types.
-		$hierarchy = get_template_hierarchy( 'single-book', false, 'single-book' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-book', false, 'single-book' );
 		$this->assertEquals(
 			array(
 				'single-book',
@@ -118,7 +163,7 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
 		$this->assertEquals(
 			array(
 				'single-art-project',
@@ -128,7 +173,7 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
 		$this->assertEquals(
 			array(
 				'single-art-project-imagine',
@@ -139,7 +184,41 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'page-hi', false, 'page' );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-custom_book', false );
+		$this->assertEquals(
+			array(
+				'single-custom_book',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-custom_book-book-1', false );
+		$this->assertEquals(
+			array(
+				'single-custom_book-book-1',
+				'single-custom_book',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'page-hi', false, 'page' );
+		$this->assertEquals(
+			array(
+				'page-hi',
+				'page',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = gutenberg_get_template_hierarchy( 'page-hi', false );
 		$this->assertEquals(
 			array(
 				'page-hi',
@@ -150,7 +229,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Authors.
-		$hierarchy = get_template_hierarchy( 'author-rigas', false, 'author' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'author-rigas', false, 'author' );
 		$this->assertEquals(
 			array(
 				'author-rigas',
@@ -160,5 +239,15 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
+		// Archive post types.
+		$hierarchy = gutenberg_get_template_hierarchy( 'archive-book', false );
+		$this->assertEquals(
+			array(
+				'archive-book',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
 	}
 }

From b7199276d44bb58fe6f43c91d63d0e5f46b0dccb Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 13:00:03 +0200
Subject: [PATCH 150/209] Data: Fix no-node-access violation in suspense tests
 (#46657)

---
 packages/data/src/components/use-select/test/suspense.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/data/src/components/use-select/test/suspense.js b/packages/data/src/components/use-select/test/suspense.js
index 032db07bdd1bdb..9fbbabaeb1bb09 100644
--- a/packages/data/src/components/use-select/test/suspense.js
+++ b/packages/data/src/components/use-select/test/suspense.js
@@ -139,10 +139,11 @@ describe( 'useSuspenseSelect', () => {
 			}
 
 			render() {
+				const { children } = this.props;
 				if ( this.state.error ) {
 					return <div aria-label="error">{ this.state.error }</div>;
 				}
-				return this.props.children;
+				return children;
 			}
 		}
 

From 38ce5dcf87e6c86d279db22ebed210a16d0fb27f Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 13:00:19 +0200
Subject: [PATCH 151/209] Components: Improve `PanelBody` tests (#46659)

* Refactor to use screen queries

* Ignore panel body retrieval querySelector

* Inline queries, use better matchers

* Remove redundant ={ true }

* Use get queries when element exists

* Inline elements that are used just once

* Let's use a snapshot

* Add some extra whitespace

* fireEvent -> user-event
---
 .../src/panel/test/__snapshots__/body.js.snap |   9 ++
 packages/components/src/panel/test/body.js    | 133 +++++++++---------
 2 files changed, 79 insertions(+), 63 deletions(-)
 create mode 100644 packages/components/src/panel/test/__snapshots__/body.js.snap

diff --git a/packages/components/src/panel/test/__snapshots__/body.js.snap b/packages/components/src/panel/test/__snapshots__/body.js.snap
new file mode 100644
index 00000000000000..245b1a85bf5c82
--- /dev/null
+++ b/packages/components/src/panel/test/__snapshots__/body.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 3b8bb3e553a62a..9e0c676859c5e7 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -1,154 +1,161 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { PanelBody } from '../body';
 
-const getPanelBody = ( container ) =>
-	container.querySelector( '.components-panel__body' );
-const getPanelBodyContent = ( container ) =>
-	container.querySelector( '.components-panel__body > div' );
-const getPanelToggle = ( container ) =>
-	container.querySelector( '.components-panel__body-toggle' );
-
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
 			const { container } = render( <PanelBody /> );
-			const panelBody = getPanelBody( container );
 
-			expect( panelBody ).toBeTruthy();
-			expect( panelBody.tagName ).toBe( 'DIV' );
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render inner content, if opened', () => {
-			const { container } = render(
-				<PanelBody opened={ true }>
-					<div className="inner-content">Content</div>
+			render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should be opened by default', () => {
-			const { container } = render(
+			render(
 				<PanelBody>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
-			const { container } = render(
-				<PanelBody initialOpen={ true }>
-					<div>Content</div>
+			render(
+				<PanelBody initialOpen>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should call the children function, if specified', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+			const { rerender } = render(
+				<PanelBody opened>
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeInTheDocument();
+			expect( panelContent ).not.toBeVisible();
 			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 
 	describe( 'toggling', () => {
 		it( 'should toggle collapse with opened prop', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+			const { rerender } = render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 
 			rerender(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 		} );
 
-		it( 'should toggle when clicking header', () => {
-			const { container } = render(
+		it( 'should toggle when clicking header', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<PanelBody title="Panel" initialOpen={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
-			const panelToggle = getPanelToggle( container );
 
-			expect( panelContent ).toBeFalsy();
+			let panelContent = screen.queryByTestId( 'inner-content' );
+			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
+
+			expect( panelContent ).not.toBeInTheDocument();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 		} );
 
-		it( 'should pass button props to panel title', () => {
+		it( 'should pass button props to panel title', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const mock = jest.fn();
 
-			const { container } = render(
+			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			const panelToggle = getPanelToggle( container );
-
-			fireEvent.click( panelToggle );
+			await user.click( screen.getByRole( 'button', { name: 'Panel' } ) );
 
 			expect( mock ).toHaveBeenCalled();
 		} );

From 68d7c3a5d60eae73f47f11e3e9f16f4a22c26d5a Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 13:03:58 +0200
Subject: [PATCH 152/209] Block Editor: Make URLPopover tests more precise
 (#46654)

---
 .../src/components/url-popover/test/index.js  | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/url-popover/test/index.js b/packages/block-editor/src/components/url-popover/test/index.js
index 11eead4ea3fde9..859d21fd0305b5 100644
--- a/packages/block-editor/src/components/url-popover/test/index.js
+++ b/packages/block-editor/src/components/url-popover/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -11,6 +11,16 @@ import URLPopover from '../';
 
 jest.useRealTimers();
 
+/**
+ * Returns the first found popover element up the DOM tree.
+ *
+ * @param {HTMLElement} element Element to start with.
+ * @return {HTMLElement|null} Popover element, or `null` if not found.
+ */
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'URLPopover', () => {
 	it( 'matches the snapshot in its default state', async () => {
 		const { container } = render(
@@ -22,8 +32,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );
@@ -53,8 +66,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );

From e90078b58632c271d603677a822d0dbf889d961c Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Tue, 20 Dec 2022 12:16:08 +0100
Subject: [PATCH 153/209] BlockListAppender: with custom appender, don't react
 to nested list settings changes (#46461)

* BlockListAppender: with custom appender, don't react to nested list settings changes

* Try fixing e2e tests by reverting rootClientId condition
---
 .../components/block-list-appender/index.js   | 119 ++++++++++--------
 .../block-list-appender/index.native.js       |  79 +++++++-----
 2 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index cb20d64cf80dcd..fc1e624e9a15d5 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -16,67 +16,78 @@ import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	rootClientId,
-	renderAppender: CustomAppender,
-	className,
-	tagName: TagName = 'div',
-} ) {
-	const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } =
-		useSelect(
-			( select ) => {
-				const {
-					canInsertBlockType,
-					getTemplateLock,
-					getSelectedBlockClientId,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				return {
-					hideInserter:
-						!! getTemplateLock( rootClientId ) ||
-						__unstableGetEditorMode() === 'zoom-out',
-					canInsertDefaultBlock: canInsertBlockType(
-						getDefaultBlockName(),
-						rootClientId
-					),
-					selectedBlockClientId: getSelectedBlockClientId(),
-				};
-			},
-			[ rootClientId ]
-		);
+function DefaultAppender( { rootClientId } ) {
+	const canInsertDefaultBlock = useSelect( ( select ) =>
+		select( blockEditorStore ).canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		)
+	);
+
+	if ( canInsertDefaultBlock ) {
+		// Render the default block appender if the context supports use
+		// of the default appender.
+		return <DefaultBlockAppender rootClientId={ rootClientId } />;
+	}
+
+	// Fallback in case the default block can't be inserted.
+	return (
+		<ButtonBlockAppender
+			rootClientId={ rootClientId }
+			className="block-list-appender__toggle"
+		/>
+	);
+}
+
+function useAppender( rootClientId, CustomAppender ) {
+	const { hideInserter, isParentSelected } = useSelect(
+		( select ) => {
+			const {
+				getTemplateLock,
+				getSelectedBlockClientId,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				hideInserter:
+					!! getTemplateLock( rootClientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+				isParentSelected:
+					rootClientId === selectedBlockClientId ||
+					( ! rootClientId && ! selectedBlockClientId ),
+			};
+		},
+		[ rootClientId ]
+	);
 
 	if ( hideInserter || CustomAppender === false ) {
 		return null;
 	}
 
-	let appender;
 	if ( CustomAppender ) {
 		// Prefer custom render prop if provided.
-		appender = <CustomAppender />;
-	} else {
-		const isParentSelected =
-			selectedBlockClientId === rootClientId ||
-			( ! rootClientId && ! selectedBlockClientId );
-
-		if ( ! isParentSelected ) {
-			return null;
-		}
-
-		if ( canInsertDefaultBlock ) {
-			// Render the default block appender when renderAppender has not been
-			// provided and the context supports use of the default appender.
-			appender = <DefaultBlockAppender rootClientId={ rootClientId } />;
-		} else {
-			// Fallback in the case no renderAppender has been provided and the
-			// default block can't be inserted.
-			appender = (
-				<ButtonBlockAppender
-					rootClientId={ rootClientId }
-					className="block-list-appender__toggle"
-				/>
-			);
-		}
+		return <CustomAppender />;
+	}
+
+	if ( ! isParentSelected ) {
+		return null;
+	}
+
+	return <DefaultAppender rootClientId={ rootClientId } />;
+}
+
+function BlockListAppender( {
+	rootClientId,
+	renderAppender,
+	className,
+	tagName: TagName = 'div',
+} ) {
+	const appender = useAppender( rootClientId, renderAppender );
+
+	if ( ! appender ) {
+		return null;
 	}
 
 	return (
diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/packages/block-editor/src/components/block-list-appender/index.native.js
index 913bfb01732dde..2db2ed930b8cc9 100644
--- a/packages/block-editor/src/components/block-list-appender/index.native.js
+++ b/packages/block-editor/src/components/block-list-appender/index.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -11,14 +11,48 @@ import DefaultBlockAppender from '../default-block-appender';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	blockClientIds,
+function DefaultAppender( { rootClientId, showSeparator } ) {
+	const { blockClientIds, canInsertDefaultBlock } = useSelect(
+		( select ) => {
+			const { getBlockOrder, canInsertBlockType } =
+				select( blockEditorStore );
+			return {
+				blockClientIds: getBlockOrder( rootClientId ),
+				canInsertDefaultBlock: canInsertBlockType(
+					getDefaultBlockName(),
+					rootClientId
+				),
+			};
+		},
+		[ rootClientId ]
+	);
+
+	if ( ! canInsertDefaultBlock ) {
+		return null;
+	}
+
+	return (
+		<DefaultBlockAppender
+			rootClientId={ rootClientId }
+			lastBlockClientId={ blockClientIds[ blockClientIds.length - 1 ] }
+			containerStyle={ styles.blockListAppender }
+			placeholder={ blockClientIds.length > 0 ? '' : null }
+			showSeparator={ showSeparator }
+		/>
+	);
+}
+
+export default function BlockListAppender( {
 	rootClientId,
-	canInsertDefaultBlock,
-	isLocked,
 	renderAppender: CustomAppender,
 	showSeparator,
 } ) {
+	const isLocked = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).getTemplateLock( rootClientId ),
+		[ rootClientId ]
+	);
+
 	if ( isLocked ) {
 		return null;
 	}
@@ -27,33 +61,10 @@ function BlockListAppender( {
 		return <CustomAppender showSeparator={ showSeparator } />;
 	}
 
-	if ( canInsertDefaultBlock ) {
-		return (
-			<DefaultBlockAppender
-				rootClientId={ rootClientId }
-				lastBlockClientId={
-					blockClientIds[ blockClientIds.length - 1 ]
-				}
-				containerStyle={ styles.blockListAppender }
-				placeholder={ blockClientIds.length > 0 ? '' : null }
-				showSeparator={ showSeparator }
-			/>
-		);
-	}
-
-	return null;
+	return (
+		<DefaultAppender
+			rootClientId={ rootClientId }
+			showSeparator={ showSeparator }
+		/>
+	);
 }
-
-export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
-		select( blockEditorStore );
-
-	return {
-		isLocked: !! getTemplateLock( rootClientId ),
-		blockClientIds: getBlockOrder( rootClientId ),
-		canInsertDefaultBlock: canInsertBlockType(
-			getDefaultBlockName(),
-			rootClientId
-		),
-	};
-} )( BlockListAppender );

From d326cfc9929b8772d40878924e7fd60dedf4e5c8 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 13:20:37 +0200
Subject: [PATCH 154/209] Lodash: Remove from block editor reducer (#46656)

---
 packages/block-editor/src/store/reducer.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 9c99126f54ba14..a19983ce58ff46 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { omit, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -113,7 +112,10 @@ function getFlattenedClientIds( blocks ) {
  * @return {Array} Flattened block attributes object.
  */
 function getFlattenedBlocksWithoutAttributes( blocks ) {
-	return flattenBlocks( blocks, ( block ) => omit( block, 'attributes' ) );
+	return flattenBlocks( blocks, ( block ) => {
+		const { attributes, ...restBlock } = block;
+		return restBlock;
+	} );
 }
 
 /**
@@ -782,8 +784,8 @@ export const blocks = pipe(
 				}
 
 				// Do nothing if only attributes change.
-				const changes = omit( action.updates, 'attributes' );
-				if ( isEmpty( changes ) ) {
+				const { attributes, ...changes } = action.updates;
+				if ( Object.values( changes ).length === 0 ) {
 					return state;
 				}
 
@@ -1641,13 +1643,18 @@ export const blockListSettings = ( state = {}, action ) => {
 		// should correct the state.
 		case 'REPLACE_BLOCKS':
 		case 'REMOVE_BLOCKS': {
-			return omit( state, action.clientIds );
+			return Object.fromEntries(
+				Object.entries( state ).filter(
+					( [ id ] ) => ! action.clientIds.includes( id )
+				)
+			);
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const { clientId } = action;
 			if ( ! action.settings ) {
 				if ( state.hasOwnProperty( clientId ) ) {
-					return omit( state, clientId );
+					const { [ clientId ]: removedBlock, ...restBlocks } = state;
+					return restBlocks;
 				}
 
 				return state;

From 9dc48e064d0d86c53f334d4c4c9e0d7580301633 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 20 Dec 2022 20:29:08 +0900
Subject: [PATCH 155/209] Migrate Toolbar roving tabindex tests to Playwright
 (#46634)

* Migrate Toolbar roving tabindex tests to Playwright

* Fix file name
---
 .../various/toolbar-roving-tabindex.test.js   | 142 ------------
 .../various/toolbar-roving-tabindex.spec.js   | 216 ++++++++++++++++++
 2 files changed, 216 insertions(+), 142 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
 create mode 100644 test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
deleted file mode 100644
index d131ddbbe07425..00000000000000
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	pressKeyWithModifier,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-async function focusBlockToolbar() {
-	await pressKeyWithModifier( 'alt', 'F10' );
-}
-
-async function expectLabelToHaveFocus( label ) {
-	let ariaLabel = await page.evaluate( () =>
-		document.activeElement.getAttribute( 'aria-label' )
-	);
-	// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
-	if ( ariaLabel !== label ) {
-		await page.keyboard.press( 'ArrowUp' );
-		ariaLabel = await page.evaluate( () =>
-			document.activeElement.getAttribute( 'aria-label' )
-		);
-	}
-	await expect( ariaLabel ).toBe( label );
-}
-
-async function testBlockToolbarKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await focusBlockToolbar();
-	await expectLabelToHaveFocus( currentBlockTitle );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( 'Move up' );
-	await page.keyboard.press( 'Tab' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Move up' );
-}
-
-async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
-	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.click( '.editor-block-list-item-group' );
-}
-
-async function testGroupKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await expectLabelToHaveFocus( 'Block: Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Select Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockTitle );
-}
-
-describe( 'Toolbar roving tabindex', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First block' );
-	} );
-
-	it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await testBlockToolbarKeyboardNavigation(
-			'Paragraph block',
-			'Paragraph'
-		);
-		await wrapCurrentBlockWithGroup( 'Paragraph' );
-		await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' );
-	} );
-
-	it( 'ensures heading block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'Heading' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' );
-		await wrapCurrentBlockWithGroup( 'Heading' );
-		await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' );
-	} );
-
-	it( 'ensures list block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List' );
-		await testBlockToolbarKeyboardNavigation( 'List text', 'Select List' );
-		await page.click( `[aria-label="Select List"]` );
-		await wrapCurrentBlockWithGroup( 'List' );
-		await testGroupKeyboardNavigation( 'Block: List', 'List' );
-	} );
-
-	it( 'ensures image block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Image' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
-		await wrapCurrentBlockWithGroup( 'Image' );
-		await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
-	} );
-
-	it( 'ensures table block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Table' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
-		// Move focus to the first toolbar item.
-		await page.keyboard.press( 'Home' );
-		await expectLabelToHaveFocus( 'Table' );
-		await page.click( '.blocks-table__placeholder-button' );
-		await page.keyboard.press( 'Tab' );
-		await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' );
-		await wrapCurrentBlockWithGroup( 'Table' );
-		await testGroupKeyboardNavigation( 'Block: Table', 'Table' );
-	} );
-
-	it( 'ensures custom html block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Custom HTML' );
-		await testBlockToolbarKeyboardNavigation( 'HTML', 'Custom HTML' );
-		await wrapCurrentBlockWithGroup( 'Custom HTML' );
-		await testGroupKeyboardNavigation(
-			'Block: Custom HTML',
-			'Custom HTML'
-		);
-	} );
-
-	it( 'ensures block toolbar remembers the last focused item', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await focusBlockToolbar();
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Move up' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expectLabelToHaveFocus( 'Move up' );
-	} );
-
-	it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {
-		await pressKeyWithModifier( 'alt', 'F10' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Bold' );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
new file mode 100644
index 00000000000000..43de49fef14811
--- /dev/null
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	ToolbarRovingTabindexUtils: async ( { page, pageUtils }, use ) => {
+		await use( new ToolbarRovingTabindexUtils( { page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Toolbar roving tabindex', () => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'First block' );
+	} );
+
+	test( 'ensures paragraph block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Paragraph block',
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Paragraph block',
+			'Paragraph'
+		);
+	} );
+
+	test( 'ensures heading block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'Heading' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Heading',
+			'Heading'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Heading' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Heading',
+			'Heading'
+		);
+	} );
+
+	test( 'ensures list block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/list' } );
+		await page.keyboard.type( 'List' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'List text',
+			'Select List'
+		);
+		await page.click( `role=button[name="Select List"i]` );
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: List',
+			'List'
+		);
+	} );
+
+	test( 'ensures image block toolbar uses roving tabindex', async ( {
+		editor,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+	} );
+
+	test( 'ensures table block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/table' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+		// Move focus to the first toolbar item.
+		await page.keyboard.press( 'Home' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
+		await page.click( `role=button[name="Create Table"i]` );
+		await page.keyboard.press( 'Tab' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Body cell text',
+			'Table'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Table' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+	} );
+
+	test( 'ensures custom html block toolbar uses roving tabindex', async ( {
+		editor,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/html' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'HTML',
+			'Custom HTML'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
+			'Custom HTML'
+		);
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Custom HTML',
+			'Custom HTML'
+		);
+	} );
+
+	test( 'ensures block toolbar remembers the last focused item', async ( {
+		editor,
+		page,
+		pageUtils,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+		await ToolbarRovingTabindexUtils.focusBlockToolbar();
+		await page.keyboard.press( 'ArrowRight' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
+		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
+	} );
+
+	test( 'can reach toolbar items with arrow keys after pressing alt+F10', async ( {
+		page,
+		pageUtils,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await pageUtils.pressKeyWithModifier( 'alt', 'F10' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Bold' );
+	} );
+} );
+
+class ToolbarRovingTabindexUtils {
+	constructor( { page, pageUtils } ) {
+		this.page = page;
+		this.pageUtils = pageUtils;
+	}
+
+	async focusBlockToolbar() {
+		await this.pageUtils.pressKeyWithModifier( 'alt', 'F10' );
+	}
+
+	async testBlockToolbarKeyboardNavigation(
+		currentBlockLabel,
+		currentBlockTitle
+	) {
+		await this.focusBlockToolbar();
+		await this.expectLabelToHaveFocus( currentBlockTitle );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+		await this.page.keyboard.press( 'Tab' );
+		await this.expectLabelToHaveFocus( currentBlockLabel );
+		await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+	}
+
+	async expectLabelToHaveFocus( label ) {
+		let ariaLabel = await this.page.evaluate( () =>
+			document.activeElement.getAttribute( 'aria-label' )
+		);
+		// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
+		if ( ariaLabel !== label ) {
+			await this.page.keyboard.press( 'ArrowUp' );
+			ariaLabel = await this.page.evaluate( () =>
+				document.activeElement.getAttribute( 'aria-label' )
+			);
+		}
+		await expect( ariaLabel ).toBe( label );
+	}
+
+	async wrapCurrentBlockWithGroup( currentBlockTitle ) {
+		await this.page.click( `role=button[name="${ currentBlockTitle }"i]` );
+		await this.page.click( `role=menuitem[name="Group"]` );
+	}
+
+	async testGroupKeyboardNavigation( currentBlockLabel, currentBlockTitle ) {
+		await this.expectLabelToHaveFocus( 'Block: Group' );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( currentBlockLabel );
+		await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await this.expectLabelToHaveFocus( 'Select Group' );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( currentBlockTitle );
+	}
+}

From 5f599386a3823a2a54751d94326e769af5c0f0bc Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Tue, 20 Dec 2022 12:02:27 +0000
Subject: [PATCH 156/209] docgen: Add function to handle list of types for
 theme.json schema (#46375)

* Add formatType function

* Reformat theme json docs

* Handle $ref type in formatType
---
 bin/api-docs/gen-theme-reference.js           | 28 ++++++++++++++++++-
 .../theme-json-reference/theme-json-living.md |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/bin/api-docs/gen-theme-reference.js b/bin/api-docs/gen-theme-reference.js
index d051261963daf4..b74deb9fb9d27f 100644
--- a/bin/api-docs/gen-theme-reference.js
+++ b/bin/api-docs/gen-theme-reference.js
@@ -127,7 +127,8 @@ const getStylePropertiesMarkup = ( struct ) => {
 			props[ key ].type === 'object'
 				? keys( props[ key ].properties ).sort().join( ', ' )
 				: '';
-		markup += `| ${ key } | ${ props[ key ].type } | ${ ps } |\n`;
+		const type = formatType( props[ key ] );
+		markup += `| ${ key } | ${ type } | ${ ps } |\n`;
 	} );
 
 	return markup;
@@ -160,6 +161,31 @@ ${ markupFn( data ) }
 
 let autogen = '';
 
+/**
+ * Format list of types.
+ *
+ * @param {Object} prop
+ * @return {string} type
+ */
+const formatType = ( prop ) => {
+	let type = prop.type || '';
+
+	if ( prop.hasOwnProperty( 'anyOf' ) || prop.hasOwnProperty( 'oneOf' ) ) {
+		const propTypes = prop.anyOf || prop.oneOf;
+		const types = [];
+
+		propTypes.forEach( ( item ) => {
+			if ( item.type ) types.push( item.type );
+			// $ref is always an object
+			if ( item.$ref ) types.push( 'object' );
+		} );
+
+		type = [ ...new Set( types ) ].join( ', ' );
+	}
+
+	return type;
+};
+
 // Settings
 const settings = Object.entries( themejson.definitions )
 	.filter( ( [ settingsKey ] ) =>
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 9b074edace6ae5..496ff5b618cc40 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -146,7 +146,7 @@ Border styles.
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
 | color | string |  |
-| radius | undefined |  |
+| radius | string, object |  |
 | style | string |  |
 | width | string |  |
 | top | object | color, style, width |

From 2589617a78ee7e3b3e78e499367aefdabe9f8b0b Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel.bachhuber@automattic.com>
Date: Tue, 20 Dec 2022 04:29:48 -0800
Subject: [PATCH 157/209] Restore `gutenberg_` prefix to function calls in
 PHPUnit tests (#46662)

---
 .../class-block-library-navigation-link-test.php   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/phpunit/class-block-library-navigation-link-test.php b/phpunit/class-block-library-navigation-link-test.php
index bb6cc33fb2e8ba..ba9922effcf64c 100644
--- a/phpunit/class-block-library-navigation-link-test.php
+++ b/phpunit/class-block-library-navigation-link-test.php
@@ -121,7 +121,7 @@ public function test_returns_link_when_post_is_published() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -142,7 +142,7 @@ public function test_returns_empty_when_label_is_missing() {
 		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -162,7 +162,7 @@ public function test_returns_empty_when_draft() {
 
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -182,7 +182,7 @@ public function test_returns_link_for_category() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -202,7 +202,7 @@ public function test_returns_link_for_plain_link() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -224,7 +224,7 @@ public function test_returns_empty_when_custom_post_type_draft() {
 
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -244,7 +244,7 @@ public function test_returns_link_when_custom_post_is_published() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block

From a12b449fa6717100b45abe3e49cccdc9aac2e78d Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <me@andreidraganescu.info>
Date: Tue, 20 Dec 2022 15:46:36 +0200
Subject: [PATCH 158/209] Bring back the heading and the menu selector in the
 ellipsis menu (#46622)

* Bring back the heading and the menu selector in the ellipsis menu

* don't show button keep the create option in the dropdown

Co-authored-by: Andrei Draganescu <github@andreidraganescu.info>
---
 .../edit/menu-inspector-controls.js           | 85 +++++++++++++------
 .../edit/navigation-menu-selector.js          | 28 ++++--
 2 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 5d70d1b1654317..d6eb607120c46b 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -6,7 +6,11 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PanelBody, VisuallyHidden } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -21,6 +25,7 @@ const MenuInspectorControls = ( {
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	currentMenuId = null,
+	isNavigationMenuMissing,
 	isManageMenusButtonDisabled,
 	onCreateNew,
 	onSelectClassicMenu,
@@ -51,37 +56,61 @@ const MenuInspectorControls = ( {
 					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
 				}
 			>
-				<>
-					{ isOffCanvasNavigationEditorEnabled && (
-						<VisuallyHidden as="h2">
-							{ __( 'Menu' ) }
-						</VisuallyHidden>
-					) }
-					<NavigationMenuSelector
-						currentMenuId={ currentMenuId }
-						onSelectClassicMenu={ onSelectClassicMenu }
-						onSelectNavigationMenu={ onSelectNavigationMenu }
-						onCreateNew={ onCreateNew }
-						createNavigationMenuIsSuccess={
-							createNavigationMenuIsSuccess
-						}
-						createNavigationMenuIsError={
-							createNavigationMenuIsError
-						}
-						actionLabel={ actionLabel }
-					/>
-					{ isOffCanvasNavigationEditorEnabled ? (
-						<OffCanvasEditor
-							blocks={ clientIdsTree }
-							isExpanded={ true }
-							selectBlockInCanvas={ false }
+				{ isOffCanvasNavigationEditorEnabled ? (
+					<>
+						<HStack className="wp-block-navigation-off-canvas-editor__header">
+							<Heading
+								className="wp-block-navigation-off-canvas-editor__title"
+								level={ 2 }
+							>
+								{ __( 'Menu' ) }
+							</Heading>
+							<NavigationMenuSelector
+								currentMenuId={ currentMenuId }
+								onSelectClassicMenu={ onSelectClassicMenu }
+								onSelectNavigationMenu={
+									onSelectNavigationMenu
+								}
+								onCreateNew={ onCreateNew }
+								createNavigationMenuIsSuccess={
+									createNavigationMenuIsSuccess
+								}
+								createNavigationMenuIsError={
+									createNavigationMenuIsError
+								}
+								actionLabel={ actionLabel }
+							/>
+						</HStack>
+						{ currentMenuId && isNavigationMenuMissing ? (
+							<p>{ __( 'Select or create a menu' ) }</p>
+						) : (
+							<OffCanvasEditor
+								blocks={ clientIdsTree }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+					</>
+				) : (
+					<>
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
 						/>
-					) : (
 						<ManageMenusButton
 							disabled={ isManageMenusButtonDisabled }
 						/>
-					) }
-				</>
+					</>
+				) }
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
index 2d8594093bf105..d923d55d64b66c 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -10,7 +10,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,6 +31,8 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -140,7 +142,11 @@ function NavigationMenuSelector( {
 		},
 	};
 
-	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
+	if (
+		! hasNavigationMenus &&
+		! hasClassicMenus &&
+		! isOffCanvasNavigationEditorEnabled
+	) {
 		return (
 			<Button
 				className="wp-block-navigation__navigation-selector-button--createnew"
@@ -161,15 +167,19 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className="wp-block-navigation__navigation-selector"
+			className={
+				isOffCanvasNavigationEditorEnabled
+					? ''
+					: 'wp-block-navigation__navigation-selector'
+			}
 			label={ selectorLabel }
-			text={
-				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ selectorLabel }
-				</span>
+			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
+			toggleProps={
+				isOffCanvasNavigationEditorEnabled
+					? { isSmall: true }
+					: toggleProps
 			}
-			icon={ null }
-			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<>

From 511428e18744e0aa333e501612bf587d4a297711 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 20 Dec 2022 16:30:39 +0200
Subject: [PATCH 159/209] E2E: Fix confirmValidDropZonePosition() when dropzone
 not ready (#46677)

---
 test/e2e/specs/editor/blocks/paragraph.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index 19c386cce457d9..121b2ed0bb79a9 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -569,6 +569,10 @@ class DraggingUtils {
 		// Check that both x and y axis of the dropzone
 		// have a less than 1 difference with a given target element
 		const box = await this.dropZone.boundingBox();
+		if ( ! box ) {
+			return false;
+		}
+
 		return (
 			Math.abs( element.x - box.x ) < 1 &&
 			Math.abs( element.y - box.y ) < 1

From c9bb2beacd38bf6d7fdebeb1a8ec05bdc9f0324e Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Tue, 20 Dec 2022 14:55:08 +0000
Subject: [PATCH 160/209] Bump plugin version to 14.8.0-rc.2

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

diff --git a/gutenberg.php b/gutenberg.php
index 4d4489ef4c0615..cc71a8e6f8ccc8 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.8.0-rc.1
+ * Version: 14.8.0-rc.2
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 4cdf49e9da3232..8cd517dc6e7ed1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.1",
+	"version": "14.8.0-rc.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 8c87dcaae93a7d..0df50a58feb5d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.1",
+	"version": "14.8.0-rc.2",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 9ac117bfb94fdb3908c82a251adcee996f1bc3cc Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Tue, 20 Dec 2022 15:05:05 +0000
Subject: [PATCH 161/209] Update Changelog for 14.8.0-rc.2

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

diff --git a/changelog.txt b/changelog.txt
index 8774c72580adff..cc3448654bef91 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,25 @@
 == Changelog ==
 
+= 14.8.0-rc.2 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Global Styles
+- Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
+- Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities. ([46663](https://github.com/WordPress/gutenberg/pull/46663))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong @glendaviesnz
+
+
 = 14.8.0-rc.1 =
 
 ## Changelog

From ceef38aa36dc2de2db67eab1a2a7fe10a950fb90 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Tue, 20 Dec 2022 17:38:23 +0100
Subject: [PATCH 162/209] [Mobile] - E2E Tests - Fix block insertion flakiness
 (#46619)

* Mobile - E2E Tests - Fix block insertion flakiness

* Mobile - Fix block insertion flakiness on Android

* Mobile - E2E - longPressMiddleOfElement: add custom waitTime for specfic cases like "Adding a block before" option
---
 ...gutenberg-editor-block-insertion-2.test.js | 38 +++++++++++++++++++
 .../gutenberg-editor-block-insertion.test.js  | 12 ++++--
 .../__device-tests__/helpers/utils.js         | 12 ++++--
 .../__device-tests__/pages/editor-page.js     | 14 ++++++-
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
index 2ab5bdda7f6ca7..44cc767ec5bfc3 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
@@ -10,12 +10,24 @@ import {
 	paragraphBlockEmpty,
 	separatorBlockEmpty,
 } from './helpers/test-data';
+import { waitForMediaLibrary } from './helpers/utils';
 
 describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'adds new block at the end of post', async () => {
 		await editorPage.addNewBlock( blockNames.heading );
+
+		const headingBlock = await editorPage.getBlockAtPosition(
+			blockNames.heading
+		);
+		expect( headingBlock ).toBeTruthy();
+
 		await editorPage.addNewBlock( blockNames.list );
 
+		const listItemBlock = await editorPage.getBlockAtPosition(
+			blockNames.listItem
+		);
+		expect( listItemBlock ).toBeTruthy();
+
 		const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
 			'\n\n'
 		);
@@ -29,6 +41,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 
 		await editorPage.addNewBlock( blockNames.separator );
 
+		const separatorBlock = await editorPage.getBlockAtPosition(
+			blockNames.separator,
+			2
+		);
+		expect( separatorBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			separatorBlockEmpty,
@@ -47,8 +65,16 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 		await separatorBlockElement.click();
 
 		await editorPage.addNewBlock( blockNames.image, 'before' );
+
+		await waitForMediaLibrary( editorPage.driver );
 		await editorPage.closePicker();
 
+		const imageBlock = await editorPage.getBlockAtPosition(
+			blockNames.image,
+			2
+		);
+		expect( imageBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
@@ -63,6 +89,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'inserts block at the end of post when no block is selected', async () => {
 		await editorPage.addNewBlock( blockNames.more );
 
+		const moreBlock = await editorPage.getBlockAtPosition(
+			blockNames.more,
+			5
+		);
+		expect( moreBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
@@ -78,6 +110,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
 		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
 
+		const paragraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			6
+		);
+		expect( paragraphBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
index abebfc7486962c..447e1a997ecc88 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
@@ -81,7 +81,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 
 	it( 'should be able to insert block at the beginning of post from the title', async () => {
 		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
 		if ( isAndroid() ) {
@@ -98,15 +98,19 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 		const titleElement = await editorPage.getTitleElement( {
 			autoscroll: true,
 		} );
+		expect( titleElement ).toBeTruthy();
 		await titleElement.click();
 
 		await editorPage.addNewBlock( blockNames.paragraph );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+		const emptyParagraphBlock = await editorPage.getBlockAtPosition(
 			blockNames.paragraph
 		);
-		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
+		expect( emptyParagraphBlock ).toBeTruthy();
+		const emptyParagraphBlockElement =
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph );
+		expect( emptyParagraphBlockElement ).toBeTruthy();
+
 		await editorPage.sendTextToParagraphBlock( 1, testData.mediumText );
-		await paragraphBlockElement.click();
 		const html = await editorPage.getHtmlContent();
 		expect( html.toLowerCase() ).toBe(
 			testData.blockInsertionHtmlFromTitle.toLowerCase()
diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
index 64d802f30dbec8..90d8a9be05f4b5 100644
--- a/packages/react-native-editor/__device-tests__/helpers/utils.js
+++ b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -313,15 +313,21 @@ const clickElementOutsideOfTextInput = async ( driver, element ) => {
 };
 
 // Long press to activate context menu.
-const longPressMiddleOfElement = async ( driver, element ) => {
+const longPressMiddleOfElement = async (
+	driver,
+	element,
+	waitTime = 5000, // Setting to wait a bit longer because this is failing more frequently on the CI
+	customElementSize
+) => {
 	const location = await element.getLocation();
-	const size = await element.getSize();
+	const size = customElementSize || ( await element.getSize() );
 
 	const x = location.x + size.width / 2;
 	const y = location.y + size.height / 2;
+
 	const action = new wd.TouchAction( driver )
 		.longPress( { x, y } )
-		.wait( 5000 ) // Setting to wait a bit longer because this is failing more frequently on the CI
+		.wait( waitTime )
 		.release();
 	await action.perform();
 };
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 248999dcb5d657..dc1c8318da35cf 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -305,7 +305,18 @@ class EditorPage {
 		);
 
 		if ( relativePosition === 'before' ) {
-			await longPressMiddleOfElement( this.driver, addButton );
+			// On Android it doesn't get the right size of the button
+			const customElementSize = {
+				width: 43,
+				height: 43,
+			};
+
+			await longPressMiddleOfElement(
+				this.driver,
+				addButton,
+				8000,
+				customElementSize
+			);
 			const addBlockBeforeButtonLocator = isAndroid()
 				? '//android.widget.Button[@content-desc="Add Block Before"]'
 				: '//XCUIElementTypeButton[@name="Add Block Before"]';
@@ -801,6 +812,7 @@ const blockNames = {
 	image: 'Image',
 	latestPosts: 'Latest Posts',
 	list: 'List',
+	listItem: 'List item',
 	more: 'More',
 	paragraph: 'Paragraph',
 	search: 'Search',

From 32a1e37d04171994c6ddaede83497299d3e84b5e Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Tue, 20 Dec 2022 16:55:09 +0000
Subject: [PATCH 163/209] theme.json schema: Allow object type on style
 properties (#45897)

* Allow objects on color properties

* Add definition for ref property

* Reduce repetition in property definitions

* Move properties def to oneOf array

* Fix $ref path

* Move ref def to global scope

* Apply ref type to all style properties

* Update docs

* Result of docs:build script

* Run docs:build to update docs

* Make ref logic more specific
---
 bin/api-docs/gen-theme-reference.js           |   5 +-
 .../theme-json-reference/theme-json-living.md |  40 +-
 schemas/json/theme.json                       | 417 ++++++++++++++++--
 3 files changed, 395 insertions(+), 67 deletions(-)

diff --git a/bin/api-docs/gen-theme-reference.js b/bin/api-docs/gen-theme-reference.js
index b74deb9fb9d27f..45edecf6bd1a2f 100644
--- a/bin/api-docs/gen-theme-reference.js
+++ b/bin/api-docs/gen-theme-reference.js
@@ -176,8 +176,9 @@ const formatType = ( prop ) => {
 
 		propTypes.forEach( ( item ) => {
 			if ( item.type ) types.push( item.type );
-			// $ref is always an object
-			if ( item.$ref ) types.push( 'object' );
+			// refComplete is always an object
+			if ( item.$ref && item.$ref === '#/definitions/refComplete' )
+				types.push( 'object' );
 		} );
 
 		type = [ ...new Set( types ) ].join( ', ' );
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 496ff5b618cc40..7aa790dd977899 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -145,10 +145,10 @@ Border styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| color | string |  |
+| color | string, object |  |
 | radius | string, object |  |
-| style | string |  |
-| width | string |  |
+| style | string, object |  |
+| width | string, object |  |
 | top | object | color, style, width |
 | right | object | color, style, width |
 | bottom | object | color, style, width |
@@ -162,9 +162,9 @@ Color styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| background | string |  |
-| gradient | string |  |
-| text | string |  |
+| background | string, object |  |
+| gradient | string, object |  |
+| text | string, object |  |
 
 ---
 
@@ -174,7 +174,7 @@ Spacing styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| blockGap | string |  |
+| blockGap | string, object |  |
 | margin | object | bottom, left, right, top |
 | padding | object | bottom, left, right, top |
 
@@ -186,14 +186,14 @@ Typography styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| fontFamily | string |  |
-| fontSize | string |  |
-| fontStyle | string |  |
-| fontWeight | string |  |
-| letterSpacing | string |  |
-| lineHeight | string |  |
-| textDecoration | string |  |
-| textTransform | string |  |
+| fontFamily | string, object |  |
+| fontSize | string, object |  |
+| fontStyle | string, object |  |
+| fontWeight | string, object |  |
+| letterSpacing | string, object |  |
+| lineHeight | string, object |  |
+| textDecoration | string, object |  |
+| textTransform | string, object |  |
 
 ---
 
@@ -203,7 +203,7 @@ CSS and SVG filter styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| duotone | string |  |
+| duotone | string, object |  |
 
 ---
 
@@ -220,10 +220,10 @@ Outline styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| color | string |  |
-| offset | string |  |
-| style | string |  |
-| width | string |  |
+| color | string, object |  |
+| offset | string, object |  |
+| style | string, object |  |
+| width | string, object |  |
 
 ---
 
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index d7349262193086..33c5e547f09033 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -7,6 +7,15 @@
 			"createTheme": "https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/",
 			"reference": "https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/"
 		},
+		"refComplete": {
+			"type": "object",
+			"properties": {
+				"ref": {
+					"description": "A reference to another property value. e.g. `styles.color.text`",
+					"type": "string"
+				}
+			}
+		},
 		"settingsPropertiesAppearanceTools": {
 			"type": "object",
 			"properties": {
@@ -918,7 +927,14 @@
 					"properties": {
 						"color": {
 							"description": "Sets the `border-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"radius": {
 							"description": "Sets the `border-radius` CSS property.",
@@ -926,24 +942,55 @@
 								{
 									"type": "string"
 								},
+								{
+									"$ref": "#/definitions/refComplete"
+								},
 								{
 									"type": "object",
 									"properties": {
 										"topLeft": {
 											"description": "Sets the `border-top-left-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"topRight": {
 											"description": "Sets the `border-top-right-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"bottomLeft": {
 											"description": "Sets the `border-bottom-left-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"bottomRight": {
 											"description": "Sets the `border-bottom-right-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										}
 									}
 								}
@@ -951,26 +998,61 @@
 						},
 						"style": {
 							"description": "Sets the `border-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"width": {
 							"description": "Sets the `border-width` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"top": {
 							"type": "object",
 							"properties": {
 								"color": {
 									"description": "Sets the `border-top-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-top-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-top-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -980,15 +1062,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-right-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-right-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-right-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -998,15 +1101,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-bottom-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-bottom-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-bottom-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1016,15 +1140,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-left-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-left-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-left-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1038,15 +1183,36 @@
 					"properties": {
 						"background": {
 							"description": "Sets the `background-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"gradient": {
 							"description": "Sets the `background` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"text": {
 							"description": "Sets the `color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
@@ -1057,7 +1223,14 @@
 					"properties": {
 						"blockGap": {
 							"description": "Sets the `--wp--style--block-gap` CSS custom property when settings.spacing.blockGap is true.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"margin": {
 							"description": "Margin styles.",
@@ -1065,19 +1238,47 @@
 							"properties": {
 								"top": {
 									"description": "Sets the `margin-top` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"right": {
 									"description": "Sets the `margin-right` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"bottom": {
 									"description": "Sets the `margin-bottom` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"left": {
 									"description": "Sets the `margin-left` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1088,19 +1289,47 @@
 							"properties": {
 								"top": {
 									"description": "Sets the `padding-top` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"right": {
 									"description": "Sets the `padding-right` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"bottom": {
 									"description": "Sets the `padding-bottom` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"left": {
 									"description": "Sets the `padding-left` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1114,35 +1343,91 @@
 					"properties": {
 						"fontFamily": {
 							"description": "Sets the `font-family` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontSize": {
 							"description": "Sets the `font-size` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontStyle": {
 							"description": "Sets the `font-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontWeight": {
 							"description": "Sets the `font-weight` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"letterSpacing": {
 							"description": "Sets the `letter-spacing` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"lineHeight": {
 							"description": "Sets the `line-height` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"textDecoration": {
 							"description": "Sets the `text-decoration` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"textTransform": {
 							"description": "Sets the `text-transform` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
@@ -1153,14 +1438,28 @@
 					"properties": {
 						"duotone": {
 							"description": "Sets the duotone filter.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
 				},
 				"shadow": {
 					"description": "Box shadow styles.",
-					"type": "string"
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"$ref": "#/definitions/refComplete"
+						}
+					]
 				},
 				"outline": {
 					"description": "Outline styles.",
@@ -1168,19 +1467,47 @@
 					"properties": {
 						"color": {
 							"description": "Sets the `outline-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"offset": {
 							"description": "Sets the `outline-offset` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"style": {
 							"description": "Sets the `outline-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"width": {
 							"description": "Sets the `outline-width` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false

From ca1acf3fe301cfe5fc4ec50edb6e5b3702942bb0 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 21 Dec 2022 04:25:20 +0900
Subject: [PATCH 164/209] Theme component: Remove public export (#46427)

* Theme component: Remove public export

* Add changelog
---
 packages/components/CHANGELOG.md    |  1 +
 packages/components/CONTRIBUTING.md | 21 ---------------------
 packages/components/src/index.js    |  1 -
 3 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f459061f109e19..878f70a904aa3b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -45,6 +45,7 @@
 -   `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
 -   `PaletteEdit`: add follow up changelog for #45681 and tests [#46095](https://github.com/WordPress/gutenberg/pull/46095).
 -   `AlignmentMatrixControl`: Convert to TypeScript ([#46162](https://github.com/WordPress/gutenberg/pull/46162)).
+-   `Theme`: Remove public export ([#46427](https://github.com/WordPress/gutenberg/pull/46427)).
 -   `Autocomplete`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   `TabPanel`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   `BottomSheetPickerCell`: Refactor away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 1b96d604738cfa..eda32b881472ca 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -185,27 +185,6 @@ All new component should be styled using [Emotion](https://emotion.sh/docs/intro
 
 Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
 
-### Themeing
-
-_Note: Themeing is an experimental feature and still being actively developed. Its APIs are an early implementation subject to drastic and breaking changes_
-
-The [`Theme` component](/packages/components/src/theme/README.md) can be used to tweak the visual appearance of the components from the `@wordpress/components` package.
-
-```jsx
-import { __experimentalTheme as Theme } from '@wordpress/components';
-
-const Example = () => {
-	return (
-		<Theme accent="red">
-			<Button variant="primary">I'm red</Button>
-			<Theme accent="blue">
-				<Button variant="primary">I'm blue</Button>
-			</Theme>
-		</Theme>
-	);
-};
-```
-
 ### Deprecating styles
 
 Changing the styles of a non-experimental component must be done with care. To prevent serious breakage in third-party usage, in some cases we may want a grace period before fully removing the old styles. This can be done by temporarily placing the new styles behind a feature flag prop prefixed by `__next`, accompanied by a `deprecate()` warning in the console. The feature flag should be opt-in (false by default), and have a reasonably descriptive name (**not** `__nextHasNewStyles`). A descriptive name allows for multiple deprecations to proceed in parallel, separated by concerns or by deprecation version.
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 149021e8569eb6..96b2caf328f088 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -148,7 +148,6 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
-export { default as __experimentalTheme } from './theme';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export {

From 696d63ffd3b9e1bc116d3853fd3f883f15eb143c Mon Sep 17 00:00:00 2001
From: Dennis Snell <dennis.snell@automattic.com>
Date: Mon, 19 Dec 2022 14:13:55 -0700
Subject: [PATCH 165/209] Tag Processor: Fix a problem backing up too far after
 updating HTML (#46598)

A defect introduced in #46018 led to the tag processor backing up
one index too far after flushing its queued changes on a document.

For most operations this didn't cause any harm because when immediately
moving forward after an update, the `next_tag()` returned to the same
spot: it was backing up to one position before the current tag instead
of at the start of the current tag.

Unfortunately, when the current tag was the first in the document this
would lead the processor to rewind to position `-1`, right before the
start of the document, and lead to errors with `strpos()` when it
received out-of-bounds indices.

In this fix we're correcting the adjustment for the HTML tag's `<` and
documenting the math in the file so that it's clearer why it's there
and providing guidance should another fix be necessary.

As supporting work to this patch we're making the text replacement sort
stable, inside the tag processor, for when determining the order in which
to apply text replacements. This isn't necessary for the runtime but is
a nuissance for testing because different PHP versions produce different
unstable sort orderings and this prevents that from causing the unit
tests to fail in one version but pass in another.

Props to @anton-vlasenko for finding this bug.

Enforce sort stability when flushing out text replacements
---
 .../html/class-wp-html-tag-processor.php      | 34 ++++++++--
 phpunit/html/wp-html-tag-processor-test.php   | 68 +++++++++----------
 2 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/lib/experimental/html/class-wp-html-tag-processor.php b/lib/experimental/html/class-wp-html-tag-processor.php
index affbb6fb27b5c1..afdf6c66073cd5 100644
--- a/lib/experimental/html/class-wp-html-tag-processor.php
+++ b/lib/experimental/html/class-wp-html-tag-processor.php
@@ -1331,16 +1331,33 @@ public function seek( $bookmark_name ) {
 	}
 
 	/**
-	 * Sort function to arrange objects with a start property in ascending order.
+	 * Compare two WP_HTML_Text_Replacement objects.
 	 *
 	 * @since 6.2.0
 	 *
-	 * @param object $a First attribute update.
-	 * @param object $b Second attribute update.
+	 * @param WP_HTML_Text_Replacement $a First attribute update.
+	 * @param WP_HTML_Text_Replacement $b Second attribute update.
 	 * @return integer
 	 */
 	private static function sort_start_ascending( $a, $b ) {
-		return $a->start - $b->start;
+		$by_start = $a->start - $b->start;
+		if ( 0 !== $by_start ) {
+			return $by_start;
+		}
+
+		$by_text = isset( $a->text, $b->text ) ? strcmp( $a->text, $b->text ) : 0;
+		if ( 0 !== $by_text ) {
+			return $by_text;
+		}
+
+		/*
+		 * We shouldn't ever get here because it would imply
+		 * that we have two identical updates, or that we're
+		 * trying to replace the same input text twice. Still
+		 * we'll handle this sort to preserve determinism,
+		 * which might come in handy when debugging.
+		 */
+		return $a->end - $b->end;
 	}
 
 	/**
@@ -1657,7 +1674,14 @@ public function get_updated_html() {
 		$this->updated_bytes = strlen( $this->updated_html );
 
 		// 3. Point this tag processor at the original tag opener and consume it
-		$this->parsed_bytes = strlen( $updated_html_up_to_current_tag_name_end ) - $this->tag_name_length - 2;
+
+		/*
+		 * When we get here we're at the end of the tag name, and we want to rewind to before it
+		 * <p>Previous HTML<em>More HTML</em></p>
+		 *                 ^  | back up by the length of the tag name plus the opening <
+		 *                 \<-/ back up by strlen("em") + 1 ==> 3
+		 */
+		$this->parsed_bytes = strlen( $updated_html_up_to_current_tag_name_end ) - $this->tag_name_length - 1;
 		$this->next_tag();
 
 		return $this->html;
diff --git a/phpunit/html/wp-html-tag-processor-test.php b/phpunit/html/wp-html-tag-processor-test.php
index 6a850eb7a4edb2..cab14962491aca 100644
--- a/phpunit/html/wp-html-tag-processor-test.php
+++ b/phpunit/html/wp-html-tag-processor-test.php
@@ -1132,7 +1132,7 @@ public function data_malformed_tag() {
 		$examples  = array();
 		$examples['Invalid entity inside attribute value'] = array(
 			'<img src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span>test</span>',
-			'<img foo="bar" class="firstTag" src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span class="secondTag">test</span>',
+			'<img class="firstTag" foo="bar" src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span class="secondTag">test</span>',
 		);
 
 		$examples['HTML tag opening inside attribute value'] = array(
@@ -1147,152 +1147,152 @@ public function data_malformed_tag() {
 
 		$examples['Single and double quotes in attribute value'] = array(
 			'<p title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span>test</span>',
-			'<p foo="bar" class="firstTag" title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span class="secondTag">test</span>',
+			'<p class="firstTag" foo="bar" title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute values'] = array(
 			'<hr a=1 a=2 a=3 a=5 /><span>test</span>',
-			'<hr foo="bar" class="firstTag" a=1 a=2 a=3 a=5 /><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" a=1 a=2 a=3 a=5 /><span class="secondTag">test</span>',
 		);
 
 		$examples['Double-quotes escaped in double-quote attribute value'] = array(
 			'<hr title="This is a &quot;double-quote&quot;"><span>test</span>',
-			'<hr foo="bar" class="firstTag" title="This is a &quot;double-quote&quot;"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" title="This is a &quot;double-quote&quot;"><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value'] = array(
 			'<hr id=code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=code><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value with tag-like value'] = array(
 			'<hr id= 	<code> ><span>test</span>',
-			'<hr foo="bar" class="firstTag" id= 	<code> ><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id= 	<code> ><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value with tag-like value followed by tag-like data'] = array(
 			'<hr id=code>><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=code>><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=code>><span class="secondTag">test</span>',
 		);
 
 		$examples['1'] = array(
 			'<hr id=&quo;code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=&quo;code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=&quo;code><span class="secondTag">test</span>',
 		);
 
 		$examples['2'] = array(
 			'<hr id/test=5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id/test=5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id/test=5><span class="secondTag">test</span>',
 		);
 
 		$examples['4'] = array(
 			'<hr title="<hr>"><span>test</span>',
-			'<hr foo="bar" class="firstTag" title="<hr>"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" title="<hr>"><span class="secondTag">test</span>',
 		);
 
 		$examples['5'] = array(
 			'<hr id=>code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=>code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=>code><span class="secondTag">test</span>',
 		);
 
 		$examples['6'] = array(
 			'<hr id"quo="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" id"quo="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id"quo="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['7'] = array(
 			'<hr id' . $null_byte . 'zero="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" id' . $null_byte . 'zero="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id' . $null_byte . 'zero="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['8'] = array(
 			'<hr >id="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" >id="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" >id="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['9'] = array(
 			'<hr =id="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" =id="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =id="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['10'] = array(
 			'</><span>test</span>',
-			'</><span foo="bar" class="firstTag">test</span>',
+			'</><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['11'] = array(
 			'The applicative operator <* works well in Haskell; <data-tag> is what?<span>test</span>',
-			'The applicative operator <* works well in Haskell; <data-tag foo="bar" class="firstTag"> is what?<span class="secondTag">test</span>',
+			'The applicative operator <* works well in Haskell; <data-tag class="firstTag" foo="bar"> is what?<span class="secondTag">test</span>',
 		);
 
 		$examples['12'] = array(
 			'<3 is a heart but <t3> is a tag.<span>test</span>',
-			'<3 is a heart but <t3 foo="bar" class="firstTag"> is a tag.<span class="secondTag">test</span>',
+			'<3 is a heart but <t3 class="firstTag" foo="bar"> is a tag.<span class="secondTag">test</span>',
 		);
 
 		$examples['13'] = array(
 			'<?comment --><span>test</span>',
-			'<?comment --><span foo="bar" class="firstTag">test</span>',
+			'<?comment --><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['14'] = array(
 			'<!-- this is a comment. no <strong>tags</strong> allowed --><span>test</span>',
-			'<!-- this is a comment. no <strong>tags</strong> allowed --><span foo="bar" class="firstTag">test</span>',
+			'<!-- this is a comment. no <strong>tags</strong> allowed --><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['15'] = array(
 			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span>test</span>',
-			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span foo="bar" class="firstTag">test</span>',
+			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['16'] = array(
 			'<hr ===name="value"><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===name="value"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ===name="value"><span class="secondTag">test</span>',
 		);
 
 		$examples['17'] = array(
 			'<hr asdf="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" asdf="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" asdf="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['18'] = array(
 			'<hr =asdf="tes"><span>test</span>',
-			'<hr foo="bar" class="firstTag" =asdf="tes"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =asdf="tes"><span class="secondTag">test</span>',
 		);
 
 		$examples['19'] = array(
 			'<hr ==="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" ==="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ==="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['20'] = array(
 			'<hr =><span>test</span>',
-			'<hr foo="bar" class="firstTag" =><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =><span class="secondTag">test</span>',
 		);
 
 		$examples['21'] = array(
 			'<hr =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =5><span class="secondTag">test</span>',
 		);
 
 		$examples['22'] = array(
 			'<hr ==><span>test</span>',
-			'<hr foo="bar" class="firstTag" ==><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ==><span class="secondTag">test</span>',
 		);
 
 		$examples['23'] = array(
 			'<hr ===><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ===><span class="secondTag">test</span>',
 		);
 
 		$examples['24'] = array(
 			'<hr disabled><span>test</span>',
-			'<hr foo="bar" class="firstTag" disabled><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" disabled><span class="secondTag">test</span>',
 		);
 
 		$examples['25'] = array(
 			'<hr a"sdf="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" a"sdf="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" a"sdf="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['Multiple unclosed tags treated as a single tag'] = array(
@@ -1306,7 +1306,7 @@ public function data_malformed_tag() {
 HTML
 			,
 			<<<HTML
-			<hr foo="bar" class="firstTag" id=">"code
+			<hr class="firstTag" foo="bar" id=">"code
 			<hr id="value>"code
 			<hr id="/>"code
 			<hr id="value/>"code
@@ -1318,12 +1318,12 @@ public function data_malformed_tag() {
 
 		$examples['27'] = array(
 			'<hr id   =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id   =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id   =5><span class="secondTag">test</span>',
 		);
 
 		$examples['28'] = array(
 			'<hr id a  =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id a  =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id a  =5><span class="secondTag">test</span>',
 		);
 
 		return $examples;

From 6c1cdbdaabcc86f62a37254c41c7024034e8fee6 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Tue, 20 Dec 2022 16:33:35 -0600
Subject: [PATCH 166/209] Fix nav list alignment (#46682)

* Fix nav list appender alignment

* Fix icon width

* Remove unused CSS
---
 .../src/components/list-view/style.scss             | 13 +------------
 .../src/components/off-canvas-editor/style.scss     |  2 +-
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 6bcb7667b36b85..61c6f80dab608e 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -176,9 +176,8 @@
 	}
 
 	.block-editor-block-icon {
-		align-self: flex-start;
 		margin-right: $grid-unit-10;
-		width: $icon-size;
+		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -319,16 +318,6 @@
 
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
-		width: 16px;
-		min-width: 24px;
-		height: 16px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-		overflow: hidden;
 	}
 }
 
diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
index 9cfb098c7e2598..e65646a318d3d6 100644
--- a/packages/block-editor/src/components/off-canvas-editor/style.scss
+++ b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -1,7 +1,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
 	background-color: #1e1e1e;
 	color: #fff;
-	margin: $grid-unit-10 0 0 28px;
+	margin: $grid-unit-10 0 0 24px;
 	border-radius: 2px;
 	height: 24px;
 	min-width: 24px;

From 05bef82c0e38e7fd62df076c4d98920238cf3dbc Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:29:02 +0900
Subject: [PATCH 167/209] FocalPointPicker: Fix layout misalignment when placed
 in the `BlockInspector` (#46631)

* FocalPointPicker: Reset margin-bottom of UnitControl to align vertical position

* Update changelog

* Apply fixes to the `BlockInspector` component

* Move changelog into block-editor package
---
 packages/block-editor/CHANGELOG.md                         | 1 +
 .../block-editor/src/components/block-inspector/style.scss | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 34cd726c55fdf5..a990b54f945b33 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -14,6 +14,7 @@
 ### Bug Fix
 
 -   `SpacingSizesControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#46530](https://github.com/WordPress/gutenberg/pull/46530)).
+-   `FocalPointPicker`:  Fix layout misalignment when placed in the `BlockInspector` ([#46631](https://github.com/WordPress/gutenberg/pull/46631)).
 
 ## 10.5.0 (2022-11-16)
 
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 08ca013629927e..3dd4744fb87e2a 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -17,6 +17,13 @@
 			margin-bottom: $grid-unit-10;
 		}
 	}
+
+	// Reset unexpected margin-bottom from being applied to the `BaseControl`
+	// component of the `FocalPointPicker` component.
+	.components-focal-point-picker-control .components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;

From c24777cf87e6b131413e763b9ad9bfe417df6de3 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 21 Dec 2022 05:55:38 +0000
Subject: [PATCH 168/209] Page List: Remove duplicate code (#46620)

Co-authored-by: Ben Dwyer <ben@escruffian.com>
---
 .../block-library/src/navigation-link/edit.js |  56 +-------
 .../src/navigation-submenu/edit.js            | 122 ++++--------------
 .../src/navigation/edit/utils.js              |  82 ++++++++++++
 .../block-library/src/navigation/editor.scss  |   7 -
 .../block-library/src/navigation/style.scss   |   1 -
 .../block-library/src/page-list-item/edit.js  |  94 ++------------
 .../block-library/src/page-list/index.php     |   9 +-
 7 files changed, 120 insertions(+), 251 deletions(-)

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index b5ba89d604abda..ac2b43501e9ed3 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -48,6 +48,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { name } from './block.json';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
+import { getColors } from '../navigation/edit/utils';
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -100,61 +101,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 const useIsInvalidLink = ( kind, type, id ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 30dc457938c91e..3255f4ac812ecc 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -42,6 +42,10 @@ import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -104,61 +108,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
  */
@@ -377,48 +326,27 @@ export default function NavigationSubmenuEdit( {
 		  )
 		: ALLOWED_BLOCKS;
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: classnames( 'wp-block-navigation__submenu-container', {
-				'is-parent-of-selected-block': isParentOfSelectedBlock,
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]:
-					!! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
-					!! innerBlocksColors.backgroundColor,
-			} ),
-			style: {
-				color: innerBlocksColors.customTextColor,
-				backgroundColor: innerBlocksColors.customBackgroundColor,
-			},
-		},
-		{
-			allowedBlocks,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: true,
-
-			// Ensure block toolbar is not too far removed from item
-			// being edited.
-			// see: https://github.com/WordPress/gutenberg/pull/34615.
-			__experimentalCaptureToolbars: true,
-
-			renderAppender:
-				isSelected ||
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasChildren ) ||
-				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasChildren
-					? InnerBlocks.ButtonBlockAppender
-					: false,
-		}
-	);
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
+		allowedBlocks,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: true,
+
+		// Ensure block toolbar is not too far removed from item
+		// being edited.
+		// see: https://github.com/WordPress/gutenberg/pull/34615.
+		__experimentalCaptureToolbars: true,
+
+		renderAppender:
+			isSelected ||
+			( isImmediateParentOfSelectedBlock &&
+				! selectedBlockHasChildren ) ||
+			// Show the appender while dragging to allow inserting element between item and the appender.
+			hasChildren
+				? InnerBlocks.ButtonBlockAppender
+				: false,
+	} );
 
 	const ParentElement = openSubmenusOnClick ? 'button' : 'a';
 
diff --git a/packages/block-library/src/navigation/edit/utils.js b/packages/block-library/src/navigation/edit/utils.js
index b152d9874e8e97..2c436af8c5754f 100644
--- a/packages/block-library/src/navigation/edit/utils.js
+++ b/packages/block-library/src/navigation/edit/utils.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
@@ -28,3 +33,80 @@ export function detectColors(
 
 	setBackground( backgroundColor );
 }
+
+/**
+ * Determine the colors for a menu.
+ *
+ * Order of priority is:
+ * 1: Overlay custom colors (if submenu)
+ * 2: Overlay theme colors (if submenu)
+ * 3: Custom colors
+ * 4: Theme colors
+ * 5: Global styles
+ *
+ * @param {Object}  context
+ * @param {boolean} isSubMenu
+ */
+export function getColors( context, isSubMenu ) {
+	const {
+		textColor,
+		customTextColor,
+		backgroundColor,
+		customBackgroundColor,
+		overlayTextColor,
+		customOverlayTextColor,
+		overlayBackgroundColor,
+		customOverlayBackgroundColor,
+		style,
+	} = context;
+
+	const colors = {};
+
+	if ( isSubMenu && !! customOverlayTextColor ) {
+		colors.customTextColor = customOverlayTextColor;
+	} else if ( isSubMenu && !! overlayTextColor ) {
+		colors.textColor = overlayTextColor;
+	} else if ( !! customTextColor ) {
+		colors.customTextColor = customTextColor;
+	} else if ( !! textColor ) {
+		colors.textColor = textColor;
+	} else if ( !! style?.color?.text ) {
+		colors.customTextColor = style.color.text;
+	}
+
+	if ( isSubMenu && !! customOverlayBackgroundColor ) {
+		colors.customBackgroundColor = customOverlayBackgroundColor;
+	} else if ( isSubMenu && !! overlayBackgroundColor ) {
+		colors.backgroundColor = overlayBackgroundColor;
+	} else if ( !! customBackgroundColor ) {
+		colors.customBackgroundColor = customBackgroundColor;
+	} else if ( !! backgroundColor ) {
+		colors.backgroundColor = backgroundColor;
+	} else if ( !! style?.color?.background ) {
+		colors.customTextColor = style.color.background;
+	}
+
+	return colors;
+}
+
+export function getNavigationChildBlockProps( innerBlocksColors ) {
+	return {
+		className: classnames( 'wp-block-navigation__submenu-container', {
+			'has-text-color': !! (
+				innerBlocksColors.textColor || innerBlocksColors.customTextColor
+			),
+			[ `has-${ innerBlocksColors.textColor }-color` ]:
+				!! innerBlocksColors.textColor,
+			'has-background': !! (
+				innerBlocksColors.backgroundColor ||
+				innerBlocksColors.customBackgroundColor
+			),
+			[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
+				!! innerBlocksColors.backgroundColor,
+		} ),
+		style: {
+			color: innerBlocksColors.customTextColor,
+			backgroundColor: innerBlocksColors.customBackgroundColor,
+		},
+	};
+}
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 8b2dd93e3010be..e22a0f152c5ea9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -32,13 +32,6 @@
  * Submenus.
  */
 
-// Ensure sub-menus stay open and visible when a nested block is selected.
-.wp-block-navigation__container.is-parent-of-selected-block {
-	visibility: visible;
-	opacity: 1;
-	overflow: visible;
-}
-
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
 .wp-block-navigation-item {
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 59622a7039f491..946472ef95caa4 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -533,7 +533,6 @@ button.wp-block-navigation-item__content {
 			}
 
 			// Always expand/unfold submenus inside the modal.
-			.has-child .submenu-container,
 			.has-child .wp-block-navigation__submenu-container {
 				// Unset CSS that hides dropdown menus.
 				opacity: 1;
diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
index aa0836e774848b..aa559937de8319 100644
--- a/packages/block-library/src/page-list-item/edit.js
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -14,6 +14,10 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { ItemSubmenuIcon } from '../navigation-link/icons';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
 
 function useFrontPageId() {
 	return useSelect( ( select ) => {
@@ -30,61 +34,6 @@ function useFrontPageId() {
 	}, [] );
 }
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 export default function PageListItemEdit( { context, attributes } ) {
 	const { id, label, link, hasChildren } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
@@ -92,29 +41,10 @@ export default function PageListItemEdit( { context, attributes } ) {
 
 	const innerBlocksColors = getColors( context, true );
 
-	const blockProps = useBlockProps( {
-		className: classnames(
-			'wp-block-pages-list__item',
-			'wp-block-navigation__submenu-container',
-			{
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]:
-					!! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
-					!! innerBlocksColors.backgroundColor,
-			}
-		),
-		style: {
-			color: innerBlocksColors.customTextColor,
-			backgroundColor: innerBlocksColors.customBackgroundColor,
-		},
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const blockProps = useBlockProps( navigationChildBlockProps, {
+		className: 'wp-block-pages-list__item',
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps );
@@ -164,13 +94,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 								<ItemSubmenuIcon />
 							</button>
 						) }
-					<ul
-						className={ classnames( 'submenu-container', {
-							'wp-block-navigation__submenu-container':
-								isNavigationChild,
-						} ) }
-						{ ...innerBlocksProps }
-					></ul>
+					<ul { ...innerBlocksProps }></ul>
 				</>
 			) }
 		</li>
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 3ae63047e27485..45681737165b80 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -208,12 +208,9 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 				$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 				$markup .= '</button>';
 			}
-			$markup .= '<ul class="submenu-container';
-			// Extra classname is added when the block is a child of Navigation.
-			if ( $is_navigation_child ) {
-				$markup .= ' wp-block-navigation__submenu-container';
-			}
-			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			$markup .= '<ul class="wp-block-navigation__submenu-container">';
+			$markup .= block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 );
+			$markup .= '</ul>';
 		}
 		$markup .= '</li>';
 	}

From 16a2feadc34c39e63fe4a4e353701aa433572e25 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:54:51 +0200
Subject: [PATCH 169/209] Lodash: Refactor away from `_.omit()` (#46674)

* core-data: Refactor _.omit() usage

* ESLint: Deprecate _.omit()

* Remove _.omit() from block deprecation docs

* Fix docs

* Handle both string and integer IDs properly

* Add a unit test to cover string IDs
---
 .eslintrc.js                                  |  1 +
 .../block-api/block-deprecation.md            | 12 +++---
 .../core-data/src/queried-data/reducer.js     | 29 ++++++++++++--
 .../src/queried-data/test/reducer.js          | 40 +++++++++++++++++++
 4 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3f2e466a78ff25..a053236c704d55 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -107,6 +107,7 @@ const restrictedImports = [
 			'negate',
 			'noop',
 			'nth',
+			'omit',
 			'omitBy',
 			'once',
 			'orderby',
diff --git a/docs/reference-guides/block-api/block-deprecation.md b/docs/reference-guides/block-api/block-deprecation.md
index 1bb24694749a0f..0314939ee8f649 100644
--- a/docs/reference-guides/block-api/block-deprecation.md
+++ b/docs/reference-guides/block-api/block-deprecation.md
@@ -234,7 +234,6 @@ E.g: a block wants to migrate a title attribute to a paragraph innerBlock.
 
 ```js
 const { registerBlockType } = wp.blocks;
-const { omit } = lodash;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -254,8 +253,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,
@@ -278,8 +279,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 
 ```js
 var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType,
-	omit = lodash.omit;
+	registerBlockType = wp.blocks.registerBlockType;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -295,8 +295,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate: function ( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,
diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js
index e47f0220156a75..6a0c74a4503669 100644
--- a/packages/core-data/src/queried-data/reducer.js
+++ b/packages/core-data/src/queried-data/reducer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, omit, mapValues } from 'lodash';
+import { map, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -73,6 +73,29 @@ export function getMergedItemIds( itemIds, nextItemIds, page, perPage ) {
 	return mergedItemIds;
 }
 
+/**
+ * Helper function to filter out entities with certain IDs.
+ * Entities are keyed by their ID.
+ *
+ * @param {Object} entities Entity objects, keyed by entity ID.
+ * @param {Array}  ids      Entity IDs to filter out.
+ *
+ * @return {Object} Filtered entities.
+ */
+function removeEntitiesById( entities, ids ) {
+	return Object.fromEntries(
+		Object.entries( entities ).filter(
+			( [ id ] ) =>
+				! ids.some( ( itemId ) => {
+					if ( Number.isInteger( itemId ) ) {
+						return itemId === +id;
+					}
+					return itemId === id;
+				} )
+		)
+	);
+}
+
 /**
  * Reducer tracking items state, keyed by ID. Items are assumed to be normal,
  * where identifiers are common across all queries.
@@ -104,7 +127,7 @@ export function items( state = {}, action ) {
 		}
 		case 'REMOVE_ITEMS':
 			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+				removeEntitiesById( contextState, action.itemIds )
 			);
 	}
 	return state;
@@ -157,7 +180,7 @@ export function itemIsComplete( state = {}, action ) {
 		}
 		case 'REMOVE_ITEMS':
 			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+				removeEntitiesById( contextState, action.itemIds )
 			);
 	}
 
diff --git a/packages/core-data/src/queried-data/test/reducer.js b/packages/core-data/src/queried-data/test/reducer.js
index 63a4f4bd259ceb..76657fca61da1b 100644
--- a/packages/core-data/src/queried-data/test/reducer.js
+++ b/packages/core-data/src/queried-data/test/reducer.js
@@ -224,4 +224,44 @@ describe( 'reducer', () => {
 			},
 		} );
 	} );
+
+	it( 'deletes an item with string ID', () => {
+		const kind = 'postType';
+		const name = 'wp_template';
+		const original = deepFreeze( {
+			items: {
+				default: {
+					'foo//bar1': { id: 'foo//bar1', name: 'Foo Bar 1' },
+					'foo//bar2': { id: 'foo//bar2', name: 'Foo Bar 2' },
+					'foo//bar3': { id: 'foo//bar3', name: 'Foo Bar 3' },
+				},
+			},
+			queries: {
+				default: {
+					'': [ 'foo//bar1', 'foo//bar2', 'foo//bar3' ],
+					's=2': [ 'foo//bar2' ],
+				},
+			},
+		} );
+		const state = reducer(
+			original,
+			removeItems( kind, name, 'foo//bar2' )
+		);
+
+		expect( state ).toEqual( {
+			itemIsComplete: {},
+			items: {
+				default: {
+					'foo//bar1': { id: 'foo//bar1', name: 'Foo Bar 1' },
+					'foo//bar3': { id: 'foo//bar3', name: 'Foo Bar 3' },
+				},
+			},
+			queries: {
+				default: {
+					'': [ 'foo//bar1', 'foo//bar3' ],
+					's=2': [],
+				},
+			},
+		} );
+	} );
 } );

From db0ff52d8bb75f344e846cff3b6424c1779bff8a Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Wed, 21 Dec 2022 11:20:37 +0200
Subject: [PATCH 170/209] [Block Library - Query Loop]: Show pattern titles in
 setup (#46688)

* [Block Library - Query Loop]: Show pattern titles in setup

* change cursors of pattern title
---
 .../components/block-pattern-setup/index.js   | 21 +++++++++++-----
 .../components/block-pattern-setup/style.scss | 25 +++++++++++++++++++
 .../block-library/src/query/edit/index.js     |  1 +
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
index d36bc4ae80aa16..b39aa070c529e3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -67,6 +68,7 @@ const SetupContent = ( {
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
 						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
@@ -74,7 +76,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
 		</div>
 	);
 }
@@ -139,6 +146,7 @@ const BlockPatternSetup = ( {
 	filterPatternsFn,
 	onBlockPatternSelect,
 	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
@@ -165,6 +173,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }
diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 79f5868176608e..c1b85f511d9514 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -7,6 +7,8 @@
 	border-radius: $radius-block-ui;
 
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -29,10 +31,33 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+					// Windows High Contrast mode will show this outline, but not the box-shadow.
+					outline: 2px solid transparent;
+				}
+				&:hover .block-editor-block-pattern-setup-list__item-title,
+				&:focus .block-editor-block-pattern-setup-list__item-title {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
 
+				.block-editor-block-pattern-setup-list__item-title {
+					padding-top: $grid-unit-10;
+					font-size: 12px;
+					text-align: center;
+					cursor: pointer;
+				}
+
 				.block-editor-block-preview__container {
 					min-height: 100px;
 					border-radius: $radius-block-ui;
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index 07c841e607c216..e9b449c694b9c3 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -92,6 +92,7 @@ function PatternSelectionModal( {
 					blockName={ blockNameForPatterns }
 					clientId={ clientId }
 					onBlockPatternSelect={ onBlockPatternSelect }
+					showTitles={ true }
 				/>
 			</BlockContextProvider>
 		</Modal>

From a16ec512da6817dc90f2083cb2d0754560b11d1d Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Wed, 21 Dec 2022 10:34:02 +0100
Subject: [PATCH 171/209] Block Variation Picker: adds support to declarated
 icon with src (#46373)

* Block Variation Picker: adds support to declarated icon with src

* improve guard
---
 .../src/components/block-variation-picker/index.js          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 27e214ec39bb07..6fbad1aab612d3 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -43,7 +43,11 @@ function BlockVariationPicker( {
 					<li key={ variation.name }>
 						<Button
 							variant="secondary"
-							icon={ variation.icon }
+							icon={
+								variation.icon && variation.icon.src
+									? variation.icon.src
+									: variation.icon
+							}
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"

From c0664304d2bc02dff39f4e841c74a4cc2c8066fa Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 21 Dec 2022 19:37:13 +0900
Subject: [PATCH 172/209] Storybook: Fix crash when `parameters` is undefined
 (#46670)

---
 storybook/webpack/source-link-loader.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/storybook/webpack/source-link-loader.js b/storybook/webpack/source-link-loader.js
index d9501aa737dad3..702e2882916f2d 100644
--- a/storybook/webpack/source-link-loader.js
+++ b/storybook/webpack/source-link-loader.js
@@ -46,7 +46,8 @@ function alterParameters( properties, componentPath ) {
 
 	if ( ! parameters ) {
 		parameters = babel.types.objectProperty(
-			babel.types.identifier( 'parameters' )
+			babel.types.identifier( 'parameters' ),
+			babel.types.objectExpression( [] )
 		);
 		properties.push( parameters );
 	}

From 4cae3adbef3eaae7eb0867fe5fbe2b61861a6ada Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 21 Dec 2022 10:55:50 +0000
Subject: [PATCH 173/209] Add: Template types to the patterns API. (#45814)

---
 .../block-api/block-patterns.md               |   1 +
 lib/compat/wordpress-6.2/block-patterns.php   |   3 +-
 ...erg-rest-block-patterns-controller-6-2.php | 122 ++++++++++++++++++
 lib/compat/wordpress-6.2/rest-api.php         |  12 ++
 ...rg-rest-block-patterns-controller-test.php |  31 ++++-
 5 files changed, 161 insertions(+), 8 deletions(-)

diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md
index 12fac7b479361a..2d387630ea1176 100644
--- a/docs/reference-guides/block-api/block-patterns.md
+++ b/docs/reference-guides/block-api/block-patterns.md
@@ -34,6 +34,7 @@ The properties available for block patterns are:
 -   `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.
 -   `blockTypes` (optional): An array of block types that the pattern is intended to be used with. Each value needs to be the declared block's `name`.
 -   `postTypes` (optional): An array of post types that the pattern is restricted to be used with. The pattern will only be available when editing one of the post types passed on the array, for all the other post types the pattern is not available at all.
+-   `templateTypes` (optional): An array of template types where the pattern makes sense e.g: '404' if the pattern is for a 404 page, single-post if the pattern is for showing a single post.
 -   `inserter` (optional): By default, all patterns will appear in the inserter. To hide a pattern so that it can only be inserted programmatically, set the `inserter` to `false`.
 
 The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
index 1e529faf963210..13d9af96220494 100644
--- a/lib/compat/wordpress-6.2/block-patterns.php
+++ b/lib/compat/wordpress-6.2/block-patterns.php
@@ -225,6 +225,7 @@ function gutenberg_register_theme_block_patterns() {
 		'blockTypes'    => 'Block Types',
 		'postTypes'     => 'Post Types',
 		'inserter'      => 'Inserter',
+		'templateTypes' => 'Template Types',
 	);
 
 	/*
@@ -294,7 +295,7 @@ function gutenberg_register_theme_block_patterns() {
 					}
 
 					// For properties of type array, parse data as comma-separated.
-					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes' ) as $property ) {
+					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes', 'templateTypes' ) as $property ) {
 						if ( ! empty( $pattern_data[ $property ] ) ) {
 							$pattern_data[ $property ] = array_filter(
 								preg_split(
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
index d34160edb2af0b..604818fcd30a70 100644
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
@@ -34,6 +34,128 @@ class Gutenberg_REST_Block_Patterns_Controller_6_2 extends Gutenberg_REST_Block_
 		'query'   => 'posts',
 	);
 
+	/**
+	 * Prepare a raw block pattern before it gets output in a REST API response.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param array           $item    Raw pattern as registered, before any changes.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$fields = $this->get_fields_for_response( $request );
+		$keys   = array(
+			'name'          => 'name',
+			'title'         => 'title',
+			'description'   => 'description',
+			'viewportWidth' => 'viewport_width',
+			'blockTypes'    => 'block_types',
+			'postTypes'     => 'post_types',
+			'categories'    => 'categories',
+			'keywords'      => 'keywords',
+			'content'       => 'content',
+			'inserter'      => 'inserter',
+			'templateTypes' => 'template_types',
+		);
+		$data   = array();
+		foreach ( $keys as $item_key => $rest_key ) {
+			if ( isset( $item[ $item_key ] ) && rest_is_field_included( $rest_key, $fields ) ) {
+				$data[ $rest_key ] = $item[ $item_key ];
+			}
+		}
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Retrieves the block pattern schema, conforming to JSON Schema.
+	 *
+	 * @since 6.0.0
+	 * @since 6.1.0 Added `post_types` property.
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		$schema = array(
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => 'block-pattern',
+			'type'       => 'object',
+			'properties' => array(
+				'name'           => array(
+					'description' => __( 'The pattern name.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'title'          => array(
+					'description' => __( 'The pattern title, in human readable format.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'description'    => array(
+					'description' => __( 'The pattern detailed description.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'viewport_width' => array(
+					'description' => __( 'The pattern viewport width for inserter preview.', 'gutenberg' ),
+					'type'        => 'number',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'block_types'    => array(
+					'description' => __( 'Block types that the pattern is intended to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'post_types'     => array(
+					'description' => __( 'An array of post types that the pattern is restricted to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'categories'     => array(
+					'description' => __( 'The pattern category slugs.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'keywords'       => array(
+					'description' => __( 'The pattern keywords.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'template_types' => array(
+					'description' => __( 'An array of template types where the pattern fits.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'content'        => array(
+					'description' => __( 'The pattern content.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'inserter'       => array(
+					'description' => __( 'Determines whether the pattern is visible in inserter.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			),
+		);
+
+		return $this->add_additional_fields_schema( $schema );
+	}
+
 	/**
 	 * Registers the routes for the objects of the controller.
 	 *
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 12f7afda3b4d5d..a557a38e490de1 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -116,3 +116,15 @@ function gutenberg_modify_rest_sidebars_response( $response ) {
 	return $response;
 }
 add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
+
+
+register_block_pattern(
+	'query/template-type-test',
+	array(
+		'title'         => __( 'Template type test', 'gutenberg' ),
+		'templateTypes' => array( '404' ),
+		'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
+							<p class="has-text-align-center has-x-large-font-size">404</p>
+							<!-- /wp:paragraph -->',
+	)
+);
diff --git a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
index 9f9cf60f0572a6..34d5f10970c6c6 100644
--- a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
+++ b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
@@ -67,24 +67,27 @@ public static function wpSetUpBeforeClass( $factory ) {
 				'categories'    => array( 'test' ),
 				'viewportWidth' => 1440,
 				'content'       => '<!-- wp:heading {"level":1} --><h1>One</h1><!-- /wp:heading -->',
+				'templateTypes' => array( 'page' ),
 			)
 		);
 
 		$test_registry->register(
 			'test/two',
 			array(
-				'title'      => 'Pattern Two',
-				'categories' => array( 'test' ),
-				'content'    => '<!-- wp:paragraph --><p>Two</p><!-- /wp:paragraph -->',
+				'title'         => 'Pattern Two',
+				'categories'    => array( 'test' ),
+				'content'       => '<!-- wp:paragraph --><p>Two</p><!-- /wp:paragraph -->',
+				'templateTypes' => array( 'single' ),
 			)
 		);
 
 		$test_registry->register(
 			'test/three',
 			array(
-				'title'      => 'Pattern Three',
-				'categories' => array( 'test', 'buttons', 'query' ),
-				'content'    => '<!-- wp:paragraph --><p>Three</p><!-- /wp:paragraph -->',
+				'title'         => 'Pattern Three',
+				'categories'    => array( 'test', 'buttons', 'query' ),
+				'content'       => '<!-- wp:paragraph --><p>Three</p><!-- /wp:paragraph -->',
+				'templateTypes' => array( '404' ),
 			)
 		);
 	}
@@ -147,7 +150,21 @@ public function test_register_routes() {
 		$this->markTestIncomplete();
 	}
 	public function test_get_items() {
-		$this->markTestIncomplete();
+		wp_set_current_user( self::$admin_id );
+
+		$expected_names  = array( 'test/one', 'test/two', 'test/three' );
+		$expected_fields = array( 'name', 'content', 'template_types' );
+
+		$request            = new WP_REST_Request( 'GET', '/wp/v2/block-patterns/patterns' );
+		$request['_fields'] = 'name,content,template_types';
+		$response           = rest_get_server()->dispatch( $request );
+		$data               = $response->get_data();
+
+		$this->assertCount( count( $expected_names ), $data );
+		foreach ( $data as $idx => $item ) {
+			$this->assertEquals( $expected_names[ $idx ], $item['name'] );
+			$this->assertEquals( $expected_fields, array_keys( $item ) );
+		}
 	}
 	public function test_context_param() {
 		$this->markTestIncomplete();

From 2768895ed63fdc582cd9b6442239124fb9f5c0d2 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Wed, 21 Dec 2022 13:48:33 +0200
Subject: [PATCH 174/209] Remove leftover pattern (#46701)

---
 lib/compat/wordpress-6.2/rest-api.php | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index a557a38e490de1..12f7afda3b4d5d 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -116,15 +116,3 @@ function gutenberg_modify_rest_sidebars_response( $response ) {
 	return $response;
 }
 add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
-
-
-register_block_pattern(
-	'query/template-type-test',
-	array(
-		'title'         => __( 'Template type test', 'gutenberg' ),
-		'templateTypes' => array( '404' ),
-		'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
-							<p class="has-text-align-center has-x-large-font-size">404</p>
-							<!-- /wp:paragraph -->',
-	)
-);

From 79f6e5fe0ed7dd837f81b0b901a267bc507ab191 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 21 Dec 2022 05:59:00 -0600
Subject: [PATCH 175/209] Refactor Dropdown component to TypeScript (#45787)

* Refactor Dropdown component to TypeScript

* Correct the text of fail()

* Rename RenderProps, as those have a different meaning

* Rename EmbeddedComponentProps to CallbackProps

* Fix failed unit test

* Correct the text to search for

* Correct the popoverProps property

* Simplify the type of popoverProps

* Add types to story exports

* Revert changes to index.native.js

* Delete index.native.tsx

* Use the CallbackProps from types.ts

* Pass parameters to stories so there's not a TypeError

* Reference the DropdownProps instead of definitin the props again

* Move a type import to the other type imports

* Change the Dropdown to accept a forwarded ref

Might be the wrong approach.

* Don't export CallbackProps

* Simplify popoverProps

* Add a CHANGELOG entry

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/index.tsx

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/stories/index.tsx

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Apply Lena Morita's suggestion to let TS infer the return type

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/index.tsx

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Define className and style, instead of referencing WordPressComponentProps

* Remove expandOnMobile and headerTitle in stories

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/types.ts

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/types.ts

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Apply Lena Morita's suggestion use typeof Popover

* Commit Lena Morita's suggestion: Update packages/components/src/dropdown/README.md

Co-authored-by: Lena Morita <lena@jaguchi.com>

Co-authored-by: Lena Morita <lena@jaguchi.com>
---
 packages/components/CHANGELOG.md              |   1 +
 .../border-control-dropdown/component.tsx     |  11 +-
 .../components/src/color-palette/index.tsx    |   3 +-
 .../components/src/color-palette/types.ts     |  13 +--
 packages/components/src/dropdown/README.md    |  87 +++++++-------
 .../src/dropdown/{index.js => index.tsx}      |  70 +++++++++---
 .../dropdown/stories/{index.js => index.tsx}  |  29 +++--
 .../src/dropdown/test/{index.js => index.tsx} |  16 ++-
 packages/components/src/dropdown/types.ts     | 107 ++++++++++++++++++
 9 files changed, 246 insertions(+), 91 deletions(-)
 rename packages/components/src/dropdown/{index.js => index.tsx} (66%)
 rename packages/components/src/dropdown/stories/{index.js => index.tsx} (75%)
 rename packages/components/src/dropdown/test/{index.js => index.tsx} (77%)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 878f70a904aa3b..2c17553b489bcb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -50,6 +50,7 @@
 -   `TabPanel`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   `BottomSheetPickerCell`: Refactor away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
 -   Refactor global styles context away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `Dropdown`: Convert to TypeScript ([#45787](https://github.com/WordPress/gutenberg/pull/45787)).
 
 ### Documentation
 
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 20fe8d41f8142e..146ee37f93ccfa 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -25,9 +25,9 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type { ColorObject, PaletteObject } from '../../color-palette/types';
+import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
-const noop = () => undefined;
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
 	colors: ColorProps[ 'colors' ] | undefined,
@@ -165,7 +165,9 @@ const BorderControlDropdown = (
 		? 'bottom left'
 		: undefined;
 
-	const renderToggle = ( { onToggle = noop } ) => (
+	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
+		onToggle,
+	} ) => (
 		<Button
 			onClick={ onToggle }
 			variant="tertiary"
@@ -183,8 +185,9 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	// TODO: update types once Dropdown component is refactored to TypeScript.
-	const renderContent = ( { onClose }: { onClose: () => void } ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
+		onClose,
+	} ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 5146e3c8581988..a2d2b530b1ebe2 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -32,6 +32,7 @@ import type {
 	SinglePaletteProps,
 } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { DropdownProps } from '../dropdown/types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -134,7 +135,7 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 }: CustomColorPickerDropdownProps ) {
-	const popoverProps = useMemo(
+	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
 			...( isRenderedInSidebar
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
index 2b1be5a35bb678..4fc3192184f34b 100644
--- a/packages/components/src/color-palette/types.ts
+++ b/packages/components/src/color-palette/types.ts
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
-import type { PopoverProps } from '../popover/types';
+import type { DropdownProps } from '../dropdown/types';
 
 export type ColorObject = {
 	name: string;
@@ -37,15 +37,8 @@ export type MultiplePalettesProps = PaletteProps & {
 	colors: PaletteObject[];
 };
 
-// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
-export type CustomColorPickerDropdownProps = {
+export type CustomColorPickerDropdownProps = DropdownProps & {
 	isRenderedInSidebar: boolean;
-	renderContent: () => ReactNode;
-	popoverProps?: Omit< PopoverProps, 'children' >;
-	renderToggle: ( props: {
-		isOpen: boolean;
-		onToggle: MouseEventHandler< HTMLButtonElement >;
-	} ) => ReactNode;
 };
 
 export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md
index c3ce8f42818fbe..62482f398e26ca 100644
--- a/packages/components/src/dropdown/README.md
+++ b/packages/components/src/dropdown/README.md
@@ -32,96 +32,91 @@ const MyDropdown = () => (
 
 The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
 
-### className
+### `className`: `string`
 
 className of the global container
 
--   Type: `String`
 -   Required: No
 
-### contentClassName
+### `contentClassName`: `string`
 
 If you want to target the dropdown menu for styling purposes, you need to provide a contentClassName because it's not being rendered as a child of the container node.
 
--   Type: `String`
 -   Required: No
 
-### position
+### `expandOnMobile`: `boolean`
 
-The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
+Opt-in prop to show popovers fullscreen on mobile.
 
--   Type: `String`
 -   Required: No
--   Default: `"top center"`
-
-### renderToggle
-
-A callback invoked to render the Dropdown Toggle Button.
-
--   Type: `Function`
--   Required: Yes
+-   Default: `false`
 
-The first argument of the callback is an object containing the following properties:
+### `focusOnMount`: `'firstElement' | boolean`
 
--   `isOpen`: whether the dropdown menu is opened or not
--   `onToggle`: A function switching the dropdown menu's state from open to closed and vice versa
--   `onClose`: A function that closes the menu if invoked
+By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting this prop to `"firstElement"`.
 
-### renderContent
+Specifying a `true` value will focus the container instead.
 
-A callback invoked to render the content of the dropdown menu. Its first argument is the same as the `renderToggle` prop.
+Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
 
--   Type: `Function`
--   Required: Yes
+-   Required: No
+-   Default: `"firstElement"`
 
-### expandOnMobile
+### `headerTitle`: `string`
 
-Opt-in prop to show popovers fullscreen on mobile.
+Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
-### headerTitle
+### `onClose`: `() => void`
 
-Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
+A callback invoked when the popover should be closed.
 
--   Type: `String`
 -   Required: No
 
-### focusOnMount
-
-By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting this prop to `"firstElement"`.
+### `onToggle`: `( willOpen: boolean ) => void`
 
-Specifying a `true` value will focus the container instead.
+A callback invoked when the state of the popover changes from open to closed and vice versa.
 
-Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
+The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
 
--   Type: `'firstElement' | boolean`
 -   Required: No
--   Default: `"firstElement"`
 
-### popoverProps
+### `popoverProps`: `WordPressComponentProps< Omit< PopoverProps, 'children' > 'div', false	>`
 
 Properties of popoverProps object will be passed as props to the `Popover` component.
 
 Use this object to access properties/features of the `Popover` component that are not already exposed in the `Dropdown` component, e.g.: the ability to have the popover without an arrow.
 
--   Type: `Object`
 -   Required: No
 
-### onClose
+### `position`: `PopoverProps[ 'position' ]`
 
-A callback invoked when the popover should be closed.
+The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
 
--   Type: `Function`
 -   Required: No
+-   Default: `"top center"`
 
-### onToggle
+### `renderContent`: `( props: CallbackProps ) => ReactNode`
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+A callback invoked to render the content of the dropdown menu.
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+- `isOpen`: whether the dropdown menu is opened or not
+- `onToggle`: A function switching the dropdown menu's state from open to closed and vice versa
+- `onClose`: A function that closes the menu if invoked
+
+-   Required: Yes
+
+### `renderToggle`: `( props: CallbackProps ) => ReactNode`
+
+A callback invoked to render the Dropdown Toggle Button.
+
+Its props are the same as the `renderContent` props.
+
+-   Required: Yes
+
+### `style`: `React.CSSProperties`
+
+The style of the global container
 
--   Type: `Function`
 -   Required: No
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.tsx
similarity index 66%
rename from packages/components/src/dropdown/index.js
rename to packages/components/src/dropdown/index.tsx
index 0092256a61225c..f048c6dfcad052 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.tsx
@@ -1,35 +1,39 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Popover from '../popover';
+import type { DropdownProps } from './types';
 
-function useObservableState( initialState, onStateChange ) {
+function useObservableState(
+	initialState: boolean,
+	onStateChange?: ( newState: boolean ) => void
+) {
 	const [ state, setState ] = useState( initialState );
 	return [
 		state,
-		( value ) => {
+		( value: boolean ) => {
 			setState( value );
 			if ( onStateChange ) {
 				onStateChange( value );
 			}
 		},
-	];
+	] as const;
 }
 
-export default function Dropdown( props ) {
-	const {
+function UnforwardedDropdown(
+	{
 		renderContent,
 		renderToggle,
 		className,
@@ -42,12 +46,14 @@ export default function Dropdown( props ) {
 		onClose,
 		onToggle,
 		style,
-	} = props;
+	}: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
-		useState( null );
-	const containerRef = useRef();
+		useState< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 
 	useEffect(
@@ -70,8 +76,13 @@ export default function Dropdown( props ) {
 	 * case a dialog has opened, allowing focus to return when it's dismissed.
 	 */
 	function closeIfFocusOutside() {
+		if ( ! containerRef.current ) {
+			return;
+		}
+
 		const { ownerDocument } = containerRef.current;
-		const dialog = ownerDocument.activeElement.closest( '[role="dialog"]' );
+		const dialog =
+			ownerDocument?.activeElement?.closest( '[role="dialog"]' );
 		if (
 			! containerRef.current.contains( ownerDocument.activeElement ) &&
 			( ! dialog || dialog.contains( containerRef.current ) )
@@ -99,11 +110,15 @@ export default function Dropdown( props ) {
 	return (
 		<div
 			className={ classnames( 'components-dropdown', className ) }
-			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
+			ref={ useMergeRefs( [
+				containerRef,
+				forwardedRef,
+				setFallbackPopoverAnchor,
+			] ) }
 			// Some UAs focus the closest focusable parent when the toggle is
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
-			tabIndex="-1"
+			tabIndex={ -1 }
 			style={ style }
 		>
 			{ renderToggle( args ) }
@@ -136,3 +151,32 @@ export default function Dropdown( props ) {
 		</div>
 	);
 }
+
+/**
+ * Renders a button that opens a floating content modal when clicked.
+ *
+ * ```jsx
+ * import { Button, Dropdown } from '@wordpress/components';
+ *
+ * const MyDropdown = () => (
+ *   <Dropdown
+ *     className="my-container-class-name"
+ *     contentClassName="my-popover-content-classname"
+ *     position="bottom right"
+ *     renderToggle={ ( { isOpen, onToggle } ) => (
+ *       <Button
+ *         variant="primary"
+ *         onClick={ onToggle }
+ *         aria-expanded={ isOpen }
+ *       >
+ *         Toggle Popover!
+ *       </Button>
+ *     ) }
+ *     renderContent={ () => <div>This is the content of the popover.</div> }
+ *   />
+ * );
+ * ```
+ */
+export const Dropdown = forwardRef( UnforwardedDropdown );
+
+export default Dropdown;
diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.tsx
similarity index 75%
rename from packages/components/src/dropdown/stories/index.js
rename to packages/components/src/dropdown/stories/index.tsx
index 191b03bb07d8be..ff155b6c42b5b9 100644
--- a/packages/components/src/dropdown/stories/index.js
+++ b/packages/components/src/dropdown/stories/index.tsx
@@ -1,29 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import Dropdown from '../';
+import Dropdown from '..';
 import Button from '../../button';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
-export default {
+const meta: ComponentMeta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
 	subcomponents: { DropdownContentWrapper },
 	argTypes: {
-		expandOnMobile: { control: { type: 'boolean' } },
 		focusOnMount: {
 			control: {
 				type: 'radio',
 				options: [ 'firstElement', true, false ],
 			},
 		},
-		headerTitle: { control: { type: 'text' } },
 		renderContent: { control: { type: null } },
 		renderToggle: { control: { type: null } },
 	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+	},
 };
+export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -31,7 +40,7 @@ const Template = ( args ) => {
 	);
 };
 
-export const Default = Template.bind( {} );
+export const Default: ComponentStory< typeof Dropdown > = Template.bind( {} );
 Default.args = {
 	position: 'bottom right',
 	renderToggle: ( { isOpen, onToggle } ) => (
@@ -46,7 +55,9 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding = Template.bind( {} );
+export const WithMorePadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -61,7 +72,9 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding = Template.bind( {} );
+export const WithNoPadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (
diff --git a/packages/components/src/dropdown/test/index.js b/packages/components/src/dropdown/test/index.tsx
similarity index 77%
rename from packages/components/src/dropdown/test/index.js
rename to packages/components/src/dropdown/test/index.tsx
index b4d4f81fde8d1a..32307aceea0617 100644
--- a/packages/components/src/dropdown/test/index.js
+++ b/packages/components/src/dropdown/test/index.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import Dropdown from '../';
+import Dropdown from '..';
 
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {
@@ -24,14 +24,13 @@ describe( 'Dropdown', () => {
 					</button>
 				) }
 				renderContent={ () => <span>test</span> }
-				popoverProps={ { 'data-testid': 'popover' } }
 			/>
 		);
 
 		const button = screen.getByRole( 'button', { expanded: false } );
 
 		expect( button ).toBeVisible();
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 
 		await user.click( button );
 
@@ -40,7 +39,7 @@ describe( 'Dropdown', () => {
 		).toBeVisible();
 
 		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+			expect( screen.queryByText( 'test' ) ).toBeVisible()
 		);
 
 		// Cleanup remaining effects, like the delayed popover positioning
@@ -68,21 +67,20 @@ describe( 'Dropdown', () => {
 						close
 					</button>,
 				] }
-				renderContent={ () => null }
-				popoverProps={ { 'data-testid': 'popover' } }
+				renderContent={ () => <span>test</span> }
 			/>
 		);
 
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 
 		await user.click( screen.getByRole( 'button', { name: 'Toggle' } ) );
 
 		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+			expect( screen.getByText( 'test' ) ).toBeVisible()
 		);
 
 		await user.click( screen.getByRole( 'button', { name: 'close' } ) );
 
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 	} );
 } );
diff --git a/packages/components/src/dropdown/types.ts b/packages/components/src/dropdown/types.ts
index 573e0b5ee7e017..822c9d4f2bc436 100644
--- a/packages/components/src/dropdown/types.ts
+++ b/packages/components/src/dropdown/types.ts
@@ -1,3 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type Popover from '../popover';
+import type { PopoverProps } from '../popover/types';
+
+type CallbackProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
 export type DropdownContentWrapperProps = {
 	/**
 	 * Amount of padding to apply on the dropdown content.
@@ -6,3 +23,93 @@ export type DropdownContentWrapperProps = {
 	 */
 	paddingSize?: 'none' | 'small' | 'medium';
 };
+
+export type DropdownProps = {
+	/**
+	 * The className of the global container.
+	 */
+	className?: string;
+	/**
+	 * If you want to target the dropdown menu for styling purposes,
+	 * you need to provide a contentClassName because it's not being rendered
+	 * as a child of the container node.
+	 */
+	contentClassName?: string;
+	/**
+	 * Opt-in prop to show popovers fullscreen on mobile.
+	 *
+	 * @default false
+	 */
+	expandOnMobile?: boolean;
+	/**
+	 * By default, the first tabbable element in the popover will receive focus
+	 * when it mounts. This is the same as setting this prop to "firstElement".
+	 * Specifying a true value will focus the container instead.
+	 * Specifying a false value disables the focus handling entirely
+	 * (this should only be done when an appropriately accessible
+	 * substitute behavior exists).
+	 *
+	 * @default 'firstElement'
+	 */
+	focusOnMount?: 'firstElement' | boolean;
+	/**
+	 * Set this to customize the text that is shown in the dropdown's header
+	 * when it is fullscreen on mobile.
+	 */
+	headerTitle?: string;
+	/**
+	 * A callback invoked when the popover should be closed.
+	 */
+	onClose?: () => void;
+	/**
+	 * A callback invoked when the state of the popover changes
+	 * from open to closed and vice versa.
+	 * The callback receives a boolean as a parameter.
+	 * If true, the popover will open.
+	 * If false, the popover will close.
+	 */
+	onToggle?: ( willOpen: boolean ) => void;
+	/**
+	 * Properties of popoverProps object will be passed as props
+	 * to the Popover component.
+	 * Use this object to access properties/features
+	 * of the Popover component that are not already exposed
+	 * in the Dropdown component,
+	 * e.g.: the ability to have the popover without an arrow.
+	 */
+	popoverProps?: Omit<
+		ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
+	/**
+	 * The direction in which the popover should open
+	 * relative to its parent node.
+	 * Specify a y- and an x-axis as a space-separated string.
+	 * Supports "top", "bottom" y-axis,
+	 * and "left", "center", "right" x-axis.
+	 *
+	 * @default 'top center'
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * A callback invoked to render the content of the dropdown menu.
+	 * Its first argument is the same as the renderToggle prop.
+	 */
+	renderContent: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * A callback invoked to render the Dropdown Toggle Button.
+	 *
+	 * The first argument of the callback is an object
+	 * containing the following properties:
+	 *
+	 * - isOpen: whether the dropdown menu is opened or not
+	 * - onToggle: A function switching the dropdown menu's state
+	 * from open to closed and vice versa
+	 * - onClose: A function that closes the menu if invoked
+	 */
+	renderToggle: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * The style of the global container.
+	 */
+	style?: CSSProperties;
+};

From a03158d8ffd8fa9170925bacbe7ead242925fdb3 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Wed, 21 Dec 2022 13:17:52 +0100
Subject: [PATCH 176/209] Move wordcount to the top of the outline (#46648)

* Move wordcount to the top of the outline

* Fix box-sizing issue.
---
 .../secondary-sidebar/list-view-outline.js    | 24 +++++++++----------
 .../components/secondary-sidebar/style.scss   | 23 +++++++++---------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
index ed15a7eaa5e596..6d27767bdfd0bd 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
@@ -65,18 +65,6 @@ export default function ListViewOutline() {
 	}, [] );
 	return (
 		<>
-			{ headingCount > 0 ? (
-				<DocumentOutline />
-			) : (
-				<div className="edit-post-editor__list-view-empty-headings">
-					<EmptyOutlineIllustration />
-					<p>
-						{ __(
-							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
-						) }
-					</p>
-				</div>
-			) }
 			<div className="edit-post-editor__list-view-overview">
 				<div>
 					<Text>{ __( 'Characters:' ) }</Text>
@@ -93,6 +81,18 @@ export default function ListViewOutline() {
 					<TimeToRead />
 				</div>
 			</div>
+			{ headingCount > 0 ? (
+				<DocumentOutline />
+			) : (
+				<div className="edit-post-editor__list-view-empty-headings">
+					<EmptyOutlineIllustration />
+					<p>
+						{ __(
+							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+						) }
+					</p>
+				</div>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
index 01b17beb4c8b82..50661aa50c30ee 100644
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -76,24 +76,23 @@
 }
 
 .edit-post-editor__list-view-overview {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
+	padding: $grid-unit-20;
+
 	& > div > span:first-child {
 		// Width of the text information fields.
 		width: 90px;
 		display: inline-block;
 	}
-	border-top: $border-width solid $gray-300;
-	width: calc(100% - #{ $grid-unit-40 });
-	padding: $grid-unit-20;
-	& > div {
-		padding: 0 0 $grid-unit-10;
-		& > span {
-			font-size: $helptext-font-size;
-			line-height: $default-line-height;
-			color: $gray-700;
-		}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
 	}
-	// Height of the overview container.
-	height: 72px;
 }
 
 .edit-post-editor__list-view-container {

From c05d7c5535a38ae18661c8c7e99c1aec72720722 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Dec 2022 22:52:22 +0900
Subject: [PATCH 177/209] Doc: Fixed missing link to Block Styles page (#46695)

---
 docs/README.md                                              | 2 +-
 docs/how-to-guides/javascript/extending-the-block-editor.md | 2 +-
 docs/reference-guides/block-api/block-metadata.md           | 2 +-
 docs/reference-guides/block-api/block-registration.md       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 1fe569f7356cbe..4d5343a76141e9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -29,7 +29,7 @@ The Editor offers rich new value to users with visual, drag-and-drop creation to
 Whether you want to extend the functionality of the block editor, or create a plugin based on it, [see the developer documentation](/docs/how-to-guides/README.md) to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.
 
 -   [Gutenberg Architecture](/docs/explanations/architecture/README.md)
--   [Block Styles](/docs/reference-guides/filters/block-filters.md#block-styles)
+-   [Block Styles](/docs/reference-guides/block-api/block-styles.md)
 -   [Creating Block Patterns](/docs/reference-guides/block-api/block-patterns.md)
 -   [Theming for the Block Editor](/docs/how-to-guides/themes/README.md)
 -   [Block API Reference](/docs/reference-guides/block-api/README.md)
diff --git a/docs/how-to-guides/javascript/extending-the-block-editor.md b/docs/how-to-guides/javascript/extending-the-block-editor.md
index 75442628f83ac5..5944b9208407f5 100644
--- a/docs/how-to-guides/javascript/extending-the-block-editor.md
+++ b/docs/how-to-guides/javascript/extending-the-block-editor.md
@@ -1,6 +1,6 @@
 # Extending the Block Editor
 
-Let's look at using the [Block Style example](/docs/reference-guides/filters/block-filters.md#block-styles) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
+Let's look at using the [Block Style example](/docs/reference-guides/block-api/block-styles.md) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
 
 Replace the existing `console.log()` code in your `myguten.js` file with:
 
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index 4acb0f914e0379..d78050d79a9a1e 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -408,7 +408,7 @@ It contains as set of options to control features used in the editor. See the [t
 
 Block styles can be used to provide alternative styles to block. It works by adding a class name to the block's wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 ### Example
 
diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 97077cb7efdfaa..bae50ac67a0fd3 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -145,7 +145,7 @@ styles: [
 ],
 ```
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 #### attributes (optional)
 

From 756f382ef27e1a477717897f2c731dc7f97111ea Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Dec 2022 23:47:53 +0900
Subject: [PATCH 178/209] Fix: missing links in block.json schema (#46694)

---
 schemas/json/block.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/schemas/json/block.json b/schemas/json/block.json
index 3a3726010d0b67..ae461ba4cabf3f 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -183,7 +183,7 @@
 						},
 						"meta": {
 							"type": "string",
-							"description": "Although attributes may be obtained from a post’s meta, meta attribute sources are considered deprecated; EntityProvider and related hook APIs should be used instead, as shown in the Create Meta Block how-to here:\n\nhttps://developer.wordpress.org/block-editor/how-to-guides/metabox/meta-block-3-add/"
+							"description": "Although attributes may be obtained from a post’s meta, meta attribute sources are considered deprecated; EntityProvider and related hook APIs should be used instead, as shown in the Create Meta Block how-to here:\n\nhttps://developer.wordpress.org/block-editor/how-to-guides/metabox/#step-2-add-meta-block"
 						},
 						"default": {
 							"description": "A block attribute can contain a default value, which will be used if the type and source do not match anything within the block content.\n\nThe value is provided by the default field, and the value should match the expected format of the attribute."
@@ -401,7 +401,7 @@
 		},
 		"styles": {
 			"type": "array",
-			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#block-styles",
+			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles",
 			"items": {
 				"type": "object",
 				"properties": {

From fdf619d373e5645ec735ae0a8c7c494f744ddb0a Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Wed, 21 Dec 2022 17:29:22 +0200
Subject: [PATCH 179/209] Post editor: fix title margin (#46698)

---
 .../specs/editor/various/editor-modes.test.js  | 10 +++-------
 .../src/components/visual-editor/index.js      | 18 +++++++++++++++++-
 test/e2e/specs/editor/blocks/paragraph.spec.js |  4 +---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
index 801919aa9d69bb..de328b87f736d0 100644
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -22,9 +22,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 	it( 'should switch between visual and HTML modes', async () => {
 		// This block should be in "visual" mode by default.
-		let visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		let visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 
 		// Change editing mode from "Visual" to "HTML".
@@ -33,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// Wait for the block to be converted to HTML editing mode.
 		const htmlBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
+			'[data-block] .block-editor-block-list__block-html-textarea'
 		);
 		expect( htmlBlock ).toHaveLength( 1 );
 
@@ -42,9 +40,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit visually' );
 
 		// This block should be in "visual" mode by default.
-		visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 	} );
 
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index ab708d3e87dbf5..682f00be4278d8 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -305,6 +305,17 @@ export default function VisualEditor( { styles } ) {
 		titleRef?.current?.focus();
 	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
 
+	styles = useMemo(
+		() => [
+			...styles,
+			{
+				// We should move this in to future to the body.
+				css: `.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}`,
+			},
+		],
+		[ styles ]
+	);
+
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }
@@ -374,10 +385,15 @@ export default function VisualEditor( { styles } ) {
 						{ ! isTemplateMode && (
 							<div
 								className={ classnames(
+									// This wrapper div should have the same
+									// classes as the block list beneath.
+									'is-root-container',
+									'block-editor-block-list__layout',
 									'edit-post-visual-editor__post-title-wrapper',
 									{
 										'is-focus-mode': isFocusMode,
-									}
+									},
+									blockListLayoutClass
 								) }
 								contentEditable={ false }
 							>
diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index 121b2ed0bb79a9..ecade19a1aaa40 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -29,9 +29,7 @@ test.describe( 'Paragraph', () => {
 		await page.keyboard.type( '1' );
 
 		const firstBlockTagName = await page.evaluate( () => {
-			return document.querySelector(
-				'.block-editor-block-list__layout .wp-block'
-			).tagName;
+			return document.querySelector( '[data-block]' ).tagName;
 		} );
 
 		// The outer element should be a paragraph. Blocks should never have any

From 261e02d5547368bd0f41dd914ad1eb4fda73eaea Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Wed, 21 Dec 2022 16:35:52 +0100
Subject: [PATCH 180/209] Mobile BlockToolbar: improve useSelect for fewer
 rerenders (#46697)

---
 .../components/block-toolbar/index.native.js  | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
index 7ae9f8cbaa4ced..a1726441031b14 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -11,31 +11,28 @@ import UngroupButton from '../ungroup-button';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockToolbar() {
-	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
+	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
 		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
 			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {
-			blockClientIds: selectedBlockClientIds,
-			isValid:
+			isSelected: selectedBlockClientIds.length > 0,
+			isValidAndVisual:
 				selectedBlockClientIds.length === 1
-					? isBlockValid( selectedBlockClientIds[ 0 ] )
-					: null,
-			mode:
-				selectedBlockClientIds.length === 1
-					? getBlockMode( selectedBlockClientIds[ 0 ] )
-					: null,
+					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
+					  getBlockMode( selectedBlockClientIds[ 0 ] ) === 'visual'
+					: false,
 		};
 	}, [] );
 
-	if ( blockClientIds.length === 0 ) {
+	if ( ! isSelected ) {
 		return null;
 	}
 
 	return (
 		<>
-			{ mode === 'visual' && isValid && (
+			{ isValidAndVisual && (
 				<>
 					<UngroupButton />
 					<BlockControls.Slot group="block" />

From cbacc8dab4cdb63c0c1fb6238ac0a0dd0b0fb8f4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 22 Dec 2022 00:38:46 +0900
Subject: [PATCH 181/209] ToolTip: Remove knobs in stories (#46515)

---
 .../components/src/tooltip/stories/index.js   | 146 ++++++++----------
 1 file changed, 68 insertions(+), 78 deletions(-)

diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
index a76b69731b41a6..dc573a189bf930 100644
--- a/packages/components/src/tooltip/stories/index.js
+++ b/packages/components/src/tooltip/stories/index.js
@@ -1,14 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { text, select, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -17,79 +6,80 @@ import Tooltip from '../';
 export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
+	argTypes: {
+		delay: { control: 'number' },
+		position: {
+			control: {
+				type: 'select',
+				options: [
+					'top left',
+					'top center',
+					'top right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				],
+			},
+		},
+		text: { control: 'text' },
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const positionOptions = {
-		'top left': 'top left',
-		'top center ': 'top center',
-		'top right': 'top right',
-		'bottom left': 'bottom left',
-		'bottom center ': 'bottom center',
-		'bottom right': 'bottom right',
-	};
-	const tooltipText = text( 'Text', 'More information' );
-	const position = select( 'Position', positionOptions, 'top center' );
-	const delay = number( 'Delay', 700 );
-	return (
-		<>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: '200px',
-						padding: '20px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Hover for more information
-				</div>
-			</Tooltip>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: 'min-content',
-						padding: '4px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Small target
-				</div>
-			</Tooltip>
-		</>
-	);
+const Template = ( args ) => {
+	return <Tooltip { ...args } />;
 };
 
-const Button = styled.button`
-	margin: 0 10px;
-`;
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'More information',
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: '200px',
+				padding: '20px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Hover for more information
+		</div>
+	),
+};
 
-export const DisabledElement = () => {
-	const [ showMessage, toggleMessage ] = useState( false );
+export const SmallTarget = Template.bind( {} );
+SmallTarget.args = {
+	...Default.args,
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: 'min-content',
+				padding: '4px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Small target
+		</div>
+	),
+};
 
-	return (
-		<>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button onClick={ () => toggleMessage( ! showMessage ) }>
-					Hover me!
-				</Button>
-			</Tooltip>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button
-					disabled
-					onClick={ () => toggleMessage( ! showMessage ) }
-				>
-					Hover me, but I am disabled
-				</Button>
-			</Tooltip>
-			<br />
-			{ showMessage ? <p>Hello World!</p> : null }
-		</>
-	);
+export const DisabledChild = Template.bind( {} );
+DisabledChild.args = {
+	...Default.args,
+	children: (
+		<button
+			disabled
+			onClick={ () =>
+				// eslint-disable-next-line no-alert
+				window.alert( 'This alert should not be triggered' )
+			}
+		>
+			Hover me, but I am disabled
+		</button>
+	),
 };

From efab914d29aed90f342c657c984dce0b06c7351a Mon Sep 17 00:00:00 2001
From: vykes-mac <47489215+vykes-mac@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:58:08 -0500
Subject: [PATCH 182/209] Base Styles: Extract long-content-fade to its own
 file so it can be imported and reused. (#46485)

Co-authored-by: Daniel Bachhuber <daniel.bachhuber@automattic.com>
---
 packages/base-styles/_long-content-fade.scss | 61 +++++++++++++++++++
 packages/base-styles/_mixins.scss            | 64 +-------------------
 2 files changed, 62 insertions(+), 63 deletions(-)
 create mode 100644 packages/base-styles/_long-content-fade.scss

diff --git a/packages/base-styles/_long-content-fade.scss b/packages/base-styles/_long-content-fade.scss
new file mode 100644
index 00000000000000..d33a2aede366df
--- /dev/null
+++ b/packages/base-styles/_long-content-fade.scss
@@ -0,0 +1,61 @@
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+
+@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
+	content: "";
+	display: block;
+	position: absolute;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+
+	@if $z-index {
+		z-index: $z-index;
+	}
+
+	@if $direction == "bottom" {
+		background: linear-gradient(to top, transparent, $color 90%);
+		left: $edge;
+		right: $edge;
+		top: $edge;
+		bottom: calc(100% - $size);
+		width: auto;
+	}
+
+	@if $direction == "top" {
+		background: linear-gradient(to bottom, transparent, $color 90%);
+		top: calc(100% - $size);
+		left: $edge;
+		right: $edge;
+		bottom: $edge;
+		width: auto;
+	}
+
+	@if $direction == "left" {
+		background: linear-gradient(to left, transparent, $color 90%);
+		top: $edge;
+		left: $edge;
+		bottom: $edge;
+		right: auto;
+		width: $size;
+		height: auto;
+	}
+
+	@if $direction == "right" {
+		background: linear-gradient(to right, transparent, $color 90%);
+		top: $edge;
+		bottom: $edge;
+		right: $edge;
+		left: auto;
+		width: $size;
+		height: auto;
+	}
+}
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 9eee5820eba811..630456b5f59892 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,4 +1,5 @@
 @import "./functions";
+@import "./long-content-fade";
 
 /**
  * Breakpoint mixins
@@ -52,69 +53,6 @@
 	}
 }
 
-
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-
-@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
-	content: "";
-	display: block;
-	position: absolute;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	pointer-events: none;
-
-	@if $z-index {
-		z-index: $z-index;
-	}
-
-	@if $direction == "bottom" {
-		background: linear-gradient(to top, transparent, $color 90%);
-		left: $edge;
-		right: $edge;
-		top: $edge;
-		bottom: calc(100% - $size);
-		width: auto;
-	}
-
-	@if $direction == "top" {
-		background: linear-gradient(to bottom, transparent, $color 90%);
-		top: calc(100% - $size);
-		left: $edge;
-		right: $edge;
-		bottom: $edge;
-		width: auto;
-	}
-
-	@if $direction == "left" {
-		background: linear-gradient(to left, transparent, $color 90%);
-		top: $edge;
-		left: $edge;
-		bottom: $edge;
-		right: auto;
-		width: $size;
-		height: auto;
-	}
-
-	@if $direction == "right" {
-		background: linear-gradient(to right, transparent, $color 90%);
-		top: $edge;
-		bottom: $edge;
-		right: $edge;
-		left: auto;
-		width: $size;
-		height: auto;
-	}
-}
-
 /**
  * Focus styles.
  */

From bd0fa7e53ef05c26a24b4e93da75479261d15b9c Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Wed, 21 Dec 2022 18:08:46 +0200
Subject: [PATCH 183/209] ESLint: Enable no-node-accesss rule (#46703)

---
 .eslintrc.js                                  |  3 ---
 .../src/components/block-icon/test/index.js   | 14 +++++++-----
 .../src/components/link-control/test/index.js | 22 +++++++++++++++----
 .../src/base-control/test/index.tsx           |  1 +
 .../src/form-token-field/test/index.tsx       |  1 +
 .../higher-order/with-notices/test/index.js   |  1 +
 .../src/input-control/test/index.js           |  1 +
 packages/components/src/notice/test/index.js  | 11 +++++++---
 .../components/src/placeholder/test/index.tsx |  3 +++
 .../src/text-highlight/test/index.tsx         |  1 +
 .../src/toolbar-group/test/index.js           |  2 ++
 .../src/unit-control/test/index.tsx           |  1 +
 .../test/listener-hooks.js                    |  1 +
 13 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a053236c704d55..46c930ee0fb732 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -372,9 +372,6 @@ module.exports = {
 				'plugin:jest-dom/recommended',
 				'plugin:testing-library/react',
 			],
-			rules: {
-				'testing-library/no-node-access': 'off',
-			},
 		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
index 28d82660c54df8..0524bb6efa7c5e 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -13,6 +13,10 @@ import { image } from '@wordpress/icons';
  */
 import BlockIcon from '../';
 
+function getIconWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
@@ -23,13 +27,13 @@ describe( 'BlockIcon', () => {
 	it( 'renders a span without the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect( container.firstChild ).not.toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).not.toHaveClass( 'has-colors' );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		expect( container.firstChild ).toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'has-colors' );
 	} );
 
 	it( 'supports adding a className to the wrapper', () => {
@@ -37,7 +41,7 @@ describe( 'BlockIcon', () => {
 			<BlockIcon icon={ image } className="foo-bar" />
 		);
 
-		expect( container.firstChild ).toHaveClass( 'foo-bar' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
@@ -51,7 +55,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).not.toHaveAttribute( 'style' );
+		expect( getIconWrapper( container ) ).not.toHaveAttribute( 'style' );
 	} );
 
 	it( 'adds background and foreground styles when colors are enabled', () => {
@@ -66,7 +70,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( getIconWrapper( container ) ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 4c0a95351a666c..86eae7289f4f61 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -376,9 +376,15 @@ describe( 'Searching for a link', () => {
 		const searchResults = await screen.findByRole( 'listbox', {
 			name: /Search results for.*/,
 		} );
-		const searchResultTextHighlightElements = Array.from(
-			searchResults.querySelectorAll( 'button[role="option"] mark' )
-		);
+
+		const searchResultTextHighlightElements = within( searchResults )
+			.getAllByRole( 'option' )
+			// TODO: Change to `getByRole( 'mark' )` when officially supported by
+			// WAI-ARIA 1.3 - see https://w3c.github.io/aria/#mark
+			// eslint-disable-next-line testing-library/no-node-access
+			.map( ( searchResult ) => searchResult.querySelector( 'mark' ) )
+			.flat()
+			.filter( Boolean );
 
 		// Given we're mocking out the results we should always have 4 mark elements.
 		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
@@ -1092,6 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check human readable error notice is perceivable.
 			expect( errorNotice ).toBeVisible();
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( errorNotice.parentElement ).toHaveClass(
 				'block-editor-link-control__search-error'
 			);
@@ -1324,7 +1331,8 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Make sure focus is retained after submission.
-				expect( container ).toContainElement( document.activeElement );
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( container.firstChild ).toHaveFocus();
 
 				expect( currentLink ).toBeVisible();
 				expect(
@@ -1594,11 +1602,13 @@ describe( 'Rich link previews', () => {
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-description'
 		);
@@ -1646,11 +1656,14 @@ describe( 'Rich link previews', () => {
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
 			`.block-editor-link-control__search-item-icon`
 		);
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const fallBackIcon = iconPreview.querySelector( 'svg' );
+		// eslint-disable-next-line testing-library/no-node-access
 		const richIcon = iconPreview.querySelector( 'img' );
 
 		expect( fallBackIcon ).toBeVisible();
@@ -1680,6 +1693,7 @@ describe( 'Rich link previews', () => {
 				expect( linkPreview ).toHaveClass( 'is-rich' )
 			);
 
+			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
 				`.block-editor-link-control__search-item-${ dataItem }`
 			);
diff --git a/packages/components/src/base-control/test/index.tsx b/packages/components/src/base-control/test/index.tsx
index 2ca8f4e92e1c43..949ad83cd83ebc 100644
--- a/packages/components/src/base-control/test/index.tsx
+++ b/packages/components/src/base-control/test/index.tsx
@@ -46,6 +46,7 @@ describe( 'BaseControl', () => {
 
 		expect( textarea ).toHaveAttribute( 'aria-details' );
 		expect(
+			// eslint-disable-next-line testing-library/no-node-access
 			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
 		).toBeVisible();
 	} );
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index ddae1f8c06b894..8a37c2304f8fca 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -486,6 +486,7 @@ describe( 'FormTokenField', () => {
 
 			// This is testing implementation details, but I'm not sure there's
 			// a better way.
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( input.parentElement?.parentElement ).toHaveClass(
 				'test-classname'
 			);
diff --git a/packages/components/src/higher-order/with-notices/test/index.js b/packages/components/src/higher-order/with-notices/test/index.js
index fc529927b2a6f9..a403f3c3a80942 100644
--- a/packages/components/src/higher-order/with-notices/test/index.js
+++ b/packages/components/src/higher-order/with-notices/test/index.js
@@ -101,6 +101,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createErrorNotice( message );
 		} );
+		// eslint-disable-next-line testing-library/no-node-access
 		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
 	} );
 
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index dd3e8dddb957e1..0be4fd28f4f495 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -65,6 +65,7 @@ describe( 'InputControl', () => {
 			const help = screen.getByRole( 'link', { name: 'My help text' } );
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
 			).toBeVisible();
 		} );
diff --git a/packages/components/src/notice/test/index.js b/packages/components/src/notice/test/index.js
index a52fcbf3080944..fd823edcf33902 100644
--- a/packages/components/src/notice/test/index.js
+++ b/packages/components/src/notice/test/index.js
@@ -15,6 +15,10 @@ import Notice from '../index';
 
 jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 
+function getNoticeWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'Notice', () => {
 	beforeEach( () => {
 		speak.mockReset();
@@ -39,15 +43,16 @@ describe( 'Notice', () => {
 
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
 		const { container } = render( <Notice isDismissible={ false } /> );
+		const wrapper = getNoticeWrapper( container );
 
-		expect( container.firstChild ).toHaveClass( 'components-notice' );
-		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
+		expect( wrapper ).toHaveClass( 'components-notice' );
+		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
 	} );
 
 	it( 'should default to info status', () => {
 		const { container } = render( <Notice /> );
 
-		expect( container.firstChild ).toHaveClass( 'is-info' );
+		expect( getNoticeWrapper( container ) ).toHaveClass( 'is-info' );
 	} );
 
 	describe( 'useSpokenMessage', () => {
diff --git a/packages/components/src/placeholder/test/index.tsx b/packages/components/src/placeholder/test/index.tsx
index 9e47d4d016a7fc..e0ebc8ccae563d 100644
--- a/packages/components/src/placeholder/test/index.tsx
+++ b/packages/components/src/placeholder/test/index.tsx
@@ -59,6 +59,7 @@ describe( 'Placeholder', () => {
 
 			// Test for empty label. When the label is empty, the only way to
 			// query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const label = placeholder.querySelector(
 				'.components-placeholder__label'
 			);
@@ -67,6 +68,7 @@ describe( 'Placeholder', () => {
 
 			// Test for non existent instructions. When the instructions is
 			// empty, the only way to query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const placeholderInstructions = placeholder.querySelector(
 				'.components-placeholder__instructions'
 			);
@@ -84,6 +86,7 @@ describe( 'Placeholder', () => {
 
 			const placeholder = getPlaceholder();
 			const icon = within( placeholder ).getByTestId( 'icon' );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( icon.parentNode ).toHaveClass(
 				'components-placeholder__label'
 			);
diff --git a/packages/components/src/text-highlight/test/index.tsx b/packages/components/src/text-highlight/test/index.tsx
index df07d8adcea68e..2d71f3e98b1358 100644
--- a/packages/components/src/text-highlight/test/index.tsx
+++ b/packages/components/src/text-highlight/test/index.tsx
@@ -11,6 +11,7 @@ import TextHighlight from '..';
 const getMarks = ( container: Element ) =>
 	// Use querySelectorAll because the `mark` role is not officially supported
 	// yet. This should be changed to `getByRole` when it is.
+	// eslint-disable-next-line testing-library/no-node-access
 	Array.from( container.querySelectorAll( 'mark' ) );
 
 const defaultText =
diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar-group/test/index.js
index 4f0fbf632080d8..4e521f6f8c4950 100644
--- a/packages/components/src/toolbar-group/test/index.js
+++ b/packages/components/src/toolbar-group/test/index.js
@@ -81,9 +81,11 @@ describe( 'ToolbarGroup', () => {
 			const buttons = screen.getAllByRole( 'button' );
 
 			expect( buttons ).toHaveLength( 2 );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 0 ].parentElement ).not.toHaveClass(
 				'has-left-divider'
 			);
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 1 ].parentElement ).toHaveClass(
 				'has-left-divider'
 			);
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 1703b3ad34db4e..a0e3bf3d99dcac 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -112,6 +112,7 @@ describe( 'UnitControl', () => {
 			);
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
diff --git a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
index d00361662f1850..c263d993982978 100644
--- a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
+++ b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
@@ -152,6 +152,7 @@ describe( 'listener hook tests', () => {
 		const setAttribute = jest.fn();
 		const mockSelector = jest.fn();
 		beforeEach( () => {
+			// eslint-disable-next-line testing-library/no-node-access
 			document.querySelector = mockSelector.mockReturnValue( {
 				setAttribute,
 			} );

From daad46696573b56afc5f5fcb46a76facf199aa2c Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 21 Dec 2022 16:25:39 +0000
Subject: [PATCH 184/209] Navigation Sidebar: Hide behind the experiment flag
 (#46710)

Co-authored-by: Ben Dwyer <ben@escruffian.com>
---
 packages/edit-site/src/components/sidebar-edit-mode/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index 12073a77b56e03..54a1901c83b8da 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavigationMenuSidebar = Fragment;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
 	}
 

From e29d57ee81fe216d3b306226db79e079adc493a4 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 21 Dec 2022 16:33:45 +0000
Subject: [PATCH 185/209] Bump plugin version to 14.8.0

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

diff --git a/gutenberg.php b/gutenberg.php
index cc71a8e6f8ccc8..c887c94a31e24b 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.8.0-rc.2
+ * Version: 14.8.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 8cd517dc6e7ed1..3eb16d1af48cb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.2",
+	"version": "14.8.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 0df50a58feb5d2..ad639305f81290 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.2",
+	"version": "14.8.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 8a71fd857cc7f75347e6471564210bdccb994c65 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 21 Dec 2022 17:21:55 +0000
Subject: [PATCH 186/209] Update Changelog for 14.8.0

---
 changelog.txt | 264 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 261 insertions(+), 3 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index cc3448654bef91..066a25768f2775 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,17 +1,273 @@
 == Changelog ==
 
-= 14.8.0-rc.2 =
+= 14.8.0 =
 
+## Changelog
 
+### Enhancements
 
-## Changelog
+#### Block Library
+- Add a current-menu-ancestor class to navigation items. ([40778](https://github.com/WordPress/gutenberg/pull/40778))
+- Page List Block: Adds a longdash tree to the parent selector. ([46336](https://github.com/WordPress/gutenberg/pull/46336))
+- Page List Block: Hide page list edit button if no pages are available. ([46331](https://github.com/WordPress/gutenberg/pull/46331))
+-  Page List: Add convert panel to Inspector Controls when within Nav block. ([46352](https://github.com/WordPress/gutenberg/pull/46352))
+- Page List: Prevent users from adding inner blocks to Page List. ([46269](https://github.com/WordPress/gutenberg/pull/46269))
+- Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+- Add page list to Link UI transforms in Nav block. ([46426](https://github.com/WordPress/gutenberg/pull/46426))
+- Heading Block: Don't rely on the experimental selector anymore. ([46284](https://github.com/WordPress/gutenberg/pull/46284))
+- Media & Text Block: Create undo history when media width is changed. ([46084](https://github.com/WordPress/gutenberg/pull/46084))
+- Navigation block: Add location->primary to fallback nav creation for classic menus. ([45976](https://github.com/WordPress/gutenberg/pull/45976))
+- Navigation block: Update fallback nav creation to the most recently created menu. ([46286](https://github.com/WordPress/gutenberg/pull/46286))
+- Navigation: Add a 'open list view' button. ([46335](https://github.com/WordPress/gutenberg/pull/46335))
+- Navigation: Removes the header from the navigation list view in the experiment. ([46070](https://github.com/WordPress/gutenberg/pull/46070))
+- Query: Remove color block supports. ([46147](https://github.com/WordPress/gutenberg/pull/46147))
+- Table block: Make `figcaption` styles consistent between editor and front end. ([46172](https://github.com/WordPress/gutenberg/pull/46172))
+- List/quote: Unwrap inner block when pressing Backspace at start. ([45075](https://github.com/WordPress/gutenberg/pull/45075))
+
+#### Inspector Controls
+- Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. ([46346](https://github.com/WordPress/gutenberg/pull/46346))
+- Sidebar Tabs: Use editor settings to override display. ([46321](https://github.com/WordPress/gutenberg/pull/46321))
+- Summary panel: Try improving spacing and grid. ([46267](https://github.com/WordPress/gutenberg/pull/46267))
+
+#### Global Styles
+- Add Style Book to Global Styles. ([45960](https://github.com/WordPress/gutenberg/pull/45960))
+- Add block preview component in global styles. ([45719](https://github.com/WordPress/gutenberg/pull/45719))
+- Move border from layout to own menu. ([45995](https://github.com/WordPress/gutenberg/pull/45995))
+- Add a css style to theme.json to allow setting of custom css strings. ([46255](https://github.com/WordPress/gutenberg/pull/46255))
+- Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- Global styles: Add custom CSS panel to site editor. ([46141](https://github.com/WordPress/gutenberg/pull/46141))
+
+#### Site Editor
+- Reorganize the site editor to introduce Browse Mode. ([44770](https://github.com/WordPress/gutenberg/pull/44770))
+- Allow adding new templates and template parts directly from the sidebar. ([46458](https://github.com/WordPress/gutenberg/pull/46458))
+- Synchronize the sidebar state in the URL. ([46433](https://github.com/WordPress/gutenberg/pull/46433))
+- Try template drill down on the shell sidebar (browse mode). ([45100](https://github.com/WordPress/gutenberg/pull/45100))
+
+#### Block Editor
+- Update the synced block hover styles in Inserter. ([46442](https://github.com/WordPress/gutenberg/pull/46442))
+- Add new selector getLastInsertedBlockClientId. ([46531](https://github.com/WordPress/gutenberg/pull/46531))
+- Block editor: Hide fixed contextual toolbar. ([46298](https://github.com/WordPress/gutenberg/pull/46298))
+- Inserter: Pattern title tooltip. ([46419](https://github.com/WordPress/gutenberg/pull/46419))
+- useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. ([46357](https://github.com/WordPress/gutenberg/pull/46357))
+- Design: Augmented shadows for modals and popovers. ([46228](https://github.com/WordPress/gutenberg/pull/46228))
+
+#### Components
+- Tabs: Try a simpler tab focus style, alt. ([46276](https://github.com/WordPress/gutenberg/pull/46276))
+- BaseControl: Add convenience hook to generate id-related props. ([46170](https://github.com/WordPress/gutenberg/pull/46170))
+- Dashicon: Refactor to TypeScript. ([45924](https://github.com/WordPress/gutenberg/pull/45924))
+- Lighten borders to gray-600. ([46252](https://github.com/WordPress/gutenberg/pull/46252))
+- Popover: Check positioning by adding and testing is-positioned class. ([46429](https://github.com/WordPress/gutenberg/pull/46429))
+
+### Icons
+- Icons: Update the border icon. ([46264](https://github.com/WordPress/gutenberg/pull/46264))
+
+#### Testing
+- Tests: Fix `toBePositionedPopover` matcher message function. ([46239](https://github.com/WordPress/gutenberg/pull/46239))
+
+#### Plugin
+- Update the Gutenberg plugin to require at least the WP 6.0 version. ([46102](https://github.com/WordPress/gutenberg/pull/46102))
+- PHP: Backport changes from core theme resolver. ([46250](https://github.com/WordPress/gutenberg/pull/46250))
+- Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. ([46249](https://github.com/WordPress/gutenberg/pull/46249))
+- Upgrade React packages to v18. ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+#### Themes
+- Empty Theme: Add the `$schema` property in `theme.json` and rename template directories. ([46300](https://github.com/WordPress/gutenberg/pull/46300))
+
+#### Mobile
+- Mobile: Disable Unsupported Block Editor Tests (Android). ([46542](https://github.com/WordPress/gutenberg/pull/46542))
+- Mobile: Inserter - Remove `.done()` usage. ([46460](https://github.com/WordPress/gutenberg/pull/46460))
+- Mobile: Update Heading block end-to-end test. ([46220](https://github.com/WordPress/gutenberg/pull/46220))
+- Mobile: Updates packages to not use Git HTTPS URLs. ([46422](https://github.com/WordPress/gutenberg/pull/46422))
 
 ### Bug Fixes
 
+#### Block Library
+- Fix Nav Submenu block Link UI text control. ([46243](https://github.com/WordPress/gutenberg/pull/46243))
+- Fix auto Nav menu creation due to page list inner blocks. ([46223](https://github.com/WordPress/gutenberg/pull/46223))
+- Handle innerContent too when removing innerBlocks. ([46377](https://github.com/WordPress/gutenberg/pull/46377))
+- Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. ([46497](https://github.com/WordPress/gutenberg/pull/46497))
+- Navigation Block: Add social link singular to list of blocks to be allowed. ([46374](https://github.com/WordPress/gutenberg/pull/46374))
+- Navigation Block: Fixes adding a submenu. ([46364](https://github.com/WordPress/gutenberg/pull/46364))
+- Navigation Block: Prevent circular references in navigation block rendering. ([46387](https://github.com/WordPress/gutenberg/pull/46387))
+- Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. ([46279](https://github.com/WordPress/gutenberg/pull/46279))
+- Navigation link: Use stripHTML. ([46317](https://github.com/WordPress/gutenberg/pull/46317))
+- Page List Block: Fix error loading page list parent options. ([46327](https://github.com/WordPress/gutenberg/pull/46327))
+- Query Loop Block: Add migration of colors to v2 deprecation. ([46522](https://github.com/WordPress/gutenberg/pull/46522))
+- Site Logo: Correctly set the image's natural height and width. ([46214](https://github.com/WordPress/gutenberg/pull/46214))
+- Strip markup from link label data in inspector. ([46171](https://github.com/WordPress/gutenberg/pull/46171))
+- Template Parts: Fix modal search stacking context. ([46421](https://github.com/WordPress/gutenberg/pull/46421))
+- Video: Avoid an error when removal is locked. ([46324](https://github.com/WordPress/gutenberg/pull/46324))
+- Layout child fixed size should not be fixed by default and should always have a value set. ([46139](https://github.com/WordPress/gutenberg/pull/46139))
+
+#### Blocks
+- Paste handler: Remove styles on inline paste. ([46402](https://github.com/WordPress/gutenberg/pull/46402))
+- Improve performance of gutenberg_render_layout_support_flag. ([46074](https://github.com/WordPress/gutenberg/pull/46074))
+
 #### Global Styles
-- Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
+- Allow indirect properties when unfiltered_html is not allowed. ([46388](https://github.com/WordPress/gutenberg/pull/46388))
+- Fix Reset to defaults action by moving fills to be within context provider. ([46486](https://github.com/WordPress/gutenberg/pull/46486))
+- Fix duplication of synced block colors in CSS output. ([46297](https://github.com/WordPress/gutenberg/pull/46297))
+- Make style book label font size 11px. ([46341](https://github.com/WordPress/gutenberg/pull/46341))
+- Style Book: Clear Global Styles navigation history when selecting a block. ([46391](https://github.com/WordPress/gutenberg/pull/46391))
+- - Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
 - Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities. ([46663](https://github.com/WordPress/gutenberg/pull/46663))
 
+#### Block Editor
+- Block Editor: Fix content locked patterns. ([46494](https://github.com/WordPress/gutenberg/pull/46494))
+- Block Editor: Fix memoized pattern selector dependant arguments. ([46238](https://github.com/WordPress/gutenberg/pull/46238))
+- Block Editor: Restore draggable chip styles. ([46396](https://github.com/WordPress/gutenberg/pull/46396))
+- Block Editor: Revert deoptimization useNestedSettingsUpdate. ([46350](https://github.com/WordPress/gutenberg/pull/46350))
+- Block Editor: Fix some usages of useSelect that return unstable results. ([46226](https://github.com/WordPress/gutenberg/pull/46226))
+- useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. ([46307](https://github.com/WordPress/gutenberg/pull/46307))
+
+#### Patterns
+- Add new pattern categories. ([46144](https://github.com/WordPress/gutenberg/pull/46144))
+- Block Editor: Add initial view mode in `BlockPatternSetup`. ([46399](https://github.com/WordPress/gutenberg/pull/46399))
+
+#### Site Editor
+- Do not remount iframe. ([46431](https://github.com/WordPress/gutenberg/pull/46431))
+- Fix the top bar 'exit' animation. ([46533](https://github.com/WordPress/gutenberg/pull/46533))
+- Keep edited entity in sync when Editor canvas isn't mounted. ([46524](https://github.com/WordPress/gutenberg/pull/46524))
+- [Site Editor]: Add default white background for themes with no `background color` set. ([46314](https://github.com/WordPress/gutenberg/pull/46314))
+
+#### Components
+- InputControl: Fix `Flex` wrapper usage. ([46213](https://github.com/WordPress/gutenberg/pull/46213))
+- Modal: Fix unexpected modal closing in IME Composition. ([46453](https://github.com/WordPress/gutenberg/pull/46453))
+- MaybeCategoryPanel: Avoid 403 requests for users with low permissions. ([46349](https://github.com/WordPress/gutenberg/pull/46349))
+- Rich text: Add button to clear unknown format. ([44086](https://github.com/WordPress/gutenberg/pull/44086))
+
+#### Document Settings
+- Fix template title in `summary` panel and requests for low privileged users. ([46304](https://github.com/WordPress/gutenberg/pull/46304))
+- Permalink: Hide edit field for users without publishing capabilities. ([46361](https://github.com/WordPress/gutenberg/pull/46361))
+
+#### Patterns
+- Content lock: Make filter hook namespace unique. ([46344](https://github.com/WordPress/gutenberg/pull/46344))
+
+#### Layout
+- Child Layout controls: Fix help text for height. ([46319](https://github.com/WordPress/gutenberg/pull/46319))
+
+#### Widgets Editor
+- Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. ([43392](https://github.com/WordPress/gutenberg/pull/43392))
+
+#### Block API
+- HTML block: Fix parsing. ([27268](https://github.com/WordPress/gutenberg/pull/27268))
+
+#### Mobile
+- Social Links mobile test: Wait for URL bottom sheet to appear. ([46308](https://github.com/WordPress/gutenberg/pull/46308))
+
+### Performance
+
+#### Components
+- Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- CircularOption: Avoid paint on circular option hover. ([46197](https://github.com/WordPress/gutenberg/pull/46197))
+- Lodash: Replace `_.isEqual()` with `fastDeepEqual`. ([46200](https://github.com/WordPress/gutenberg/pull/46200))
+- Popover: Avoid paint on popovers when scrolling. ([46187](https://github.com/WordPress/gutenberg/pull/46187))
+- Resizable Box: Avoid paint on resizable-box handles. ([46196](https://github.com/WordPress/gutenberg/pull/46196))
+- ListView: Avoid paint on list view item hover. ([46188](https://github.com/WordPress/gutenberg/pull/46188))
+
+#### Code Quality
+- Lodash: Refactor `blocks` away from `_.find()`. ([46428](https://github.com/WordPress/gutenberg/pull/46428))
+- Lodash: Refactor `core-data` away from `_.find()`. ([46468](https://github.com/WordPress/gutenberg/pull/46468))
+- Lodash: Refactor `edit-site` away from `_.find()`. ([46539](https://github.com/WordPress/gutenberg/pull/46539))
+- Lodash: Refactor away from `_.orderBy()`. ([45146](https://github.com/WordPress/gutenberg/pull/45146))
+- Lodash: Refactor block library away from `_.find()`. ([46430](https://github.com/WordPress/gutenberg/pull/46430))
+- Remove usage of get_default_block_editor_settings. ([46112](https://github.com/WordPress/gutenberg/pull/46112))
+
+#### Post Editor
+- Lodash: Refactor editor away from `_.find()`. ([46464](https://github.com/WordPress/gutenberg/pull/46464))
+- Lodash: Refactor post editor away from `_.find()`. ([46432](https://github.com/WordPress/gutenberg/pull/46432))
+
+#### Block Editor
+- Avoid paint on inserter animation. ([46185](https://github.com/WordPress/gutenberg/pull/46185))
+- Improve inserter search performance. ([46153](https://github.com/WordPress/gutenberg/pull/46153))
+- Block Editor: Refactor the "order" state in the block editor reducer to use a map instead of a plain object. ([46221](https://github.com/WordPress/gutenberg/pull/46221))
+- Block Editor: Refactor the block-editor parents state to use maps instead of objects. ([46225](https://github.com/WordPress/gutenberg/pull/46225))
+- Refactor the block-editor "tree" state to use maps instead of objects. ([46229](https://github.com/WordPress/gutenberg/pull/46229))
+- Refactor the block-editor byClientId redux state to use maps instead of plain objects. ([46204](https://github.com/WordPress/gutenberg/pull/46204))
+- Fix typing performance issue for container blocks. ([46527](https://github.com/WordPress/gutenberg/pull/46527))
+
+#### Testing
+- E2E: Fix performance tests by making inserter search container waiting optional. ([46268](https://github.com/WordPress/gutenberg/pull/46268))
+
+#### Mobile
+- Columns mobile block: Avoid returning unstable innerWidths from useSelect. ([46403](https://github.com/WordPress/gutenberg/pull/46403))
+
+### Experiments
+
+#### Block Library
+- Navigation List View: Remove empty cell when there is no edit button. ([46439](https://github.com/WordPress/gutenberg/pull/46439))
+
+#### Web Fonts
+- WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. ([46378](https://github.com/WordPress/gutenberg/pull/46378))
+
+### Documentation
+- Adds clarifications and clears up inaccuracies. ([46283](https://github.com/WordPress/gutenberg/pull/46283))
+- Adds details of how to find the .zip file. ([46305](https://github.com/WordPress/gutenberg/pull/46305))
+- Doc: Fix description and documentation for link color support. ([46405](https://github.com/WordPress/gutenberg/pull/46405))
+- Docs: Add missing useState import in BorderBoxControl documentation. ([42067](https://github.com/WordPress/gutenberg/pull/42067))
+- Docs: Add missing useState import in color picker docs. ([42069](https://github.com/WordPress/gutenberg/pull/42069))
+- Docs: Add missing useState import in confirm dialog docs. ([42071](https://github.com/WordPress/gutenberg/pull/42071))
+- Docs: Adds reminder to use Node.js v14 in Quick Start. ([46216](https://github.com/WordPress/gutenberg/pull/46216))
+- Docs: Fix missing link to `primitives` package. ([46290](https://github.com/WordPress/gutenberg/pull/46290))
+- Docs: Update reference to IE 11. ([46296](https://github.com/WordPress/gutenberg/pull/46296))
+
+### Code Quality
+- Block Editor: Fix `no-node-access` violations in `BlockPreview`. ([46409](https://github.com/WordPress/gutenberg/pull/46409))
+- Block Editor: Fix `no-node-access` violations in `BlockSelectionClearer`. ([46408](https://github.com/WordPress/gutenberg/pull/46408))
+- Columns mobile edit: Remove unused updateBlockSettings action bind. ([46455](https://github.com/WordPress/gutenberg/pull/46455))
+- ESLint: Fix warning in `getBlockAttribute` documentation. ([46500](https://github.com/WordPress/gutenberg/pull/46500))
+- List View: Use default parameters instead of defaultProps. ([46266](https://github.com/WordPress/gutenberg/pull/46266))
+- Removed: Remove small APIs marked to be removed in WP 6.2. ([46106](https://github.com/WordPress/gutenberg/pull/46106))
+- Site Editor: Remove invalid CSS. ([46288](https://github.com/WordPress/gutenberg/pull/46288))
+
+#### Block Library
+- Group Block: Remove placeholder leftovers. ([46423](https://github.com/WordPress/gutenberg/pull/46423))
+- Group: Remove unnecessary 'useCallback'. ([46418](https://github.com/WordPress/gutenberg/pull/46418))
+- Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. ([46329](https://github.com/WordPress/gutenberg/pull/46329))
+- Navigation Block: Update attribute test for `are-blocks-dirty.js`. ([46355](https://github.com/WordPress/gutenberg/pull/46355))
+- Page List Block: Move shared "convert" description to constant. ([46368](https://github.com/WordPress/gutenberg/pull/46368))
+- Page List Block: Simplify Page List convert to links function API. ([46365](https://github.com/WordPress/gutenberg/pull/46365))
+- Query: Cleanup variation picker component. ([46424](https://github.com/WordPress/gutenberg/pull/46424))
+- RNMobile: Add an inline comment to clarify usage of 'hard' limit vs. unbounded query. ([46245](https://github.com/WordPress/gutenberg/pull/46245))
+- Shared standard Link UI component between Nav Link and Submenu blocks. ([46370](https://github.com/WordPress/gutenberg/pull/46370))
+- Template Parts: Remove unnecessary 'useCallback'. ([46420](https://github.com/WordPress/gutenberg/pull/46420))
+
+#### Components
+- AlignmentMatrixControl: Refactor to TypeScript. ([46162](https://github.com/WordPress/gutenberg/pull/46162))
+- Also ignore `no-node-access` for some components. ([46501](https://github.com/WordPress/gutenberg/pull/46501))
+- Fix `no-node-access` violations in `FocalPointPicker` tests. ([46312](https://github.com/WordPress/gutenberg/pull/46312))
+- Fix `no-node-access` violations in `Popover`. ([46311](https://github.com/WordPress/gutenberg/pull/46311))
+- Fix `no-node-access` violations in `Theme`. ([46310](https://github.com/WordPress/gutenberg/pull/46310))
+- Fix `no-node-access` violations in `ToolsPanel` tests. ([46313](https://github.com/WordPress/gutenberg/pull/46313))
+- withFilters: Use 'act' from React Testing Library. ([46237](https://github.com/WordPress/gutenberg/pull/46237))
+
+#### Data Layer
+- Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. ([45513](https://github.com/WordPress/gutenberg/pull/45513))
+- ESLint: Fix warnings in the data package. ([46499](https://github.com/WordPress/gutenberg/pull/46499))
+
+#### Global Styles
+- Add "custom-css" as an acceptable value in the documentation for gutenberg_get_global_stylesheet. ([46493](https://github.com/WordPress/gutenberg/pull/46493))
+- PaletteEdit: Add changelog. ([46095](https://github.com/WordPress/gutenberg/pull/46095))
+
+#### Block Editor
+- Inserter: Update mobile tab navigation styles. ([46186](https://github.com/WordPress/gutenberg/pull/46186))
+
+#### Layout
+- Clarify inline comment about switching to `safecss_filter_attr`. ([46061](https://github.com/WordPress/gutenberg/pull/46061))
+
+### Tools
+
+#### Build Tooling
+- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247))
+- Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302))
+- Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282))
+
+#### Testing
+- E2E: Fix flaky Block Switcher tests. ([46406](https://github.com/WordPress/gutenberg/pull/46406))
+- end-to-end tests: Add width and color test to button block. ([46452](https://github.com/WordPress/gutenberg/pull/46452))
+
+
+
 
 ## Contributors
 
@@ -131,6 +387,8 @@ The following contributors merged PRs in this release:
 - Fix duplication of synced block colors in CSS output. ([46297](https://github.com/WordPress/gutenberg/pull/46297))
 - Make style book label font size 11px. ([46341](https://github.com/WordPress/gutenberg/pull/46341))
 - Style Book: Clear Global Styles navigation history when selecting a block. ([46391](https://github.com/WordPress/gutenberg/pull/46391))
+- Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
+- Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities. ([46663](https://github.com/WordPress/gutenberg/pull/46663))
 
 #### Block Editor
 - Block Editor: Fix content locked patterns. ([46494](https://github.com/WordPress/gutenberg/pull/46494))

From 392237906431dc740dadfa3c056f866f105cc99d Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 21 Dec 2022 21:43:05 +0400
Subject: [PATCH 187/209] Gallery: Avoid creating new layout objects on every
 render (#46715)

---
 packages/block-library/src/gallery/edit.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 893167e6690f3c..c56cf1dab84e8f 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -65,6 +65,7 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const allowedBlocks = [ 'core/image' ];
+const LAYOUT = { type: 'default', alignments: [] };
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -489,7 +490,7 @@ function GalleryEdit( props ) {
 		allowedBlocks,
 		orientation: 'horizontal',
 		renderAppender: false,
-		__experimentalLayout: { type: 'default', alignments: [] },
+		__experimentalLayout: LAYOUT,
 	} );
 
 	if ( ! hasImages ) {

From 921135f9ec7f1e54030672eb7d11ca28034bf15b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 22 Dec 2022 03:41:09 +0900
Subject: [PATCH 188/209] Icon: Remove knobs in stories (#46517)

---
 packages/components/src/icon/stories/index.js | 128 ------------------
 .../components/src/icon/stories/index.tsx     | 103 ++++++++++++++
 2 files changed, 103 insertions(+), 128 deletions(-)
 delete mode 100644 packages/components/src/icon/stories/index.js
 create mode 100644 packages/components/src/icon/stories/index.tsx

diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
deleted file mode 100644
index 824b091c2e0cdb..00000000000000
--- a/packages/components/src/icon/stories/index.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../';
-import { VStack } from '../../v-stack';
-
-export default {
-	title: 'Components/Icon',
-	component: Icon,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const IconSizeLabel = ( { size } ) => (
-	<div style={ { fontSize: 12 } }>{ size }px</div>
-);
-
-export const _default = () => {
-	const size = number( 'Size', '24' );
-
-	return (
-		<div>
-			<Icon icon={ wordpress } size={ size } />
-			<IconSizeLabel size={ size } />
-		</div>
-	);
-};
-
-export const sizes = () => {
-	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];
-
-	return (
-		<>
-			{ iconSizes.map( ( size ) => (
-				<div
-					key={ size }
-					style={ { padding: 20, display: 'inline-block' } }
-				>
-					<Icon icon={ wordpress } size={ size } />
-					<IconSizeLabel size={ size } />
-				</div>
-			) ) }
-		</>
-	);
-};
-
-export const colors = () => {
-	const iconColors = [ 'blue', 'purple', 'green' ];
-
-	return (
-		<>
-			{ iconColors.map( ( color ) => (
-				<div
-					key={ color }
-					style={ {
-						padding: 20,
-						display: 'inline-block',
-						fill: color,
-					} }
-				>
-					<Icon icon={ wordpress } />
-					<IconSizeLabel size={ 24 } />
-				</div>
-			) ) }
-		</>
-	);
-};
-
-export const withAFunction = () => (
-	<Icon
-		icon={ () => (
-			<SVG>
-				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-			</SVG>
-		) }
-	/>
-);
-
-export const withAComponent = () => {
-	const MyIconComponent = () => (
-		<SVG>
-			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-		</SVG>
-	);
-
-	return <Icon icon={ MyIconComponent } />;
-};
-
-export const withAnSVG = () => {
-	return (
-		<Icon
-			icon={
-				<SVG>
-					<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-				</SVG>
-			}
-		/>
-	);
-};
-
-/**
- * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
- * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
- * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
- */
-export const withADashicon = () => {
-	return (
-		<VStack>
-			<Icon icon="wordpress" />
-			<small>
-				This won’t show an icon if the Dashicons stylesheet isn’t
-				loaded.
-			</small>
-		</VStack>
-	);
-};
diff --git a/packages/components/src/icon/stories/index.tsx b/packages/components/src/icon/stories/index.tsx
new file mode 100644
index 00000000000000..8c26d2d2d56138
--- /dev/null
+++ b/packages/components/src/icon/stories/index.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '..';
+import { VStack } from '../../v-stack';
+
+const meta: ComponentMeta< typeof Icon > = {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Icon > = ( args ) => (
+	<Icon { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: () => (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+const MyIconComponent = () => (
+	<SVG>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: MyIconComponent,
+};
+
+export const WithAnSVG = Template.bind( {} );
+WithAnSVG.args = {
+	...Default.args,
+	icon: (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const WithADashicon: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<VStack>
+			<Icon { ...args } />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};
+WithADashicon.args = {
+	...Default.args,
+	icon: 'wordpress',
+};

From 99bc9c7393b20375ffd1e5f879e79410f4c9f06b Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Thu, 22 Dec 2022 08:32:21 +0100
Subject: [PATCH 189/209] Mobile - Block Actions Menu - Fix block title
 regression and adds integration tests (#46699)

* Mobile - Block Actions Menu - Fix regression where the block name was showing undefined in the Picker's header. It also adds integration tests for several actions like: Copy, Cut, Paste, Duplicate and Transform blocks

* Mobile - Tests - Initialize Editor helper - Add option to specify the screen width

* Mobile - Style mocks - Pass the marginLeft value for the Default block styles

* Mobile - Block Mover - Add tests for moving up and down blocks

* Mobile - Block Actions Menu - Fix logic for selecting the first and last index. It also passes the clientId as an array for the moveBlocksUp and moveBlocksDown

* Mobile - Block Actions Menu - Use replaceBlock instead of replaceBlocks

* Mobile - Block Actions test and Block Mover test - Fix typos

* Mobile - Block Actions Menu Test - Add testID to match for options within the modal, since they're mutltiple elements with the Move up/down labels

* Mobile - Block Mover tests - Update test to add blocks manually instead of using pre-defined content
---
 .../block-actions-menu.native.js              |  40 +-
 .../block-mobile-toolbar/index.native.js      |   2 +-
 .../block-actions-menu.native.js.snap         | 125 +++++
 .../test/block-actions-menu.native.js         | 439 ++++++++++++++++++
 .../test/__snapshots__/index.native.js.snap   |  42 ++
 .../block-mover/test/index.native.js          | 158 ++++++-
 test/native/__mocks__/styleMock.js            |   1 +
 .../initialize-editor.js                      |   5 +-
 8 files changed, 786 insertions(+), 26 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
 create mode 100644 packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
index 0c00b36e4d7666..018f695086b640 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -286,6 +286,7 @@ const BlockActionsMenu = ( {
 				} }
 			/>
 			<Picker
+				testID="block-actions-menu"
 				ref={ blockActionsMenuPickerRef }
 				options={ options }
 				onChange={ onPickerSelect }
@@ -312,7 +313,7 @@ const BlockActionsMenu = ( {
 const EMPTY_BLOCK_LIST = [];
 
 export default compose(
-	withSelect( ( select, { clientIds } ) => {
+	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockIndex,
 			getBlockRootClientId,
@@ -325,23 +326,18 @@ export default compose(
 			canInsertBlockType,
 			getTemplateLock,
 		} = select( blockEditorStore );
-		const normalizedClientIds = Array.isArray( clientIds )
-			? clientIds
-			: [ clientIds ];
-		const block = getBlock( normalizedClientIds );
-		const blockName = getBlockName( normalizedClientIds );
+		const block = getBlock( clientId );
+		const blockName = getBlockName( clientId );
 		const blockType = getBlockType( blockName );
 		const blockTitle = blockType?.title;
-		const firstClientId = normalizedClientIds[ 0 ];
-		const rootClientId = getBlockRootClientId( firstClientId );
+		const rootClientId = getBlockRootClientId( clientId );
 		const blockOrder = getBlockOrder( rootClientId );
 
-		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex(
-			normalizedClientIds[ normalizedClientIds.length - 1 ]
-		);
+		const currentBlockIndex = getBlockIndex( clientId );
+		const isFirst = currentBlockIndex === 0;
+		const isLast = currentBlockIndex === blockOrder.length - 1;
 
-		const innerBlocks = getBlocksByClientId( clientIds );
+		const innerBlocks = getBlocksByClientId( clientId );
 
 		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
 			return (
@@ -378,13 +374,13 @@ export default compose(
 		return {
 			blockTitle,
 			canInsertBlockType,
-			currentIndex: firstIndex,
+			currentIndex: currentBlockIndex,
 			getBlocksByClientId,
 			isEmptyDefaultBlock,
 			isLocked,
 			canDuplicate,
-			isFirst: firstIndex === 0,
-			isLast: lastIndex === blockOrder.length - 1,
+			isFirst,
+			isLast,
 			isReusableBlockType,
 			reusableBlock,
 			rootClientId,
@@ -395,7 +391,7 @@ export default compose(
 	withDispatch(
 		(
 			dispatch,
-			{ clientIds, rootClientId, currentIndex, selectedBlockClientId },
+			{ clientId, rootClientId, currentIndex, selectedBlockClientId },
 			{ select }
 		) => {
 			const {
@@ -404,7 +400,7 @@ export default compose(
 				duplicateBlocks,
 				removeBlocks,
 				insertBlock,
-				replaceBlocks,
+				replaceBlock,
 				clearSelectedBlock,
 			} = dispatch( blockEditorStore );
 			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
@@ -426,12 +422,12 @@ export default compose(
 					);
 				},
 				duplicateBlock() {
-					return duplicateBlocks( clientIds );
+					return duplicateBlocks( [ clientId ] );
 				},
 				onMoveDown: ( ...args ) =>
-					moveBlocksDown( clientIds, rootClientId, ...args ),
+					moveBlocksDown( [ clientId ], rootClientId, ...args ),
 				onMoveUp: ( ...args ) =>
-					moveBlocksUp( clientIds, rootClientId, ...args ),
+					moveBlocksUp( [ clientId ], rootClientId, ...args ),
 				openGeneralSidebar: () =>
 					openGeneralSidebar( 'edit-post/block' ),
 				pasteBlock: ( clipboardBlock ) => {
@@ -452,7 +448,7 @@ export default compose(
 							rootClientId
 						);
 					} else {
-						replaceBlocks( clientIds, clipboardBlock );
+						replaceBlock( clientId, clipboardBlock );
 					}
 				},
 				removeBlocks,
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
index b1b9c4635a29b7..d4dd69551715f4 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -98,7 +98,7 @@ const BlockMobileToolbar = ( {
 			</BlockSettingsButton.Slot>
 
 			<BlockActionsMenu
-				clientIds={ [ clientId ] }
+				clientId={ clientId }
 				wrapBlockMover={ wrapBlockMover }
 				wrapBlockSettings={ wrapBlockSettings && fillsLength }
 				isStackedHorizontally={ isStackedHorizontally }
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap b/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
new file mode 100644
index 00000000000000..c5b98857991c44
--- /dev/null
+++ b/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Block Actions Menu block options copies and pastes a block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Block Actions Menu block options does not replace a non empty Paragraph block when pasting another block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options duplicates a block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class=\\"wp-block-pullquote\\"><blockquote><p>Hello!</p></blockquote></figure>
+<!-- /wp:pullquote -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks disables the Move Down button for the last block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks disables the Move Up button for the first block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
new file mode 100644
index 00000000000000..4731470b7bf3f5
--- /dev/null
+++ b/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
@@ -0,0 +1,439 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	changeTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Block Actions Menu', () => {
+	it( "renders the block name in the Picker's header", async () => {
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph -->
+            <p></p>
+            <!-- /wp:paragraph -->`,
+		} );
+		const { getByLabelText, getByRole } = screen;
+
+		// Get block
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open block actions menu
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Get Picker title
+		const pickerHeader = getByRole( 'header' );
+		const headerTitle = within( pickerHeader ).getByText(
+			/Paragraph block options/
+		);
+		expect( headerTitle ).toBeVisible();
+	} );
+
+	describe( 'moving blocks', () => {
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Down button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block down' )
+			);
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Up button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block up' )
+			);
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Up button
+			const upButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100,
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Down button
+			const downButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'block options', () => {
+		it( 'copies and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Paste block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'does not replace a non empty Paragraph block when pasting another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Past block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'cuts and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Cut block/ ) );
+
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'duplicates a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Duplicate button
+			fireEvent.press( getByLabelText( /Duplicate block/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'transforms a Paragraph block into a Pullquote block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByRole } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Transform block…/ ) );
+
+			// Get Picker title
+			const pickerHeader = getByRole( 'header' );
+			const headerTitle = within( pickerHeader ).getByText(
+				/Transform Paragraph to/
+			);
+			expect( headerTitle ).toBeVisible();
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Pullquote/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
index 053c3289b80550..a896a7909f0b9e 100644
--- a/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
+++ b/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
 exports[`Block Mover Picker should match snapshot 1`] = `
 Array [
   <View>
diff --git a/packages/block-editor/src/components/block-mover/test/index.native.js b/packages/block-editor/src/components/block-mover/test/index.native.js
index f75583c9613733..903289c6d5a316 100644
--- a/packages/block-editor/src/components/block-mover/test/index.native.js
+++ b/packages/block-editor/src/components/block-mover/test/index.native.js
@@ -1,7 +1,22 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	render,
+	changeTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -46,4 +61,145 @@ describe( 'Block Mover Picker', () => {
 		const screen = render( <BlockMover { ...props } /> );
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
+
+	describe( 'moving blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Tap on the Move Down button
+			const downButton = getByLabelText(
+				/Move block down from row 2 to row 3/
+			);
+			fireEvent.press( downButton );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Tap on the Move Up button
+			const upButton = getByLabelText(
+				/Move block up from row 2 to row 1/
+			);
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get the Move Up button
+			const upButton = getByLabelText( /Move block up/ );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get the Move Down button
+			const downButton = getByLabelText( /Move block down/ );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index 45517b2204dd4b..4d86ffd36d09f1 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -92,6 +92,7 @@ module.exports = {
 	},
 	defaultBlock: {
 		marginTop: 16,
+		marginLeft: 16,
 	},
 	scrollableContent: {
 		paddingBottom: 20,
diff --git a/test/native/integration-test-helpers/initialize-editor.js b/test/native/integration-test-helpers/initialize-editor.js
index 662c6fc4544d07..440d69550ae0e6 100644
--- a/test/native/integration-test-helpers/initialize-editor.js
+++ b/test/native/integration-test-helpers/initialize-editor.js
@@ -31,6 +31,7 @@ export async function initializeEditor( props, { component } = {} ) {
 	const postType = 'post';
 
 	return waitForStoreResolvers( () => {
+		const { screenWidth = 320, ...rest } = props || {};
 		const editorElement = component
 			? createElement( component, { postType, postId } )
 			: internalInitializeEditor( uniqueId, postType, postId );
@@ -38,7 +39,7 @@ export async function initializeEditor( props, { component } = {} ) {
 		const screen = render(
 			cloneElement( editorElement, {
 				initialTitle: 'test',
-				...props,
+				...rest,
 			} )
 		);
 
@@ -47,7 +48,7 @@ export async function initializeEditor( props, { component } = {} ) {
 		fireEvent( screen.getByTestId( 'block-list-wrapper' ), 'layout', {
 			nativeEvent: {
 				layout: {
-					width: 100,
+					width: screenWidth,
 				},
 			},
 		} );

From 972c0ceb674bd8577ba28c15ebe50c1f720b5390 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 22 Dec 2022 13:47:19 +0200
Subject: [PATCH 190/209] [Inserter]: Try fix media tab when upload of media
 types has been disabled (#46676)

---
 .../src/components/inserter/media-tab/hooks.js           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
index f537dce68608ad..e3b68510d77d2e 100644
--- a/packages/block-editor/src/components/inserter/media-tab/hooks.js
+++ b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -66,14 +66,15 @@ export function useMediaCategories( rootClientId ) {
 				per_page: 1,
 				_fields: [ 'id' ],
 			};
-			const [ image, video, audio ] = await Promise.all( [
+			const [ image, video, audio ] = await Promise.allSettled( [
 				fetchMedia( { ...query, media_type: 'image' } ),
 				fetchMedia( { ...query, media_type: 'video' } ),
 				fetchMedia( { ...query, media_type: 'audio' } ),
 			] );
-			const showImage = canInsertImage && !! image.length;
-			const showVideo = canInsertVideo && !! video.length;
-			const showAudio = canInsertAudio && !! audio.length;
+			// The `value` property is only present if the promise's status is "fulfilled".
+			const showImage = canInsertImage && !! image.value?.length;
+			const showVideo = canInsertVideo && !! video.value?.length;
+			const showAudio = canInsertAudio && !! audio.value?.length;
 			setCategories(
 				MEDIA_CATEGORIES.filter(
 					( { mediaType } ) =>

From d5b41166eb9b2a40af0ef602730731c3f055bf77 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 22 Dec 2022 16:05:44 +0400
Subject: [PATCH 191/209] Inner Blocks: Fix provides context condition (#46729)

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

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 9d0b3f34bc7729..0512569fb3f42d 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -87,8 +87,10 @@ function UncontrolledInnerBlocks( props ) {
 
 			const blockType = getBlockType( block.name );
 
-			if ( ! blockType || ! blockType.providesContext ) {
-				return {};
+			if (
+				Object.keys( blockType?.providesContext ?? {} ).length === 0
+			) {
+				return { name: block.name };
 			}
 
 			return {

From 2eb2a68f2eb44a3ed46dc909e98ebd982cbcf1b4 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 22 Dec 2022 13:31:12 +0100
Subject: [PATCH 192/209] BorderControl: improve popover waiting (#46713)

* BorderControl: improve popover waiting

* Remove async where there's no await

* Enable real timers manually
---
 .../src/border-control/test/index.js          | 137 +++++++++---------
 1 file changed, 70 insertions(+), 67 deletions(-)

diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 922abba8f9c83c..2d599d0c9f8c18 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -1,13 +1,21 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { BorderControl } from '../';
 
+jest.useRealTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -37,29 +45,24 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const renderBorderControl = async ( props ) => {
-	const view = render( <BorderControl { ...props } /> );
-	// When the `Popover` component is rendered or updated, the `useFloating`
-	// hook from the `floating-ui` package will schedule a state update in a
-	// promise handler. We need to wait for this promise handler to execute
-	// before checking results. That's what this async `act()` call achieves.
-	// See also: https://floating-ui.com/docs/react-dom#testing
-	await act( () => Promise.resolve() );
-	return view;
-};
-
-const rerenderBorderControl = async ( rerender, props ) => {
-	const view = rerender( <BorderControl { ...props } /> );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
-	return view;
-};
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
 
 const openPopover = async () => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	fireEvent.click( toggleButton );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
+
+	// Wait for color picker popover to fully appear
+	const pickerButton = screen.getByRole( 'button', {
+		name: /^Custom color picker/,
+	} );
+
+	await waitFor( () =>
+		expect(
+			getWrappingPopoverElement( pickerButton )
+		).toBePositionedPopover()
+	);
 };
 
 const getButton = ( name ) => {
@@ -93,9 +96,9 @@ const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
-		it( 'should render standard border control', async () => {
+		it( 'should render standard border control', () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -114,9 +117,9 @@ describe( 'BorderControl', () => {
 			expect( slider ).not.toBeInTheDocument();
 		} );
 
-		it( 'should hide label', async () => {
+		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -128,17 +131,17 @@ describe( 'BorderControl', () => {
 			);
 		} );
 
-		it( 'should render with slider', async () => {
+		it( 'should render with slider', () => {
 			const props = createProps( { withSlider: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should render placeholder in UnitControl', async () => {
+		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
@@ -146,7 +149,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const customColorPicker = getButton( /Custom color picker/ );
@@ -170,7 +173,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover header', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const headerLabel = screen.getByText( 'Border color' );
@@ -182,7 +185,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should not render style options when opted out of', async () => {
 			const props = createProps( { enableStyle: false } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const styleLabel = screen.queryByText( 'Style' );
@@ -199,18 +202,18 @@ describe( 'BorderControl', () => {
 
 	describe( 'color and style picker aria labels', () => {
 		describe( 'with style selection enabled', () => {
-			it( 'should include both color and style in label', async () => {
+			it( 'should include both color and style in label', () => {
 				const props = createProps( { value: undefined } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( { value: { color: '#72aee6' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -219,9 +222,9 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( { value: { color: '#4b1d80' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -230,11 +233,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color and style selections', async () => {
+			it( 'should correctly describe named color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -243,11 +246,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color and style selections', async () => {
+			it( 'should correctly describe custom color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -258,24 +261,24 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'with style selection disabled', () => {
-			it( 'should only include color in the label', async () => {
+			it( 'should only include color in the label', () => {
 				const props = createProps( {
 					value: undefined,
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -284,12 +287,12 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -301,9 +304,9 @@ describe( 'BorderControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		it( 'should update width with slider value', async () => {
+		it( 'should update width with slider value', () => {
 			const props = createProps( { withSlider: true } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
@@ -313,7 +316,7 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
@@ -321,7 +324,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update color selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 
@@ -333,7 +336,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color selection when toggling swatch off', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -345,7 +348,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update style selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -357,7 +360,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should take no action when color and style popover is closed', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Close border color' );
 
@@ -366,7 +369,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Reset to default' );
 
@@ -379,9 +382,9 @@ describe( 'BorderControl', () => {
 
 		it( 'should sanitize border when width and color are undefined', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -392,9 +395,9 @@ describe( 'BorderControl', () => {
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -407,7 +410,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 			clickButton( 'Dotted' );
@@ -422,12 +425,12 @@ describe( 'BorderControl', () => {
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			setWidthInput( '0' );
 			setWidthInput( '5' );
 
@@ -440,7 +443,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
 			const props = createProps( { value: undefined } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Yellow' );
 
@@ -451,7 +454,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -466,7 +469,7 @@ describe( 'BorderControl', () => {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -477,7 +480,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {

From f3b28615ba4407af62e05d700803be1b6cf53850 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 22 Dec 2022 14:34:36 +0200
Subject: [PATCH 193/209] Iframe: simplify/reactify compat styles logic
 (#46732)

---
 .../src/components/iframe/index.js            | 111 ++----------------
 .../iframe/use-compatibility-styles.js        |  95 +++++++++++++++
 2 files changed, 103 insertions(+), 103 deletions(-)
 create mode 100644 packages/block-editor/src/components/iframe/use-compatibility-styles.js

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b7413b54a2e445..46a5c6f92bc197 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -26,97 +26,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
  */
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
-
-const BODY_CLASS_NAME = 'editor-styles-wrapper';
-const BLOCK_PREFIX = 'wp-block';
-
-/**
- * Clones stylesheets targetting the editor canvas to the given document. A
- * stylesheet is considered targetting the editor a canvas if it contains the
- * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
- *
- * Ideally, this hook should be removed in the future and styles should be added
- * explicitly as editor styles.
- */
-function useStylesCompatibility() {
-	return useRefEffect( ( node ) => {
-		// Search the document for stylesheets targetting the editor canvas.
-		Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
-			try {
-				// May fail for external styles.
-				// eslint-disable-next-line no-unused-expressions
-				styleSheet.cssRules;
-			} catch ( e ) {
-				return;
-			}
-
-			const { ownerNode, cssRules } = styleSheet;
-
-			if ( ! cssRules ) {
-				return;
-			}
-
-			// Generally, ignore inline styles. We add inline styles belonging to a
-			// stylesheet later, which may or may not match the selectors.
-			if ( ownerNode.tagName !== 'LINK' ) {
-				return;
-			}
-
-			// Don't try to add the reset styles, which were removed as a dependency
-			// from `edit-blocks` for the iframe since we don't need to reset admin
-			// styles.
-			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
-				return;
-			}
-
-			function matchFromRules( _cssRules ) {
-				return Array.from( _cssRules ).find(
-					( {
-						selectorText,
-						conditionText,
-						cssRules: __cssRules,
-					} ) => {
-						// If the rule is conditional then it will not have selector text.
-						// Recurse into child CSS ruleset to determine selector eligibility.
-						if ( conditionText ) {
-							return matchFromRules( __cssRules );
-						}
-
-						return (
-							selectorText &&
-							( selectorText.includes(
-								`.${ BODY_CLASS_NAME }`
-							) ||
-								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-						);
-					}
-				);
-			}
-
-			const isMatch = matchFromRules( cssRules );
-
-			if (
-				isMatch &&
-				! node.ownerDocument.getElementById( ownerNode.id )
-			) {
-				// Display warning once we have a way to add style dependencies to the editor.
-				// See: https://github.com/WordPress/gutenberg/pull/37466.
-				node.appendChild( ownerNode.cloneNode( true ) );
-
-				// Add inline styles belonging to the stylesheet.
-				const inlineCssId = ownerNode.id.replace(
-					'-css',
-					'-inline-css'
-				);
-				const inlineCssElement = document.getElementById( inlineCssId );
-
-				if ( inlineCssElement ) {
-					node.appendChild( inlineCssElement.cloneNode( true ) );
-				}
-			}
-		} );
-	}, [] );
-}
+import { useCompatibilityStyles } from './use-compatibility-styles';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -205,6 +115,11 @@ function Iframe(
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const styles = useParsedAssets( assets?.styles );
+	const styleIds = styles.map( ( style ) => style.id );
+	const compatStyles = useCompatibilityStyles();
+	const neededCompatStyles = compatStyles.filter(
+		( style ) => ! styleIds.includes( style.id )
+	);
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -288,12 +203,11 @@ function Iframe(
 			} );
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-	const styleCompatibilityRef = useStylesCompatibility();
 
 	head = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ styles.map(
+			{ [ ...styles, ...neededCompatStyles ].map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();
 
@@ -342,7 +256,7 @@ function Iframe(
 								ref={ bodyRef }
 								className={ classnames(
 									'block-editor-iframe__body',
-									BODY_CLASS_NAME,
+									'editor-styles-wrapper',
 									...bodyClasses
 								) }
 								style={ {
@@ -359,15 +273,6 @@ function Iframe(
 								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
-								{ /*
-								 * This is a wrapper for the extra styles and scripts
-								 * rendered imperatively by cloning the parent,
-								 * it's important that this div's content remains uncontrolled.
-								 */ }
-								<div
-									style={ { display: 'none' } }
-									ref={ styleCompatibilityRef }
-								/>
 								<StyleProvider document={ iframeDocument }>
 									{ children }
 								</StyleProvider>
diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
new file mode 100644
index 00000000000000..5a1d7de5518654
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Returns a list of stylesheets that target the editor canvas. A stylesheet is
+ * considered targetting the editor a canvas if it contains the
+ * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
+ *
+ * Ideally, this hook should be removed in the future and styles should be added
+ * explicitly as editor styles.
+ */
+export function useCompatibilityStyles() {
+	// Only memoize the result once on load, since these stylesheets should not
+	// change.
+	return useMemo( () => {
+		// Search the document for stylesheets targetting the editor canvas.
+		return Array.from( document.styleSheets ).reduce(
+			( accumulator, styleSheet ) => {
+				try {
+					// May fail for external styles.
+					// eslint-disable-next-line no-unused-expressions
+					styleSheet.cssRules;
+				} catch ( e ) {
+					return accumulator;
+				}
+
+				const { ownerNode, cssRules } = styleSheet;
+
+				if ( ! cssRules ) {
+					return accumulator;
+				}
+
+				// Generally, ignore inline styles. We add inline styles belonging to a
+				// stylesheet later, which may or may not match the selectors.
+				if ( ownerNode.tagName !== 'LINK' ) {
+					return accumulator;
+				}
+
+				// Don't try to add the reset styles, which were removed as a dependency
+				// from `edit-blocks` for the iframe since we don't need to reset admin
+				// styles.
+				if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+					return accumulator;
+				}
+
+				function matchFromRules( _cssRules ) {
+					return Array.from( _cssRules ).find(
+						( {
+							selectorText,
+							conditionText,
+							cssRules: __cssRules,
+						} ) => {
+							// If the rule is conditional then it will not have selector text.
+							// Recurse into child CSS ruleset to determine selector eligibility.
+							if ( conditionText ) {
+								return matchFromRules( __cssRules );
+							}
+
+							return (
+								selectorText &&
+								( selectorText.includes(
+									'.editor-styles-wrapper'
+								) ||
+									selectorText.includes( '.wp-block' ) )
+							);
+						}
+					);
+				}
+
+				if ( matchFromRules( cssRules ) ) {
+					// Display warning once we have a way to add style dependencies to the editor.
+					// See: https://github.com/WordPress/gutenberg/pull/37466.
+					accumulator.push( ownerNode.cloneNode( true ) );
+
+					// Add inline styles belonging to the stylesheet.
+					const inlineCssId = ownerNode.id.replace(
+						'-css',
+						'-inline-css'
+					);
+					const inlineCssElement =
+						document.getElementById( inlineCssId );
+
+					if ( inlineCssElement ) {
+						accumulator.push( inlineCssElement.cloneNode( true ) );
+					}
+				}
+
+				return accumulator;
+			},
+			[]
+		);
+	}, [] );
+}

From 8639700fdfde86aa3bc324478335d69171b6b743 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 22 Dec 2022 14:08:59 +0100
Subject: [PATCH 194/209] Jest config: use real timers by default (#46714)

* Components: enable fake timers where needed

* Editor: enable fake timers where needed

* Compose: enable fake timers where needed

* Block Editor: enable fake timers where needed

* Edit Post: enable fake timers where needed

* Block Directory: enable fake timers where needed

* Jest config: change timers default from fake to real
---
 .../components/downloadable-block-list-item/test/index.js | 2 ++
 .../src/components/alignment-control/test/index.js        | 2 ++
 .../src/components/block-alignment-control/test/index.js  | 2 ++
 .../src/components/block-switcher/test/index.js           | 5 +++--
 .../block-vertical-alignment-control/test/index.js        | 2 ++
 .../src/components/colors/test/with-colors.js             | 2 ++
 .../src/components/default-block-appender/test/index.js   | 2 ++
 .../src/components/media-replace-flow/test/index.js       | 2 ++
 .../src/components/responsive-block-control/test/index.js | 2 ++
 .../block-editor/src/components/url-input/test/button.js  | 2 ++
 .../block-editor/src/components/warning/test/index.js     | 2 ++
 packages/components/src/autocomplete/test/index.js        | 2 ++
 packages/components/src/border-box-control/test/index.js  | 2 ++
 packages/components/src/box-control/test/index.js         | 2 ++
 packages/components/src/checkbox-control/test/index.tsx   | 2 ++
 packages/components/src/color-palette/test/index.tsx      | 2 ++
 packages/components/src/color-picker/test/index.js        | 2 ++
 packages/components/src/combobox-control/test/index.js    | 2 ++
 packages/components/src/confirm-dialog/test/index.js      | 2 ++
 packages/components/src/date-time/date/test/index.tsx     | 2 ++
 packages/components/src/date-time/time/test/index.tsx     | 2 ++
 .../components/src/dimension-control/test/index.test.js   | 2 ++
 packages/components/src/disabled/test/index.tsx           | 2 ++
 packages/components/src/dropdown-menu/test/index.js       | 2 ++
 packages/components/src/dropdown/test/index.tsx           | 2 ++
 packages/components/src/external-link/test/index.tsx      | 2 ++
 packages/components/src/focal-point-picker/test/index.js  | 2 ++
 packages/components/src/font-size-picker/test/index.tsx   | 2 ++
 packages/components/src/form-file-upload/test/index.tsx   | 2 ++
 packages/components/src/form-toggle/test/index.tsx        | 2 ++
 packages/components/src/form-token-field/test/index.tsx   | 2 ++
 packages/components/src/guide/test/index.js               | 2 ++
 .../src/higher-order/with-focus-outside/test/index.js     | 2 ++
 .../src/higher-order/with-focus-return/test/index.js      | 2 ++
 packages/components/src/input-control/test/index.js       | 2 ++
 .../components/src/isolated-event-container/test/index.js | 2 ++
 packages/components/src/modal/test/index.tsx              | 4 +---
 .../src/navigable-container/test/navigable-menu.js        | 2 ++
 .../src/navigable-container/test/tababble-container.js    | 2 ++
 packages/components/src/navigation/test/index.js          | 2 ++
 packages/components/src/navigator/test/index.tsx          | 2 ++
 packages/components/src/number-control/test/index.tsx     | 2 ++
 packages/components/src/panel/test/body.js                | 2 ++
 .../components/src/select-control/test/select-control.tsx | 2 ++
 packages/components/src/tab-panel/test/index.tsx          | 2 ++
 .../components/src/toggle-group-control/test/index.tsx    | 2 ++
 packages/components/src/tooltip/test/index.js             | 2 ++
 packages/components/src/unit-control/test/index.tsx       | 2 ++
 .../components/src/utils/hooks/test/use-latest-ref.js     | 2 ++
 packages/compose/src/higher-order/pure/test/index.js      | 2 ++
 .../compose/src/higher-order/with-state/test/index.js     | 2 ++
 .../compose/src/hooks/use-focus-outside/test/index.js     | 2 ++
 .../options/test/enable-custom-fields.js                  | 2 ++
 .../editor/src/components/page-attributes/test/order.js   | 2 ++
 .../src/components/post-preview-button/test/index.js      | 2 ++
 .../src/components/post-publish-button/test/index.js      | 2 ++
 .../editor/src/components/post-saved-state/test/index.js  | 2 ++
 packages/editor/src/components/post-slug/test/index.js    | 8 +++-----
 packages/jest-preset-default/jest-preset.js               | 2 +-
 59 files changed, 118 insertions(+), 11 deletions(-)

diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
index d2939624fab68e..3e22334aeb6a6d 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
 import DownloadableBlockListItem from '../';
 import { plugin } from '../../test/fixtures';
 
+jest.useFakeTimers();
+
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js
index c792b3e9b7f82b..5cfab9d2d48a04 100644
--- a/packages/block-editor/src/components/alignment-control/test/index.js
+++ b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index abf2a0a7c448ae..58846a04cd1c49 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index 8c1983dd8569d9..0a5ae2342a39b7 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -15,7 +15,8 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
-import { act } from 'react-test-renderer';
+
+jest.useFakeTimers();
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index f2645357a197c3..6db1bb96b58798 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockVerticalAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();
diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js
index dc1efe7e386dad..0ba0b40f397e55 100644
--- a/packages/block-editor/src/components/colors/test/with-colors.js
+++ b/packages/block-editor/src/components/colors/test/with-colors.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { createCustomColorsHOC } from '../with-colors';
 
+jest.useFakeTimers();
+
 describe( 'createCustomColorsHOC', () => {
 	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
index 0a00a00d5d881f..29b2ed3931a775 100644
--- a/packages/block-editor/src/components/default-block-appender/test/index.js
+++ b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js
index 94d93a65ef8738..8b1fc612280137 100644
--- a/packages/block-editor/src/components/media-replace-flow/test/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 function TestWrapper() {
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index d9e9a26f96dfe7..f2d5a5a1a3b880 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -15,6 +15,8 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
+jest.useFakeTimers();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [
diff --git a/packages/block-editor/src/components/url-input/test/button.js b/packages/block-editor/src/components/url-input/test/button.js
index b0288cd8b27664..a7860e483c52e8 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import URLInputButton from '../button';
 
+jest.useFakeTimers();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );
diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index 88c9006b8ace9d..0b9b5f353baafe 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );
diff --git a/packages/components/src/autocomplete/test/index.js b/packages/components/src/autocomplete/test/index.js
index b33f585ea9d5f6..0972f35c38b55f 100644
--- a/packages/components/src/autocomplete/test/index.js
+++ b/packages/components/src/autocomplete/test/index.js
@@ -14,6 +14,8 @@ import { useRef } from '@wordpress/element';
  */
 import { getAutoCompleterUI } from '../autocompleter-ui';
 
+jest.useFakeTimers();
+
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {
diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
index db9327a4971fa1..9a96cab33746a2 100644
--- a/packages/components/src/border-box-control/test/index.js
+++ b/packages/components/src/border-box-control/test/index.js
@@ -10,6 +10,8 @@ import { act } from 'react-test-renderer';
  */
 import { BorderBoxControl } from '../';
 
+jest.useFakeTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
diff --git a/packages/components/src/box-control/test/index.js b/packages/components/src/box-control/test/index.js
index 5da4994cf46122..2d6a51bd8abf73 100644
--- a/packages/components/src/box-control/test/index.js
+++ b/packages/components/src/box-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
+jest.useFakeTimers();
+
 const Example = ( extraProps ) => {
 	const [ state, setState ] = useState();
 
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 2c603105dbb70c..5972adf6f695fa 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 83d7bc4d3c0eae..136cecec02192a 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+jest.useFakeTimers();
+
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },
diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.js
index 3613302bbdc2a0..caf17afd320ff9 100644
--- a/packages/components/src/color-picker/test/index.js
+++ b/packages/components/src/color-picker/test/index.js
@@ -8,6 +8,8 @@ import { render, fireEvent } from '@testing-library/react';
  */
 import { ColorPicker } from '..';
 
+jest.useFakeTimers();
+
 /**
  * Ordinarily we'd try to select the compnoent by role but the silder role appears
  * on several elements and we'd end up encoding assumptions about order when
diff --git a/packages/components/src/combobox-control/test/index.js b/packages/components/src/combobox-control/test/index.js
index 8fcb6f423b4346..8c01eaa40464b3 100644
--- a/packages/components/src/combobox-control/test/index.js
+++ b/packages/components/src/combobox-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
+jest.useFakeTimers();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },
diff --git a/packages/components/src/confirm-dialog/test/index.js b/packages/components/src/confirm-dialog/test/index.js
index 0959f0e95b989f..487c025d2153d1 100644
--- a/packages/components/src/confirm-dialog/test/index.js
+++ b/packages/components/src/confirm-dialog/test/index.js
@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 describe( 'Confirm', () => {
diff --git a/packages/components/src/date-time/date/test/index.tsx b/packages/components/src/date-time/date/test/index.tsx
index 7a1a52ee929a9e..2a62fab3405030 100644
--- a/packages/components/src/date-time/date/test/index.tsx
+++ b/packages/components/src/date-time/date/test/index.tsx
@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
  */
 import DatePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );
diff --git a/packages/components/src/date-time/time/test/index.tsx b/packages/components/src/date-time/time/test/index.tsx
index 4b22cd232baf0e..bcffe041a100ba 100644
--- a/packages/components/src/date-time/time/test/index.tsx
+++ b/packages/components/src/date-time/time/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TimePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index b1e92add6fd00b..2864578e6ff833 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -14,6 +14,8 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;
diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx
index fddbd1159637bb..b4dadc21662a63 100644
--- a/packages/components/src/disabled/test/index.tsx
+++ b/packages/components/src/disabled/test/index.tsx
@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
+jest.useFakeTimers();
+
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">
diff --git a/packages/components/src/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js
index dcb268b7cad9b2..1fc52175862c0d 100644
--- a/packages/components/src/dropdown-menu/test/index.js
+++ b/packages/components/src/dropdown-menu/test/index.js
@@ -15,6 +15,8 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
+jest.useFakeTimers();
+
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );
diff --git a/packages/components/src/dropdown/test/index.tsx b/packages/components/src/dropdown/test/index.tsx
index 32307aceea0617..ecf32c4500e3e8 100644
--- a/packages/components/src/dropdown/test/index.tsx
+++ b/packages/components/src/dropdown/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Dropdown from '..';
 
+jest.useFakeTimers();
+
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/components/src/external-link/test/index.tsx b/packages/components/src/external-link/test/index.tsx
index bb001961ae33e8..c641c5d799a63b 100644
--- a/packages/components/src/external-link/test/index.tsx
+++ b/packages/components/src/external-link/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.js
index b49985931050d1..4e7645b01cbf68 100644
--- a/packages/components/src/focal-point-picker/test/index.js
+++ b/packages/components/src/focal-point-picker/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
+jest.useFakeTimers();
+
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 3ac59bc2df1cb1..c51416a18cbddd 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+jest.useFakeTimers();
+
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.
diff --git a/packages/components/src/form-file-upload/test/index.tsx b/packages/components/src/form-file-upload/test/index.tsx
index cad69766aa8c2b..a1492e7e988d3c 100644
--- a/packages/components/src/form-file-upload/test/index.tsx
+++ b/packages/components/src/form-file-upload/test/index.tsx
@@ -14,6 +14,8 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
+jest.useFakeTimers();
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {
diff --git a/packages/components/src/form-toggle/test/index.tsx b/packages/components/src/form-toggle/test/index.tsx
index 57c603dc4143ad..4ed799567b4075 100644
--- a/packages/components/src/form-toggle/test/index.tsx
+++ b/packages/components/src/form-toggle/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index 8a37c2304f8fca..020e4e650006b6 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -21,6 +21,8 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
+jest.useFakeTimers();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
diff --git a/packages/components/src/guide/test/index.js b/packages/components/src/guide/test/index.js
index 852c09ed280887..fcea9d15d31675 100644
--- a/packages/components/src/guide/test/index.js
+++ b/packages/components/src/guide/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
+jest.useFakeTimers();
+
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );
diff --git a/packages/components/src/higher-order/with-focus-outside/test/index.js b/packages/components/src/higher-order/with-focus-outside/test/index.js
index feea9e8f2ff029..8223679279738c 100644
--- a/packages/components/src/higher-order/with-focus-outside/test/index.js
+++ b/packages/components/src/higher-order/with-focus-outside/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
+jest.useFakeTimers();
+
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {
diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
index b88e3cfd0bad08..a8abaa56d69628 100644
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
+jest.useFakeTimers();
+
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index 0be4fd28f4f495..82e936aa1b5e98 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/isolated-event-container/test/index.js b/packages/components/src/isolated-event-container/test/index.js
index 1667d69b4df0dd..2f81f50e66c3b5 100644
--- a/packages/components/src/isolated-event-container/test/index.js
+++ b/packages/components/src/isolated-event-container/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import IsolatedEventContainer from '../';
 
+jest.useFakeTimers();
+
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index 310dc3d6e63a9f..63ff485c35458e 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -72,9 +72,7 @@ describe( 'Modal', () => {
 	} );
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
diff --git a/packages/components/src/navigable-container/test/navigable-menu.js b/packages/components/src/navigable-container/test/navigable-menu.js
index e50925a73c1d3b..461c1efd454805 100644
--- a/packages/components/src/navigable-container/test/navigable-menu.js
+++ b/packages/components/src/navigable-container/test/navigable-menu.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { NavigableMenu } from '../menu';
 
+jest.useFakeTimers();
+
 const NavigableMenuTestCase = ( props ) => (
 	<NavigableMenu { ...props }>
 		<button>Item 1</button>
diff --git a/packages/components/src/navigable-container/test/tababble-container.js b/packages/components/src/navigable-container/test/tababble-container.js
index 593238578792f1..55db6aa24c7410 100644
--- a/packages/components/src/navigable-container/test/tababble-container.js
+++ b/packages/components/src/navigable-container/test/tababble-container.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { TabbableContainer } from '../tabbable';
 
+jest.useFakeTimers();
+
 const TabbableContainerTestCase = ( props ) => (
 	<TabbableContainer { ...props }>
 		<button>Item 1</button>
diff --git a/packages/components/src/navigation/test/index.js b/packages/components/src/navigation/test/index.js
index 83ada8291709bc..1c26bb461930ca 100644
--- a/packages/components/src/navigation/test/index.js
+++ b/packages/components/src/navigation/test/index.js
@@ -16,6 +16,8 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
+jest.useFakeTimers();
+
 const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index be836f0152fc20..4a6b7d85e360ca 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -20,6 +20,8 @@ import {
 	NavigatorBackButton,
 } from '..';
 
+jest.useFakeTimers();
+
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
 	return {
diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx
index ce794d3a227ff9..f4f5556982c953 100644
--- a/packages/components/src/number-control/test/index.tsx
+++ b/packages/components/src/number-control/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+jest.useFakeTimers();
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 9e0c676859c5e7..bd8cc0d567d0f2 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PanelBody } from '../body';
 
+jest.useFakeTimers();
+
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 3e0dd45d62b586..11d9eedc60407f 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import SelectControl from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 0d3a30e991ea3f..1ea23c16b602e0 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TabPanel from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 841ca8fd6bcafb..511b362f1a2d59 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -18,6 +18,8 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index 21892dea6a0da5..69e160823456e4 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -13,6 +13,8 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element ) {
 	return element.closest( '.components-popover' );
 }
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index a0e3bf3d99dcac..d0d232a54e6704 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -16,6 +16,8 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {
diff --git a/packages/components/src/utils/hooks/test/use-latest-ref.js b/packages/components/src/utils/hooks/test/use-latest-ref.js
index b90b349f25a453..3e2969a1000c9a 100644
--- a/packages/components/src/utils/hooks/test/use-latest-ref.js
+++ b/packages/components/src/utils/hooks/test/use-latest-ref.js
@@ -13,6 +13,8 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
+jest.useFakeTimers();
+
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {
diff --git a/packages/compose/src/higher-order/pure/test/index.js b/packages/compose/src/higher-order/pure/test/index.js
index 640b250df98422..84fcc26181b95c 100644
--- a/packages/compose/src/higher-order/pure/test/index.js
+++ b/packages/compose/src/higher-order/pure/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import pure from '../';
 
+jest.useFakeTimers();
+
 describe( 'pure', () => {
 	it( 'functional component should rerender only when props change', () => {
 		let i = 0;
diff --git a/packages/compose/src/higher-order/with-state/test/index.js b/packages/compose/src/higher-order/with-state/test/index.js
index b6b401eb668204..75457d49f89c66 100644
--- a/packages/compose/src/higher-order/with-state/test/index.js
+++ b/packages/compose/src/higher-order/with-state/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import withState from '../';
 
+jest.useFakeTimers();
+
 describe( 'withState', () => {
 	it( 'should pass initial state and allow updates', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/compose/src/hooks/use-focus-outside/test/index.js b/packages/compose/src/hooks/use-focus-outside/test/index.js
index 2f7c983bb0a62d..04f99e486444c8 100644
--- a/packages/compose/src/hooks/use-focus-outside/test/index.js
+++ b/packages/compose/src/hooks/use-focus-outside/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import useFocusOutside from '../';
 
+jest.useFakeTimers();
+
 const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 	<div>
 		{ /* Wrapper */ }
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
index d1bb19cf8dd5dc..5a5591704e9ee9 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
+++ b/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
@@ -12,6 +12,8 @@ import {
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
+jest.useFakeTimers();
+
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
 		const { container } = render(
diff --git a/packages/editor/src/components/page-attributes/test/order.js b/packages/editor/src/components/page-attributes/test/order.js
index e4cdcc59f722a3..31921df9b2a3e8 100644
--- a/packages/editor/src/components/page-attributes/test/order.js
+++ b/packages/editor/src/components/page-attributes/test/order.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PageAttributesOrder } from '../order';
 
+jest.useFakeTimers();
+
 describe( 'PageAttributesOrder', () => {
 	/**
 	 * When starting to type inside the spinbutton, select the current value
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index 9183debdf2e3d2..6589da6b41a823 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPreviewButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
 	const documentTitle = jest.fn();
diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js
index 299b6b0568699a..c4ada555bb117c 100644
--- a/packages/editor/src/components/post-publish-button/test/index.js
+++ b/packages/editor/src/components/post-publish-button/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPublishButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPublishButton', () => {
 	describe( 'aria-disabled', () => {
 		it( 'should be true if post is currently saving', () => {
diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
index c684f0011acedd..e0c27b213bca83 100644
--- a/packages/editor/src/components/post-saved-state/test/index.js
+++ b/packages/editor/src/components/post-saved-state/test/index.js
@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
  */
 import PostSavedState from '../';
 
+jest.useFakeTimers();
+
 const mockSavePost = jest.fn();
 
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js
index 771f6c2f60bab6..74011209dd151a 100644
--- a/packages/editor/src/components/post-slug/test/index.js
+++ b/packages/editor/src/components/post-slug/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -11,9 +11,7 @@ import { PostSlug } from '../';
 
 describe( 'PostSlug', () => {
 	it( 'should update slug with sanitized input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onUpdateSlug = jest.fn();
 
 		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
@@ -21,7 +19,7 @@ describe( 'PostSlug', () => {
 		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
 		await user.clear( input );
 		await user.type( input, 'Foo Bar-Baz 9!' );
-		input.blur();
+		act( () => input.blur() );
 
 		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
 	} );
diff --git a/packages/jest-preset-default/jest-preset.js b/packages/jest-preset-default/jest-preset.js
index c6a491e9ed1d98..fc80efd5c62641 100644
--- a/packages/jest-preset-default/jest-preset.js
+++ b/packages/jest-preset-default/jest-preset.js
@@ -24,7 +24,7 @@ module.exports = {
 		'**/?(*.)test.[jt]s?(x)',
 	],
 	testPathIgnorePatterns: [ '/node_modules/', '<rootDir>/vendor/' ],
-	timers: 'fake',
+	timers: 'real',
 	transform: {
 		'\\.[jt]sx?$': require.resolve( 'babel-jest' ),
 	},

From 13fa2deae3537e013ef9e4b8c1e85a7d4d2576a3 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 22 Dec 2022 16:56:43 +0200
Subject: [PATCH 195/209] Lodash: Remove dependency from server-side-render
 (#46746)

---
 package-lock.json                        | 3 +--
 packages/server-side-render/package.json | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3eb16d1af48cb9..f7a8e06b726276 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19560,8 +19560,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/i18n": "file:packages/i18n",
 				"@wordpress/url": "file:packages/url",
-				"fast-deep-equal": "^3.1.3",
-				"lodash": "^4.17.21"
+				"fast-deep-equal": "^3.1.3"
 			}
 		},
 		"@wordpress/shortcode": {
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 00376e06365981..ecead9902e95f1 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -36,8 +36,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/url": "file:../url",
-		"fast-deep-equal": "^3.1.3",
-		"lodash": "^4.17.21"
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

From 96b25d9d3be35d438779b9c64bc84294ec84dd90 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 22 Dec 2022 17:01:47 +0200
Subject: [PATCH 196/209] Lodash: Remove dependency from customize-widgets
 (#46747)

---
 package-lock.json                       | 3 +--
 packages/customize-widgets/package.json | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f7a8e06b726276..1fe6b19571dff7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18313,8 +18313,7 @@
 				"@wordpress/preferences": "file:packages/preferences",
 				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
-				"fast-deep-equal": "^3.1.3",
-				"lodash": "^4.17.21"
+				"fast-deep-equal": "^3.1.3"
 			}
 		},
 		"@wordpress/data": {
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index b2da830c27dbf5..61c7a05ba8f048 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -44,8 +44,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
-		"fast-deep-equal": "^3.1.3",
-		"lodash": "^4.17.21"
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

From c365a808ef7d246b0f3e44a2c52b583d48eb6cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 22 Dec 2022 19:09:22 +0100
Subject: [PATCH 197/209] Bundle the `WP_Theme_JSON_Resolver` class as a single
 file instead of inheriting per WordPress version (#46750)

* Backport WP_Theme_JSON_Resolver from core as it is

* Substitute WP_Theme_JSON by WP_Theme_JSON_Gutenberg

* Substitute WP_Theme_JSON_Data by WP_Theme_JSON_Data_Gutenberg

* Rename WP_Theme_JSON_Resolver to WP_Theme_JSON_Resolver_Base

The goal is to use it as base to inherit from, until we are able
to remove all the children.

* Make WP_Theme_JSON_Resolver_6_1 inherit from WP_Theme_JSON_Resolver_Base

* 6.1: remove field already defined in base class

* 6.1: remove translate, it is equal to base method

* 6.1: remove get_core_data, it does not have base changes

* 6.1: remove get_user_data

Missed core changes and does not do anything differently from core.

* 6.1: remove get_user_data_from_wp_global_styles

It misses core changes and does not do anything differently.

* 6.2: inherit from WP_Theme_JSON_Resolver_Base instead of 6.1

This makes the WP_Theme_JSON_Resover_6_1 class unused.

* 6.1: remove class no longer in use

* 6.2: deprecate theme_has_support

https://github.com/WordPress/gutenberg/pull/45380/

* 6.2: substitute WP_Theme_JSON_Resolver::theme_has_support

by wp_theme_has_theme_json()

https://github.com/WordPress/gutenberg/pull/45168

* 6.2: port changes to get_user_data_from_wp_global_styles

https://github.com/WordPress/gutenberg/pull/46043/

* 6.2: update get_merged_data

https://github.com/WordPress/gutenberg/pull/45969/

* 6.2: remove get_user_data

Same code as core. There's a check for detecting whether the class
is an instance of WP_Theme_JSON_Gutenberg that was not ported.
This check was introduced to make sure the cache of the core class
didn't interfere with the cache of the Gutenberg class,
so it's no longer necessary.

See https://github.com/WordPress/gutenberg/pull/42756

* experimental: make it inherit from WP_Theme_JSON_Resolver_Base

* 6.2: remove class no longer in use

* experimental: delete remove_json_comments

It's already part of the base class.

* experimental: remove get_block_data

It's already part of the base class and it didn't have
the changes from core.

* experimental: appearanceTools

Port changes to the base class that were meant to be part of 6.1.
See https://github.com/WordPress/gutenberg/pull/43337

* experimental: port webfonts (experimental API)

see https://github.com/WordPress/gutenberg/pull/37140

* experimental: use gutenberg_get_legacy_theme_supports_for_theme_json

https://github.com/WordPress/gutenberg/pull/46112

* experimental: get_theme_data, all code is in the base class

* experimental: remove empty class

* Rename WP_Theme_JSON_Resolver_Base to WP_Theme_JSON_Resolver_Gutenberg

* Fix lint issue: rename class-wp-theme-json-resolver.php to class-wp-theme-json-resolver-gutenberg.php

* Move theme.json to unversioned lib/

* Move theme-i18n.json to unversioned lib/
---
 ...class-wp-theme-json-resolver-gutenberg.php | 701 ++++++++++++++++++
 .../class-wp-theme-json-resolver-6-1.php      | 191 -----
 .../class-wp-theme-json-resolver-6-2.php      | 230 ------
 ...class-wp-theme-json-resolver-gutenberg.php | 177 -----
 lib/load.php                                  |   4 +-
 .../wordpress-6.1 => }/theme-i18n.json        |   0
 lib/{compat/wordpress-6.1 => }/theme.json     |   0
 7 files changed, 702 insertions(+), 601 deletions(-)
 create mode 100644 lib/class-wp-theme-json-resolver-gutenberg.php
 delete mode 100644 lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
 delete mode 100644 lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
 delete mode 100644 lib/experimental/class-wp-theme-json-resolver-gutenberg.php
 rename lib/{compat/wordpress-6.1 => }/theme-i18n.json (100%)
 rename lib/{compat/wordpress-6.1 => }/theme.json (100%)

diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
new file mode 100644
index 00000000000000..05d8b56e49727b
--- /dev/null
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -0,0 +1,701 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver class
+ *
+ * @package gutenberg
+ * @since 5.8.0
+ */
+
+/**
+ * Class that abstracts the processing of the different data sources
+ * for site-level config and offers an API to work with them.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ *
+ * @access private
+ */
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Resolver_Gutenberg {
+
+	/**
+	 * Container for keep track of registered blocks.
+	 *
+	 * @since 6.1.0
+	 * @var array
+	 */
+	protected static $blocks_cache = array(
+		'core'   => array(),
+		'blocks' => array(),
+		'theme'  => array(),
+		'user'   => array(),
+	);
+
+	/**
+	 * Container for data coming from core.
+	 *
+	 * @since 5.8.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $core = null;
+
+	/**
+	 * Container for data coming from the blocks.
+	 *
+	 * @since 6.1.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $blocks = null;
+
+	/**
+	 * Container for data coming from the theme.
+	 *
+	 * @since 5.8.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $theme = null;
+
+	/**
+	 * Container for data coming from the user.
+	 *
+	 * @since 5.9.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $user = null;
+
+	/**
+	 * Stores the ID of the custom post type
+	 * that holds the user data.
+	 *
+	 * @since 5.9.0
+	 * @var int
+	 */
+	protected static $user_custom_post_type_id = null;
+
+	/**
+	 * Container to keep loaded i18n schema for `theme.json`.
+	 *
+	 * @since 5.8.0 As `$theme_json_i18n`.
+	 * @since 5.9.0 Renamed from `$theme_json_i18n` to `$i18n_schema`.
+	 * @var array
+	 */
+	protected static $i18n_schema = null;
+
+	/**
+	 * `theme.json` file cache.
+	 *
+	 * @since 6.1.0
+	 * @var array
+	 */
+	protected static $theme_json_file_cache = array();
+
+	/**
+	 * Processes a file that adheres to the theme.json schema
+	 * and returns an array with its contents, or a void array if none found.
+	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added caching.
+	 *
+	 * @param string $file_path Path to file. Empty if no file.
+	 * @return array Contents that adhere to the theme.json schema.
+	 */
+	protected static function read_json_file( $file_path ) {
+		if ( $file_path ) {
+			if ( array_key_exists( $file_path, static::$theme_json_file_cache ) ) {
+				return static::$theme_json_file_cache[ $file_path ];
+			}
+
+			$decoded_file = wp_json_file_decode( $file_path, array( 'associative' => true ) );
+			if ( is_array( $decoded_file ) ) {
+				static::$theme_json_file_cache[ $file_path ] = $decoded_file;
+				return static::$theme_json_file_cache[ $file_path ];
+			}
+		}
+
+		return array();
+	}
+
+	/**
+	 * Returns a data structure used in theme.json translation.
+	 *
+	 * @since 5.8.0
+	 * @deprecated 5.9.0
+	 *
+	 * @return array An array of theme.json fields that are translatable and the keys that are translatable.
+	 */
+	public static function get_fields_to_translate() {
+		_deprecated_function( __METHOD__, '5.9.0' );
+		return array();
+	}
+
+	/**
+	 * Given a theme.json structure modifies it in place to update certain values
+	 * by its translated strings according to the language set by the user.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $theme_json The theme.json to translate.
+	 * @param string $domain     Optional. Text domain. Unique identifier for retrieving translated strings.
+	 *                           Default 'default'.
+	 * @return array Returns the modified $theme_json_structure.
+	 */
+	protected static function translate( $theme_json, $domain = 'default' ) {
+		if ( null === static::$i18n_schema ) {
+			$i18n_schema         = wp_json_file_decode( __DIR__ . '/theme-i18n.json' );
+			static::$i18n_schema = null === $i18n_schema ? array() : $i18n_schema;
+		}
+
+		return translate_settings_using_i18n_schema( static::$i18n_schema, $theme_json, $domain );
+	}
+
+	/**
+	 * Returns core's origin config.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @return WP_Theme_JSON Entity that holds core data.
+	 */
+	public static function get_core_data() {
+		if ( null !== static::$core && static::has_same_registered_blocks( 'core' ) ) {
+			return static::$core;
+		}
+
+		$config = static::read_json_file( __DIR__ . '/theme.json' );
+		$config = static::translate( $config );
+
+		/**
+		 * Filters the default data provided by WordPress for global styles & settings.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+		 */
+		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
+		$config       = $theme_json->get_data();
+		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+
+		return static::$core;
+	}
+
+	/**
+	 * Checks whether the registered blocks were already processed for this origin.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $origin Data source for which to cache the blocks.
+	 *                       Valid values are 'core', 'blocks', 'theme', and 'user'.
+	 * @return bool True on success, false otherwise.
+	 */
+	protected static function has_same_registered_blocks( $origin ) {
+		// Bail out if the origin is invalid.
+		if ( ! isset( static::$blocks_cache[ $origin ] ) ) {
+			return false;
+		}
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		// Is there metadata for all currently registered blocks?
+		$block_diff = array_diff_key( $blocks, static::$blocks_cache[ $origin ] );
+		if ( empty( $block_diff ) ) {
+			return true;
+		}
+
+		foreach ( $blocks as $block_name => $block_type ) {
+			static::$blocks_cache[ $origin ][ $block_name ] = true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns the theme's data.
+	 *
+	 * Data from theme.json will be backfilled from existing
+	 * theme supports, if any. Note that if the same data
+	 * is present in theme.json and in theme supports,
+	 * the theme.json takes precedence.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Theme supports have been inlined and the `$theme_support_data` argument removed.
+	 * @since 6.0.0 Added an `$options` parameter to allow the theme data to be returned without theme supports.
+	 *
+	 * @param array $deprecated Deprecated. Not used.
+	 * @param array $options {
+	 *     Options arguments.
+	 *
+	 *     @type bool $with_supports Whether to include theme supports in the data. Default true.
+	 * }
+	 * @return WP_Theme_JSON Entity that holds theme data.
+	 */
+	public static function get_theme_data( $deprecated = array(), $options = array() ) {
+		if ( ! empty( $deprecated ) ) {
+			_deprecated_argument( __METHOD__, '5.9.0' );
+		}
+
+		$options = wp_parse_args( $options, array( 'with_supports' => true ) );
+
+		if ( null === static::$theme || ! static::has_same_registered_blocks( 'theme' ) ) {
+			$theme_json_file = static::get_file_path_from_theme( 'theme.json' );
+			$wp_theme        = wp_get_theme();
+			if ( '' !== $theme_json_file ) {
+				$theme_json_data = static::read_json_file( $theme_json_file );
+				$theme_json_data = static::translate( $theme_json_data, $wp_theme->get( 'TextDomain' ) );
+			} else {
+				$theme_json_data = array();
+			}
+			// BEGIN OF EXPERIMENTAL CODE. Not to backport to core.
+			$theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $theme_json_data );
+			// END OF EXPERIMENTAL CODE.
+
+			/**
+			 * Filters the data provided by the theme for global styles and settings.
+			 *
+			 * @since 6.1.0
+			 *
+			 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+			 */
+			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
+			$theme_json_data = $theme_json->get_data();
+			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
+
+			if ( $wp_theme->parent() ) {
+				// Get parent theme.json.
+				$parent_theme_json_file = static::get_file_path_from_theme( 'theme.json', true );
+				if ( '' !== $parent_theme_json_file ) {
+					$parent_theme_json_data = static::read_json_file( $parent_theme_json_file );
+					$parent_theme_json_data = static::translate( $parent_theme_json_data, $wp_theme->parent()->get( 'TextDomain' ) );
+					// BEGIN OF EXPERIMENTAL CODE. Not to backport to core.
+					$parent_theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $parent_theme_json_data );
+					// END OF EXPERIMENTAL CODE.
+					$parent_theme = new WP_Theme_JSON_Gutenberg( $parent_theme_json_data );
+
+					/*
+					 * Merge the child theme.json into the parent theme.json.
+					 * The child theme takes precedence over the parent.
+					 */
+					$parent_theme->merge( static::$theme );
+					static::$theme = $parent_theme;
+				}
+			}
+		}
+
+		if ( ! $options['with_supports'] ) {
+			return static::$theme;
+		}
+
+		/*
+		 * We want the presets and settings declared in theme.json
+		 * to override the ones declared via theme supports.
+		 * So we take theme supports, transform it to theme.json shape
+		 * and merge the static::$theme upon that.
+		 */
+		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_legacy_theme_supports_for_theme_json() );
+		if ( ! wp_theme_has_theme_json() ) {
+			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
+				$theme_support_data['settings']['color'] = array();
+			}
+
+			$default_palette = false;
+			if ( current_theme_supports( 'default-color-palette' ) ) {
+				$default_palette = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['color']['palette'] ) ) {
+				// If the theme does not have any palette, we still want to show the core one.
+				$default_palette = true;
+			}
+			$theme_support_data['settings']['color']['defaultPalette'] = $default_palette;
+
+			$default_gradients = false;
+			if ( current_theme_supports( 'default-gradient-presets' ) ) {
+				$default_gradients = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['color']['gradients'] ) ) {
+				// If the theme does not have any gradients, we still want to show the core ones.
+				$default_gradients = true;
+			}
+			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
+
+			// Classic themes without a theme.json don't support global duotone.
+			$theme_support_data['settings']['color']['defaultDuotone'] = false;
+
+			// Allow themes to enable appearance tools via theme_support.
+			if ( current_theme_supports( 'appearance-tools' ) ) {
+				$theme_support_data['settings']['appearanceTools'] = true;
+			}
+		}
+		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
+		$with_theme_supports->merge( static::$theme );
+		return $with_theme_supports;
+	}
+
+	/**
+	 * Gets the styles for blocks from the block.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public static function get_block_data() {
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		if ( null !== static::$blocks && static::has_same_registered_blocks( 'blocks' ) ) {
+			return static::$blocks;
+		}
+
+		$config = array( 'version' => 2 );
+		foreach ( $blocks as $block_name => $block_type ) {
+			if ( isset( $block_type->supports['__experimentalStyle'] ) ) {
+				$config['styles']['blocks'][ $block_name ] = static::remove_json_comments( $block_type->supports['__experimentalStyle'] );
+			}
+
+			if (
+				isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) &&
+				null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null )
+			) {
+				// Ensure an empty placeholder value exists for the block, if it provides a default blockGap value.
+				// The real blockGap value to be used will be determined when the styles are rendered for output.
+				$config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null;
+			}
+		}
+
+		/**
+		 * Filters the data provided by the blocks for global styles & settings.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+		 */
+		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
+		$config     = $theme_json->get_data();
+
+		static::$blocks = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
+		return static::$blocks;
+	}
+
+	/**
+	 * When given an array, this will remove any keys with the name `//`.
+	 *
+	 * @param array $array The array to filter.
+	 * @return array The filtered array.
+	 */
+	private static function remove_json_comments( $array ) {
+		unset( $array['//'] );
+		foreach ( $array as $k => $v ) {
+			if ( is_array( $v ) ) {
+				$array[ $k ] = static::remove_json_comments( $v );
+			}
+		}
+
+		return $array;
+	}
+
+	/**
+	 * Returns the custom post type that contains the user's origin config
+	 * for the active theme or a void array if none are found.
+	 *
+	 * This can also create and return a new draft custom post type.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param WP_Theme $theme              The theme object. If empty, it
+	 *                                     defaults to the active theme.
+	 * @param bool     $create_post        Optional. Whether a new custom post
+	 *                                     type should be created if none are
+	 *                                     found. Default false.
+	 * @param array    $post_status_filter Optional. Filter custom post type by
+	 *                                     post status. Default `array( 'publish' )`,
+	 *                                     so it only fetches published posts.
+	 * @return array Custom Post Type for the user's origin config.
+	 */
+	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
+		if ( ! $theme instanceof WP_Theme ) {
+			$theme = wp_get_theme();
+		}
+
+		/*
+		 * Bail early if the theme does not support a theme.json.
+		 *
+		 * Since wp_theme_has_theme_json only supports the active
+		 * theme, the extra condition for whether $theme is the active theme is
+		 * present here.
+		 */
+		if ( $theme->get_stylesheet() === get_stylesheet() && ! wp_theme_has_theme_json() ) {
+			return array();
+		}
+
+		$user_cpt         = array();
+		$post_type_filter = 'wp_global_styles';
+		$stylesheet       = $theme->get_stylesheet();
+		$args             = array(
+			'posts_per_page'         => 1,
+			'orderby'                => 'date',
+			'order'                  => 'desc',
+			'post_type'              => $post_type_filter,
+			'post_status'            => $post_status_filter,
+			'ignore_sticky_posts'    => true,
+			'no_found_rows'          => true,
+			'update_post_meta_cache' => false,
+			'update_post_term_cache' => false,
+			'tax_query'              => array(
+				array(
+					'taxonomy' => 'wp_theme',
+					'field'    => 'name',
+					'terms'    => $stylesheet,
+				),
+			),
+		);
+
+		$global_style_query = new WP_Query();
+		$recent_posts       = $global_style_query->query( $args );
+		if ( count( $recent_posts ) === 1 ) {
+			$user_cpt = get_object_vars( $recent_posts[0] );
+		} elseif ( $create_post ) {
+			$cpt_post_id = wp_insert_post(
+				array(
+					'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
+					'post_status'  => 'publish',
+					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
+					'post_type'    => $post_type_filter,
+					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
+					'tax_input'    => array(
+						'wp_theme' => array( $stylesheet ),
+					),
+				),
+				true
+			);
+			if ( ! is_wp_error( $cpt_post_id ) ) {
+				$user_cpt = get_object_vars( get_post( $cpt_post_id ) );
+			}
+		}
+
+		return $user_cpt;
+	}
+
+	/**
+	 * Returns the user's origin config.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return WP_Theme_JSON Entity that holds styles for user data.
+	 */
+	public static function get_user_data() {
+		if ( null !== static::$user && static::has_same_registered_blocks( 'user' ) ) {
+			return static::$user;
+		}
+
+		$config   = array();
+		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
+
+		if ( array_key_exists( 'post_content', $user_cpt ) ) {
+			$decoded_data = json_decode( $user_cpt['post_content'], true );
+
+			$json_decoding_error = json_last_error();
+			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
+				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
+				/**
+				 * Filters the data provided by the user for global styles & settings.
+				 *
+				 * @since 6.1.0
+				 *
+				 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+				 */
+				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+				$config     = $theme_json->get_data();
+				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+			}
+
+			// Very important to verify that the flag isGlobalStylesUserThemeJSON is true.
+			// If it's not true then the content was not escaped and is not safe.
+			if (
+				is_array( $decoded_data ) &&
+				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
+				$decoded_data['isGlobalStylesUserThemeJSON']
+			) {
+				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
+				$config = $decoded_data;
+			}
+		}
+
+		/** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */
+		$theme_json   = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+		$config       = $theme_json->get_data();
+		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+
+		return static::$user;
+	}
+
+	/**
+	 * Returns the data merged from multiple origins.
+	 *
+	 * There are four sources of data (origins) for a site:
+	 *
+	 * - default => WordPress
+	 * - blocks  => each one of the blocks provides data for itself
+	 * - theme   => the active theme
+	 * - custom  => data provided by the user
+	 *
+	 * The custom's has higher priority than the theme's, the theme's higher than blocks',
+	 * and block's higher than default's.
+	 *
+	 * Unlike the getters
+	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_core_data/ get_core_data},
+	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_theme_data/ get_theme_data},
+	 * and {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_user_data/ get_user_data},
+	 * this method returns data after it has been merged with the previous origins.
+	 * This means that if the same piece of data is declared in different origins
+	 * (default, blocks, theme, custom), the last origin overrides the previous.
+	 *
+	 * For example, if the user has set a background color
+	 * for the paragraph block, and the theme has done it as well,
+	 * the user preference wins.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added user data, removed the `$settings` parameter,
+	 *              added the `$origin` parameter.
+	 * @since 6.1.0 Added block data and generation of spacingSizes array.
+	 *
+	 * @param string $origin Optional. To what level should we merge data:'default', 'blocks', 'theme' or 'custom'.
+	 *                       'custom' is used as default value as well as fallback value if the origin is unknown.
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public static function get_merged_data( $origin = 'custom' ) {
+		if ( is_array( $origin ) ) {
+			_deprecated_argument( __FUNCTION__, '5.9.0' );
+		}
+
+		$result = static::get_core_data();
+		if ( 'default' === $origin ) {
+			$result->set_spacing_sizes();
+			return $result;
+		}
+
+		$result->merge( static::get_block_data() );
+		if ( 'blocks' === $origin ) {
+			return $result;
+		}
+
+		$result->merge( static::get_theme_data() );
+		if ( 'theme' === $origin ) {
+			$result->set_spacing_sizes();
+			return $result;
+		}
+
+		$result->merge( static::get_user_data() );
+		$result->set_spacing_sizes();
+		return $result;
+	}
+
+	/**
+	 * Returns the ID of the custom post type
+	 * that stores user data.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return integer|null
+	 */
+	public static function get_user_global_styles_post_id() {
+		if ( null !== static::$user_custom_post_type_id ) {
+			return static::$user_custom_post_type_id;
+		}
+
+		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme(), true );
+
+		if ( array_key_exists( 'ID', $user_cpt ) ) {
+			static::$user_custom_post_type_id = $user_cpt['ID'];
+		}
+
+		return static::$user_custom_post_type_id;
+	}
+
+	/**
+	 * Determines whether the active theme has a theme.json file.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added a check in the parent theme.
+	 * @deprecated 6.2.0 Use wp_theme_has_theme_json() instead.
+	 *
+	 * @return bool
+	 */
+	public static function theme_has_support() {
+		_deprecated_function( __METHOD__, '6.2.0', 'wp_theme_has_theme_json()' );
+
+		return wp_theme_has_theme_json();
+	}
+
+	/**
+	 * Builds the path to the given file and checks that it is readable.
+	 *
+	 * If it isn't, returns an empty string, otherwise returns the whole file path.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Adapted to work with child themes, added the `$template` argument.
+	 *
+	 * @param string $file_name Name of the file.
+	 * @param bool   $template  Optional. Use template theme directory. Default false.
+	 * @return string The whole file path or empty if the file doesn't exist.
+	 */
+	protected static function get_file_path_from_theme( $file_name, $template = false ) {
+		$path      = $template ? get_template_directory() : get_stylesheet_directory();
+		$candidate = $path . '/' . $file_name;
+
+		return is_readable( $candidate ) ? $candidate : '';
+	}
+
+	/**
+	 * Cleans the cached data so it can be recalculated.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$user`, `$user_custom_post_type_id`,
+	 *              and `$i18n_schema` variables to reset.
+	 * @since 6.1.0 Added the `$blocks` and `$blocks_cache` variables
+	 *              to reset.
+	 */
+	public static function clean_cached_data() {
+		static::$core                     = null;
+		static::$blocks                   = null;
+		static::$blocks_cache             = array(
+			'core'   => array(),
+			'blocks' => array(),
+			'theme'  => array(),
+			'user'   => array(),
+		);
+		static::$theme                    = null;
+		static::$user                     = null;
+		static::$user_custom_post_type_id = null;
+		static::$i18n_schema              = null;
+	}
+
+	/**
+	 * Returns the style variations defined by the theme.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return array
+	 */
+	public static function get_style_variations() {
+		$variations     = array();
+		$base_directory = get_stylesheet_directory() . '/styles';
+		if ( is_dir( $base_directory ) ) {
+			$nested_files      = new RecursiveIteratorIterator( new RecursiveDirectoryIterator( $base_directory ) );
+			$nested_html_files = iterator_to_array( new RegexIterator( $nested_files, '/^.+\.json$/i', RecursiveRegexIterator::GET_MATCH ) );
+			ksort( $nested_html_files );
+			foreach ( $nested_html_files as $path => $file ) {
+				$decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) );
+				if ( is_array( $decoded_file ) ) {
+					$translated = static::translate( $decoded_file, wp_get_theme()->get( 'TextDomain' ) );
+					$variation  = ( new WP_Theme_JSON_Gutenberg( $translated ) )->get_raw_data();
+					if ( empty( $variation['title'] ) ) {
+						$variation['title'] = basename( $path, '.json' );
+					}
+					$variations[] = $variation;
+				}
+			}
+		}
+		return $variations;
+	}
+
+}
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
deleted file mode 100644
index 1d4a83e3406fbe..00000000000000
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
+++ /dev/null
@@ -1,191 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_6_1 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_6_1 extends WP_Theme_JSON_Resolver {
-
-	/**
-	 * Container for data coming from core.
-	 *
-	 * @since 5.8.0
-	 * @var WP_Theme_JSON
-	 */
-	protected static $core = null;
-
-	/**
-	 * Given a theme.json structure modifies it in place
-	 * to update certain values by its translated strings
-	 * according to the language set by the user.
-	 *
-	 * @param array  $theme_json The theme.json to translate.
-	 * @param string $domain     Optional. Text domain. Unique identifier for retrieving translated strings.
-	 *                           Default 'default'.
-	 * @return array Returns the modified $theme_json_structure.
-	 */
-	protected static function translate( $theme_json, $domain = 'default' ) {
-		if ( null === static::$i18n_schema ) {
-			$i18n_schema         = wp_json_file_decode( __DIR__ . '/theme-i18n.json' );
-			static::$i18n_schema = null === $i18n_schema ? array() : $i18n_schema;
-		}
-
-		return translate_settings_using_i18n_schema( static::$i18n_schema, $theme_json, $domain );
-	}
-
-	/**
-	 * Return core's origin config.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds core data.
-	 */
-	public static function get_core_data() {
-		if ( null !== static::$core ) {
-			return static::$core;
-		}
-
-		$config = static::read_json_file( __DIR__ . '/theme.json' );
-		$config = static::translate( $config );
-		/**
-		 * Filters the default data provided by WordPress for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
-		$config       = $theme_json->get_data();
-		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
-
-		return static::$core;
-	}
-
-	/**
-	 * Returns the user's origin config.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
-	 */
-	public static function get_user_data() {
-		if ( null !== static::$user ) {
-			return static::$user;
-		}
-
-		$config   = array();
-		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
-
-		if ( array_key_exists( 'post_content', $user_cpt ) ) {
-			$decoded_data = json_decode( $user_cpt['post_content'], true );
-
-			$json_decoding_error = json_last_error();
-			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
-				/**
-				 * Filters the data provided by the user for global styles & settings.
-				 *
-				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-				 */
-				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-			}
-
-			// Very important to verify if the flag isGlobalStylesUserThemeJSON is true.
-			// If is not true the content was not escaped and is not safe.
-			if (
-				is_array( $decoded_data ) &&
-				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
-				$decoded_data['isGlobalStylesUserThemeJSON']
-			) {
-				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
-				$config = $decoded_data;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the user for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json   = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-		$config       = $theme_json->get_data();
-		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-
-		return static::$user;
-	}
-
-	/**
-	 * Returns the custom post type that contains the user's origin config
-	 * for the active theme or a void array if none are found.
-	 *
-	 * This can also create and return a new draft custom post type.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_Theme $theme              The theme object. If empty, it
-	 *                                     defaults to the active theme.
-	 * @param bool     $create_post        Optional. Whether a new custom post
-	 *                                     type should be created if none are
-	 *                                     found. Default false.
-	 * @param array    $post_status_filter Optional. Filter custom post type by
-	 *                                     post status. Default `array( 'publish' )`,
-	 *                                     so it only fetches published posts.
-	 * @return array Custom Post Type for the user's origin config.
-	 */
-	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
-		if ( ! $theme instanceof WP_Theme ) {
-			$theme = wp_get_theme();
-		}
-		$user_cpt         = array();
-		$post_type_filter = 'wp_global_styles';
-		$stylesheet       = $theme->get_stylesheet();
-		$args             = array(
-			'posts_per_page'      => 1,
-			'orderby'             => 'date',
-			'order'               => 'desc',
-			'post_type'           => $post_type_filter,
-			'post_status'         => $post_status_filter,
-			'ignore_sticky_posts' => true,
-			'no_found_rows'       => true,
-			'tax_query'           => array(
-				array(
-					'taxonomy' => 'wp_theme',
-					'field'    => 'name',
-					'terms'    => $stylesheet,
-				),
-			),
-		);
-
-		$global_style_query = new WP_Query();
-		$recent_posts       = $global_style_query->query( $args );
-		if ( count( $recent_posts ) === 1 ) {
-			$user_cpt = get_post( $recent_posts[0], ARRAY_A );
-		} elseif ( $create_post ) {
-			$cpt_post_id = wp_insert_post(
-				array(
-					'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-					'post_status'  => 'publish',
-					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
-					'post_type'    => $post_type_filter,
-					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
-					'tax_input'    => array(
-						'wp_theme' => array( $stylesheet ),
-					),
-				),
-				true
-			);
-			if ( ! is_wp_error( $cpt_post_id ) ) {
-				$user_cpt = get_post( $cpt_post_id, ARRAY_A );
-			}
-		}
-
-		return $user_cpt;
-	}
-}
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
deleted file mode 100644
index 110c8bac7b147c..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
+++ /dev/null
@@ -1,230 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_6_1 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_6_2 extends WP_Theme_JSON_Resolver_6_1 {
-
-	/**
-	 * Returns the custom post type that contains the user's origin config
-	 * for the active theme or a void array if none are found.
-	 *
-	 * This can also create and return a new draft custom post type.
-	 *
-	 * @param WP_Theme $theme              The theme object. If empty, it
-	 *                                     defaults to the active theme.
-	 * @param bool     $create_post        Optional. Whether a new custom post
-	 *                                     type should be created if none are
-	 *                                     found. Default false.
-	 * @param array    $post_status_filter Optional. Filter custom post type by
-	 *                                     post status. Default `array( 'publish' )`,
-	 *                                     so it only fetches published posts.
-	 * @return array Custom Post Type for the user's origin config.
-	 */
-	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
-		if ( ! $theme instanceof WP_Theme ) {
-			$theme = wp_get_theme();
-		}
-
-		/*
-		 * Bail early if the theme does not support a theme.json.
-		 *
-		 * Since wp_theme_has_theme_json only supports the active
-		 * theme, the extra condition for whether $theme is the active theme is
-		 * present here.
-		 */
-		if ( $theme->get_stylesheet() === get_stylesheet() && ! wp_theme_has_theme_json() ) {
-			return array();
-		}
-
-		$user_cpt         = array();
-		$post_type_filter = 'wp_global_styles';
-		$stylesheet       = $theme->get_stylesheet();
-		$args             = array(
-			'posts_per_page'         => 1,
-			'orderby'                => 'date',
-			'order'                  => 'desc',
-			'post_type'              => $post_type_filter,
-			'post_status'            => $post_status_filter,
-			'ignore_sticky_posts'    => true,
-			'no_found_rows'          => true,
-			'update_post_meta_cache' => false,
-			'update_post_term_cache' => false,
-			'tax_query'              => array(
-				array(
-					'taxonomy' => 'wp_theme',
-					'field'    => 'name',
-					'terms'    => $stylesheet,
-				),
-			),
-		);
-
-		$global_style_query = new WP_Query();
-		$recent_posts       = $global_style_query->query( $args );
-		if ( count( $recent_posts ) === 1 ) {
-			$user_cpt = get_object_vars( $recent_posts[0] );
-		} elseif ( $create_post ) {
-			$cpt_post_id = wp_insert_post(
-				array(
-					'post_content' => '{"version": ' . WP_Theme_JSON::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-					'post_status'  => 'publish',
-					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
-					'post_type'    => $post_type_filter,
-					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
-					'tax_input'    => array(
-						'wp_theme' => array( $stylesheet ),
-					),
-				),
-				true
-			);
-			if ( ! is_wp_error( $cpt_post_id ) ) {
-				$user_cpt = get_object_vars( get_post( $cpt_post_id ) );
-			}
-		}
-
-		return $user_cpt;
-	}
-
-	/**
-	 * Determines whether the active theme has a theme.json file.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added a check in the parent theme.
-	 * @deprecated 6.2.0 Use wp_theme_has_theme_json() instead.
-	 *
-	 * @return bool
-	 */
-	public static function theme_has_support() {
-		_deprecated_function( __METHOD__, '6.2.0', 'wp_theme_has_theme_json()' );
-
-		return wp_theme_has_theme_json();
-	}
-
-	/**
-	 * Returns the data merged from multiple origins.
-	 *
-	 * There are four sources of data (origins) for a site:
-	 *
-	 * - default => WordPress
-	 * - blocks  => each one of the blocks provides data for itself
-	 * - theme   => the active theme
-	 * - custom  => data provided by the user
-	 *
-	 * The custom's has higher priority than the theme's, the theme's higher than blocks',
-	 * and block's higher than default's.
-	 *
-	 * Unlike the getters
-	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_core_data/ get_core_data},
-	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_theme_data/ get_theme_data},
-	 * and {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_user_data/ get_user_data},
-	 * this method returns data after it has been merged with the previous origins.
-	 * This means that if the same piece of data is declared in different origins
-	 * (default, blocks, theme, custom), the last origin overrides the previous.
-	 *
-	 * For example, if the user has set a background color
-	 * for the paragraph block, and the theme has done it as well,
-	 * the user preference wins.
-	 *
-	 * @param string $origin Optional. To what level should we merge data:'default', 'blocks', 'theme' or 'custom'.
-	 *                       'custom' is used as default value as well as fallback value if the origin is unknown.
-	 *
-	 * @return WP_Theme_JSON
-	 */
-	public static function get_merged_data( $origin = 'custom' ) {
-		if ( is_array( $origin ) ) {
-			_deprecated_argument( __FUNCTION__, '5.9.0' );
-		}
-
-		$result = static::get_core_data();
-		if ( 'default' === $origin ) {
-			$result->set_spacing_sizes();
-			return $result;
-		}
-
-		$result->merge( static::get_block_data() );
-		if ( 'blocks' === $origin ) {
-			return $result;
-		}
-
-		$result->merge( static::get_theme_data() );
-		if ( 'theme' === $origin ) {
-			$result->set_spacing_sizes();
-			return $result;
-		}
-
-		$result->merge( static::get_user_data() );
-		$result->set_spacing_sizes();
-		return $result;
-	}
-
-	/**
-	 * Returns the user's origin config.
-	 *
-	 * @since 6.2 Added check for the WP_Theme_JSON_Gutenberg class to prevent $user
-	 * values set in core fron overriding the new custom css values added to VALID_STYLES.
-	 * This does not need to be backported to core as the new VALID_STYLES[css] value will
-	 * be added to core with 6.2.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
-	 */
-	public static function get_user_data() {
-		if ( null !== static::$user && static::$user instanceof WP_Theme_JSON_Gutenberg ) {
-			return static::$user;
-		}
-
-		$config   = array();
-		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
-
-		if ( array_key_exists( 'post_content', $user_cpt ) ) {
-			$decoded_data = json_decode( $user_cpt['post_content'], true );
-
-			$json_decoding_error = json_last_error();
-			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
-				/**
-				 * Filters the data provided by the user for global styles & settings.
-				 *
-				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-				 */
-				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-			}
-
-			// Very important to verify if the flag isGlobalStylesUserThemeJSON is true.
-			// If is not true the content was not escaped and is not safe.
-			if (
-				is_array( $decoded_data ) &&
-				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
-				$decoded_data['isGlobalStylesUserThemeJSON']
-			) {
-				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
-				$config = $decoded_data;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the user for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-		$config     = $theme_json->get_data();
-
-		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-
-		return static::$user;
-	}
-}
diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
deleted file mode 100644
index 566f6c4e4501e6..00000000000000
--- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
+++ /dev/null
@@ -1,177 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_Gutenberg class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_2 {
-	/**
-	 * Returns the theme's data.
-	 *
-	 * Data from theme.json will be backfilled from existing
-	 * theme supports, if any. Note that if the same data
-	 * is present in theme.json and in theme supports,
-	 * the theme.json takes precedence.
-	 *
-	 * @param array $deprecated Deprecated argument.
-	 * @param array $settings Contains a key called with_supports to determine whether to include theme supports in the data.
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds theme data.
-	 */
-	public static function get_theme_data( $deprecated = array(), $settings = array( 'with_supports' => true ) ) {
-		if ( ! empty( $deprecated ) ) {
-			_deprecated_argument( __METHOD__, '5.9' );
-		}
-
-		// When backporting to core, remove the instanceof Gutenberg class check, as it is only required for the Gutenberg plugin.
-		if ( null === static::$theme || ! static::has_same_registered_blocks( 'theme' ) ) {
-			$theme_json_file = static::get_file_path_from_theme( 'theme.json' );
-			$wp_theme        = wp_get_theme();
-			if ( '' !== $theme_json_file ) {
-				$theme_json_data = static::read_json_file( $theme_json_file );
-				$theme_json_data = static::translate( $theme_json_data, $wp_theme->get( 'TextDomain' ) );
-			} else {
-				$theme_json_data = array();
-			}
-			$theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $theme_json_data );
-
-			/**
-			 * Filters the data provided by the theme for global styles & settings.
-			 *
-			 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-			 */
-			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
-			$theme_json_data = $theme_json->get_data();
-			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
-
-			if ( $wp_theme->parent() ) {
-				// Get parent theme.json.
-				$parent_theme_json_file = static::get_file_path_from_theme( 'theme.json', true );
-				if ( '' !== $parent_theme_json_file ) {
-					$parent_theme_json_data = static::read_json_file( $parent_theme_json_file );
-					$parent_theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $parent_theme_json_data );
-					$parent_theme           = new WP_Theme_JSON_Gutenberg( $parent_theme_json_data );
-
-					/*
-					 * Merge the child theme.json into the parent theme.json.
-					 * The child theme takes precedence over the parent.
-					 */
-					$parent_theme->merge( static::$theme );
-					static::$theme = $parent_theme;
-				}
-			}
-		}
-
-		if ( ! $settings['with_supports'] ) {
-			return static::$theme;
-		}
-
-		/*
-		 * We want the presets and settings declared in theme.json
-		 * to override the ones declared via theme supports.
-		 * So we take theme supports, transform it to theme.json shape
-		 * and merge the static::$theme upon that.
-		 */
-		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_legacy_theme_supports_for_theme_json() );
-		if ( ! wp_theme_has_theme_json() ) {
-			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
-				$theme_support_data['settings']['color'] = array();
-			}
-
-			$default_palette = false;
-			if ( current_theme_supports( 'default-color-palette' ) ) {
-				$default_palette = true;
-			}
-			if ( ! isset( $theme_support_data['settings']['color']['palette'] ) ) {
-				// If the theme does not have any palette, we still want to show the core one.
-				$default_palette = true;
-			}
-			$theme_support_data['settings']['color']['defaultPalette'] = $default_palette;
-
-			$default_gradients = false;
-			if ( current_theme_supports( 'default-gradient-presets' ) ) {
-				$default_gradients = true;
-			}
-			if ( ! isset( $theme_support_data['settings']['color']['gradients'] ) ) {
-				// If the theme does not have any gradients, we still want to show the core ones.
-				$default_gradients = true;
-			}
-			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
-
-			// Classic themes without a theme.json don't support global duotone.
-			$theme_support_data['settings']['color']['defaultDuotone'] = false;
-
-			// Allow themes to enable appearance tools via theme_support.
-			if ( current_theme_supports( 'appearance-tools' ) ) {
-				$theme_support_data['settings']['appearanceTools'] = true;
-			}
-		}
-		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
-		$with_theme_supports->merge( static::$theme );
-
-		return $with_theme_supports;
-	}
-
-	/**
-	 * Gets the styles for blocks from the block.json file.
-	 *
-	 * @return WP_Theme_JSON
-	 */
-	public static function get_block_data() {
-		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = $registry->get_all_registered();
-		$config   = array( 'version' => 1 );
-		foreach ( $blocks as $block_name => $block_type ) {
-			if ( isset( $block_type->supports['__experimentalStyle'] ) ) {
-				$config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] );
-			}
-
-			if (
-				isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) &&
-				null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null )
-			) {
-				// Ensure an empty placeholder value exists for the block, if it provides a default blockGap value.
-				// The real blockGap value to be used will be determined when the styles are rendered for output.
-				$config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the blocks for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
-		$config     = $theme_json->get_data();
-
-		return new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
-	}
-
-	/**
-	 * When given an array, this will remove any keys with the name `//`.
-	 *
-	 * @param array $array The array to filter.
-	 * @return array The filtered array.
-	 */
-	private static function remove_JSON_comments( $array ) {
-		unset( $array['//'] );
-		foreach ( $array as $k => $v ) {
-			if ( is_array( $v ) ) {
-				$array[ $k ] = static::remove_JSON_comments( $v );
-			}
-		}
-
-		return $array;
-	}
-
-}
diff --git a/lib/load.php b/lib/load.php
index 4f2a9b42790b10..1b296053965319 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -66,7 +66,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php';
-require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
 require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
@@ -80,7 +79,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
-require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
@@ -93,7 +91,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/experimental/html/index.php';
 }
-require __DIR__ . '/experimental/class-wp-theme-json-resolver-gutenberg.php';
 require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/navigation-page.php';
@@ -111,6 +108,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // Plugin specific code.
 require __DIR__ . '/class-wp-theme-json-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
diff --git a/lib/compat/wordpress-6.1/theme-i18n.json b/lib/theme-i18n.json
similarity index 100%
rename from lib/compat/wordpress-6.1/theme-i18n.json
rename to lib/theme-i18n.json
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/theme.json
similarity index 100%
rename from lib/compat/wordpress-6.1/theme.json
rename to lib/theme.json

From beb80db363993054164584466189a87cc0ba9b3f Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 22 Dec 2022 20:10:16 +0200
Subject: [PATCH 198/209] Iframe: restore typewriter effect in post editor
 (#46745)

---
 packages/block-editor/src/components/typewriter/index.js | 4 +++-
 packages/edit-post/src/components/visual-editor/index.js | 7 +++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/typewriter/index.js b/packages/block-editor/src/components/typewriter/index.js
index 8e3cbe140d9917..ac83d173a95d9d 100644
--- a/packages/block-editor/src/components/typewriter/index.js
+++ b/packages/block-editor/src/components/typewriter/index.js
@@ -105,7 +105,9 @@ export function useTypewriter() {
 					return;
 				}
 
-				const windowScroll = scrollContainer === ownerDocument.body;
+				const windowScroll =
+					scrollContainer === ownerDocument.body ||
+					scrollContainer === ownerDocument.documentElement;
 				const scrollY = windowScroll
 					? defaultView.scrollY
 					: scrollContainer.scrollTop;
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 682f00be4278d8..05ec36b06a1143 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -310,7 +310,11 @@ export default function VisualEditor( { styles } ) {
 			...styles,
 			{
 				// We should move this in to future to the body.
-				css: `.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}`,
+				css:
+					`.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}` +
+					( paddingBottom
+						? `body{padding-bottom:${ paddingBottom }}`
+						: '' ),
 			},
 		],
 		[ styles ]
@@ -358,7 +362,6 @@ export default function VisualEditor( { styles } ) {
 						contentRef={ contentRef }
 						styles={ styles }
 						assets={ assets }
-						style={ { paddingBottom } }
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&

From 7c2f34de90bfad715af34b3c630d14199c0a0900 Mon Sep 17 00:00:00 2001
From: Madhu Dollu <madhusudhan.dollu@gmail.com>
Date: Fri, 23 Dec 2022 12:11:05 +0530
Subject: [PATCH 199/209] center align block in global styles inline preview
 (#46727)

---
 .../components/global-styles/block-preview-panel.js  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 2d73c0495cdfc4..5e0ada27ece2db 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -22,9 +22,19 @@ const BlockPreviewPanel = ( { name } ) => {
 				{ containerResizeListener }
 
 				<BlockPreview
+					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 					__experimentalMinHeight={ minHeight }
-					blocks={ blocks }
+					__experimentalStyles={ [
+						{
+							css: `
+								body{
+									min-height:${ minHeight }px;
+									display:flex;align-items:center;justify-content:center;
+								}
+							`,
+						},
+					] }
 				/>
 			</div>
 		</Spacer>

From f30366307d23ae190a5d0e03119dfa82e7616b19 Mon Sep 17 00:00:00 2001
From: Miguel Torres <miguel.torres@automattic.com>
Date: Fri, 23 Dec 2022 10:19:27 +0100
Subject: [PATCH 200/209] Global Styles: Allow content/wide widths when
 unfiltered_html is not allowed (#46712)

## What?
Follow-up of https://github.com/WordPress/gutenberg/pull/46388.

Ensures that the content and wide width settings set via Global Styles are considered safe and thus output as custom properties on the body element.

## Why?
Because secure `layout.contentSize` and `layout.wideSize` settings are being stripped out for users without the `unfiltered_html` capability as part of `remove_insecure_settings`.

## How?
- Updates the `INDIRECT_PROPERTIES_METADATA` array introduced in https://github.com/WordPress/gutenberg/pull/46388 to allow the `layout.contentSize` and `layout.wideSize` settings.
- Modifies the `remove_insecure_settings` to check the `INDIRECT_PROPERTIES_METADATA` array for settings that are not included in `PRESETS_METADATA`.
---
 lib/class-wp-theme-json-gutenberg.php | 47 ++++++++++++++++++++-------
 phpunit/class-wp-theme-json-test.php  | 20 +++++++++---
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 001798e5a326ed..30d2ffde2f02bc 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -279,9 +279,19 @@ class WP_Theme_JSON_Gutenberg {
 	 * @var array
 	 */
 	const INDIRECT_PROPERTIES_METADATA = array(
-		'gap'        => array( 'spacing', 'blockGap' ),
-		'column-gap' => array( 'spacing', 'blockGap', 'left' ),
-		'row-gap'    => array( 'spacing', 'blockGap', 'top' ),
+		'gap'        => array(
+			array( 'spacing', 'blockGap' ),
+		),
+		'column-gap' => array(
+			array( 'spacing', 'blockGap', 'left' ),
+		),
+		'row-gap'    => array(
+			array( 'spacing', 'blockGap', 'top' ),
+		),
+		'max-width'  => array(
+			array( 'layout', 'contentSize' ),
+			array( 'layout', 'wideSize' ),
+		),
 	);
 
 	/**
@@ -2821,6 +2831,19 @@ protected static function remove_insecure_settings( $input ) {
 				}
 			}
 		}
+
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+			foreach ( $paths as $path ) {
+				$value = _wp_array_get( $input, $path, array() );
+				if (
+					isset( $value ) &&
+					! is_array( $value ) &&
+					static::is_safe_css_declaration( $property, $value )
+				) {
+					_wp_array_set( $output, $path, $value );
+				}
+			}
+		}
 		return $output;
 	}
 
@@ -2852,14 +2875,16 @@ protected static function remove_insecure_styles( $input ) {
 		}
 
 		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
-		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $path ) {
-			$value = _wp_array_get( $input, $path, array() );
-			if (
-				isset( $value ) &&
-				! is_array( $value ) &&
-				static::is_safe_css_declaration( $property, $value )
-			) {
-				_wp_array_set( $output, $path, $value );
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+			foreach ( $paths as $path ) {
+				$value = _wp_array_get( $input, $path, array() );
+				if (
+					isset( $value ) &&
+					! is_array( $value ) &&
+					static::is_safe_css_declaration( $property, $value )
+				) {
+					_wp_array_set( $output, $path, $value );
+				}
 			}
 		}
 
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index a5413766ca7ddd..6147d301be8166 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -754,8 +754,8 @@ public function test_get_stylesheet_with_block_support_feature_level_selectors()
 	public function test_allow_indirect_properties() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'   => array(
 					'blocks'  => array(
 						'core/social-links' => array(
 							'spacing' => array(
@@ -770,12 +770,18 @@ public function test_allow_indirect_properties() {
 						'blockGap' => '3em',
 					),
 				),
+				'settings' => array(
+					'layout' => array(
+						'contentSize' => '800px',
+						'wideSize'    => '1000px',
+					),
+				),
 			)
 		);
 
 		$expected = array(
-			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-			'styles'  => array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'   => array(
 				'blocks'  => array(
 					'core/social-links' => array(
 						'spacing' => array(
@@ -790,6 +796,12 @@ public function test_allow_indirect_properties() {
 					'blockGap' => '3em',
 				),
 			),
+			'settings' => array(
+				'layout' => array(
+					'contentSize' => '800px',
+					'wideSize'    => '1000px',
+				),
+			),
 		);
 
 		$this->assertEqualSetsWithIndex( $expected, $actual );

From 531f7710ab7fd1f57e961b711da0900af653ae9f Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Fri, 23 Dec 2022 13:30:01 +0100
Subject: [PATCH 201/209] Edit-post site logo: Fix focus style. (#46733)

---
 .../src/components/header/fullscreen-mode-close/style.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 31289443436923..911445344febcd 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -35,7 +35,7 @@
 			position: absolute;
 			top: 9px;
 			right: 9px;
-			bottom: 9px;
+			bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;

From 0bfdfe88a8b56e15905260b1984a1315ae00d860 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 23 Dec 2022 22:55:27 +0900
Subject: [PATCH 202/209] Toolbar: fix duplicate focus style on anchor link
 button (#46759)

* Toolbar: fix duplicate focus style on anchor link button

* Update changelog
---
 packages/components/CHANGELOG.md           | 1 +
 packages/components/src/toolbar/style.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2c17553b489bcb..be1d83468d29d2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `InputControl`: Fix internal `Flex` wrapper usage that could add an unintended `height: 100%` ([#46213](https://github.com/WordPress/gutenberg/pull/46213)).
 -   `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
 -   `Modal`: Fix unexpected modal closing in IME Composition ([#46453](https://github.com/WordPress/gutenberg/pull/46453)).
+-   `Toolbar`: Fix duplicate focus style on anchor link button ([#46759](https://github.com/WordPress/gutenberg/pull/46759)).
 
 ### Enhancements
 
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
index d24a3317328d64..53b6d8a65286b7 100644
--- a/packages/components/src/toolbar/style.scss
+++ b/packages/components/src/toolbar/style.scss
@@ -21,7 +21,7 @@
 		padding-right: $grid-unit-20;
 
 		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
+		&:focus:not(:disabled) {
 			box-shadow: none;
 			outline: none;
 		}

From 0bcb3e6e16722e495faa86230cc6c4026a14792a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 23 Dec 2022 15:12:34 +0100
Subject: [PATCH 203/209] Move the edit button in the site editor sidebar to a
 contextual hub (#46700)

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 packages/base-styles/_variables.scss          |   2 +-
 packages/base-styles/_z-index.scss            |   6 +
 .../components/header-edit-mode/style.scss    |   1 +
 .../edit-site/src/components/layout/index.js  | 257 +++++++++---------
 .../src/components/layout/style.scss          | 144 +++++-----
 .../sidebar-navigation-screen-main/index.js   |  30 +-
 .../index.js                                  |  36 +--
 .../sidebar-navigation-screen/style.scss      |   6 +-
 .../src/components/site-title/index.js        |  39 ---
 9 files changed, 231 insertions(+), 290 deletions(-)
 delete mode 100644 packages/edit-site/src/components/site-title/index.js

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index c4b0edd50e61b8..17faddd8ad65b2 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -49,7 +49,7 @@ $button-size: 36px;
 $button-size-small: 24px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
-$nav-sidebar-width: 300px;
+$nav-sidebar-width: 320px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 5c9af46fec6e6f..d7c7842bdfd248 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -177,6 +177,12 @@ $z-layers: (
 
 	// Appear under the topbar.
 	".customize-widgets__block-toolbar": 7,
+
+	// Site editor layout
+	".edit-site-layout__hub": 3,
+	".edit-site-layout__header": 2,
+	".edit-site-layout__canvas-container": 2,
+	".edit-site-layout__sidebar": 1,
 );
 
 @function z-index( $key ) {
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 32b3e17912ee97..d26bad43e356da 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px;
 	width: 100%;
 	justify-content: space-between;
 	border-bottom: $border-width solid $gray-200;
+	padding-left: $header-height;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index e451357ee97e5c..f8fe55873526bd 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
@@ -37,10 +36,10 @@ import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import SiteIcon from '../site-icon';
-import SiteTitle from '../site-title';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 
 const ANIMATION_DURATION = 0.5;
+const HUB_ANIMATION_DURATION = 0.3;
 
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
@@ -86,13 +85,14 @@ export default function Layout( { onError } ) {
 	const showFrame =
 		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
 	const showEditButton =
-		isEditorPage &&
-		isMobileViewport &&
-		canvasMode === 'view' &&
-		isMobileCanvasVisible;
+		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
 	const isBackToDashboardButton =
 		( ! isMobileViewport && canvasMode === 'view' ) ||
 		( isMobileViewport && ! isMobileCanvasVisible );
+	const isFullCanvas =
+		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
+		isMobileCanvasVisible;
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
@@ -129,76 +129,77 @@ export default function Layout( { onError } ) {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-full-canvas':
-							( isEditorPage &&
-								canvasMode === 'edit' &&
-								! isMobileViewport ) ||
-							isMobileCanvasVisible,
+						'is-full-canvas': isFullCanvas,
+						'is-edit-mode': canvasMode === 'edit',
 					}
 				) }
 			>
-				<div className="edit-site-layout__header">
-					<div className="edit-site-layout__logo">
+				<motion.div
+					className="edit-site-layout__hub"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
+				>
+					<motion.div
+						className="edit-site-layout__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+					>
 						<Button
 							{ ...siteIconButtonProps }
 							className="edit-site-layout__view-mode-toggle"
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>
-						<AnimatePresence initial={ false }>
-							{ ( isBackToDashboardButton || showEditButton ) && (
-								<motion.div
-									initial={ { opacity: 0 } }
-									exit={ { opacity: 0 } }
-									animate={ { opacity: 1 } }
-									style={ {
-										position: 'absolute',
-										left: 60,
-									} }
-								>
-									<HStack>
-										{ isBackToDashboardButton && (
-											<SiteTitle />
-										) }
+					</motion.div>
+					{ showEditButton && (
+						<Button
+							className="edit-site-layout__edit-button"
+							label={ __( 'Open the editor' ) }
+							onClick={ () => {
+								__unstableSetCanvasMode( 'edit' );
+							} }
+							variant="primary"
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					) }
 
-										{ showEditButton && (
-											<Button
-												className="edit-site-layout__edit-button"
-												label={ __(
-													'Open the editor'
-												) }
-												onClick={ () => {
-													__unstableSetCanvasMode(
-														'edit'
-													);
-												} }
-											>
-												{ __( 'Edit' ) }
-											</Button>
-										) }
-									</HStack>
-								</motion.div>
-							) }
-						</AnimatePresence>
+					{ isMobileViewport && ! isMobileCanvasVisible && (
+						<Button
+							onClick={ () => setIsMobileCanvasVisible( true ) }
+							variant="primary"
+						>
+							{ __( 'View Editor' ) }
+						</Button>
+					) }
+				</motion.div>
 
-						{ isMobileViewport && ! isMobileCanvasVisible && (
-							<Button
-								onClick={ () =>
-									setIsMobileCanvasVisible( true )
-								}
-								style={ { position: 'fixed', right: 0 } }
-							>
-								{ __( 'View Editor' ) }
-							</Button>
-						) }
-					</div>
-					<AnimatePresence>
-						{ isEditorPage && canvasMode === 'edit' && (
+				<AnimatePresence initial={ false }>
+					{ isEditorPage &&
+						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
 							<NavigableRegion
+								className="edit-site-layout__header"
+								ariaLabel={ __( 'Editor top bar' ) }
 								as={ motion.div }
-								initial={ { y: -60 } }
-								animate={ { y: 0 } }
-								exit={ { y: -60 } }
+								animate={ {
+									y: 0,
+								} }
+								initial={ {
+									y: '-100%',
+								} }
+								exit={ {
+									y: '-100%',
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
@@ -206,57 +207,26 @@ export default function Layout( { onError } ) {
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
-								className="edit-site-layout__editor-header"
-								ariaLabel={ __( 'Editor top bar' ) }
 							>
-								<Header />
+								{ canvasMode === 'edit' && <Header /> }
 							</NavigableRegion>
 						) }
-					</AnimatePresence>
-				</div>
-
-				<AnimatePresence initial={ false }>
-					{ showSidebar && (
-						<NavigableRegion
-							as={ motion.div }
-							initial={ {
-								opacity: 0,
-							} }
-							animate={ {
-								opacity: 1,
-							} }
-							exit={ {
-								opacity: 0,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-							className="edit-site-layout__sidebar"
-							ariaLabel={ __( 'Navigation sidebar' ) }
-						>
-							<Sidebar />
-						</NavigableRegion>
-					) }
 				</AnimatePresence>
 
-				{ showCanvas && (
-					<div
-						className="edit-site-layout__canvas-container"
-						style={ {
-							paddingTop: showFrame ? canvasPadding : 0,
-							paddingBottom: showFrame ? canvasPadding : 0,
-						} }
-					>
-						{ canvasResizer }
-						{ !! canvasSize.width && (
-							<motion.div
-								initial={ false }
-								layout="position"
-								className="edit-site-layout__canvas"
+				<div className="edit-site-layout__content">
+					<AnimatePresence initial={ false }>
+						{ showSidebar && (
+							<NavigableRegion
+								as={ motion.div }
+								initial={ {
+									opacity: 0,
+								} }
+								animate={ {
+									opacity: 1,
+								} }
+								exit={ {
+									opacity: 0,
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
@@ -264,20 +234,28 @@ export default function Layout( { onError } ) {
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
+								className="edit-site-layout__sidebar"
+								ariaLabel={ __( 'Navigation sidebar' ) }
 							>
+								<Sidebar />
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
+
+					{ showCanvas && (
+						<div
+							className="edit-site-layout__canvas-container"
+							style={ {
+								paddingTop: showFrame ? canvasPadding : 0,
+								paddingBottom: showFrame ? canvasPadding : 0,
+							} }
+						>
+							{ canvasResizer }
+							{ !! canvasSize.width && (
 								<motion.div
-									style={ {
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										bottom: 0,
-									} }
 									initial={ false }
-									animate={ {
-										width: showFrame
-											? canvasSize.width - canvasPadding
-											: fullSize.width,
-									} }
+									layout="position"
+									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
 										duration: disableMotion
@@ -286,15 +264,38 @@ export default function Layout( { onError } ) {
 										ease: 'easeOut',
 									} }
 								>
-									<ErrorBoundary onError={ onError }>
-										{ isEditorPage && <Editor /> }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
+									<motion.div
+										style={ {
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											bottom: 0,
+										} }
+										initial={ false }
+										animate={ {
+											width: showFrame
+												? canvasSize.width -
+												  canvasPadding
+												: fullSize.width,
+										} }
+										transition={ {
+											type: 'tween',
+											duration: disableMotion
+												? 0
+												: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+									>
+										<ErrorBoundary onError={ onError }>
+											{ isEditorPage && <Editor /> }
+											{ isListPage && <ListPage /> }
+										</ErrorBoundary>
+									</motion.div>
 								</motion.div>
-							</motion.div>
-						) }
-					</div>
-				) }
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</>
 	);
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 4e92e6c0a57fb8..8884ab56a07cce 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -1,83 +1,105 @@
+$hub-height: $grid-unit-20 * 2 + $button-size;
+
 .edit-site-layout {
-	min-height: 100%;
+	height: 100%;
 	background: $gray-900;
 	color: $white;
 	display: flex;
 	flex-direction: column;
-	@include break-small {
-		display: grid;
-		grid-template-columns: 320px 1fr;
-		grid-template-rows: auto 1fr;
-		grid-template-areas:
-			"header canvas"
-			"sidebar canvas";
-
-		&.is-full-canvas {
-			grid-template-areas:
-				"header header"
-				"canvas canvas";
-		}
-	}
 }
 
-.edit-site-layout__header {
-	grid-area: header;
-	height: $header-height;
+.edit-site-layout__hub {
+	position: fixed;
+	top: $canvas-padding;
+	left: $canvas-padding;
+	width: calc(100vw - #{$canvas-padding * 2});
+	height: $hub-height;
+	z-index: z-index(".edit-site-layout__hub");
+
+	background: $black;
+	padding: $grid-unit-20;
+	padding-left: 0;
+	border-radius: $radius-block-ui * 4;
+	box-shadow: $shadow-modal;
+
 	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		left: 0;
+		padding: 0;
+		padding-right: $grid-unit-20;
+		height: $header-height;
+		border-radius: 0;
+		width: 100vw;
+		box-shadow: none;
+
+		@include break-small {
+			width: auto;
+			padding-right: 0;
+		}
+	}
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-small {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
+
+	.components-button {
+		height: $grid-unit-40;
+	}
 }
 
-.edit-site-layout__logo {
-	align-items: center;
+.edit-site-layout__header {
 	height: $header-height;
 	display: flex;
-	justify-content: space-between;
+	z-index: z-index(".edit-site-layout__header");
 
-	.components-button {
-		color: currentColor;
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		width: 100vw;
 	}
 }
 
-.edit-site-layout__edit-button {
-	background: $gray-800;
-	/* Overrides the color for all states of the button */
-	color: inherit !important;
+.edit-site-layout__content {
+	flex-grow: 1;
+	display: flex;
+
+	// Hide scrollbars during the edit/view animation.
+	overflow: hidden;
 }
 
 .edit-site-layout__sidebar {
-	grid-area: sidebar;
-	z-index: 1;
+	z-index: z-index(".edit-site-layout__sidebar");
 	overflow-y: auto;
-	max-height: calc(100vh - #{$header-height});
+	width: 100vw;
 	@include custom-scrollbars-on-hover;
 
-	// This is only necessary for the exit animation
-	.edit-site-layout.is-full-canvas & {
-		display: none;
-		@include break-small {
-			display: block;
-			grid-area: header;
-			position: absolute;
-			top: 60px;
-		}
+	@include break-small {
+		width: $nav-sidebar-width;
 	}
-}
-
-.edit-site-layout__editor-header {
-	flex-grow: 1;
 
 	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
+	.edit-site-layout.is-full-canvas & {
 		position: fixed;
-		left: 60px;
-		right: 0;
+		height: 100vh;
+		left: 0;
+		top: 0;
 	}
 }
 
 .edit-site-layout__canvas-container {
-	grid-area: canvas;
 	position: relative;
 	flex-grow: 1;
-	z-index: 2;
+	z-index: z-index(".edit-site-layout__canvas-container");
 }
 
 .edit-site-layout__canvas {
@@ -122,13 +144,20 @@
 	min-height: 100% !important;
 }
 
+.edit-site-layout__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+}
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
-	background: $gray-900;
 	color: $white;
-	height: calc(100% + #{$border-width});
-	border-radius: 0;
-	margin-bottom: -$border-width;
+	height: 100%;
+	width: 100%;
+	border-radius: $radius-block-ui;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	&:hover,
 	&:active {
@@ -150,15 +179,6 @@
 		bottom: 9px;
 		left: 9px;
 		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-	}
-
-	// Hover color.
-	&:hover::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-	}
-
-	&.has-icon:hover::before {
 		box-shadow: none;
 	}
 
@@ -170,7 +190,7 @@
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {
+		display: flex;
 		border-radius: $radius-block-ui;
-		object-fit: cover;
 	}
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 622eb70a951aa0..e7faaa2eca4df1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -3,50 +3,22 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
 	__experimentalNavigatorButton as NavigatorButton,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbolFilled } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 
 export default function SidebarNavigationScreenMain() {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	return (
 		<SidebarNavigationScreen
 			path="/"
-			title={
-				<HStack justify="space-between" style={ { minHeight: 36 } }>
-					<div>{ __( 'Design' ) }</div>
-					{ ! isMobileViewport && isEditorPage && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					) }
-				</HStack>
-			}
+			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
 					<NavigatorButton
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 5360b3c7447ac7..d1b818bf380df7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -4,10 +4,9 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
@@ -20,7 +19,6 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 import AddNewTemplate from '../add-new-template';
 
 function omit( object, keys ) {
@@ -62,10 +60,7 @@ export default function SidebarNavigationScreenTemplates( {
 	postType = 'wp_template',
 } ) {
 	const { params } = useLocation();
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
 
 	// Ideally the URL params would be enough.
 	// Loading the editor should ideally redirect to the home page
@@ -125,31 +120,18 @@ export default function SidebarNavigationScreenTemplates( {
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
 			title={
-				<HStack style={ { minHeight: 36 } } justify="space-between">
+				<HStack justify="space-between">
 					<div style={ { flexShrink: 0 } }>
 						{ config[ postType ].labels.title }
 					</div>
 					{ ! isMobileViewport && (
-						<HStack spacing={ 2 } justify="right">
-							<AddNewTemplate
-								templateType={ postType }
-								toggleProps={ {
-									className:
-										'edit-site-sidebar-navigation-screen-templates__add-button',
-								} }
-							/>
-							{ isEditorPage && (
-								<Button
-									className="edit-site-layout__edit-button"
-									label={ __( 'Open the editor' ) }
-									onClick={ () => {
-										__unstableSetCanvasMode( 'edit' );
-									} }
-								>
-									{ __( 'Edit' ) }
-								</Button>
-							) }
-						</HStack>
+						<AddNewTemplate
+							templateType={ postType }
+							toggleProps={ {
+								className:
+									'edit-site-sidebar-navigation-screen-templates__add-button',
+							} }
+						/>
 					) }
 				</HStack>
 			}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 91c64bbd4c3ad2..0b5e056b7bebeb 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -6,16 +6,14 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 0 $button-size;
-	flex-grow: 1;
-	overflow-y: auto;
+	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-80;
+	padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2;
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
diff --git a/packages/edit-site/src/components/site-title/index.js b/packages/edit-site/src/components/site-title/index.js
deleted file mode 100644
index 5af253ab916742..00000000000000
--- a/packages/edit-site/src/components/site-title/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
-
-function SiteTitle( { className } ) {
-	const { isRequestingSite, siteTitle } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteTitle: siteData.name,
-		};
-	}, [] );
-
-	if ( isRequestingSite && ! siteTitle ) {
-		return null;
-	}
-
-	return (
-		<div className={ classnames( className, 'edit-site-site-title' ) }>
-			{ siteTitle }
-		</div>
-	);
-}
-
-export default SiteTitle;

From 2248470b9874c7024b0c6cac36b498287506356b Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 23 Dec 2022 23:54:57 +0900
Subject: [PATCH 204/209] Site Editor: Don't show block inserter when the
 canvas is view mode (#46763)

* Site Editor: Don't show block inserter when the canvas is view mode

* Update changelog

* code refactoring
---
 packages/edit-site/CHANGELOG.md                         | 5 +++++
 packages/edit-site/src/components/block-editor/index.js | 8 +++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 357668d600d11e..faab1235091fa3 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -10,6 +10,11 @@
 
 -   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
 
+### Bug Fix
+
+-   Don't show block inserter when the canvas is view mode ([#46763](https://github.com/WordPress/gutenberg/pull/46763)).
+
+
 ## 4.19.0 (2022-11-16)
 
 ## 4.18.0 (2022-11-02)
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 0f39f771a5d360..5ef1702734aba4 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -153,6 +153,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport;
 	const isViewMode = canvasMode === 'view';
+	const showBlockAppender =
+		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
 	// eslint-disable-next-line @wordpress/data-no-store-string-literals
 	const { enableComplementaryArea } = useDispatch( 'core/interface' );
@@ -243,11 +245,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 									<BlockList
 										className="edit-site-block-editor__block-list wp-site-blocks"
 										__experimentalLayout={ LAYOUT }
-										renderAppender={
-											isTemplatePart && hasBlocks
-												? false
-												: undefined
-										}
+										renderAppender={ showBlockAppender }
 									/>
 								</EditorCanvas>
 							</ResizableEditor>

From 52f3db6358f5f874734c5c56602368abeb26a0fb Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 23 Dec 2022 15:57:26 +0100
Subject: [PATCH 205/209] Add the template title and type to the site hub
 (#46736)

---
 .../src/site-editor/toggle-canvas-mode.js     |   2 +-
 packages/e2e-test-utils/src/site-editor.js    |   4 +-
 .../document-actions/index.js                 |  55 +++----
 .../edit-site/src/components/layout/index.js  |  93 ++---------
 .../src/components/layout/style.scss          |  21 +--
 .../src/components/site-hub/index.js          | 150 ++++++++++++++++++
 .../src/components/site-hub/style.scss        |  31 ++++
 .../use-edited-entity-record/index.js         |  37 +++++
 packages/edit-site/src/style.scss             |   1 +
 9 files changed, 257 insertions(+), 137 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-hub/index.js
 create mode 100644 packages/edit-site/src/components/site-hub/style.scss
 create mode 100644 packages/edit-site/src/components/use-edited-entity-record/index.js

diff --git a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
index c30a7b09ded992..01340eb085d889 100644
--- a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
+++ b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
@@ -4,5 +4,5 @@
  * @this {import('.').SiteEditor}
  */
 export async function enterEditMode() {
-	await this.page.click( '.edit-site-layout__edit-button' );
+	await this.page.click( '.edit-site-site-hub__edit-button' );
 }
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 674152746fa9bf..425931ccf9cbca 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -166,11 +166,11 @@ export async function openPreviousGlobalStylesPanel() {
  * Enters edit mode.
  */
 export async function enterEditMode() {
-	const editSiteToggle = await page.$( '.edit-site-layout__edit-button' );
+	const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' );
 	// This check is necessary for the performance tests in old branches
 	// where the site editor toggle was not implemented yet.
 	if ( ! editSiteToggle ) {
 		return;
 	}
-	await page.click( '.edit-site-layout__edit-button' );
+	await page.click( '.edit-site-site-hub__edit-button' );
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index b829e19f01342a..30acc5fe04d443 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -25,16 +25,13 @@ import {
 	useBlockDisplayInformation,
 	BlockIcon,
 } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import TemplateDetails from '../../template-details';
-import { store as editSiteStore } from '../../../store';
+import useEditedEntityRecord from '../../use-edited-entity-record';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -70,36 +67,15 @@ function useSecondaryText() {
 }
 
 export default function DocumentActions() {
-	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-			const postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const record = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			const _isLoaded = !! postId;
-
-			return {
-				showIconLabels: select( preferencesStore ).get(
-					'core/edit-site',
-					'showIconLabels'
-				),
-				entityTitle: getTemplateInfo( record ).title,
-				isLoaded: _isLoaded,
-				template: record,
-				templateType: postType,
-			};
-		}, [] );
-
-	const entityLabel =
-		templateType === 'wp_template_part' ? 'template part' : 'template';
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
+		[]
+	);
+	const { isLoaded, record, getTitle } = useEditedEntityRecord();
 	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,7 +102,7 @@ export default function DocumentActions() {
 	}
 
 	// Return feedback that the template does not seem to exist.
-	if ( ! entityTitle ) {
+	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Template not found' ) }
@@ -134,6 +110,11 @@ export default function DocumentActions() {
 		);
 	}
 
+	const entityLabel =
+		record.type === 'wp_template_part'
+			? __( 'template part' )
+			: __( 'template' );
+
 	return (
 		<div
 			className={ classnames( 'edit-site-document-actions', {
@@ -156,7 +137,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
+					{ getTitle() }
 				</Text>
 				<div className="edit-site-document-actions__secondary-item">
 					<BlockIcon icon={ icon } showColors />
@@ -186,7 +167,7 @@ export default function DocumentActions() {
 					contentClassName="edit-site-document-actions__info-dropdown"
 					renderContent={ ( { onClose } ) => (
 						<TemplateDetails
-							template={ template }
+							template={ record }
 							onClose={ onClose }
 						/>
 					) }
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index f8fe55873526bd..0868e08bae289c 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -6,9 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
-	Button,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
@@ -19,7 +18,6 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -35,11 +33,10 @@ import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
-import SiteIcon from '../site-icon';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import SiteHub from '../site-hub';
 
 const ANIMATION_DURATION = 0.5;
-const HUB_ANIMATION_DURATION = 0.3;
 
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
@@ -48,16 +45,14 @@ export default function Layout( { onError } ) {
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink, previousShortcut, nextShortcut } =
-		useSelect( ( select ) => {
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
-			const { __unstableGetCanvasMode, getSettings } =
-				select( editSiteStore );
+			const { __unstableGetCanvasMode } = select( editSiteStore );
 			return {
 				canvasMode: __unstableGetCanvasMode(),
-				dashboardLink: getSettings().__experimentalDashboardLink,
 				previousShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/previous-region'
 				),
@@ -65,13 +60,13 @@ export default function Layout( { onError } ) {
 					'core/edit-site/next-region'
 				),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
@@ -84,12 +79,7 @@ export default function Layout( { onError } ) {
 		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
 	const showFrame =
 		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-	const showEditButton =
-		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
-		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
-	const isBackToDashboardButton =
-		( ! isMobileViewport && canvasMode === 'view' ) ||
-		( isMobileViewport && ! isMobileCanvasVisible );
+
 	const isFullCanvas =
 		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
 		isMobileCanvasVisible;
@@ -105,19 +95,6 @@ export default function Layout( { onError } ) {
 			setIsMobileCanvasVisible( true );
 		}
 	}, [ canvasMode, isMobileViewport ] );
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setIsMobileCanvasVisible( false );
-					__unstableSetCanvasMode( 'view' );
-				},
-		  };
 
 	return (
 		<>
@@ -134,55 +111,11 @@ export default function Layout( { onError } ) {
 					}
 				) }
 			>
-				<motion.div
+				<SiteHub
 					className="edit-site-layout__hub"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
-				>
-					<motion.div
-						className="edit-site-layout__view-mode-toggle-container"
-						layout
-						transition={ {
-							type: 'tween',
-							duration: disableMotion
-								? 0
-								: HUB_ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
-					>
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-					</motion.div>
-					{ showEditButton && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-							variant="primary"
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					) }
-
-					{ isMobileViewport && ! isMobileCanvasVisible && (
-						<Button
-							onClick={ () => setIsMobileCanvasVisible( true ) }
-							variant="primary"
-						>
-							{ __( 'View Editor' ) }
-						</Button>
-					) }
-				</motion.div>
+					isMobileCanvasVisible={ isMobileCanvasVisible }
+					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
+				/>
 
 				<AnimatePresence initial={ false }>
 					{ isEditorPage &&
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 8884ab56a07cce..24bb0b77688e71 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -22,11 +22,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	border-radius: $radius-block-ui * 4;
 	box-shadow: $shadow-modal;
 
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: $grid-unit-10;
-
 	.edit-site-layout.is-full-canvas & {
 		top: 0;
 		left: 0;
@@ -37,7 +32,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		width: 100vw;
 		box-shadow: none;
 
-		@include break-small {
+		@include break-medium {
 			width: auto;
 			padding-right: 0;
 		}
@@ -48,13 +43,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		padding-right: 0;
 	}
 
-	@include break-small {
+	@include break-medium {
 		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
 	}
-
-	.components-button {
-		height: $grid-unit-40;
-	}
 }
 
 .edit-site-layout__header {
@@ -83,7 +74,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	width: 100vw;
 	@include custom-scrollbars-on-hover;
 
-	@include break-small {
+	@include break-medium {
 		width: $nav-sidebar-width;
 	}
 
@@ -114,7 +105,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		color: $gray-900;
 		background: $white;
 	}
-	@include break-small {
+	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
 		width: calc(100% - #{$canvas-padding});
@@ -144,10 +135,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	min-height: 100% !important;
 }
 
-.edit-site-layout__view-mode-toggle-container {
-	height: $header-height;
-	width: $header-height;
-}
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
new file mode 100644
index 00000000000000..6f6112985d598b
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import getIsListPage from '../../utils/get-is-list-page';
+import SiteIcon from '../site-icon';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const HUB_ANIMATION_DURATION = 0.3;
+
+function SiteHub( {
+	className,
+	isMobileCanvasVisible,
+	setIsMobileCanvasVisible,
+} ) {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { canvasMode, dashboardLink, entityConfig } = useSelect(
+		( select ) => {
+			select( editSiteStore ).getEditedPostType();
+			const { __unstableGetCanvasMode, getSettings, getEditedPostType } =
+				select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				entityConfig: select( coreStore ).getEntityConfig(
+					'postType',
+					getEditedPostType()
+				),
+			};
+		},
+		[]
+	);
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const showEditButton =
+		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
+	const isBackToDashboardButton =
+		( ! isMobileViewport && canvasMode === 'view' ) ||
+		( isMobileViewport && ! isMobileCanvasVisible );
+	const showLabels = canvasMode !== 'edit';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink || 'index.php',
+				'aria-label': __( 'Go back to the dashboard' ),
+		  }
+		: {
+				label: __( 'Open Navigation Sidebar' ),
+				onClick: () => {
+					clearSelectedBlock();
+					setIsMobileCanvasVisible( false );
+					__unstableSetCanvasMode( 'view' );
+				},
+		  };
+	const { getTitle } = useEditedEntityRecord();
+
+	return (
+		<motion.div
+			className={ classnames( 'edit-site-site-hub', className ) }
+			layout
+			transition={ {
+				type: 'tween',
+				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+				ease: 'easeOut',
+			} }
+		>
+			<HStack
+				justify="flex-start"
+				className="edit-site-site-hub__text-content"
+			>
+				<motion.div
+					className="edit-site-site-hub__view-mode-toggle-container"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
+				>
+					<Button
+						{ ...siteIconButtonProps }
+						className="edit-site-layout__view-mode-toggle"
+					>
+						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+					</Button>
+				</motion.div>
+
+				{ showLabels && (
+					<VStack spacing={ 0 }>
+						<div className="edit-site-site-hub__title">
+							{ getTitle() }
+						</div>
+						<div className="edit-site-site-hub__post-type">
+							{ entityConfig?.label }
+						</div>
+					</VStack>
+				) }
+			</HStack>
+
+			{ showEditButton && (
+				<Button
+					className="edit-site-site-hub__edit-button"
+					label={ __( 'Open the editor' ) }
+					onClick={ () => {
+						__unstableSetCanvasMode( 'edit' );
+					} }
+					variant="primary"
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			) }
+
+			{ isMobileViewport && ! isMobileCanvasVisible && (
+				<Button
+					onClick={ () => setIsMobileCanvasVisible( true ) }
+					variant="primary"
+				>
+					{ __( 'View Editor' ) }
+				</Button>
+			) }
+		</motion.div>
+	);
+}
+
+export default SiteHub;
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
new file mode 100644
index 00000000000000..51bb78a75a1d3f
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -0,0 +1,31 @@
+.edit-site-site-hub {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+}
+
+.edit-site-site-hub__edit-button {
+	height: $grid-unit-40;
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
+}
+
+.edit-site-site-hub__title {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js
new file mode 100644
index 00000000000000..5d72877095782e
--- /dev/null
+++ b/packages/edit-site/src/components/use-edited-entity-record/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function useEditedEntityRecord() {
+	const { record, title, isLoaded } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
+		const postType = getEditedPostType();
+		const postId = getEditedPostId();
+		const _record = getEditedEntityRecord( 'postType', postType, postId );
+		const _isLoaded = !! postId;
+
+		return {
+			record: _record,
+			title: getTemplateInfo( _record ).title,
+			isLoaded: _isLoaded,
+		};
+	}, [] );
+
+	return {
+		isLoaded,
+		record,
+		getTitle: () => ( title ? decodeEntities( title ) : null ),
+	};
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 8b37e2314e237f..b98f6b817e368c 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -22,6 +22,7 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/site-hub/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";

From 783ae6aaab2a9500b020ecaf9d5aba699da11842 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri, 23 Dec 2022 16:59:05 +0200
Subject: [PATCH 206/209] Block Editor: Improve `ImageSizeControl` tests
 (#46765)

---
 .../image-size-control/test/index.js          | 226 ++++++++++++------
 1 file changed, 147 insertions(+), 79 deletions(-)

diff --git a/packages/block-editor/src/components/image-size-control/test/index.js b/packages/block-editor/src/components/image-size-control/test/index.js
index e265d07eebc1c3..3033e07147e394 100644
--- a/packages/block-editor/src/components/image-size-control/test/index.js
+++ b/packages/block-editor/src/components/image-size-control/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -11,8 +12,6 @@ import ImageSizeControl from '../index';
 describe( 'ImageSizeControl', () => {
 	const mockOnChange = jest.fn();
 	const mockOnChangeImage = jest.fn();
-	const getHeightInput = () => screen.getByLabelText( 'Height' );
-	const getWidthInput = () => screen.getByLabelText( 'Width' );
 
 	afterEach( () => {
 		// Cleanup on exiting.
@@ -31,8 +30,12 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '300' );
-		expect( getWidthInput().value ).toBe( '400' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 300 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 400 );
 	} );
 
 	it( 'returns default dimensions when custom dimensions are undefined', () => {
@@ -44,15 +47,23 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '100' );
-		expect( getWidthInput().value ).toBe( '200' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 100 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 200 );
 	} );
 
-	it( 'returns empty string when custom and default dimensions are undefined', () => {
+	it( 'returns no value when custom and default dimensions are undefined', () => {
 		render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-		expect( getHeightInput().value ).toBe( '' );
-		expect( getWidthInput().value ).toBe( '' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( null );
 	} );
 
 	it( 'returns default dimensions when initially undefined defaults are defined on rerender', () => {
@@ -62,12 +73,14 @@ describe( 'ImageSizeControl', () => {
 			<ImageSizeControl onChange={ mockOnChange } />
 		);
 
-		const heightInput = getHeightInput();
-		const widthInput = getWidthInput();
+		const heightInput = screen.getByRole( 'spinbutton', {
+			name: 'Height',
+		} );
+		const widthInput = screen.getByRole( 'spinbutton', { name: 'Width' } );
 
 		// The dimensions are initially set to an empty string.
-		expect( heightInput.value ).toBe( '' );
-		expect( widthInput.value ).toBe( '' );
+		expect( heightInput ).toHaveValue( null );
+		expect( widthInput ).toHaveValue( null );
 
 		// When new default dimensions are passed on a rerender (for example after they
 		// are calculated following an image upload), update values to the new defaults.
@@ -80,48 +93,66 @@ describe( 'ImageSizeControl', () => {
 		);
 
 		// The dimensions should update to the defaults.
-		expect( heightInput.value ).toBe( '300' );
-		expect( widthInput.value ).toBe( '400' );
+		expect( heightInput ).toHaveValue( 300 );
+		expect( widthInput ).toHaveValue( 400 );
 	} );
 
 	describe( 'updating dimension inputs', () => {
-		it( 'updates height and calls onChange', () => {
+		it( 'updates height and calls onChange', async () => {
+			const user = userEvent.setup();
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( heightInput, { target: { value: '500' } } );
+			const newHeight = '500';
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { height: 500 } );
+			await user.clear( heightInput );
+			await user.type( heightInput, newHeight );
 
-			expect( heightInput.value ).toBe( '500' );
-			expect( widthInput.value ).toBe( '' );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newHeight.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { height: 500 } );
+
+			expect( heightInput ).toHaveValue( 500 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 
-		it( 'updates width and calls onChange', () => {
+		it( 'updates width and calls onChange', async () => {
+			const user = userEvent.setup();
+
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( widthInput, { target: { value: '500' } } );
+			const newWidth = '500';
+			await user.clear( widthInput );
+			await user.type( widthInput, newWidth );
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { width: 500 } );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newWidth.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { width: 500 } );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '500' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 500 );
 		} );
 
-		it( 'updates height and calls onChange for empty value', () => {
+		it( 'updates height and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -130,27 +161,33 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( heightInput, { target: { value: '' } } );
+			await user.clear( heightInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 			} );
 
 			// Height is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 100 );
 		} );
 
-		it( 'updates width and calls onChange for empty value', () => {
+		it( 'updates width and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -159,29 +196,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( widthInput, { target: { value: '' } } );
+			await user.clear( widthInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				width: undefined,
 			} );
 
 			// Width is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 	} );
 
 	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', () => {
+		it( 'resets both height and width to default values', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -192,29 +235,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
 			// The initial dimension values display first.
-			expect( heightInput.value ).toBe( '300' );
-			expect( widthInput.value ).toBe( '400' );
+			expect( heightInput ).toHaveValue( 300 );
+			expect( widthInput ).toHaveValue( 400 );
 
-			fireEvent.click( screen.getByText( 'Reset' ) );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 				width: undefined,
 			} );
 
 			// The inputs display the default values once more.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '200' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 200 );
 		} );
 	} );
 
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', () => {
+		it( 'updates height and width attributes on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -223,18 +272,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
-			expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
+			expect( button ).toHaveClass( 'is-pressed' );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
 		} );
 
-		it( 'updates height and width inputs on selection', () => {
+		it( 'updates height and width inputs on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -243,11 +299,20 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( getHeightInput().value ).toBe( '50' );
-			expect( getWidthInput().value ).toBe( '101' );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Height' } )
+			).toHaveValue( 50 );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			).toHaveValue( 101 );
 		} );
 	} );
 
@@ -268,12 +333,14 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			expect( screen.getByLabelText( 'Image size' ).value ).toBe(
-				'medium'
-			);
+			expect(
+				screen.getByRole( 'combobox', { name: 'Image size' } )
+			).toHaveValue( 'medium' );
 		} );
 
-		it( 'calls onChangeImage with selected slug on selection', () => {
+		it( 'calls onChangeImage with selected slug on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageSizeOptions={ IMAGE_SIZE_OPTIONS }
@@ -283,12 +350,13 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.change( screen.getByLabelText( 'Image size' ), {
-				target: { value: 'thumbnail' },
-			} );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				'thumbnail'
+			);
 
 			// onChangeImage is called with the slug and the event.
-			expect( mockOnChangeImage ).toHaveBeenCalledWith(
+			expect( mockOnChangeImage ).toHaveBeenLastCalledWith(
 				'thumbnail',
 				expect.any( Object )
 			);

From b95339b89758e08c57dd1fe7c1f1af6ead591c6e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 23 Dec 2022 16:28:50 +0100
Subject: [PATCH 207/209] Update the script registration of the react scripts
 with a cache version (#46768)

---
 lib/client-assets.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index b7537057b89ab7..e23e1c4b89bd76 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -549,13 +549,15 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		'react',
 		gutenberg_url( 'build/vendors/react' . $extension ),
 		// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
-		SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' )
+		SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' ),
+		'18'
 	);
 	gutenberg_override_script(
 		$scripts,
 		'react-dom',
 		gutenberg_url( 'build/vendors/react-dom' . $extension ),
-		array( 'react' )
+		array( 'react' ),
+		'18'
 	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );

From 28a65e5d8066bf6e185448d1f3ab99f82288c958 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Fri, 23 Dec 2022 15:33:42 +0000
Subject: [PATCH 208/209] Bump plugin version to 14.8.1

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

diff --git a/gutenberg.php b/gutenberg.php
index c887c94a31e24b..6f0fa8d6484870 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 14.8.0
+ * Version: 14.8.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 1fe6b19571dff7..de3e84ea4aa96b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0",
+	"version": "14.8.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index ad639305f81290..4aa8edc626635c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0",
+	"version": "14.8.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From 96a8df71832b07453dca716d0e93094d97db5357 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Fri, 23 Dec 2022 15:41:16 +0000
Subject: [PATCH 209/209] Update Changelog for 14.8.1

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

diff --git a/changelog.txt b/changelog.txt
index 066a25768f2775..3881c16ee56f8d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,21 @@
 == Changelog ==
 
+= 14.8.1 =
+
+## Changelog
+
+### Bug Fixes
+
+- Update the script registration of the react scripts with a cache version to prevent browser cache issues. ([46768](https://github.com/WordPress/gutenberg/pull/46768))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@youknowriad
+
+
 = 14.8.0 =
 
 ## Changelog